Clip Reveal

"use client";

import type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";

export interface ClipRevealProps {
  children: ReactNode;
  /** Edge the reveal starts from. */
  from?: "bottom" | "top" | "left" | "right" | "center";
  delay?: number;
  duration?: number;
  repeat?: boolean;
  className?: string;
}

const START: Record<NonNullable<ClipRevealProps["from"]>, string> = {
  bottom: "inset(100% 0% 0% 0% round 14px)",
  top: "inset(0% 0% 100% 0% round 14px)",
  left: "inset(0% 100% 0% 0% round 14px)",
  right: "inset(0% 0% 0% 100% round 14px)",
  center: "inset(20% 20% 20% 20% round 14px)",
};

/** Scroll-triggered clip-path reveal with a slight scale settle — great for screenshots, cards and product mock-ups. */
export function ClipReveal({ children, from = "bottom", delay = 0, duration = 0.9, repeat = false, className }: ClipRevealProps) {
  const reduce = useReducedMotion();
  // The observer sits on an unclipped wrapper: a fully clipped element never counts as intersecting.
  return (
    <motion.div className={className} initial={reduce ? false : "hidden"} whileInView="shown" viewport={{ once: !repeat, amount: 0.3 }}>
      <motion.div
        className="will-change-[clip-path]"
        variants={{
          hidden: { clipPath: START[from], scale: 1.04, opacity: 0.4 },
          shown: { clipPath: "inset(0% 0% 0% 0% round 14px)", scale: 1, opacity: 1, transition: { delay, duration, ease: [0.16, 1, 0.3, 1] } },
        }}
      >
        {children}
      </motion.div>
    </motion.div>
  );
}

export default ClipReveal;