Tilt Card
3D perspective card with mouse-tracking tilt and holographic glare.
Product Card
Hover to see the 3D tilt and holographic glare effect in action.
High Tilt (25°)
More dramatic perspective rotation for immersive feel.
No Glare
Tilt effect without the holographic glare overlay.
Installation
npx shadcn@latest add https://wise-ui.com/r/tilt-card.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| tiltMax | number | 15 | Maximum tilt angle in degrees. |
| glare | boolean | true | Show a glare overlay that follows the mouse. |
| glareOpacity | number | 0.15 | Peak opacity of the glare effect. |
| scale | number | 1.02 | Scale factor on hover. |
| perspective | number | 1000 | CSS perspective value in pixels. |
| children | React.ReactNode | - | Card content. |
| className | string | - | Additional classes for the card container. |