Scroll Zoom Hero
An immersive hero section where the background image scales up, blurs, and fades as you scroll. Creates a dramatic entry effect.
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.
