Blur Fade

BlurFade wraps any content and fades it in with a blur + translate effect on mount, or when the element scrolls into view.

ExamplesCodeUsageChangelog

Basic usage

Animates immediately on mount.

This content fades and unblurs on mount.

Tailwind v4

<BlurFade>
  <p>This content fades and unblurs on mount.</p>
</BlurFade>

With delay

First — no delay

Second — 150ms delay

Third — 300ms delay

Tailwind v4

<BlurFade :delay="0">...</BlurFade>
<BlurFade :delay="150">...</BlurFade>
<BlurFade :delay="300">...</BlurFade>

Scroll-triggered (in-view)

Set in-view to defer the animation until the element enters the viewport.

Triggered by IntersectionObserver when visible.

Tailwind v4

<BlurFade :in-view="true">
  <p>Triggered when this scrolls into view.</p>
</BlurFade>

Props

Prop	Type	Default	Description
delay	number	0	Delay before animation starts in ms
duration	number	400	Animation duration in ms
inView	boolean	false	Trigger with IntersectionObserver instead of on mount
blur	string	'6px'	Initial blur amount
yOffset	number	8	Initial Y translation in px

Slots

Slot	Description
default	Content to animate in