PRO

Pinned Shrink Cards

Full-bleed sections that pin at the top and shrink their image to half size as the next one arrives. Each section's scale range ends at a point computed from the distance to the section below it rather than at a fixed scroll length, so uneven section heights still hand over cleanly. Pin spacing is off, so the pins share the same stretch of document and the cards overlap instead of queueing. The hero heading fades on its own trigger across four viewports, independent of the stack. GSAP ScrollTrigger.

Component

Sculpted Zen Playground

Install
npx shadcn@latest add https://ui.aryank.space/r/pinned-shrink-cards.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
imagesstring[]6 BLANK imagesAll but the last pin; the final one scrolls over the stack to release it.
endScalenumber0.5How far the image shrinks before the next section takes the line.
embeddedbooleantrueOwn the scroll container. Set false to drive it from the window scroll.
Customize
headingtext

Hero line that fades out.

endScaletext

Scale the pinned image shrinks to.

Dependencies
gsap