Resources

Interactive 3D Image Distortion in Framer

View demo

Copy component

Remix project

Copy component

Remix project

Resources

Interactive 3D Image Distortion in Framer

View demo

Copy component

Remix project

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Interactive 3D Image Distortion in Framer

This is an interactive 3D image distortion component for Framer, based on the Manychat’s website. It enhances your visuals with depth and motion that respond to cursor movement. Simply drop it into your project, customize the settings, and turn your images to 3D with an immersive distortion effect.

image of Nandi Muzsik
profile image of Emanuele
image of Prianca S.

Created by

Nandi

,

,

and

3D image distortion effect in Framer showing a stylized figure on red organic shapes with bold blue background and text
3D image distortion effect in Framer showing a stylized figure on red organic shapes with bold blue background and text
3D image distortion effect in Framer showing a stylized figure on red organic shapes with bold blue background and text

About the resource

To use the 3D image distortion component in Framer, upload any image you want to distort. You can adjust the scale to control the depth of distortion, fine-tune the smoothing for softer or sharper movement, and choose whether the image reacts opposite to or follows the cursor. The movement property lets you decide how much your image shifts with interaction, giving you full control over how playful or immersive the distortion feels.

About the resource

To use the 3D image distortion component in Framer, upload any image you want to distort. You can adjust the scale to control the depth of distortion, fine-tune the smoothing for softer or sharper movement, and choose whether the image reacts opposite to or follows the cursor. The movement property lets you decide how much your image shifts with interaction, giving you full control over how playful or immersive the distortion feels.

About the resource

To use the 3D image distortion component in Framer, upload any image you want to distort. You can adjust the scale to control the depth of distortion, fine-tune the smoothing for softer or sharper movement, and choose whether the image reacts opposite to or follows the cursor. The movement property lets you decide how much your image shifts with interaction, giving you full control over how playful or immersive the distortion feels.

Framer 3D Image Distortion component settings panel with controls for image, scale, smoothing, cursor direction, and movement, using sliders and toggles

The properties of interactive 3D image distortion component.

Framer 3D Image Distortion component settings panel with controls for image, scale, smoothing, cursor direction, and movement, using sliders and toggles

The properties of interactive 3D image distortion component.

Framer 3D Image Distortion component settings panel with controls for image, scale, smoothing, cursor direction, and movement, using sliders and toggles

The properties of interactive 3D image distortion component.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Nandi portrait's background
Nandi's portrait

More resources

More resources

View all

  • Let’s Talk CTA with bold arrow and THE LINE text

    Text Shutter Animation in Framer

    Component

    Let’s Talk CTA with bold arrow and THE LINE text

    Text Shutter Animation in Framer

    Component

    Let’s Talk CTA with bold arrow and THE LINE text

    Text Shutter Animation in Framer

    Component

  • Interactive 3D card flip gallery with modern visuals

    3D Projects Card Flip in Framer

    Component

    Interactive 3D card flip gallery with modern visuals

    3D Projects Card Flip in Framer

    Component

    Interactive 3D card flip gallery with modern visuals

    3D Projects Card Flip in Framer

    Component