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.
npx shadcn@latest add https://ui.aryank.space/r/pinned-shrink-cards.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 |
|---|---|---|---|
| images | string[] | 6 BLANK images | All but the last pin; the final one scrolls over the stack to release it. |
| endScale | number | 0.5 | How far the image shrinks before the next section takes the line. |
| embedded | boolean | true | Own the scroll container. Set false to drive it from the window scroll. |
headingtextHero line that fades out.
endScaletextScale the pinned image shrinks to.
gsap




