Blur Fade

The workhorse entrance — blur, fade and drift into view.

1.0 KB gzipped
Deps: motion/react
Reduced-motion safe
Base UI & Radix compatible

0s

0.15s

0.3s

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/blur-fade.json

Adds components/velora/blur-fade.tsx, installs motion.

Props

Prop	Type	Default
`children*`	`React.ReactNode`	`—`
`className`	`string`	`—`
`delay` Seconds before the animation starts	`number`	`0`
`duration`	`number`	`0.5`
`direction` Direction the element enters from	`"up" \| "down" \| "left" \| "right" \| "none"`	`"up"`
`offset` Distance travelled in px	`number`	`16`
`once` Animate only the first time it enters the viewport	`boolean`	`true`
`inView` Start animating immediately instead of waiting to scroll into view	`boolean`	`—`

Accessibility

Reduced motion: Content still starts hidden and appears instantly, with no blur or slide, once it scrolls 10% into view.
Keyboard: Decorative — nothing to operate.
Screen readers: Children stay in the DOM before they are revealed, so they are always read.