Stagger Blur Effect

Inspired by Vercel's homepage, this text component creates a 3D rotation effect with blur on hover, revealing text with a staggered animation.

Library

Badtz UI

Framework

React

Type

ui

License

MIT

Dependencies

clsx, motion, tailwind-merge

Install

npx shadcn@latest add https://badtz-ui.com/r/stagger-blur-effect.json

Files

• registry/new-york-v4/ui/stagger-blur-effect.tsx
• lib/utils.ts

Source

https://github.com/badtzx0/badtz-ui

Categories

• Animated Text Components
• React Animated Text Components
• Tailwind CSS Animated Text Components
• Text Components
• React Text Components
• Tailwind CSS Text Components
• Animated Text Components

More from Badtz UI

• Blur Reveal
• Fade Up Word
• 3D Wrapper
• Animated Card 1
• Animated Card 2
• Animated Card 3
• Animated Keyboard
• Animated List
• Border Beam
• Button
• Cloud Orbit
• Confetti Button