PerspectiveCard

A card that tilts gently toward the pointer, with an optional glare.

Gentle tilt

Capped at 8°, off for touch and for reduced motion.

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/perspective-card.json

React
import PerspectiveCard from "@/components/fx/perspective-card"

<PerspectiveCard className="rounded-2xl border p-6">…</PerspectiveCard>

Tilt is capped (8° by default) to avoid vestibular discomfort.
Touch input never tilts, so scrolling past the card on mobile stays still.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) disables the tilt.
The glare is aria-hidden.

Prop	Type	Default	Description
maxTilt	number	8	Maximum tilt in degrees.
glare	boolean	true	Show a soft glare.
...props	ComponentProps<'div'>	—	Passed to the card.