Blur Reveal Text
A heading that comes into focus word by word, or letter by letter, as it scrolls into view: each piece fades in from a soft blur and settles into place.
Features
- •Word or letter reveal — Split by word for headlines, or by letter for short, punchy titles. Letters stay grouped so lines never break mid-word.
- •Plays on scroll — Starts when the text scrolls into view, once or every time, with a configurable visibility threshold.
- •Accessible — Screen readers hear the full sentence, not separate pieces, and reduced motion swaps the blur for a simple fade.
- •Tiny and dependency-light — One small file on top of framer-motion, styled inline so it drops into any project, including Framer.
Props API Reference
15 configurable props| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Design that reveals itself" | The text to reveal. |
| as | "h1" | "h2" | "h3" | "p" | "span" | "h2" | HTML element to render. |
| splitBy | "word" | "letter" | "word" | Reveal word by word or letter by letter. |
| stagger | number | 0.08 | Seconds between each word or letter. |
| duration | number | 0.6 | Seconds each piece takes to come into focus. |
| delay | number | 0 | Seconds to wait before the first piece starts. |
| blur | number | 12 | Starting blur in px. |
| yOffset | number | 12 | Starting vertical offset in px. |
| color | string | inherit | Text color. |
| fontSize | number | string | inherit | Font size (number = px). |
| fontWeight | number | inherit | Font weight. |
| once | boolean | true | Play only the first time it scrolls into view. |
| amount | number | 0.4 | How much of the text must be visible to start, from 0 to 1. |
| className | string | undefined | Classes for the root element. |
| style | CSSProperties | undefined | Inline styles for the root element. |