Masked Spotlight Scroll
A pinned sequence where a wall of desaturated stills drifts past, then a shaped mask opens through it. The mask grows from nothing to 450 percent while the photograph behind it counter-scales from 1.5 down to 1, so the image appears to settle as the aperture widens rather than being pushed by it. Once the mask is fully open the closing headline fills in word by word against scroll position.
npx shadcn@latest add https://ui.aryank.space/r/masked-spotlight-scroll.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 / bannerImage / maskImage | string[] / string | Blob-hosted assets | Wall stills, the photograph revealed through the aperture, and the SVG shape used as the mask. |
| introHeading / spotlightHeading / maskHeading / outroHeading | string | BLANK copy | Copy for each phase of the sequence. |
| embedded | boolean | true | Own the scroll container so it fits a bounded box. Set false to drive it from the window scroll. |
imagestextThe nine stills scattered through the drifting wall.
maskHeading / spotlightHeadingtextHeadlines revealed through and after the mask.
gsaplenis