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

New

New

New

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

  • Clean orange folder icon with documents and cursor pointer

    Clean Folder Animation in Framer

    Component

    Clean orange folder icon with documents and cursor pointer

    Clean Folder Animation in Framer

    Component

    Clean orange folder icon with documents and cursor pointer

    Clean Folder Animation in Framer

    Component

  • Mobile Drawer UI with call-to-action buttons to open drawer and copy Framer component

    Mobile Drawer Component for Framer

    Component

    Mobile Drawer UI with call-to-action buttons to open drawer and copy Framer component

    Mobile Drawer Component for Framer

    Component

    Mobile Drawer UI with call-to-action buttons to open drawer and copy Framer component

    Mobile Drawer Component for Framer

    Component