PRO

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.

Component

Title

Tagline

Year

Tag

Your next section goes here

Install
npx shadcn@latest add https://ui.aryank.space/r/cycle-scrub-showcase.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
projectsCycleScrubProject[]5 BLANK projectsTitle, tagline, year, tag, link, and image. The cycle count is the array length, so adding a project lengthens the pin automatically.
embeddedbooleantrueOwn the scroll container. Set false to drive it from the window scroll.
Customize
linkLabeltext

Label on the project link.

outroCopytext

Copy in the section after the pin.

Dependencies
gsaplenis