Blur Text for React

Blur Text brings a line in word by word: each word fades in from a soft blur and a small drop, one after the other, so the sentence reads itself onto the page. It plays once, when the text scrolls into view.

Use it for a hero headline or a section title that should land with a little ceremony. For words that appear without the blur, as if spoken, use Splitting Text; to type a line out, Typing Text. The motion is a CSS keyframe animation the install adds to your stylesheet, delayed for each word by its place in the line, with no animation library. With reduced motion the text is simply there.

Installation

Usage

import { BlurText } from "@/components/ui/blur-text";

<h1>
  <BlurText text="Components that make every launch feel effortless." />
</h1>

Demos

Characters

by="characters" animates each character instead of each word, with a shorter stagger by default (40 ms rather than 150 ms), for a short word or a title that should shimmer into place. Words still wrap whole: a line never breaks in the middle of one.

Direction

direction is where each word comes in from: top, the default, drops it in from just above; bottom raises it from just below.

Timing

duration is how long one word takes to come into focus, 700 ms by default, and stagger the time between one word and the next. A short duration and stagger suit a small label; a long one, a hero line read slowly.

Accessibility

Screen readers read the whole line once, as plain text: the animated words are hidden from them, and a visually hidden copy carries the sentence. Words wrap whole, and the line keeps its direction on a right-to-left page. With reduced motion every word is in place from the start.

FAQ

API Reference