Logo Mask Zoom Scroll
The page is covered by a solid panel with a logo-shaped hole punched through it. That panel starts at 500 times scale, so the hole is far larger than the frame and you only see the photograph behind it. Scroll shrinks the panel on an exponential curve until the hole is exactly logo-sized, at which point the mark reads as drawn on a flat field. The picture counter-zooms while a white sheet fades over it, and the closing headline is filled by a gradient dragged upward through its own background clip.
npx shadcn@latest add https://ui.aryank.space/r/logo-mask-zoom-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 |
|---|---|---|---|
| logoPath | string | A neutral BLANK-safe mark | Single SVG path used as the mask. Its bounding box is measured and fitted automatically, so any path works without manual sizing. |
| backgroundImage / foregroundImage / logoImage | string | Blob-hosted layers | Back plate, cut-out front layer that parallaxes over it, and the small mark shown before the scroll starts. |
| panelColor / revealColor | string | #111117 / #e66461 | Panel fill and the reveal gradient color. |
| embedded | boolean | true | Own the scroll container so it fits a bounded box. Set false to drive it from the window scroll. |
logoPathtextThe SVG path punched through the panel.
panelColor / revealColorcolorPanel fill and the gradient color of the reveal copy.
gsaplenis