Blur Fade
A blur + fade entrance animation.
npx arupui add blur-fade
Preview
This content fades in with blur
Usage
blur-fade.tsx
import { BlurFade } from "@/components/blocks/blur-fade"
<BlurFade delay={0.2}>
<h1>Content</h1>
</BlurFade>Props
| Prop | Type | Default |
|---|---|---|
delay | number | 0 |
duration | number | 0.4 |
yOffset | number | 6 |
blur | string | 6px |
delayType:
numberDefault: 0durationType:
numberDefault: 0.4yOffsetType:
numberDefault: 6blurType:
stringDefault: 6px