Shadcn.io is not affiliated with official shadcn/ui
Blur Text
Text animation from blur to focus with intersection observer for React scroll-triggered text reveals.
Blur Text preview
Most text animations are abrupt and mechanical—instant visibility changes that don't feel natural or engaging. This component creates smooth blur-to-focus transitions that animate text elements progressively, using CSS filter blur and intersection observer to trigger animations when content enters the viewport. Built with Motion for React applications, supporting word-by-word and letter-by-letter animation modes with customizable blur transitions and directional movement.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the blur-text text effect into my projectRelated Components
Text Generate Effect
Progressive character generation with realistic typing timing
Text Reveal
Cinematic text reveals with clip-path and mask animations
Fuzzy Text
Soft blur transitions with particle-like text effects
True Focus
Depth-of-field text effects with realistic focus blur
Splitting Text
Character, word, or line splitting with perfect timing
Glitch Text
Digital glitch effects with RGB channel separation
FAQ
Was this page helpful?
Sign in to leave feedback.