Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
import { ScrollPinSlider } from "@/registry/tween/scroll-pin-slider"
export function ScrollPinSliderDemo() {
return <ScrollPinSlider />
}
import { ScrollPinSlider } from "@/components/ui/scroll-pin-slider"<ScrollPinSlider
slides={[
{ title: "Built for the long scroll…", image: "/one.jpg" },
{ title: "Every frame holds its place…", image: "/two.jpg" },
// ...
]}
/>The section pins to the viewport and converts vertical scroll into slide
progression, advancing one slide at a time as you scroll. Titles and images
cross-fade between steps so each slide reads as a distinct beat rather than a
continuous track. Optional intro and outro headings frame the slider
above and below the pinned region, and pinDistanceFactor scales how much
scroll distance the sequence consumes. Pass your own slides array with
{ title, image } entries to drive the content.
| Prop | Type | Default | Description |
|---|---|---|---|
slides | ScrollPinSlide[] | 7 defaults | Each entry is { title, image, alt? }. |
intro | ReactNode | Default copy | Heading shown above the slider section. |
outro | ReactNode | Default copy | Heading shown below the slider section. |
pinDistanceFactor | number | 1 | Multiplier on sliderHeight * slides.length for the pin distance. |
scroller | HTMLElement | string | null | — | Optional ScrollTrigger scroller; defaults to the ambient preview scroller. |
className | string | — | Extra classes on the outer container. |