Clip Reveal

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  fade,
9  revealTransition,
10  viewportOnce,
11  type WipeDirection,
12  wipeVariants,
13} from "@/lib/motion";
14 
15type ClipRevealProps = {
16  children: ReactNode;
17  className?: string;
18  style?: CSSProperties;
19  delay?: number;
20  trigger?: "inView" | "mount";
21  direction?: WipeDirection;
22};
23 
24/** Hard clip-path inset() edge wipe — the box stays put while its content is
25 *  unveiled from `direction`. clip-path survives reducedMotion="user", so we
26 *  guard it: on reduce, the element renders fully open with a plain fade. */
27export function ClipReveal({
28  children,
29  className,
30  style,
31  delay = 0,
32  trigger = "inView",
33  direction = "up",
34}: ClipRevealProps) {
35  const reduced = useReducedMotion();
36 
37  // Reduced motion: clip-path is NOT auto-stripped, so drop the wipe entirely
38  // and settle in with a plain opacity fade (the prop-object `fade` carries no
39  // transition of its own, so the component-level `delay` applies cleanly).
40  if (reduced) {
41    const play =
42      trigger === "mount"
43        ? ({ animate: fade.animate } as const)
44        : ({ whileInView: fade.animate, viewport: viewportOnce } as const);
45    return (
46      <m.div
47        className={className}
48        style={style}
49        initial={fade.initial}
50        {...play}
51        transition={{ ...revealTransition, delay }}
52      >
53        {children}
54      </m.div>
55    );
56  }
57 
58  // A variant's own transition overrides the component `transition` prop, so
59  // fold `delay` into the variant rather than passing it alongside.
60  const base = wipeVariants(direction) as {
61    initial: TargetAndTransition;
62    animate: TargetAndTransition;
63  };
64  const variants: Variants = {
65    initial: base.initial,
66    animate: { ...base.animate, transition: { ...revealTransition, delay } },
67  };
68  const play =
69    trigger === "mount"
70      ? ({ animate: "animate" } as const)
71      : ({ whileInView: "animate", viewport: viewportOnce } as const);
72 
73  return (
74    <m.div className={className} style={style} variants={variants} initial="initial" {...play}>
75      {children}
76    </m.div>
77  );
78}