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.