Circle Reveal

"use client";

import type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

export interface CircleRevealProps {
  children: ReactNode;
  /** Origin of the circle, in % of the element. */
  origin?: { x: number; y: number };
  delay?: number;
  duration?: number;
  repeat?: boolean;
  className?: string;
}

/** Scroll-triggered circular reveal: content appears through a circle that grows from an origin point (clip-path), with a soft blur-to-sharp. */
export function CircleReveal({ children, origin = { x: 50, y: 50 }, delay = 0, duration = 1.1, repeat = false, className }: CircleRevealProps) {
  const reduce = useReducedMotion();
  const at = `${origin.x}% ${origin.y}%`;
  return (
    <motion.div className={className} initial={reduce ? false : "hidden"} whileInView="shown" viewport={{ once: !repeat, amount: 0.3 }}>
      <motion.div
        className={cn("will-change-[clip-path]")}
        variants={{
          hidden: { clipPath: `circle(0% at ${at})`, filter: "blur(8px)" },
          shown: { clipPath: `circle(150% at ${at})`, filter: "blur(0px)", transition: { delay, duration, ease: [0.22, 1, 0.36, 1] } },
        }}
      >
        {children}
      </motion.div>
    </motion.div>
  );
}

export default CircleReveal;