184 Components
Blur Fade In Text
TextEditorial typographic entrance animation that transitions words or characters from an optical Gaussian blur into razor-sharp focus.
Cinematicblurfadewithkineticspringarrival.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/blur-fade-in-text.json"
Props
TypeScript props supported by <BlurFadeInText />.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Text sentence or headline to animate. |
| delay | number | 0 | Initial delay before sequence begins (seconds). |
| stagger | number | 0.05 | Stagger delay between subsequent tokens (seconds). |
| by | "word" | "character" | "word" | Tokenization mode: word-by-word or character-by-character. |
| blurRadius | number | 10 | Initial blur intensity in pixels. |
| yOffset | number | 12 | Vertical entrance drift distance in pixels. |
Key Features
- Staggered word or character tokenization with customizable delay intervals.
- Hardware-accelerated CSS filter blur-to-sharp interpolation.
- Viewport scroll-triggering with once-only execution threshold.
- Full support for prefers-reduced-motion fallback.
Keyboard & Accessibility
- Retains natural text structure in DOM for screen reader compatibility.
- Bypasses blur filters when reduced motion is preferred.