Tilt cardPro
A card that tilts in 3D toward the pointer with a moving glare.
LODEPRO
•••• 7718
ADA LOVELACE · 08/28
When to use
- Product shots, cards and credit-card visuals on marketing pages.
When not to use
- Cards containing forms.
Installation
Usage
Import it from @/components/ui/tilt-card after installing.
example.tsx
import { TiltCard } from "@/components/ui/tilt-card";
export function Card() {
return <TiltCard className="rounded-2xl p-8">Lode Pro</TiltCard>;
}API reference
TiltCard
Tilts toward the pointer in 3D with a moving glare.
| Prop | Type | Default | Description |
|---|---|---|---|
| max | number | 10 | Max tilt in degrees. |
Accessibility
- Flat under reduced motion; the glare is aria-hidden.
Motion
- Spring tilt and glare follow the pointer; reset on leave.
Responsive behavior
- Static on touch.
Performance
- Motion values; no re-renders.
Notes for AI
- Keep max under 15.
This page as Markdown, for assistants and coding agents:
/components/tilt-card/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt