Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
exponential-strip-slider-demo
Slow Vessels
import { ExponentialStripSlider } from "@/registry/tween/exponential-strip-slider"
export function ExponentialStripSliderDemo() {
return <ExponentialStripSlider />
}
Installation
Usage
import { ExponentialStripSlider } from "@/components/ui/exponential-strip-slider"<ExponentialStripSlider
title="Slow Vessels"
images={[
"https://images.unsplash.com/photo-1638303322325-ff70d6224a22?q=80&w=1200&h=1500&fit=crop&crop=center&auto=format",
"https://images.unsplash.com/photo-1605117012605-b68dedd4accc?q=80&w=1200&h=1500&fit=crop&crop=center&auto=format",
"https://images.unsplash.com/photo-1666445844615-0a3930270f13?q=80&w=1200&h=1500&fit=crop&crop=center&auto=format",
]}
/>How it works
- Slide edges follow a geometric series: the left edge of slide
nsits atwidth * minSize * (e^(growth * n) - 1) / (e^growth - 1), so each slide ise^growthtimes wider than the one before. - Every slide keeps the same
aspect, so heights grow with widths and all slides sit on the bottom edge. - Just enough slides to cover the container are recycled. When one slides off an edge, it jumps a full cycle and picks the next image, so the strip never ends.
- Wheel, drag and touch input (on the component only) move a target scroll; a
requestAnimationFrameloop lerps toward it. - With
prefers-reduced-motion: reduce, the strip renders at rest.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
images | string[] | 10 defaults | Image URLs cycled through the strip. |
title | ReactNode | "Slow Vessels" | Heading in the top-left corner. |
lerp | number | 0.075 | Lerp factor toward the scroll target. |
scrollSpeed | number | 3.5 | Input speed multiplier. |
minSize | number | 0.1 | Smallest slide width as a fraction of the width. |
growth | number | 0.25 | Exponential growth per slide step. |
aspect | number | 0.8 | Slide width / height ratio. |
baseline | number | 0 | Lift off the bottom edge as a fraction of height. |
background | string | "#ece7df" | Section background color. |
className | string | — | Extra classes on the outer section. |