Inset Frame Reveal

1"use client";
2 
3import { useReducedMotion } from "motion/react";
4import * as m from "motion/react-m";
5import type { CSSProperties, ReactNode } from "react";
6import { insetFrameReveal, revealTransition, viewportOnce } from "@/lib/motion";
7 
8type InsetFrameRevealProps = {
9  children: ReactNode;
10  className?: string;
11  style?: CSSProperties;
12  delay?: number;
13  trigger?: "inView" | "mount";
14};
15 
16/** Window settle — a uniform clip-path frame insets in from the edges, then opens to reveal. */
17export function InsetFrameReveal({
18  children,
19  className,
20  style,
21  delay = 0,
22  trigger = "inView",
23}: InsetFrameRevealProps) {
24  const reducedMotion = useReducedMotion();
25 
26  // `clip-path` isn't stripped by the provider's reducedMotion="user" (transforms only),
27  // so when reduced motion is on, skip the frame entirely and render the settled state.
28  if (reducedMotion) {
29    return (
30      <div className={className} style={style}>
31        {children}
32      </div>
33    );
34  }
35 
36  const play =
37    trigger === "mount"
38      ? ({ animate: insetFrameReveal.animate } as const)
39      : ({ whileInView: insetFrameReveal.animate, viewport: viewportOnce } as const);
40 
41  return (
42    <m.div
43      className={className}
44      style={style}
45      initial={insetFrameReveal.initial}
46      transition={{ ...revealTransition, delay }}
47      {...play}
48    >
49      {children}
50    </m.div>
51  );
52}