Hero sections
Hero - Marquee
Oversized headline words loop in alternating directions behind a still, legible CTA card.
- Dual marquee
- Backdrop motion
- Glass CTA
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
Oversized headline words scroll across the background in two rows that move in opposite directions, creating constant horizontal motion. In front of them a still glass CTA card stays fixed and fully legible, so the moving type acts as energetic decoration without ever getting in the way of the action.
When to use it
- A bold brand or campaign hero that wants kinetic typography as the centerpiece
- A launch page where energy and attitude matter more than restraint
- A hero that needs a strong visual identity while keeping the CTA easy to read
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 8-44s
speedScroll duration
Related components
Using this block
Buy it, then copy components/blocks/hero-marquee/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.