Blur Fade

A component that animates content with blur and fade effects, supporting directional movement and intersection observer triggering.

motion-sv

Beautiful blur and fade animations for your content

Installation

pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/blur-fade.json

Beautiful blur and fade animations for your content

blur="2px"

blur="6px" (default)

blur="12px"

A component for creating blur and fade animations.

Name	Type	Default	Description
`children`	`Snippet`	`-`	`The content to animate`
`class`	`string`	`""`	`Additional CSS classes to apply`
`variant`	`Variants`	`-`	`Custom animation variants`
`duration`	`number`	`0.4`	`Animation duration in seconds`
`delay`	`number`	`0`	`Animation delay in seconds`
`offset`	`number`	`6`	`Movement offset in pixels`
`direction`	`"up" \| "down" \| "left" \| "right"`	`"down"`	`Animation direction`
`inView`	`boolean`	`false`	`Whether to trigger animation on intersection`
`inViewMargin`	`string`	`"-50px"`	`Intersection observer margin`
`blur`	`string`	`"6px"`	`Blur amount`