Spotlight Card

import { motion, useMotionTemplate, useMotionValue } from "framer-motion";

export function SpotlightCard({ children }) {
  const x = useMotionValue(-200); const y = useMotionValue(-200);
  const bg = useMotionTemplate`radial-gradient(150px circle at ${x}px ${y}px, rgba(79,160,255,0.28), transparent 70%)`;
  return (
    <div
      onMouseMove={(e) => { const r = e.currentTarget.getBoundingClientRect(); x.set(e.clientX - r.left); y.set(e.clientY - r.top); }}
      className="relative overflow-hidden rounded-2xl border border-white/10 bg-[#0a0e1a] p-6"
    >
      <motion.div className="pointer-events-none absolute inset-0" style={{ background: bg }} />
      <div className="relative">{children}</div>
    </div>
  );
}