Hover Card

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

cardshover3dtilt

Installation

Terminalbash
npx motioncraft add hover-card

Usage

hover-card.tsxtsx
import { HoverCard } from "@/components/cards/hover-card";

<HoverCard>
  <p>Hover me for 3D effect</p>
</HoverCard>

Props

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

Related Components

Tilt Card

3D perspective tilt card that responds to mouse position.

Glow Card

Card with animated glow border that follows cursor position.

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.