Tilt Card

3D perspective tilt card that responds to mouse position.

cards3dtiltperspective

Installation

Terminalbash
npx motioncraft add tilt-card

Usage

tilt-card.tsxtsx
import { TiltCard } from "@/components/cards/tilt-card";

<TiltCard>
  <p>Move your mouse over me</p>
</TiltCard>

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.

Glow Card

Card with animated glow border that follows cursor position.

Stack Cards

New

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