Blur Fade

New

Fades, unblurs, and lifts content into place as it enters the viewport.

motion@soultel/use-reduced-motion-safe

Blur, fade, rise.

Each line waits its turn.

Installation

$ pnpm dlx shadcn@latest add @soultel/blur-fade

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/blur-fade.json works too.

Manual installation

1. Install the dependencies.
terminal1 lines
```
npm install motion
```
2. Copy the source from the Code tab into components/blur-fade.tsx.

Usage

example.tsx10 lines

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

export function Example() {
  return (
    <>
      <BlurFade><h2>Title</h2></BlurFade>
      <BlurFade delay={0.1}><p>Body copy</p></BlurFade>
    </>
  )
}

Props

Prop	Type	Default	Description
delay	number	0	Delay in seconds. Stagger siblings with it.
offset	number	12	Upward travel in px.
blur	number	8	Starting blur in px.
immediate	boolean	false	Animate on mount instead of on view.