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.
Enjoying Uilora? Unlock the full library.
56+ premium components, unlimited CLI, unlimited MCP, v0 + Claude prompts — one payment, forever.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.