"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion } from "motion/react"; function cn(...classes: (string | undefined | null | false)[]): string { return classes.filter(Boolean).join(" "); } const MASK_DATA_URL = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI1MCIgZmlsbD0id2hpdGUiLz48L3N2Zz4="; export const MaskContainer = ({ children, revealText, size = 10, revealSize = 600, className, }: { children?: string | React.ReactNode; revealText?: string | React.ReactNode; size?: number; revealSize?: number; className?: string; }) => { const [isHovered, setIsHovered] = useState(false); const [mousePosition, setMousePosition] = useState<{ x: number | null; y: number | null }>({ x: null, y: null, }); const containerRef = useRef(null); useEffect(() => { const el = containerRef.current; if (!el) return; const handler = (e: MouseEvent) => { const rect = el.getBoundingClientRect(); setMousePosition({ x: e.clientX - rect.left, y: e.clientY - rect.top }); }; el.addEventListener("mousemove", handler); return () => el.removeEventListener("mousemove", handler); }, []); const maskSize = isHovered ? revealSize : size; const mx = (mousePosition.x ?? 0) - maskSize / 2; const my = (mousePosition.y ?? 0) - maskSize / 2; return (

{/* Revealed overlay — black in light mode, white in dark mode */}

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} className="relative z-20 mx-auto max-w-4xl text-center text-4xl font-bold text-white dark:text-black" > {children}

{/* Base layer */}

{revealText}

); };