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 https://ui.aryank.space/r/aperture-zoom-hero.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 |
|---|---|---|---|
| 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