A remarkable shader-based component that transforms any image into an interactive 3D parallax experience that responds to mouse movement. Create depth and dimension in your website with zero coding required.

✨ Key Features

• True 3D Effect: Transforms flat images into dynamic 3D experiences
• Depth-Based Movement: Closer objects move faster, distant objects move slower
• High Performance: Built with WebGL shaders for smooth, efficient animations
• No Dependencies: Lightweight implementation with no external libraries
• Edit Mode Toggle: Improve Framer editor performance when not actively editing

📝 Description

The Image 3D Parallax component uses advanced WebGL shaders to create a realistic depth effect that responds to mouse movement. By utilizing a depth map image (which can be easily generated for free), the component calculates how different parts of your image should move - creating a captivating 3D effect that adds dimension and interactivity to your designs.

This component is perfect for creating engaging hero sections, product showcases, or any area where you want to add an extra layer of visual interest. The parallax effect creates a sense of depth that makes your images feel alive and responsive to user interaction.

💡 Pro Tips

1. This effect works best in hero sections or full-width containers where users have more space to experience the parallax movement
2. Set all layers above the image to pointer-events: none to ensure the component can properly track mouse movements
3. Generate depth maps for free using the provided Hugging Face model link
4. Adjust the Parallax Intensity slider to find the perfect balance between subtle and dramatic/distorted movement
5. The Canvas Scale setting helps prevent distorted edges - increase this value if you notice any unwanted border effects
6. Toggle Edit Mode to "No" when not actively configuring the component to improve Framer editor performance

📚 Tutorial

Watch our detailed YouTube tutorial to learn how to get the most out of this component, including tips on creating effective depth maps and optimizing the 3D effect for your specific images.

This component brings professional-grade 3D effects to your Framer projects without requiring any technical knowledge, while maintaining excellent performance and visual quality that will impress your visitors.