Component

3D Tilt Card

A perspective card that rotates toward the cursor and lifts toward the viewer, with a moving light glare. Rotation is written to CSS variables on pointer move — no re-renders — and tilt is disabled under reduced motion.

Tilt me

Move your cursor across the card — it leans in 3D toward the pointer with a moving glare.

Installation

Registry CLI — copy the source straight into your project:

$pnpm dlx shadcn@latest add @stacklyui/card-3d

Or install the package and import it:

$pnpm add @stacklyui/ui motion

Usage

Wrap any content. Tune the max rotation with tilt, the hover depth with lift, and toggle the specular sheen with glare. For layered depth, give child elements transform: translateZ(...) — the inner surface uses preserve-3d.

Props

Prop	Type	Default	Description
`tilt`	`number`	`12`	Maximum tilt in degrees at the edges.
`lift`	`number`	`40`	How far the card lifts toward the viewer on hover (px).
`glare`	`boolean`	`true`	Show a moving light glare across the surface.
`className`	`string`	—	Classes applied to the outer perspective wrapper.