Clipped Circle

1"use client";
2 
3import * as React from "react";
4import { motion } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7 
8interface ClippedCircleProps {
9  className?: string;
10  circleClassName?: string;
11  circleSize?: number;
12}
13 
14function ClippedCircle({
15  className,
16  circleClassName = "bg-white/20",
17  circleSize = 400,
18}: ClippedCircleProps) {
19  const containerRef = React.useRef<HTMLDivElement>(null);
20  const [isHovered, setIsHovered] = React.useState(false);
21  const [position, setPosition] = React.useState({ x: "50%", y: "50%" });
22 
23  React.useEffect(() => {
24    const container = containerRef.current;
25    if (!container || !container.parentElement) return;
26 
27    const parent = container.parentElement;
28 
29    const handleMouseEnter = (e: MouseEvent) => {
30      const rect = parent.getBoundingClientRect();
31      const x = ((e.clientX - rect.left) / rect.width) * 100;
32      const y = ((e.clientY - rect.top) / rect.height) * 100;
33      setPosition({ x: `${x}%`, y: `${y}%` });
34      setIsHovered(true);
35    };
36 
37    const handleMouseMove = (e: MouseEvent) => {
38      const rect = parent.getBoundingClientRect();
39      const x = ((e.clientX - rect.left) / rect.width) * 100;
40      const y = ((e.clientY - rect.top) / rect.height) * 100;
41      setPosition({ x: `${x}%`, y: `${y}%` });
42    };
43 
44    const handleMouseLeave = () => {
45      setIsHovered(false);
46    };
47 
48    parent.addEventListener("mouseenter", handleMouseEnter);
49    parent.addEventListener("mousemove", handleMouseMove);
50    parent.addEventListener("mouseleave", handleMouseLeave);
51 
52    return () => {
53      parent.removeEventListener("mouseenter", handleMouseEnter);
54      parent.removeEventListener("mousemove", handleMouseMove);
55      parent.removeEventListener("mouseleave", handleMouseLeave);
56    };
57  }, []);
58 
59  return (
60    <div
61      ref={containerRef}
62      className={cn(
63        "absolute inset-0 overflow-hidden pointer-events-none",
64        className,
65      )}
66    >
67      <motion.div
68        className={cn(
69          "pointer-events-none absolute rounded-full",
70          circleClassName,
71        )}
72        style={{
73          left: position.x,
74          top: position.y,
75          width: circleSize,
76          height: circleSize,
77          mixBlendMode: "difference",
78        }}
79        initial={{ scale: 0, x: "-50%", y: "-50%" }}
80        animate={{
81          scale: isHovered ? 1 : 0,
82          x: "-50%",
83          y: "-50%",
84        }}
85        transition={{
86          duration: 0.5,
87// … truncated