Showreel Zoom Scroll
A showreel that starts as a thumbnail floating above the fold and grows into the frame as you scroll. The card tracks the pointer horizontally while it is still small, drifting further the smaller it is, then locks dead center once it reaches full size. Its caption shrinks on a two stage curve so the type lands at reading size exactly when the video does. GSAP ScrollTrigger with Lenis.
npx shadcn@latest add @compronents/showreel-zoom-scrollInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| Prop | Type | Default | Description |
|---|---|---|---|
| videoSrc | string | Blob-hosted loop | Muted, autoplaying, looping video source used for the showreel card. |
| brand / navLinks / heroHeading / heroCopy / scrollLabel / outroCopy | string / string[] | BLANK copy | Navigation and editorial copy around the reel. |
| videoTitle / videoYears | string | Studio Showreel / 2023 - 2024 | The caption pair under the card. |
| embedded | boolean | true | Own the scroll container so it fits a bounded box. Set false to drive it from the window scroll. |
videoSrctextThe looping clip shown in the card.
heroHeading / heroCopy / outroCopytextOversized brand headline and the surrounding copy.
gsaplenis