Uilora Kinetic Slider
Horizontal kinetic slider with GSAP lerp, scale perspective, and rotated sidebar typography.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [] | Array of image URLs for the slider |
| brandName | string | Uilora | Brand name shown in the top-left logo |
| sidebarTitle | string | neuro\nholograph | Rotated sidebar title text (supports newlines) |
| ease | number | 0.075 | Lerp ease factor controlling scroll smoothness |
When to Use
Ideal for creative portfolios, photography showcases, and editorial sites that want a premium horizontal scrolling experience. Use this React component when you need a high-inertia kinetic slider with perspective-based scale distortion.
Best Practices
Keep the `ease` value between 0.05 and 0.15 for a natural momentum feel. Use high-resolution landscape images for best scale effect results. Ensure GSAP is installed as a dependency.
Why This Component Matters
Kinetic scroll with lerp interpolation is a hallmark of award-winning creative agency sites. This component gives you production-level inertia and perspective distortion without a heavy library footprint.
FAQ
QDoes it require ScrollTrigger?
No — the kinetic effect is driven by a custom wheel + requestAnimationFrame loop using GSAP's `set` for transform updates.
QCan I adjust the slide size?
Yes, modify the card width/height classes inside the component to fit your layout needs.
QIs it mobile-friendly?
The wheel handler targets desktop scroll; for touch support, you can extend it with pointer event listeners.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.