3D Rug Effect for Framer

Copy component

3D Rug Effect for Framer

Copy component

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

3D Rug Effect for Framer

This is a 3D Rug Effect recreated in Framer from Paola’s original work. It’s a text displacement effect that creates a layered 3D illusion, making your typography appear to shift and ripple like fabric. Feel free to copy the component into your own project.

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

Created by

,

,

and

3D text graphic reading I Love Framer with wavy distortion effect
3D text graphic reading I Love Framer with wavy distortion effect
3D text graphic reading I Love Framer with wavy distortion effect

About the resource

To use the 3D Rug Effect component, start by uploading your main image. Then upload a low-opacity, blurred version of the same image in the shadow upload field to create depth. You can toggle orbit on or off for rotational motion, and adjust zoom to control how close or far the image appears. Use rotate X, rotate Y, and rotate Z to tilt the image along different axes. Fine-tune the radius and bump values to enhance the 3D displacement, and customize the BG to set the perfect background for your effect.

About the resource

To use the 3D Rug Effect component, start by uploading your main image. Then upload a low-opacity, blurred version of the same image in the shadow upload field to create depth. You can toggle orbit on or off for rotational motion, and adjust zoom to control how close or far the image appears. Use rotate X, rotate Y, and rotate Z to tilt the image along different axes. Fine-tune the radius and bump values to enhance the 3D displacement, and customize the BG to set the perfect background for your effect.

About the resource

To use the 3D Rug Effect component, start by uploading your main image. Then upload a low-opacity, blurred version of the same image in the shadow upload field to create depth. You can toggle orbit on or off for rotational motion, and adjust zoom to control how close or far the image appears. Use rotate X, rotate Y, and rotate Z to tilt the image along different axes. Fine-tune the radius and bump values to enhance the 3D displacement, and customize the BG to set the perfect background for your effect.

3D Rug Text component settings panel with rotation and zoom controls in Framer

The properties of the 3D rug text effect in Framer.

3D Rug Text component settings panel with rotation and zoom controls in Framer

The properties of the 3D rug text effect in Framer.

3D Rug Text component settings panel with rotation and zoom controls in Framer

The properties of the 3D rug text effect in Framer.

Framer Navigator

Learn the fundamentals of Framer for free.

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

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.

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.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Dark UI buttons labeled Save, Copy, and menu with cursor click

    Show More Micro Interaction in Framer

    Component

    Dark UI buttons labeled Save, Copy, and menu with cursor click

    Show More Micro Interaction in Framer

    Component

    Dark UI buttons labeled Save, Copy, and menu with cursor click

    Show More Micro Interaction in Framer

    Component

  • Interactive Wave Background component with wavy black and white lines

    Interactive Wave Background in Framer

    Component

    Interactive Wave Background component with wavy black and white lines

    Interactive Wave Background in Framer

    Component

    Interactive Wave Background component with wavy black and white lines

    Interactive Wave Background in Framer

    Component