Framer component

Image 3D Parallax

Create interactive 3D parallax effect of any image where elements respond to mouse movement based on their depth.

Move Your Mouse

Closer objects move faster, farther objects move slower, and the farthest objects don't move at all.

Free

+ Lifetime Updates

Enjoying these free components? Donate to fuel future creations!

image
3d
parallax
hover effect
Custom Code Component

Component Details

Instructions

Copy and paste the component into your Framer project, then adjust the property controls in the right panel to customize and configure it for your website.

About

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.

Config Main Bachoff Studio • Web Design and Development • Framer Templates, Components and Code

Need a custom Framer component that goes beyond what's possible on the canvas? We'll create the custom code solution for you! Sky is the limit. Request a custom component here.

Bachoff Framer Components

You may also like...

Preview image only. Click to try component.

pro
3D Laptop Mockup Bachoff Studio • Web Design and Development • Framer Templates, Components and Code

3D Laptop Mockup

Transform your designs into stunning 3D presentations with this ultra-realistic MacBook mockup for Framer. Features cinematic animations, real-time interactions, and professional-grade rendering that will make your work stand out.

20

Preview image only. Click to try component.

NEW

free
Jupiter Swap Integration Bachoff Studio • Web Design and Development • Framer Templates, Components and Code

Jupiter Swap Integration

Instantly add Solana token swapping to your Framer project with this no-code Jupiter DEX integration. Simply copy and paste to enable professional crypto trading functionality with customizable UI, multiple token pairs, and flexible swap modes.

Preview image only. Click to try component.

elite
Meme Generator Bachoff Studio • Web Design and Development • Framer Templates, Components and Code

Meme Generator

Create, customize, and share memes with this powerful Meme Generator for Framer. Features drag-and-drop composition, unlimited text layers, custom uploads, and high-res exports. Perfect for NFT projects, crypto communities, and DAOs.

99

FAQ

Frequently Asked Questions

Get answers to common questions about the Bachoff custom code Framer components.

What are custom code Framer components?

Custom code components are advanced elements built for Framer that enhance its default capabilities, allowing designers to implement features like 3D mockups, generators, and dynamic charts.

Do I need coding knowledge to use custom code components?

No coding knowledge is required! Our components are designed to be plug-and-play, but they also allow for further customization if you have coding skills.

What types of components do you offer?

We offer a variety of components, including 3D laptop mockups, PFP and MEME generators, charts (line, bar, pie, donut), sliders, calculators, and UI elements like cards and compare cards.

How do I install a custom code component in Framer?

Installation is straightforward! Usually it's just a matter of copying and pasting the code into your Framer project. You'll receive step-by-step instructions with each component, including how to integrate it into your Framer project.

Are the components compatible with all Framer projects?

Yes, our components are fully compatible with any Framer project. If you face any compatibility issues, our team is here to help.

What's the difference between free, pro, and elite components?

Free components offer basic functionality, while pro and elite components include more advanced features and customization options, catering to professional and enterprise-level needs.

Can I request a custom-built component?

Absolutely! We specialize in creating custom solutions tailored to your specific needs. Contact us for a quote and delivery timeline.

Sign up for the newsletter_

Get notifications about the latest Framer components or templates from BACHOFF Studio directly to your inbox.