Hero sections
Hero - Text mask
An oversized headline is a window onto a slowly drifting gradient - the colour shows through the letters.
- background-clip text
- Drifting gradient
- Fill presets
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 oversized headline uses background-clip on the text so the letters act as a window: a drifting gradient is painted behind them and only shows through the letterforms themselves. As the gradient slowly moves, the colour appears to flow inside the type. Several fill presets let you swap the gradient look without rewriting anything.
When to use it
- A hero where the headline itself should be the most striking element on the page
- A brand page that wants colourful, expressive typography over a plain background
- Any section that needs a premium type treatment without an image or video
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 3 options
fillGradient fill - 2-14s
speedSweep duration
Related components
Using this block
Buy it, then copy components/blocks/hero-text-mask/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.