Special/TiltCard

TiltCard

True CSS 3D perspective tilt with a moving specular light highlight. The shine follows your cursor like a physical light source hitting a glossy surface — spring-physics snap-back on mouse leave.

import { TiltCard } from "@animui/ui"

Basic

Hover me

Move your cursor around to tilt in 3D. The specular highlight follows your cursor like a real light source.

No shine

No shine variant

Tilt only, no specular highlight.

How it works

rotateX and rotateY are driven by spring motion values mapped from normalized mouse position (-0.5 to +0.5). The shine uses a radial-gradient with its center at the cursor position, updated via motion value transforms — zero DOM writes outside the animation frame.

Props

Prop	Type	Default	Description
`maxTilt`	`number`	`14`	Maximum tilt angle in degrees.
`scale`	`number`	`1.04`	Scale multiplier on hover.
`perspective`	`number`	`900`	CSS perspective value in pixels.
`shine`	`boolean`	`true`	Show a specular light highlight that follows the cursor.
`shineIntensity`	`number`	`0.18`	Opacity of the shine overlay (0–1).
`springStiffness`	`number`	`340`	Spring stiffness for the tilt physics.
`springDamping`	`number`	`30`	Spring damping for the tilt physics.
`className`	`string`	—	Applied to the inner motion div.