← All components
Typography / effect
Blur Text
Words or letters resolve into focus with a gentle stagger.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- The included Demo.tsx and shared/demo.css recreate the complete preview. Import the main component to compose your own design.
- No continuous work while idle, offscreen, or paused. Reduced motion renders a settled view.
React 19CSS
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | | Text |
delay | number milliseconds | 200 | Stagger delay |
animateBy | words|letters | words | Split by |
direction | top|bottom | top | From |
stepDuration | number seconds | 0.35 | Step duration |
onAnimationComplete | ()=>void | undefined | Called once after the complete reveal settles. |
paused | boolean | false | Suspend motion without adding paused wall time to the animation. |
replayToken | number | 0 | Change this value to restart the animation. |
className | string | | Additional classes for the outer element. |