Blur Fade
Reveal content with a short blur and fade transition.
Preview
Import
import { BlurFade } from "@sigil-ui/components";Usage
<BlurFade>
<p className="text-lg font-medium">Blur fade animation</p>
</BlurFade>Props
| Prop | Type | Default | Description |
|---|---|---|---|
blur | number | 10 | Initial blur radius in pixels. |
yOffset | number | 16 | Vertical offset in pixels. |
delay | number | 0 | Delay before animation in ms. |
trigger | "scroll" | "mount" | — | — |
viewOptions | UseInViewOptions | — | — |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-duration-slow | Duration slow |
--s-ease-out | Ease out |