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 one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.
About 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.
Built with
Frequently asked questions
- Is Text Blur Reveal free to use?
- Yes. Text Blur Reveal is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
- How do I install Text Blur Reveal?
- One command: npx shadcn@latest add https://aicanvas.me/r/text-blur-reveal.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Text Blur Reveal for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
- What is Text Blur Reveal built with?
- Text Blur Reveal is built with React and TypeScript, using Motion and Tailwind CSS.
- Where would I use Text Blur Reveal?
- Common uses include Hero section, Editorial, and Marketing site. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Text Blur Reveal with AI?
- Yes. Text Blur Reveal ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas