Grayscale Reveal

Image

Grayscale → color image reveal — grayscale(1) fades to grayscale(0) alongside opacity.

on scroll

trigger="inView"

on mount

trigger="mount" delay=0.2

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/grayscale-reveal.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/grayscale-reveal.tsx

components/motion/grayscale-reveal.tsx

"use client";

import { useReducedMotion } from "motion/react";
import * as m from "motion/react-m";
import type { CSSProperties, ReactNode } from "react";
import { durations, ease, grayscaleReveal, viewportOnce } from "@/lib/motion";

type Props = {
  children: ReactNode;
  className?: string;
  style?: CSSProperties;
  delay?: number;
  trigger?: "inView" | "mount";
};

/**
 * Grayscale → color reveal, for images — `grayscale(1)` fades to `grayscale(0)`
 * alongside opacity, on `durations.slow` (filter animation reads best unhurried).
 *
 * `filter` isn't stripped by the reducedMotion="user" provider (only transforms
 * are), so reduced-motion renders the final color state with a plain opacity
 * fade instead of animating the filter.
 */
export function GrayscaleReveal({
  children,
  className,
  style,
  delay = 0,
  trigger = "inView",
}: Props) {
  const reduceMotion = useReducedMotion();
  const transition = { duration: durations.slow, ease: ease.out, delay };
  const target = reduceMotion ? { opacity: 1 } : grayscaleReveal.animate;
  const initial = reduceMotion ? { opacity: 0 } : grayscaleReveal.initial;
  const play =
    trigger === "mount"
      ? ({ animate: target } as const)
      : ({ whileInView: target, viewport: viewportOnce } as const);

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

Usage

Basic

Wrap an image — opacity and grayscale(1) → grayscale(0) settle together on durations.slow, the first time it's 30% in view.

import { GrayscaleReveal } from "@/components/motion/grayscale-reveal";

<GrayscaleReveal className="overflow-hidden rounded-md">
  <img src="/photo.jpg" alt="" className="h-full w-full object-cover" />
</GrayscaleReveal>

Trigger on mount

Play immediately instead of waiting for scroll — for an above-the-fold hero image.

<GrayscaleReveal trigger="mount">
  <img src="/hero.jpg" alt="" className="h-full w-full object-cover" />
</GrayscaleReveal>

With delay

Offset a grid of images so they colorize in sequence rather than all at once.

<GrayscaleReveal delay={0}>
  <img src="/one.jpg" alt="" />
</GrayscaleReveal>
<GrayscaleReveal delay={0.15}>
  <img src="/two.jpg" alt="" />
</GrayscaleReveal>
<GrayscaleReveal delay={0.3}>
  <img src="/three.jpg" alt="" />
</GrayscaleReveal>

Props

Prop	Type	Default	Description
children	ReactNode	—	The image (or any element) that fades from grayscale to color.
trigger	"inView" \| "mount"	"inView"	Animate on scroll-into-view (once) or immediately on mount.
className	string	—	Passed straight through — GrayscaleReveal becomes your layout element.
style	CSSProperties	—	Inline style passthrough.
delay	number	0	Seconds before this instance animates.