Text Blur RevealWords animate into view one by one with a satisfying blur-to-sharp entrance, auto-replaying in a loop.
Drop any phrase. Works with any text.
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/text-blur-revealFor dark mode, add the dark class to your <html> element:
<html class="dark">This component uses GeistPixelCircle from geist. Install and register it:
npm install geistimport { GeistPixelCircle } from 'geist/font/pixel'
const font = GeistPixelCircle({ variable: '--font-geist-pixel-circle' })
// Add font.variable to your <html> classNameInstall with AI Canvas MCP
With AI Canvas MCP, your AI knows every component we ship. Ask for “a navigation component from AI Canvas” inside Claude Code, Codex, or Cursor and it can suggest you a few options, then install the one you like. Less typing, lower token cost, modern way to build.
Get MCPAbout Text Blur Reveal
Text Blur Reveal animates each word into view with a blur-to-sharp entrance, replaying in a loop so the headline keeps refreshing without ever feeling restless. Motion controls both the blur transition and the per-word stagger, which means the effect remains smooth at any text length. It is the right entrance animation for hero headlines, marketing-site lower thirds, editorial cover pages, and any moment where the words themselves are the subject.


