Spotlight Card

"use client";
 
import { useRef, useState } from "react";
 
export const SpotlightCard = ({
  children,
  className = "",
  spotlightColor = "#ffffff30",
}: {
  children: any;
  className?: string;
  spotlightColor?: string;
}) => {
  const divRef = useRef<HTMLDivElement>(null);
  const [isFocused, setIsFocused] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [opacity, setOpacity] = useState(0);
 
  const handleMouseMove = (e: { clientX: number; clientY: number }) => {
    if (!divRef.current || isFocused) return;
 
    const rect = divRef.current.getBoundingClientRect();
    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
  };
 
  const handleFocus = () => {
    setIsFocused(true);
    setOpacity(0.6);
  };
 
  const handleBlur = () => {
    setIsFocused(false);
    setOpacity(0);
  };
 
  const handleMouseEnter = () => {
    setOpacity(0.6);
  };
 
  const handleMouseLeave = () => {
    setOpacity(0);
  };
 
  return (
    <div
      ref={divRef}
      onMouseMove={handleMouseMove}
      onFocus={handleFocus}
      onBlur={handleBlur}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      className={`relative rounded-3xl border border-neutral-800 bg-neutral-900 overflow-hidden p-8 ${className}`}
    >
      <div
        className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 ease-in-out"
        style={{
          opacity,
          background: `radial-gradient(circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 80%)`,
        }}
      />
      {children}
    </div>
  );
};

import { FaBolt } from "react-icons/fa";
 
import { SpotlightCard } from "@/components/library/animation/SpotlightCard";
 
<SpotlightCard
  className="magic-card flex flex-col gap-4 max-w-[30rem]"
  spotlightColor="#ffffff30"
>
  <div className="text-2xl font-bold flex items-center gap-2">
    <FaBolt className="text-yellow-500" />
    <span>Lighting Fast</span>
  </div>
  <div className="text-muted-foreground">
    Optimized for performance with minimal bundle size. Build fast, responsive
    websites without compromise.
  </div>
</SpotlightCard>;