Animations

Blur Fade

new

Fades content in from a blur and a small offset, on mount or on scroll.

Changelog

v3.2

Animated primitives

Beams, patterns and text effects built on the same tokens.

v3.1

Device frames

Safari, iPhone and MacBook frames that hold live UI.

v3.0

A new token sheet

A palette layer and a semantic layer, and nothing else.

Installation

npx shadcn@latest add @blank/blur-fade

Usage

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

{items.map((item, i) => (
  <BlurFade key={item.id} delay={0.1 + i * 0.1}>
    …
  </BlurFade>
))}

The offset is a transform, so nothing around the element moves while it plays. Stagger siblings with delay. Under reduced motion the content is shown at once.

Examples

On scroll

inView waits until the element is scrolled into view, and plays once.

Copy, don't install

Sources land in your repo.

Both themes

Every role has a dark value.

Keyboard first

Built on Radix primitives.

Tokens only

No hex in any component.

Motion

Reduced motion is respected.

MIT

Use it anywhere.

Props

Prop	Type	Default
`delay`	`number`	`0`
`duration`	`number`	`0.4`
`offset`	`number`	`6`
`direction`	`"up" \| "down" \| "left" \| "right"`	`"down"`
`inView`	`boolean`	`false`
`inViewMargin`	`string`	`"-50px"`
`blur`	`string`	`"6px"`