Animations & Motion
Perspective Hover
3D perspective tilt effect on hover with depth layers.
textanimationperspective3dhover
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | Depth | Text to display |
backgroundColor | string | bg-zinc-950 | Background color of the component |
perspectiveValue | string | perspective-1000 | CSS perspective value |
initialRotateX | number | 17.5 | Initial X rotation in degrees |
initialRotateY | number | 17.5 | Initial Y rotation in degrees |
depthTranslateZ1 | number | 75 | Z translation for first depth layer |
depthTranslateZ2 | number | 150 | Z translation for second depth layer |
depthTextColor | string | text-zinc-800 | Color of depth text |
frontGradientFrom | string | from-indigo-300 | Front gradient start color |
frontGradientVia | string | via-white | Front gradient middle color |
frontGradientTo | string | to-indigo-300 | Front gradient end color |
fontSize | string | text-7xl md:text-9xl | Font size of the text |
fontWeight | string | font-black | Font weight of the text |
tracking | string | tracking-tight | Letter spacing |
className | string | Additional CSS classes |