Perspective Hover
3D perspective tilt effect on hover with depth layers.
Refresh preview
Share Component
Copy CLI command
Props
| Property | Type | Default | Description |
|---|---|---|---|
| text | string | Depth | Text to display |
| maxRotation | number | 17.5 | Maximum rotation angle in degrees for the tilt effect |
When to Use
Ideal for artistic portfolios, luxury brands, and interactive apps that want to emphasize depth and dimension.
Best Practices
Keep maxRotation under 25° to avoid extreme distortion. Works best as a single, short, bold word.
Why This Component Matters
Parallax depth adds sophistication that static text simply cannot match.
FAQ
QDoes it follow the mouse or scroll?
Mouse-based for a reactive, holographic feel on hover.
QHow many depth layers can I add?
Optimized for 2-3 layers for best performance.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
View Component
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
View Component
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
View Component