Blur Fade

Installation

terminal

npx shadcn@latest add https://ui.thilina.dev/r/blur-fade.json

Usage

app/page.tsx

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

export default function Page() {
  return (
    <>
      <BlurFade inView direction="up" offset={12}>
        <h2>Section heading</h2>
      </BlurFade>

      <BlurFadeStagger inView stagger={0.08} className="grid gap-4">
        <Card />
        <Card />
        <Card />
      </BlurFadeStagger>
    </>
  );
}

BlurFade wraps a single element; BlurFadeStagger wraps a list and enters its children one after another. Set inView to defer the entrance until the element scrolls into the viewport (it always animates just once).

Props

BlurFade

Prop	Type	Default	Description
`direction`	`"up" \| "down" \| "left" \| "right"`	`"down"`	Where the element travels in from.
`offset`	`number`	`6`	Travel distance in pixels.
`blur`	`string`	`"6px"`	Starting blur radius.
`duration`	`number`	`0.4`	Animation length in seconds.
`delay`	`number`	`0`	Seconds to wait before starting.
`inView`	`boolean`	`false`	Wait for the element to enter the viewport.
`inViewMargin`	`string`	`"-50px"`	Viewport margin for the in-view trigger.
`variant`	`Variants`	-	Custom motion variants; replaces the built-in animation.

BlurFadeStagger

Adds stagger (seconds between children, default 0.1) on top of the same direction, blur, duration, delay, offset, inView, and inViewMargin props.

Accessibility

Under prefers-reduced-motion both components collapse to a zero-duration reveal, so content appears instantly with nothing traveling or blurring, and the DOM stays identical between server and client.