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 @compronents/cycle-scrub-showcaseInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
| 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



