Tilt Card
An interactive 3D card that tilts on mouse hover.
Preview
Interactive Preview
3D Perspective
This card reacts to your mouse movement with realistic depth.
Installation
Usage
tsx
import { TiltCard } from "@/components/ui/tilt-card"
export default function Demo() {
return (
<TiltCard rotateXMax={20} rotateYMax={20}>
<h3 className="text-2xl font-bold">Interactive Tilt</h3>
<p className="text-muted-foreground">Hover to experience 3D depth.</p>
</TiltCard>
)
}Dependencies
framer-motion
Props
| Prop | Type | Default |
|---|---|---|
| rotateXMax | number | 15 |
| rotateYMax | number | 15 |