3D tilt that follows the cursor, with a glare highlight that tracks the pointer.
npx shadcn@latest add https://hyperblur.dev/r/tilt-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/tilt-card.tsx.
import { TiltCard } from "@/components/hyperblur/tilt-card"
<TiltCard className="rounded-xl"><div>...</div></TiltCard>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Card content. |
| maxTilt | number | 10 | Maximum tilt in degrees. |
| glare | boolean | true | Show a glare highlight that follows the cursor. |
| scale | number | 1.02 | Scale while hovered. |
| perspective | number | 800 | Perspective distance in pixels. |