Scroll Zoom
A hero image that starts framed and small, then zooms to fill the entire viewport as you scroll — cinematic reveal in pure CSS and scroll.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| accentColor | string | "#f97316" | Accent color for the eyebrow label and bottom divider line |
| image | string | "unsplash URL" | Full-bleed hero image URL — shown at 55% scale initially, expands to fill the viewport |
| headline | string | "Every pixel, intentional." | Headline text that overlays the image and fades as the zoom progresses |
When to Use
Perfect for brand hero sections, film or photography portfolios, and any product intro that deserves a cinematic entrance. The zoom makes the first scroll feel like a theatre curtain rising.
Best Practices
Use a single high-resolution landscape image. Keep the headline short (4–6 words) — it fades by 35% scroll progress, so brevity reads better. Pair with a dark-tinted image for text legibility.
Why This Component Matters
Apple, Arc, and Linear all use scroll-driven zoom for hero reveals — it's the highest-impact single motion you can add to a landing page. Most devs reach for fade-ins; zoom communicates ambition.
FAQ
QHow does the zoom work?
The image container is scaled from 0.55 to 1.0 via `useTransform(scrollYProgress, [0, 0.7], [0.55, 1])`. The outer sticky div clips it.
QCan I adjust the zoom start/end size?
Change the output range of the `scale` transform. 0.4→1 is very dramatic, 0.7→1 is subtle.
QWhat appears after the zoom completes?
A small Uilora byline fades in at the bottom after 70% scroll progress, marking the reveal complete.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.