Tilt creates a parallax 3D tilt effect that responds to mouse movement. Wrap any element to give it an interactive depth effect with configurable rotation limits and perspective. An optional brightness adjustment adds a subtle lighting cue as the card tilts.
Live Demo
Hover over the cards and move your mouse across them to see the 3D tilt effect.
Default
Rotation
Brightness
Perspective
Combination
Props
| Prop | Type | Default | Description |
|---|---|---|---|
maxRotation | number | 10 | Maximum rotation angle in degrees |
perspective | number | 600 | CSS perspective value in pixels (lower = more dramatic) |
setBrightness | boolean | false | Adjust brightness based on mouse Y position |
class | string | — | CSS class forwarded to the wrapper element |
Open in Playground
Tune all parameters interactively in the Tilt playground.