True Focus

True Focus preview

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.

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 true-focus text effect into my project

Related Components

FAQ