Glowing Effect Cards — React Component

Cursor-reactive glowing border cards with a responsive 2-1-2 layout for refined SaaS sections and dashboards.

Cardshovergradientlayoutglowcardscursorinteractivelayout

Glowing Effect Cards

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

glowColor

Glow color used by `GlowingEffect`.

borderRadius

Border radius applied to the glowing container.

disabled

Disables pointer-reactive glow behavior.

intensity

Glow spread/intensity multiplier.

blur

Ambient glow blur amount in pixels.

title

`GlowingCard` heading text.

description

`GlowingCard` supporting copy.

tall

Makes `GlowingCard` span a tall middle-column presentation.

Generated JSX

Copy this into your page.

<GlowingCardsLayout
  glowColor="hsl(var(--primary) / 0.9)"
  borderRadius="1rem"
  disabled={false}
  intensity={1}
  blur={18}
  title=""
  description=""
  tall={false}
/>

Animation effects

hovergradientlayout

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Full-page demo

About Glowing Effect Cards

Glowing Effect Cards is a card grid where each card has a cursor-tracked glow border that follows mouse movement across the card surface. The glow gradient repositions as the cursor moves using a mousemove event handler, creating a spotlight that appears to emanate from the cursor's position. When multiple cards share the same parent, a single event listener coordinates the glow across the entire grid. Use it for feature sections, pricing tiers, and service grids.

Common use cases

Product feature grids
Pricing plan card sets
Service and offering tile grids
Capability showcase sections

Installation