Docs
Stagger Blur Effect
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.
I <3 Vercel
Installation
Usage
import { StaggerBlurEffect } from "@/components/ui/stagger-blur-effect";<StaggerBlurEffect>Lorem ipsum dolor sit amet</StaggerBlurEffect>Props
StaggerBlurEffect props.
| Prop | Type | Description | Default |
|---|---|---|---|
| className | string | Additional CSS classes for custom styling | - |
| children | ReactNode | Text content to animate | - |
| duration | number | Duration of the animation in seconds | 0.3 |
| staggerDelay | number | Delay between each letter animation in seconds | 0.05 |
| height | number | Height of the text container in pixels | 56 |