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 @compronents/masked-spotlight-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 |
|---|---|---|---|
| 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