Signature / Moleculestable

Blur Fade

Scroll-triggered entrance animation with blur, fade, and slide transitions.

@glinui/uiComponent: blur-fade

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add blur-fade

Usage$

Wrap any element in BlurFade. It observes the element's intersection with the viewport and plays a blur + fade + translate entrance animation once it enters. Use delay to stagger multiple items on the same page.

BlurFade is a "use client" component — it runs in the browser only.

Basic$

First item fades in

Second item with delay

Third item with more delay

TSX

1import { BlurFade } from "@glinui/ui"
2
3export function BlurFadeDemo() {
4return (
5  <div className="flex flex-col gap-4 p-8">
6    <BlurFade delay={0}>
7      <div className="rounded-lg border p-4 dark:border-neutral-800">First item fades in</div>
8    </BlurFade>
9    <BlurFade delay={200}>
10      <div className="rounded-lg border p-4 dark:border-neutral-800">Second item with delay</div>
11    </BlurFade>
12    <BlurFade delay={400}>
13      <div className="rounded-lg border p-4 dark:border-neutral-800">Third item with more delay</div>
14    </BlurFade>
15  </div>
16)
17}

Examples$

Custom Blur and Offset$

Heavy blur entrance

blur=20, yOffset=24, duration=700

Staggered card

delay=150

TSX

1import { BlurFade } from "@glinui/ui"
2
3export function BlurFadeCustomDemo() {
4return (
5  <div className="flex flex-col gap-4 p-8">
6    <BlurFade blur={20} yOffset={24} duration={700} delay={0}>
7      <div className="rounded-xl border border-neutral-200 bg-neutral-50 p-6 dark:border-neutral-800 dark:bg-neutral-900">
8        <p className="font-semibold">Heavy blur entrance</p>
9        <p className="text-sm text-neutral-500">blur={20}, yOffset={24}, duration={700}</p>
10      </div>
11    </BlurFade>
12    <BlurFade blur={20} yOffset={24} duration={700} delay={150}>
13      <div className="rounded-xl border border-neutral-200 bg-neutral-50 p-6 dark:border-neutral-800 dark:bg-neutral-900">
14        <p className="font-semibold">Staggered card</p>
15        <p className="text-sm text-neutral-500">delay={150}</p>
16      </div>
17    </BlurFade>
18  </div>
19)
20}

Accessibility$

Content wrapped by BlurFade is fully accessible at all times — only the visual presentation is animated.
The animation is a progressive enhancement: if JavaScript is unavailable or the IntersectionObserver API is not supported, content is shown immediately in its final state.
Focus and keyboard navigation work normally regardless of animation state.

Reduced Motion$

When prefers-reduced-motion: reduce is active, BlurFade skips the animation entirely and renders content immediately in its final visible state. No blur, no translate, no opacity transition is applied.

API Reference$

Prop	Type	Required	Default	Description
`blur`	`number`	No	`8`	Initial blur amount (px)
`delay`	`number`	No	`0`	Delay before transition starts (ms)
`duration`	`number`	No	`500`	Transition duration (ms)
`once`	`boolean`	No	`true`	Only animate once
`threshold`	`number`	No	`0.1`	IntersectionObserver threshold (0-1)
`yOffset`	`number`	No	`12`	Initial Y offset (px)

Source$

TSX

1import { BlurFade } from "@glinui/ui"

packages/ui/src/components/blur-fade.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/blur-fade.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

BlurFadeProps

`BlurFadeProps`

Prop	Type	Required	Default	Description
`blur`	`number`	No	`8`	Initial blur amount (px)
`delay`	`number`	No	`0`	Delay before transition starts (ms)
`duration`	`number`	No	`500`	Transition duration (ms)
`once`	`boolean`	No	`true`	Only animate once
`threshold`	`number`	No	`0.1`	IntersectionObserver threshold (0-1)
`yOffset`	`number`	No	`12`	Initial Y offset (px)