3D Card

Perspective card that turns toward the pointer while its layers lift to different depths.

Depth on demand

Every layer floats at its own height as the card turns toward you.

+130px

Hover or tab in

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/3d-card.json

Adds components/velora/3d-card.tsx, installs motion.

A shop tile whose product, title, price and add-to-cart button sit at different depths.

New

Halo Mini

Room-filling sound

$129

Prop	Type	Default
`maxTilt` Maximum rotation toward the pointer, in degrees	`number`	`10`
`perspective` CSS perspective distance in px (smaller = stronger 3D)	`number`	`1000`
`cardClassName` Classes for the rotating surface (avoid overflow-hidden: it flattens the layers)	`string`	`—`
`children*` Card content; wrap layers that should lift in Card3DItem	`React.ReactNode`	`—`

Also accepts every <div> attribute, forwarded to the root element.

Prop	Type	Default
`depth` How far the item lifts toward the viewer, in px (translateZ)	`number`	`40`
`rotateX` Extra rotation around the X axis at full lift, in degrees	`number`	`0`
`rotateY` Extra rotation around the Y axis at full lift, in degrees	`number`	`0`
`rotateZ` Extra rotation around the Z axis at full lift, in degrees	`number`	`0`

Also accepts every <div> attribute, forwarded to the root element.

Reduced motion: The card stays flat and its layers stay on the surface; pointer movement and focus change nothing.
Keyboard: The card is not focusable itself; when a link or button inside it gets keyboard focus, the layers rise to 40% of their depth without tilting.
Screen readers: A transparent wrapper; the children are read in source order.