Scroll Zoom Hero

Introduction

The Scroll Zoom Hero example shows how to create a cinematic hero section where a background image scales up, blurs, and fades out as you scroll. This creates an immersive entry effect commonly seen in modern web design.

This tutorial uses three Motion APIs: useScroll for tracking scroll position within a specific range, useTransform for converting scroll progress into multiple animation values, and the style prop for applying those animated values to elements.

Get started

Let's start with the basic HTML structure and styles. We'll create a hero section with a background image and text content, followed by a content section to enable scrolling.

"use client"

import { motion } from "motion/react"
import { useRef } from "react"

export default function ScrollZoomHero() {
    const containerRef = useRef(null)

    return (
        <div id="example">
            <section ref={containerRef} className="hero-section">
                <div className="hero-sticky">
                    <div className="hero-background">
                        <img
                            src="your-image.jpg"
                            alt="Hero image"
                        />
                    </div>

                    <div className="hero-content">
                        <h1 className="impact">YOUR TITLE</h1>
                    </div>
                </div>
            </section>

            <section className="content-section">
                <p className="big">Your content here</p>
            </section>

            <StyleSheet />
        </div>
    )
}

function StyleSheet() {
    return (
        <style>
            /** Copy styles from example source code */
        </style>
    )
}

The key structural element here is containerRef, which we'll use to track scroll progress. The hero section is set to 200vh height, giving us plenty of scroll distance to work with. Inside that, .hero-sticky uses position: sticky to keep the hero in view while we scroll through it.