Shadcn.io is not affiliated with official shadcn/ui
True Focus
Depth-of-field text effect with animated focus bracket highlighting for React applications.
Camera-inspired focus effect where one word at a time comes into sharp focus while others blur. A focus bracket overlay—four corner indicators—animates smoothly to frame the active word. Words cycle automatically or respond to hover in manual mode. The blur creates realistic depth-of-field simulation, making the focused word pop while context fades into the background. Customizable blur intensity, bracket colors with glow effects, and timing controls. Built with Motion for React. Perfect for hero text, feature callouts, or anywhere you need dramatic word-by-word emphasis.
True Focus preview
Installation
Related Components
Blur Text
Text animation from blur to focus
Text Pressure
Variable font weight responding to cursor proximity
Flip Words
3D word flipping with letter reveals
Rotating Text
Smooth vertical text cycling
Text Reveal
Cinematic text reveals with clip-path animations
Highlight Text
Animated marker highlight effect