Card Spotlight

1"use client";
2 
3import { useMotionValue, motion, useMotionTemplate } from "motion/react";
4import React, { MouseEvent as ReactMouseEvent, useState } from "react";
5import { CanvasRevealEffect } from "@/components/ui/canvas-reveal-effect";
6import { cn } from "@/lib/utils";
7 
8export const CardSpotlight = ({
9  children,
10  radius = 350,
11  color = "#262626",
12  className,
13  ...props
14}: {
15  radius?: number;
16  color?: string;
17  children: React.ReactNode;
18} & React.HTMLAttributes<HTMLDivElement>) => {
19  const mouseX = useMotionValue(0);
20  const mouseY = useMotionValue(0);
21  function handleMouseMove({
22    currentTarget,
23    clientX,
24    clientY,
25  }: ReactMouseEvent<HTMLDivElement>) {
26    let { left, top } = currentTarget.getBoundingClientRect();
27 
28    mouseX.set(clientX - left);
29    mouseY.set(clientY - top);
30  }
31 
32  const [isHovering, setIsHovering] = useState(false);
33  const handleMouseEnter = () => setIsHovering(true);
34  const handleMouseLeave = () => setIsHovering(false);
35  return (
36    <div
37      className={cn(
38        "group/spotlight p-10 rounded-md relative border border-neutral-800 bg-black dark:border-neutral-800",
39        className
40      )}
41      onMouseMove={handleMouseMove}
42      onMouseEnter={handleMouseEnter}
43      onMouseLeave={handleMouseLeave}
44      {...props}
45    >
46      <motion.div
47        className="pointer-events-none absolute z-0 -inset-px rounded-md opacity-0 transition duration-300 group-hover/spotlight:opacity-100"
48        style={{
49          backgroundColor: color,
50          maskImage: useMotionTemplate`
51            radial-gradient(
52              ${radius}px circle at ${mouseX}px ${mouseY}px,
53              white,
54              transparent 80%
55            )
56          `,
57        }}
58      >
59        {isHovering && (
60          <CanvasRevealEffect
61            animationSpeed={5}
62            containerClassName="bg-transparent absolute inset-0 pointer-events-none"
63            colors={[
64              [59, 130, 246],
65              [139, 92, 246],
66            ]}
67            dotSize={3}
68          />
69        )}
70      </motion.div>
71      {children}
72    </div>
73  );
74};