"use client"; import { useState, useEffect, useRef } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; 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: null, y: null }); const containerRef = useRef(null); const updateMousePosition = (e: any) => { const rect = containerRef.current.getBoundingClientRect(); setMousePosition({ x: e.clientX - rect.left, y: e.clientY - rect.top }); }; useEffect(() => { containerRef.current.addEventListener("mousemove", updateMousePosition); return () => { if (containerRef.current) { containerRef.current.removeEventListener( "mousemove", updateMousePosition, ); } }; }, []); let maskSize = isHovered ? revealSize : size; return (

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

{revealText}

); };

Svg Mask Effect

Instalação

Dependências