xlibs-components/dist/components/aceternity/card-spotlight.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMotionValue, motion, useMotionTemplate } from "framer-motion";
import { useState } from "react";
import { CanvasRevealEffect } from '../../components/ui/canvas-reveal-effect.js';
import { cn } from '../../lib/utils.js';
export const CardSpotlight = ({ children, radius = 350, color = "#262626", className, ...props }) => {
    const mouseX = useMotionValue(0);
    const mouseY = useMotionValue(0);
    function handleMouseMove({ currentTarget, clientX, clientY, }) {
        let { left, top } = currentTarget.getBoundingClientRect();
        mouseX.set(clientX - left);
        mouseY.set(clientY - top);
    }
    const [isHovering, setIsHovering] = useState(false);
    const handleMouseEnter = () => setIsHovering(true);
    const handleMouseLeave = () => setIsHovering(false);
    return (_jsxs("div", { className: cn("group/spotlight p-10 rounded-md relative border border-neutral-800 bg-black dark:border-neutral-800", className), onMouseMove: handleMouseMove, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: [_jsx(motion.div, { className: "pointer-events-none absolute z-0 -inset-px rounded-md opacity-0 transition duration-300 group-hover/spotlight:opacity-100", style: {
                    backgroundColor: color,
                    maskImage: useMotionTemplate `
            radial-gradient(
              ${radius}px circle at ${mouseX}px ${mouseY}px,
              white,
              transparent 80%
            )
          `,
                }, children: isHovering && (_jsx(CanvasRevealEffect, { animationSpeed: 0.4, containerClassName: "bg-transparent absolute inset-0 pointer-events-none", colors: [
                        [59, 130, 246],
                        [139, 92, 246],
                    ], dotSize: 3, showGradient: false })) }), children] }));
};