Glow Card
FreeInteractive card with mouse-tracking radial gradient glow effect.
Cards · primitive · basic · css · zero dependencies
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
Interactive card with mouse-tracking radial gradient glow effect.
- feature grid card
- pricing tier card
- testimonial card hover state
- bento grid dashboard card
| 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. |
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.