Image 3D hover
18 Nov, 2025
Image 3D Hover
Minimal Framer component that adds smooth 3D tilt and depth based on cursor movement.
About
Bring your visuals to life with 3D Tilt Image, a minimal yet powerful Framer component that reacts fluidly to cursor position. The image rotates along X and Y axes, scales gently for depth, and smoothly resets when the cursor moves away creating a natural, immersive 3D interaction. Perfect for portfolios, product showcases, or hero sections, this component enhances visual storytelling with subtle motion that feels elegant and engaging.
Image component customization
Features
Realistic 3D tilt – Reacts to cursor position with smooth X & Y rotation.
Depth scaling – Adds gentle perspective using Z-axis intensity.
Global hover detection – Responds even when cursor is near the image, not just directly over it.
Performance optimized – Pure motion-based animation without heavy glow or filters.
Customizable Property Controls
Image: Upload any image.
X / Y Intensity: Control how much the image tilts on hover.
Z Intensity: Adjust depth scaling for more or less pop.
Hover Distance: Define proximity sensitivity.
Smoothness: Control transition duration.
Radius: Customize corner rounding.
