Cycle Scrub Showcase
A pinned section where scroll progress is multiplied by the project count, so the integer part of that number picks the project and the fraction drives everything inside it. The current frame scales from 1.25 down to 1 across its own cycle, and crossing an integer boundary fires a discrete swap: the outgoing frame shrinks away going forward, or re-clips downward and blows out its contrast going back, so reversing is not the forward transition played backwards. Metadata types itself in one character every thirty milliseconds, half a second after the swap, and a thin bar refills once per project. GSAP ScrollTrigger and Lenis.
npx shadcn@latest add https://ui.aryank.space/r/cycle-scrub-showcase.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 |
|---|---|---|---|
| projects | CycleScrubProject[] | 5 BLANK projects | Title, tagline, year, tag, link, and image. The cycle count is the array length, so adding a project lengthens the pin automatically. |
| embedded | boolean | true | Own the scroll container. Set false to drive it from the window scroll. |
linkLabeltextLabel on the project link.
outroCopytextCopy in the section after the pin.
gsaplenis



