Grayscale Reveal

1"use client";
2 
3import { useReducedMotion } from "motion/react";
4import * as m from "motion/react-m";
5import type { CSSProperties, ReactNode } from "react";
6import { durations, ease, grayscaleReveal, viewportOnce } from "@/lib/motion";
7 
8type Props = {
9  children: ReactNode;
10  className?: string;
11  style?: CSSProperties;
12  delay?: number;
13  trigger?: "inView" | "mount";
14};
15 
16/**
17 * Grayscale → color reveal, for images — `grayscale(1)` fades to `grayscale(0)`
18 * alongside opacity, on `durations.slow` (filter animation reads best unhurried).
19 *
20 * `filter` isn't stripped by the reducedMotion="user" provider (only transforms
21 * are), so reduced-motion renders the final color state with a plain opacity
22 * fade instead of animating the filter.
23 */
24export function GrayscaleReveal({
25  children,
26  className,
27  style,
28  delay = 0,
29  trigger = "inView",
30}: Props) {
31  const reduceMotion = useReducedMotion();
32  const transition = { duration: durations.slow, ease: ease.out, delay };
33  const target = reduceMotion ? { opacity: 1 } : grayscaleReveal.animate;
34  const initial = reduceMotion ? { opacity: 0 } : grayscaleReveal.initial;
35  const play =
36    trigger === "mount"
37      ? ({ animate: target } as const)
38      : ({ whileInView: target, viewport: viewportOnce } as const);
39 
40  return (
41    <m.div className={className} style={style} initial={initial} {...play} transition={transition}>
42      {children}
43    </m.div>
44  );
45}