Tilt Card
Free
A card that tilts in 3D toward the pointer with a moving glare, then springs back when the pointer leaves.
RK
Ren Kaito
Level designer · Osaka
24
Projects
3.1k
Followers
4.9
Rating
Customize
12°
1.03
Glare
#f4ede3
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/tilt-card.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/tilt-card.tsx.
Usage
import { TiltCard } from "@/components/ui/tilt-card";
<TiltCard maxTilt={12} glare className="w-72">
<div className="p-6">Ren Kaito, level designer</div>
</TiltCard>Props
6 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Card content. |
| maxTilt | number | 12 | Largest tilt on each axis, in degrees. |
| glare | boolean | true | Show a soft highlight that follows the pointer. |
| glareColor | string | "#f4ede3" | Color of the highlight. |
| scale | number | 1.03 | Scale while the pointer is over the card. |
| className | string | — | Extra classes for the wrapper, such as its width. |
Dependencies: motion