Glow Card

Free

Interactive card with mouse-tracking radial gradient glow effect.

Cards · primitive · basic · css · zero dependencies

glow-card Cards·preview

Hover a card — the light follows the cursor

The prompt is the product

Every component ships with a prompt tuned for v0, Cursor, Lovable and Bolt — complete code, no truncation, no placeholders.

glowColor amber · glowSize 250

Yours after paste

Self-contained React and Tailwind. Nothing to install, nothing to configure, nothing that breaks on the next release.

glowColor ember rose · glowSize 420

Glow Card

Interactive card with mouse-tracking radial gradient glow effect.

Free component

Free at launch — join the waitlist and unlock it day one.

Join the waitlist

No card required.

Use it for
  • feature grid card
  • pricing tier card
  • testimonial card hover state
  • bento grid dashboard card
Props
Prop Type Default Description
children React.ReactNode — Card content rendered above the glow layers.
className string — Additional classes for padding, width, or background overrides.
glowColor string "rgba(167, 139, 250, 0.15)" Color of the cursor-tracking glow, as an rgba value.
glowSize number 250 Radius of the glow circle in pixels.
FAQ
Does Glow Card work with Next.js App Router?

Yes. It's a "use client" React component and works as a client component in the App Router.

Are there any dependencies to install?

None. It's built with React state and CSS radial gradients — no external packages required.

Is it responsive?

Yes. The card sizes with its container or className; the glow radius (glowSize) is fixed in pixels, so very small cards may want a smaller value.

Does it respect prefers-reduced-motion?

Not automatically. The hover glow and border transitions are short CSS transitions (300ms) without a reduced-motion media query — wrap them in your own override if strict compliance is required.