Animated Heading React component
A heading whose words arrive one after another, rising from a mask, sharpening from a blur or sliding in, as it scrolls into view or on hover.
About the Animated Heading component
Animated Heading brings a headline in one word at a time, so it feels written rather than switched on. Words can rise from behind a mask, sharpen out of a blur or slide into place.
It plays once when it scrolls into view, or every time the pointer enters. It takes its colour and font from your page, and screen readers get the full sentence.
When to use it
Use it for section headings and hero titles, where the words themselves are the moment.
Keep it to one or two headings a page, since too many entrances start to feel slow.
Installation
Add the Animated Heading component to your project with the shadcn CLI. It lands in components/animated-heading.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/animated-headingProps
<AnimatedHeading /> accepts 6 props, all optional.
| Prop | Type | Default |
|---|---|---|
| text | string | "Every word arrives on its own" |
| as Heading level. | "h1" | "h2" | "h3" | "h4" | "p" | "h2" |
| effect How each word arrives. | "rise" | "blur" | "slide" | "rise" |
| stagger Milliseconds between one word and the next. | number | 70 |
| duration Milliseconds each word takes. | number | 800 |
| trigger Play once when it scrolls into view, or again each time the pointer enters. | "view" | "hover" | "view" |
- textstringDefault: "Every word arrives on its own"
- as
Heading level.
"h1" | "h2" | "h3" | "h4" | "p"Default: "h2" - effect
How each word arrives.
"rise" | "blur" | "slide"Default: "rise" - stagger
Milliseconds between one word and the next.
numberDefault: 70 - duration
Milliseconds each word takes.
numberDefault: 800 - trigger
Play once when it scrolls into view, or again each time the pointer enters.
"view" | "hover"Default: "view"
Animated Heading FAQ
- How do I style it?
- Pass className or style as usual. Size, weight and colour are all yours, and the heading inherits the rest from the page.
- Can I change the heading level?
- Yes, with as. It accepts h1 to h4 and p.
- Does it replay?
- It plays once by default. Set trigger to hover to replay it each time the pointer enters.
- What about reduced motion?
- The words appear at once, in place.
