"use client"; import { useMotionValue } from "framer-motion"; import React, { useState, useEffect } from "react"; import { useMotionTemplate, motion } from "framer-motion"; import { cn } from "@/lib/utils"; export const EvervaultCard = ({ text, className, }: { text?: string; className?: string; }) => { let mouseX = useMotionValue(0); let mouseY = useMotionValue(0); const [randomString, setRandomString] = useState(""); useEffect(() => { let str = generateRandomString(1500); setRandomString(str); }, []); function onMouseMove({ currentTarget, clientX, clientY }: any) { let { left, top } = currentTarget.getBoundingClientRect(); mouseX.set(clientX - left); mouseY.set(clientY - top); const str = generateRandomString(1500); setRandomString(str); } return (

{text}

); }; export function CardPattern({ mouseX, mouseY, randomString }: any) { let maskImage = useMotionTemplate`radial-gradient(250px at ${mouseX}px ${mouseY}px, white, transparent)`; let style = { maskImage, WebkitMaskImage: maskImage }; return (

{randomString}

); } const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; export const generateRandomString = (length: number) => { let result = ""; for (let i = 0; i < length; i++) { result += characters.charAt(Math.floor(Math.random() * characters.length)); } return result; }; export const Icon = ({ className, ...rest }: any) => { return ( ); };