animations

GlowCard

A card with a border glow effect that follows the cursor position, creating an illuminated edge highlight.

v1.0.0react >=18next >=14tailwind >=4motion >=12

hoverglowbordercursorcardinteractive

Preview

Loading preview...

Props

Prop	Type	Default	Description
`children*`	`ReactNode`	`—`	Content to render inside the glowing card
`glowColor`	`string`	`#ee502c`	Color of the glow effect
`glowSize`	`number`	`200`	Diameter of the glow in pixels
`borderRadius`	`string`	`1rem`	Border radius of the card
`disabled`	`boolean`	`false`	Disable the glow effect
`className`	`string`	`—`	Additional Tailwind classes
`id`	`string`	`—`	HTML id attribute

Slots

Slot	Type	Required	Description
`children`	`ReactNode`	Yes	Card content rendered above the glow layer

Layout

Display: block

Responsive: No

Wraps children in a relatively-positioned container with an absolute glow layer behind the content.

Examples

Basic glow card

<GlowCard>
  <div className="bg-neutral-900 p-8 rounded-2xl">
    <h3 className="text-xl font-bold">Feature</h3>
    <p className="text-neutral-400 mt-2">Hover to see the glow follow your cursor</p>
  </div>
</GlowCard>

Custom brand color glow

<GlowCard glowColor="#6366f1" glowSize={300}>
  <div className="bg-neutral-900 p-8 rounded-2xl border border-neutral-800">
    <h3 className="text-xl font-bold">Pro Plan</h3>
    <p className="text-3xl font-bold mt-4">$29/mo</p>
  </div>
</GlowCard>

Subtle small glow

<GlowCard glowColor="rgba(255,255,255,0.5)" glowSize={100}>
  <div className="bg-neutral-900 p-6 rounded-xl">
    <p className="text-sm text-neutral-300">Minimal glow effect</p>
  </div>
</GlowCard>

Combined with TiltCard

<TiltCard maxTilt={10}>
  <GlowCard glowColor="#ee502c">
    <div className="bg-neutral-900 p-8 rounded-2xl">
      <h3 className="text-xl font-bold">Premium Feature</h3>
      <p className="text-neutral-400 mt-2">3D tilt + glow border</p>
    </div>
  </GlowCard>
</TiltCard>

AI Usage Hint

Use GlowCard for interactive cards with cursor-following border illumination. Great for feature cards, pricing tiers, or portfolio items. Set glowColor to your brand accent. Adjust glowSize for intensity.

Works Well With

TiltCardFadeUp