Resources

3D Rug Effect for Framer

View demo

Copy component

Remix project

Copy component

Remix project

Resources

3D Rug Effect for 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

How to make your first $1,000 with Framer

Free training

How to make your first $1,000 with Framer

Free training

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

Nandi

,

Emanuele

,

Prianca

,

and

Paola

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.

Learn to make your first $1,000 with Framer from zero.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Free training

Nandi portrait's background

Learn to make your first $1,000 with Framer from zero.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Free training

Nandi portrait's background

Learn to make your first $1,000 with Framer from zero.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Free training

Nandi portrait's background

More resources

More resources

View all

  • Music app playlist created screen with artist avatars

    Playlist Generation Circular Animation in Framer

    Component

    Music app playlist created screen with artist avatars

    Playlist Generation Circular Animation in Framer

    Component

  • Customer testimonials section with review letter card

    3D Letter Testimonials in Framer

    Component

    Customer testimonials section with review letter card

    3D Letter Testimonials in Framer

    Component