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 https://ui.aryank.space/r/nested-mask-banner.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 |
|---|---|---|---|
| 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