Fade

One prop-driven fade — opacity plus an optional subtle drift (direction) and blur focus-in (blur), on inView or mount. Covers above-the-fold fades and scroll reveals alike.

direction="up" (default)

Fades in with a subtle rise.

direction="none"

Pure opacity — no drift.

blur direction="none"

Blur → sharp — no drift.

blur direction="up"

Blur + rise, together.

Installation

One command drops the source into your repo — editable, with the provider and motion pulled in automatically.

npx shadcn add https://motion.asmitsah.dev/r/fade.json

PrerequisiteInstall the provider base first

This component imports from @/lib/motion and needs <MotionProvider> mounted in your root layout — install the base once, before copying this component.

npx shadcn add https://motion.asmitsah.dev/r/provider.json

Step 1Install the runtime dependency

npm install motion

Step 2Copy the source into components/motion/fade.tsx

components/motion/fade.tsx

"use client";

import type { TargetAndTransition, Variants } from "motion/react";
import { useReducedMotion } from "motion/react";
import * as m from "motion/react-m";
import type { CSSProperties, ReactNode } from "react";
import {
  type FadeDirection,
  fadeVariants,
  feel,
  revealTransition,
  viewportOnce,
} from "@/lib/motion";

type FadeProps = {
  children: ReactNode;
  className?: string;
  style?: CSSProperties;
  delay?: number;
  /** Subtle FIXED drift as it fades — default "up". "none" = pure opacity. Tunable travel is Slide's job. */
  direction?: FadeDirection;
  /** Layer a blur → sharp focus-in on top. `true` uses feel.fadeBlur (~8px); a number sets custom px. */
  blur?: boolean | number;
  /** Animate the first time it's in view (once) or immediately on mount. */
  trigger?: "inView" | "mount";
};

/**
 * The one prop-driven fade — absorbs the old FadeIn / Reveal / BlurToFocus / BlurFadeRise.
 * A refined opacity fade plus an optional subtle directional drift and an optional blur settle.
 * Transforms are stripped for free by the provider's `reducedMotion="user"`, but `filter` blur
 * is NOT — so on reduced motion we drop both blur AND drift and keep a plain opacity fade.
 */
export function Fade({
  children,
  className,
  style,
  delay = 0,
  direction = "up",
  blur = false,
  trigger = "inView",
}: FadeProps) {
  const reduceMotion = useReducedMotion();
  const blurPx = blur === true ? feel.fadeBlur : blur === false ? 0 : blur;

  // Reduced motion → a plain opacity fade, no drift, no filter. Otherwise the full recipe.
  const base: Variants = reduceMotion
    ? { initial: { opacity: 0 }, animate: { opacity: 1 } }
    : fadeVariants(direction, blurPx);

  // fadeVariants bakes no transition, so fold `delay` into `animate` here — a variant's own
  // transition overrides the component-level `transition` prop (the L004 idiom, as SlideIn does).
  const variants: Variants = {
    ...base,
    animate: {
      ...(base.animate as TargetAndTransition),
      transition: { ...revealTransition, delay },
    },
  };

  const play =
    trigger === "mount"
      ? ({ animate: "animate" } as const)
      : ({ whileInView: "animate", viewport: viewportOnce } as const);

  return (
    <m.div className={className} style={style} variants={variants} initial="initial" {...play}>
      {children}
    </m.div>
  );
}

Usage

Basic

Wrap anything — it fades in with a subtle upward drift. Already-in-view elements animate immediately, so this covers both above-the-fold and on-scroll.

import { Fade } from "@/components/motion/fade";

<Fade className="grid gap-4">
  <h1>Fades in with a subtle rise.</h1>
</Fade>

Scroll reveal

The default trigger is inView (once) — so a Fade below the fold rises in the first time it scrolls into view. This is the migration path off the old Reveal.

<Fade direction="up" trigger="inView">
  <section>Rises into view, once.</section>
</Fade>

Pure opacity

direction="none" drops the drift for a straight opacity fade — the old FadeIn.

<Fade direction="none">
  <h1>Pure opacity, no rise.</h1>
</Fade>

Blur focus-in

blur layers a blur → sharp settle on top of the fade (GPU-costly `filter` — opt-in). Since direction defaults to "up", a bare `<Fade blur>` also rises — use direction="none" for a pure focus-in with no movement.

<Fade blur direction="none">
  <img src="/hero.jpg" alt="Product hero" />
</Fade>

<Fade blur direction="up">
  <h2>Blur + rise, together.</h2>
</Fade>

On mount + delay

trigger="mount" plays immediately regardless of viewport; delay offsets a sibling to sequence a hero without a full Stagger.

<Fade trigger="mount">
  <h1>Leads</h1>
</Fade>
<Fade trigger="mount" delay={0.15}>
  <p>Follows, a beat later.</p>
</Fade>

Props

Prop	Type	Default	Description
children	ReactNode	—	Content that fades in.
className	string	—	Passed straight through — Fade becomes your layout element.
style	CSSProperties	—	Inline style passthrough.
delay	number	0	Seconds before this instance animates.
direction	"none" \| "up" \| "down" \| "left" \| "right"	"up"	A fixed, subtle drift as it fades — "none" is pure opacity. Tunable travel is Slide's job.
blur	boolean \| number	false	Layer a blur → sharp focus-in on top; true uses ~8px, a number sets custom px.
trigger	"inView" \| "mount"	"inView"	Animate the first time it's in view (once), or immediately on mount.