CardsNew
Tilt
A card tilts in 3D after the cursor and springs back when it leaves.
Customize
glareColor
glowColor
edgeColor
Based on Tilt (MIT license) · Terms of use
More in Pro
View allProps
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The card or image that tilts. |
| rotationFactor | number | 15 | Maximum tilt in degrees. |
| isRevese | boolean | false | Tilt away from the cursor instead of toward it. |
| springOptions | SpringOptions | — | Motion spring options: softness and speed of the tilt. |
| style | MotionStyle | — | Wrapper styles. |
| className | string | — | Tailwind classes for the wrapper. |
| glareColor | string | "rgba(255,255,255,0.25)" | Glare that follows the cursor across the card. |
| glowColor | string | "rgba(255,255,255,0.08)" | Soft glow under the card. |
| edgeColor | string | "rgba(255,255,255,0.1)" | Thin rim along the edge. It follows the element's rounded corners. |
Dependencies
1 required package
npm install motion