Parallax Scrollytelling
Layers move at different speeds to create depth and delight.
Motion with purpose
Parallax guides attention and establishes hierarchy. These floating blobs are GPU-friendly and theme-aware. Switch to dark mode for a cool experience!
See the motion contrast
These cards scroll at the normal speed, while the blobs behind them drift at different speeds, making the parallax effect obvious.
Normal flow
Scrolls until it reaches the sticky header.
Depth cue
Background layers move slower/faster.
Focus
Foreground content stays crisp.
GPU-friendly
Transforms + springs for smoothness.
Accessible
Readable content over motion.
Responsive
Looks great on any device.
Implementation details
We smooth scroll with useSpring, force GPU compositing with transform-gpu, and split blur (wrapper) from blend (child) to avoid flicker.