import * as React from "react"; import { motion } from "framer-motion"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } interface SpotlightRevealProps { text?: string; className?: string; } export default function SpotlightRevealTextTypography({ text = "Interact With Premium Typography", className, }: SpotlightRevealProps) { const containerRef = React.useRef(null); const [position, setPosition] = React.useState({ x: 0, y: 0 }); const [opacity, setOpacity] = React.useState(0); const handleMouseMove = (e: React.MouseEvent) => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top }); }; return (

setOpacity(1)} onMouseLeave={() => setOpacity(0)} className={cn( "relative flex w-full cursor-default select-none items-center justify-center overflow-hidden rounded-3xl bg-transparent py-20", className )} >

{text}

); }