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 @compronents/logo-mask-zoom-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 |
|---|---|---|---|
| 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