Text Blur Reveal
Words animate into view one by one with a satisfying blur-to-sharp entrance, auto-replaying in a loop.
TypographyFramer Motion
Craftinterfacesthatfeellikemagic.
Drop any phrase. Works with any text.
Add to your project
One command adds this component to your project.
1
Run the following command:
npx shadcn@latest add "https://aicanvas.me/r/text-blur-reveal.json"2
For dark mode, add the dark class to your <html> element:
<html class="dark">3
This component uses GeistPixelCircle from geist. Install and register it:
npm install geistlayout.tsx
import { GeistPixelCircle } from 'geist/font/pixel'
const font = GeistPixelCircle({ variable: '--font-geist-pixel-circle' })
// Add font.variable to your <html> className