Glow Hover Card

Cards 1

About

A card grid where a radial mask reveals a duplicated glowing layer under the cursor, each card lighting up in its own hue. Respects prefers-reduced-motion.

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

Code

How Glow Hover Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import Component from "@/components/ui/glow-hover-card";

const ITEMS = [
  {
    body: "Interruptible motion that keeps its momentum when the target changes mid-flight.",
    hue: 330,
    label: "01",
    title: "Spring physics",
  },
  {
    body: "Every component checks prefers-reduced-motion before it animates anything at all.",
    hue: 235,
    label: "02",
    title: "Reduced motion",
  },
  {
    body: "Transform and opacity only, so the main thread stays free while the glow tracks the cursor.",
    hue: 150,
    label: "03",
    title: "Compositor only",
  },
];

export default function DemoOne() {
  return (
    <div className="flex min-h-[620px] w-full items-center justify-center bg-background p-10">
      <div className="w-full max-w-4xl">
        <p className="font-medium text-muted-foreground text-xs uppercase tracking-[0.18em]">
          Glow Hover Card
        </p>
        <h2 className="mt-3 font-semibold text-2xl text-foreground tracking-tight">
          A glow follows the cursor across the grid
        </h2>
        <p className="mt-2 max-w-xl text-muted-foreground text-sm leading-relaxed">
          One radial mask over a duplicated layer, so only the cards under the
          pointer light up — each with its own hue.
        </p>

        <Component
          className="mt-8 grid gap-5 sm:grid-cols-3"
          glowIntensity={0.18}
          items={ITEMS.map((item) => ({
            element: (
              <div className="flex h-full flex-col rounded-2xl border bg-card p-6 shadow-sm">
                <span className="font-medium text-muted-foreground text-xs tabular-nums">
                  {item.label}
                </span>
                <p className="mt-6 font-semibold text-base text-foreground">
                  {item.title}
                </p>
                <p className="mt-2 text-muted-foreground text-sm leading-relaxed">
                  {item.body}
                </p>
              </div>
            ),
            id: item.title,
            theme: { hue: item.hue, lightness: 60, saturation: 90 },
          }))}
          maskSize={420}
        />
      </div>
    </div>
  );
}