Nested Mask Banner
A banner that opens like a telescope. Seven copies of the same photograph are stacked, each masked by the same shape and each starting at a smaller scale than the one above, so the frame reads as concentric rings rather than a single picture. Scroll grows the container from nothing while every ring closes on full size at a different rate, so the rings collapse into one image at the end. Two words slide apart as it opens.
npx shadcn@latest add @compronents/nested-mask-bannerInstalls 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 |
|---|---|---|---|
| bannerImage / maskImage | string | Blob-hosted assets | The photograph repeated per ring, and the shape masking each one. |
| maskLayers | number | 6 | Number of masked rings above the base image. Each starts 0.2 smaller than the last. |
| heroHeading / bannerHeading / introWords / outroHeading | string / [string, string] | BLANK copy | Copy around and inside the banner. |
| embedded | boolean | true | Own the scroll container so it fits a bounded box. Set false to drive it from the window scroll. |
bannerHeading / introWordstextThe masked headline and the two parting words.
maskLayerstextHow many nested rings the telescope has.
gsaplenis