Hero sections
Hero - Aurora
Centered hero over a slow-drifting multi-color gradient. Palette, tempo, and blur are all live-tunable props.
- Animated gradient
- Staggered entrance
- Reduced-motion fallback
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 copy sits over a multi-colour gradient that drifts continuously on a slow loop, while the headline, subcopy, and buttons enter one after another with a small staggered delay so the section assembles itself on load. Palette, tempo, and blur are live-tunable props, and a reduced-motion fallback swaps the drift for a still gradient when the visitor prefers less animation.
When to use it
- The hero of a launch or waitlist page where the headline needs to feel premium
- A SaaS homepage that wants an inviting, colourful first impression
- Any above-the-fold section where a staggered entrance should guide the eye downward
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 4 options
palettePalette - 6-40s
speedLoop duration - 0-80px
blurBlur
Related components
Using this block
Buy it, then copy components/blocks/hero-aurora/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.