Blur Fade
Fades and un-blurs text or components on scroll.
Preview
Interactive Preview
Welcome to the future.
Seamlessly animate elements as they enter the viewport
Installation
Usage
tsx
import { BlurFade } from "@/components/ui/blur-fade"
export default function Demo() {
return (
<BlurFade delay={0.25} inView>
<h2 className="text-3xl font-bold tracking-tighter">
Hello World
</h2>
</BlurFade>
)
}Props
| Prop | Type | Default |
|---|---|---|
| delay | number | 0 |
| duration | number | 0.5 |
| inView | boolean | false |
| blur | string | 8px |