Blur Fade - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/blur-fade

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { BlurFade } from "@/components/ui/blur-fade"

<BlurFade delay={0.2} inView>
  <p>This content fades in with a blur effect.</p>
</BlurFade>

API Reference

Prop	Type	Default	Description
`duration`	`number`	`0.4`	Animation duration in seconds.
`delay`	`number`	`0`	Delay before animation starts.
`offset`	`number`	`6`	Pixel offset for the slide.
`direction`	`"up" \| "down" \| "left" \| "right"`	`"down"`	Slide direction.
`inView`	`boolean`	`false`	Trigger when scrolled into view.
`inViewMargin`	`string`	`"-50px"`	Margin for in-view detection.
`blur`	`string`	`"6px"`	Blur amount during animation.

Blur Fade In

Content fades in with a blur effect