Hero sections
Hero - Split scroll
Two-column hero where the visual panel parallax-shifts against the copy as you scroll.
- Scroll parallax
- useScroll
- Split layout
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
The hero is a two-column layout with copy on one side and a visual panel on the other. A scroll hook reads how far the section has moved through the viewport and shifts the visual panel at a different rate than the text, so the two columns slide against each other as the visitor scrolls and create a layered parallax depth.
When to use it
- A hero that pairs a product screenshot or image with supporting copy
- A homepage that wants the first scroll to feel dynamic rather than static
- A page where you want to show a visual asset prominently next to the value proposition
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 0-200px
depthParallax depth
Related components
Using this block
Buy it, then copy components/blocks/hero-split-scroll/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.