New

SpotlightCard

Card with a radial gradient spotlight that follows mouse position using CSS custom properties.

Creative & Uniquespotlightmouseinteractivehovergradient

Dependencies

shadcn/ui components needed:

npx shadcn@latest add lucide-react

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { useRef } from "react";
4import { Wand2 } from "lucide-react";
5
6export default function SpotlightCard() {
7  const cardRef = useRef<HTMLDivElement>(null);
8
9  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
10    const card = cardRef.current;
11    if (!card) return;
12    const rect = card.getBoundingClientRect();
13    const x = e.clientX - rect.left;
14    const y = e.clientY - rect.top;
15    card.style.setProperty("--spotlight-x", x + "px");
16    card.style.setProperty("--spotlight-y", y + "px");
17  };
18
19  return (
20    <div className="flex items-center justify-center py-12">
21      <div
22        ref={cardRef}
23        onMouseMove={handleMouseMove}
24        className="group relative w-full max-w-sm cursor-pointer overflow-hidden rounded-2xl border border-zinc-200 bg-white p-8 shadow-xl transition-shadow hover:shadow-2xl dark:border-zinc-800 dark:bg-zinc-950"
25        style={{ "--spotlight-x": "50%", "--spotlight-y": "50%" } as React.CSSProperties}
26      >
27        {/* Spotlight effect */}
28        <div
29          className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
30          style={{
31            background: "radial-gradient(400px circle at var(--spotlight-x) var(--spotlight-y), rgba(139, 92, 246, 0.15), transparent 60%)",
32          }}
33        />
34        {/* Border glow */}
35        <div
36          className="pointer-events-none absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
37          style={{
38            background: "radial-gradient(400px circle at var(--spotlight-x) var(--spotlight-y), rgba(139, 92, 246, 0.3), transparent 60%)",
39            mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
40            maskComposite: "exclude",
41            WebkitMaskComposite: "xor",
42            padding: "1px",
43          }}
44        />
45
46        <div className="relative z-10">
47          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-violet-100 dark:bg-violet-900/30">
48            <Wand2 className="h-6 w-6 text-violet-600 dark:text-violet-400" />
49          </div>
50          <h3 className="mb-2 text-xl font-bold text-zinc-900 dark:text-zinc-50">Spotlight Effect</h3>
51          <p className="mb-4 text-sm leading-relaxed text-zinc-500 dark:text-zinc-400">
52            Move your mouse over this card to see a radial gradient spotlight that follows your cursor with a glowing border effect.
53          </p>
54          <div className="flex items-center gap-2 text-sm font-medium text-violet-600 dark:text-violet-400">
55            <span>Try hovering</span>
56            <span className="inline-block transition-transform group-hover:translate-x-1">&rarr;</span>
57          </div>
58        </div>
59      </div>
60    </div>
61  );
62}