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.