Perspective Hover
3D perspective tilt effect on hover with depth layers.
Main Features of Perspective Hover
How to Use Perspective Hover in Next.js
Installation Guide for Perspective Hover
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 |
Related Components
When to Use
Ideal for artistic portfolios, luxury brands, and interactive web applications that want to emphasize depth. Use this React component to create a 3D 'look around' effect where different layers of text tilt at different speeds based on mouse movement.
Best Practices
Maintain consistent spacing within your design system by ensuring the `depthTranslateZ` layers don't overlap too much. Follow React best practices by keeping the `perspectiveValue` high enough (e.g., 1000px) to avoid extreme pixel distortion. Optimize for performance by using CSS-based 3D transforms.
Why This Component Matters in Modern UI Development
Parallax depth adds a level of sophistication and interactivity that static text lacks. This reusable React component gives developers a robust way to implement complex 3D tilt math, helping you build a real-world application architecture that feels deep and immersive.
Frequently Asked Questions
QHow many depth layers can I add?
The component is optimized for 2-3 layers for the best performance. Too many layers can become heavy on the browser's 3D engine.
QDoes it follow the mouse or scroll?
This specific component is mouse-based for a reactive, 'holographic' feel on hover.
QCan I use different colors for the depth layers?
Yes, the `depthTextColor` prop allows you to create shadows, neon glows, or ghosted text effects behind the main layer.