PlumUI

Tilt

Tilts a card in 3D toward the cursor with a moving glare, then springs back to rest.

Motion
PlumPro
4021 •••• 0091
Ryan B.
09/29

Playground

Tweak the props, the preview and the code follow.

Annual report
2026 in review
Props
10
1.02
900
import { Tilt } from "@/components/ui/tilt"

<Tilt className="rounded-2xl">
  <Card>…</Card>
</Tilt>

Installation

npx @plumsydev/plum-ui add tilt

Usage

import { Tilt } from "@/components/ui/tilt"
<Tilt max={10} className="rounded-2xl">
  <Card>…</Card>
</Tilt>

Examples

Product card

Children with translateZ float above the surface.

Orb Speaker

Graphite · 360° sound

$249

Angle & glare

Adjust the maximum angle and toggle the glare.

12°max tilt

API Reference

Tilt

Extends motion.div.

PropTypeDefault
max

Maximum tilt in degrees.

number10
scale

Scale while hovered.

number1.02
glare

Render a light reflection that follows the cursor.

booleantrue
perspective

CSS perspective in px.

number900

Notes

  • Works with touch while dragging a finger across the card, and keeps vertical page scrolling.
  • Disabled with reduced motion.
PreviousTextareaNextTimeline