Glin UI
Signature / Molecule

Blur Fade

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

Edit on GitHub

Everything a product team needs

Instant theming

Swap tokens at runtime with no rebuild.

Accessible by default

Focus, contrast and motion preferences are handled.

Copy what you need

Install one component, not a framework.

Installation$

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

Prefer the package?

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.

Examples$

Custom Blur and Offset$

Heavy blur entrance

blur=20, yOffset=24, duration=700

Staggered card

delay=150

import { BlurFade } from "@glinui/ui"



export function BlurFadeCustomDemo() {
return (
  <div className="flex flex-col gap-4 p-8">
    <BlurFade blur={20} yOffset={24} duration={700} delay={0}>
      <div className="rounded-xl border border-[var(--color-border)] bg-[var(--surface-2)] p-6">
        <p className="font-semibold">Heavy blur entrance</p>
        <p className="text-sm text-neutral-500">blur={20}, yOffset={24}, duration={700}</p>
      </div>
    </BlurFade>
    <BlurFade blur={20} yOffset={24} duration={700} delay={150}>
      <div className="rounded-xl border border-[var(--color-border)] bg-[var(--surface-2)] p-6">
        <p className="font-semibold">Staggered card</p>
        <p className="text-sm text-neutral-500">delay={150}</p>
      </div>
    </BlurFade>
  </div>
)
}

Engines$

Blur Fade drives its main animation through the pluggable motion engine. Pass engine="css" | "motion" | "gsap", wrap a subtree in MotionEngineProvider, or set data-glin-engine on <html>. The css engine is built in and dependency free; motion and gsap are opt-in through @glinui/motion/register/*. Motion level none renders the final state and subtle is opacity only.

Engine comparison$

CSS

Fades in from a blur

Motion

Fades in from a blur

GSAP

Fades in from a blur
// Same component, three engines. motion and gsap are opt-in:
// import "@glinui/motion/register/motion"
// import "@glinui/motion/register/gsap"
<BlurFade engine="css">
  <Card className="p-3">Fades in from a blur</Card>
</BlurFade>



<BlurFade engine="motion">
  <Card className="p-3">Fades in from a blur</Card>
</BlurFade>



<BlurFade engine="gsap">
  <Card className="p-3">Fades in from a blur</Card>
</BlurFade>

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$

PropTypeRequiredDefaultDescription
blurnumberNo8Initial blur amount (px)
delaynumberNo0Delay before transition starts (ms)
durationnumberNo500Transition duration (ms)
engineEngineNameNo-Engine override: `css` (default), `motion`, `gsap` or a registered custom engine.
motionMotionLevelNo-Motion override. `none` renders the static final state, `subtle` is opacity only.
oncebooleanNotrueOnly animate once
thresholdnumberNo0.1IntersectionObserver threshold (0-1)
yOffsetnumberNo12Initial Y offset (px)

Source$

import { 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-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

BlurFadeProps

BlurFadeProps

PropTypeRequiredDefaultDescription
blurnumberNo8Initial blur amount (px)
delaynumberNo0Delay before transition starts (ms)
durationnumberNo500Transition duration (ms)
engineEngineNameNo-Engine override: `css` (default), `motion`, `gsap` or a registered custom engine.
motionMotionLevelNo-Motion override. `none` renders the static final state, `subtle` is opacity only.
oncebooleanNotrueOnly animate once
thresholdnumberNo0.1IntersectionObserver threshold (0-1)
yOffsetnumberNo12Initial Y offset (px)