Spotlight Card

advanced React component designed to create an engaging and modern card interface. It features a unique spotlight glow effect that intelligently tracks the mouse pointer across the screen, highlighting the card with a configurable hue. Part of the EaseMize UI library, it supports several preset glow colors, predefined responsive sizes ('sm', 'md', 'lg'), and allows for completely custom dimensions via width, height, or className props. The underlying CSS leverages custom properties for a highly dynamic and performant visual effect.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Spotlight Card to your project and fits it to your theme.

import { GlowCard } from "@/components/ui/spotlight-card";

export function Default(){
  return(
    <div className="w-screen h-screen flex flex-row items-center justify-center gap-10 custom-cursor">
      <GlowCard />
      <GlowCard />
      <GlowCard />
    </div>
  );
};