Tilt Card
A 3D interactive card component that responds to mouse movement with smooth tilt and elevation effects.
Examples
Tilt Card Basic
Basic ussage using the default values.
Tilt Card Component
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed, cumque nostrum minus quod perspiciatis aspernatur.
Tilt Card CTA
Uses custom tilt range and depth values.
Upgrade to Pro
Get unlimited access to all features and premium support.
Installation
npx shadcn@latest add "https://ui.rechesoares.com/registry/tilt-card.json"
Component Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| children | ReactNode | - | Yes | Content inside the tilt card. |
| range | number | 32 | No | Controls the tilt range. |
| depth | number | 80 | No | Controls the z-elevation on hover. |
| containerClassName | string | - | No | Optional class for styling the card container. |