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
Tilt with Spotlight
Example of the Spotlight component used with the Tilt component.
Installation
npx shadcn@latest add https://ui.ndekocode.dev/r/motion-tilt.jsonComponent 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