Tilt Card

A surface that leans away from the pointer in 3D and settles back on leave.

Loom UI

Pick it up and look at it

The card leans away from the pointer and settles back on its own.

Loading preview

Installation

npx shadcn@latest add @loomui/tilt-card

Usage

import { TiltCard } from "@/components/ui/tilt-card"

<TiltCard className="rounded-xl">
  <div className="bg-card rounded-xl border p-6">{children}</div>
</TiltCard>

The outer element holds the perspective, the inner one holds the rotation. That is what keeps the tilt from flattening out as the card scales. Pointer position is written to custom properties inside a frame, so moving across the card costs no renders.

Rounding is inherited by the sheen, so put a radius on the wrapper as well as on the surface inside it.

Props

Prop	Type	Default	Description
`max`	`number`	`10`	Largest tilt in degrees, reached at a corner.
`perspective`	`string`	`"800px"`	Depth of the perspective. Lower is stronger.
`scale`	`number`	`1.02`	Scale held while the pointer is over the card.
`glare`	`boolean`	`true`	Lay a sheen over the card that follows it.
`disabled`	`boolean`	`false`	Render the card flat.
`className`	`string`	none	Merged onto the perspective wrapper.

Any other <div> prop is forwarded.

Restraint

Ten degrees is already a lot on a wide card. Past about fifteen the text on the far edge starts to smear, because the browser rasterises the layer once and then transforms the result.

Accessibility

A tilt is the whole component, so there is nothing left to soften: under prefers-reduced-motion the card renders flat and the sheen is not drawn.