3D Tilt Parallax Card
Cards that literally tilt on their X and Y axes in response to mouse movement. Internal elements (like a logo or image) often move at a faster rate to simulate true 3D depth.
Live Demo
What It Is
Cards that literally tilt on their X and Y axes in response to mouse movement. Internal elements (like a logo or image) often move at a faster rate to simulate true 3D depth.
✓When to Use
- Physical product representations (e.g. Credit Cards)
- Premium feature show-offs
✕When NOT to Use
- Cards that contain heavy interaction like form inputs or carousels
Configuration Tips
- 01Use Framer Motion's useMouse, map coordinates to rotationX and rotationY (-15deg to 15deg), and apply translateZ to child elements.
You've Seen It In
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Create a card that tilts in 3D space based on mouse position. Add a transform: translateZ(50px) to the text inside so it seems to float above the card background.
Code Example (Tailwind CSS)
export function TiltParallaxCardDemo() {}Related Effects
Hover Lift Effect
A card or button smoothly translates upwards by a few pixels and increases its shadow cast, creating the illusion of moving closer to the user on hover.
Spotlight Glare Card
A glossy card element where a soft, radial gradient spotlight perfectly tracks the user's mouse position over the surface, creating a physical "glare" effect.