Tilted Card
Customize TiltedCard
Rotate Amplitude12°
Scale on Hover1.2x
Props
| Property | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Required | Content to display inside the tilted card |
| tiltAngle | number | 15 | Maximum tilt angle in degrees |
| perspective | number | 1000 | Perspective value for 3D effect |
| scale | number | 1.05 | Scale factor on hover |
| transitionSpeed | number | 400 | Transition speed in milliseconds |
| glowIntensity | number | 0.5 | Intensity of glow effect (0-1) |
| glowColor | string | rgba(139, 92, 246, 0.3) | Color of the glow effect |
| enableGlow | boolean | | Enable or disable glow effect |
| enableShadow | boolean | | Enable or disable shadow effect |
| shadowColor | string | rgba(0, 0, 0, 0.3) | Color of the shadow effect |
| className | string | custom-tilted-card | Additional CSS class names for styling |
| onTilt | function | () => {} | Callback function when card is tilted |
| onHover | function | () => {} | Callback function when card is hovered |
| onLeave | function | () => {} | Callback function when mouse leaves card |
Dependencies
ogl
Created with ❤️ by Cybershoora