evervault-card

1"use client";
2import { useMotionValue } from "motion/react";
3import React, { useState, useEffect } from "react";
4import { useMotionTemplate, motion } from "motion/react";
5import { cn } from "@/lib/utils";
6 
7export const EvervaultCard = ({
8  text,
9  className,
10}: {
11  text?: string;
12  className?: string;
13}) => {
14  let mouseX = useMotionValue(0);
15  let mouseY = useMotionValue(0);
16 
17  const [randomString, setRandomString] = useState("");
18 
19  useEffect(() => {
20    let str = generateRandomString(1500);
21    setRandomString(str);
22  }, []);
23 
24  function onMouseMove({ currentTarget, clientX, clientY }: any) {
25    let { left, top } = currentTarget.getBoundingClientRect();
26    mouseX.set(clientX - left);
27    mouseY.set(clientY - top);
28 
29    const str = generateRandomString(1500);
30    setRandomString(str);
31  }
32 
33  return (
34    <div
35      className={cn(
36        "p-0.5  bg-transparent aspect-square  flex items-center justify-center w-full h-full relative",
37        className
38      )}
39    >
40      <div
41        onMouseMove={onMouseMove}
42        className="group/card rounded-3xl w-full relative overflow-hidden bg-transparent flex items-center justify-center h-full"
43      >
44        <CardPattern
45          mouseX={mouseX}
46          mouseY={mouseY}
47          randomString={randomString}
48        />
49        <div className="relative z-10 flex items-center justify-center">
50          <div className="relative h-44 w-44  rounded-full flex items-center justify-center text-white font-bold text-4xl">
51            <div className="absolute w-full h-full bg-white/[0.8] dark:bg-black/[0.8] blur-sm rounded-full" />
52            <span className="dark:text-white text-black z-20">{text}</span>
53          </div>
54        </div>
55      </div>
56    </div>
57  );
58};
59 
60export function CardPattern({ mouseX, mouseY, randomString }: any) {
61  let maskImage = useMotionTemplate`radial-gradient(250px at ${mouseX}px ${mouseY}px, white, transparent)`;
62  let style = { maskImage, WebkitMaskImage: maskImage };
63 
64  return (
65    <div className="pointer-events-none">
66      <div className="absolute inset-0 rounded-2xl  [mask-image:linear-gradient(white,transparent)] group-hover/card:opacity-50"></div>
67      <motion.div
68        className="absolute inset-0 rounded-2xl bg-gradient-to-r from-green-500 to-blue-700 opacity-0  group-hover/card:opacity-100 backdrop-blur-xl transition duration-500"
69        style={style}
70      />
71      <motion.div
72// … truncated