Fade

1"use client";
2 
3import type { TargetAndTransition, Variants } from "motion/react";
4import { useReducedMotion } from "motion/react";
5import * as m from "motion/react-m";
6import type { CSSProperties, ReactNode } from "react";
7import {
8  type FadeDirection,
9  fadeVariants,
10  feel,
11  revealTransition,
12  viewportOnce,
13} from "@/lib/motion";
14 
15type FadeProps = {
16  children: ReactNode;
17  className?: string;
18  style?: CSSProperties;
19  delay?: number;
20  /** Subtle FIXED drift as it fades — default "up". "none" = pure opacity. Tunable travel is Slide's job. */
21  direction?: FadeDirection;
22  /** Layer a blur → sharp focus-in on top. `true` uses feel.fadeBlur (~8px); a number sets custom px. */
23  blur?: boolean | number;
24  /** Animate the first time it's in view (once) or immediately on mount. */
25  trigger?: "inView" | "mount";
26};
27 
28/**
29 * The one prop-driven fade — absorbs the old FadeIn / Reveal / BlurToFocus / BlurFadeRise.
30 * A refined opacity fade plus an optional subtle directional drift and an optional blur settle.
31 * Transforms are stripped for free by the provider's `reducedMotion="user"`, but `filter` blur
32 * is NOT — so on reduced motion we drop both blur AND drift and keep a plain opacity fade.
33 */
34export function Fade({
35  children,
36  className,
37  style,
38  delay = 0,
39  direction = "up",
40  blur = false,
41  trigger = "inView",
42}: FadeProps) {
43  const reduceMotion = useReducedMotion();
44  const blurPx = blur === true ? feel.fadeBlur : blur === false ? 0 : blur;
45 
46  // Reduced motion → a plain opacity fade, no drift, no filter. Otherwise the full recipe.
47  const base: Variants = reduceMotion
48    ? { initial: { opacity: 0 }, animate: { opacity: 1 } }
49    : fadeVariants(direction, blurPx);
50 
51  // fadeVariants bakes no transition, so fold `delay` into `animate` here — a variant's own
52  // transition overrides the component-level `transition` prop (the L004 idiom, as SlideIn does).
53  const variants: Variants = {
54    ...base,
55    animate: {
56      ...(base.animate as TargetAndTransition),
57      transition: { ...revealTransition, delay },
58    },
59  };
60 
61  const play =
62    trigger === "mount"
63      ? ({ animate: "animate" } as const)
64      : ({ whileInView: "animate", viewport: viewportOnce } as const);
65 
66  return (
67    <m.div className={className} style={style} variants={variants} initial="initial" {...play}>
68      {children}
69    </m.div>
70  );
71}