Drifting Card Marquee
A pinned section that pans an oversized wordmark sideways while cards drift across it on hand-authored paths. Each card gets its own four point tracks for vertical position and rotation, and its progress is a delayed, doubled slice of the section progress, so the cards start in sequence and each finishes early rather than all sharing one clock. The card is placed by walking those tracks: progress times three picks the segment and the remainder interpolates within it, which is what makes a card arc and tumble instead of travelling in a straight line. GSAP ScrollTrigger and Lenis.
npx shadcn@latest add https://ui.aryank.space/r/drifting-card-marquee.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| cards | DriftingCard[] | 5 BLANK cards | Title, description, and image per drifting card. |
| transforms | [number[], number[]][] | 5 authored routes | Per card, four y-percent stops and four rotation stops. Must have one entry per card. |
| embedded | boolean | true | Own the scroll container. Set false to drive it from the window scroll. |
headingtextThe oversized wordmark that pans.
outroCopytextCopy in the section after the pin.
gsaplenis


