Hover Card
Card with smooth 3D tilt and scale on hover with spring physics.
cardshover3dtilt
Installation
Terminalbash
npx motioncraft add hover-cardUsage
hover-card.tsxtsx
import { HoverCard } from "@/components/cards/hover-card";
<HoverCard>
<p>Hover me for 3D effect</p>
</HoverCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | — | Card content |
| className | string | — | 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
NewCards that stack on scroll with sticky positioning and cascade effect. Each card slides into view and compresses previous ones.