Aperture Zoom Hero
A pinned hero that pushes a window frame toward the camera on scroll: the frame and header scale up and translate in Z while a tall sky image pans behind them, then a closing headline rises into place as the zoom settles.
What unfolds here is not a scene, but a duration. A sustained moment where scale dissolves, edges soften, and perception lingers longer than expected. The frame holds steady while the world behind it shifts.
An aperture into stillness
A constructed moment, suspended between form and vastness. Light, surface, and scale are carefully arranged to suggest movement without urgency, presence without intrusion.
Observation Mode
Where distance becomes a presence
End of view.
npx shadcn@latest add @compronents/aperture-zoom-heroInstalls 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 |
|---|---|---|---|
| skyImage | string | BLANK-hosted JPG | Tall backdrop that pans as the frame zooms. |
| windowImage | string | BLANK-hosted PNG | Window frame overlay that scales toward the camera. |
| embedded | boolean | true | Own the scroll container; set false to ride the window scroll. |
skyImage / windowImageasset-urlThe panning backdrop and the zooming frame overlay.
leftHeading / rightHeading / copyTexttextareaThe layered hero copy.
gsaplenis