Tilt
3D tilt effect that responds to mouse movement, enhancing UI elements with a dynamic depth effect, customizable rotation factors and spring options.
Examples
Basic Tilt Card
Ghost in the Shell
Kôkaku kidôtai
Tilt with Spotlight
Example of the Spotlight component used with the Tilt component.
2001: A Space Odyssey
Stanley Kubrick
Installation
npx shadcn add "https://motion-primitives.com/c/tilt.json"Component API
Border Trail
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | Additional CSS classes for styling the tilt. | |
| style | MotionStyle | Additional CSS classes for styling the tilt. | |
| rotationFactor | number | 15 | Controls the maximum rotation angle in degrees. |
| isRevese | boolean | false | Reverses the tilt effect's rotation direction. |
| springOptions | SpringOptions | Spring options for the tilt effect. |
Credits
Initiated by @AFPedreros