Glow Card

Card with animated glow border that follows cursor position.

cardsglowhovercursor

Installation

Terminalbash
npx motioncraft add glow-card

Usage

glow-card.tsxtsx
import { GlowCard } from "@/components/cards/glow-card";

<GlowCard>
  <h3>Glowing Card</h3>
  <p>Hover to see the glow effect</p>
</GlowCard>

Props

PropTypeDefaultDescription
children*ReactNode—Card content
classNamestring—Additional CSS classes

Related Components

Hover Card

Card with smooth 3D tilt and scale on hover with spring physics.

Bento Grid

Apple-style bento grid layout with configurable spans and gap sizes.

Stack Cards

New

Cards that stack on scroll with sticky positioning and cascade effect. Each card slides into view and compresses previous ones.

Tilt Card

3D perspective tilt card that responds to mouse position.