---
title: "Depth Text Motion — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Edi Priatama · Text. Depth Text Motion is an interactive 3D typography component that creates realistic depth and lighting effects using dynamic rotation,…"
canonical: "https://framer.elliotli.dev/component/depth-text-motion"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Depth Text Motion

# Depth Text Motion

interactive 3D typography

[View on Framer](https://framer.com/marketplace/components/depth-text-motion/?via=elliot-li)

![Depth Text Motion preview image 1](https://framer.elliotli.dev/og/component/depth-text-motion/dbfc120d8d810b94/1600x1200.jpg)

## Summary

Depth Text Motion is an interactive 3D typography component that creates realistic depth and lighting effects using dynamic rotation, shadow movement, and highlight gradients.

## Description

Depth Text Motion is an interactive 3D typography component that creates realistic depth and lighting effects using dynamic rotation, shadow movement, and highlight gradients. The text tilts in 3D space either automatically or based on cursor movement, delivering a smooth parallax-style experience with immersive visual feedback.

**Customize Options**

-   **Mode** : Choose between _Automatic_ rotation or _Hover_ interaction
    
-   **Text** : Set the headline content
    
-   **Font** : Fully customizable typography settings
    
-   **Color** : Main text color
    
-   **Background** : Background color behind the text
    
-   **Tilt** : Control maximum 3D tilt intensity
    
-   **Depth** : Adjust perspective depth for stronger or softer 3D effect
    
-   **Shadow Blur** : Control softness of the dynamic shadow
    
-   **Shadow Color** : Customize shadow tone
    
-   **Highlight** : Adjust highlight strength (lighting intensity)
    
-   **Speed** : Control automatic rotation speed
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #7811

## Details

- **Author**: Edi Priatama
- **Price**: $5.00
- **Published**: 2026-02-20
- **Updated**: 2026-10-25
- **Added**: 2026-02-19
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing