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.
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.
Blur Text preview
Installation
Related 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