---
title: "Advanced Text Reveal — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Kunal Bats · Text. ✨ Text Reveal with Media & Gradients Bring your typography to life with animated word-by-word reveals, dynamic gradients, and inline media embeds."
canonical: "https://framer.elliotli.dev/component/advanced-text-reveal"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Advanced Text Reveal

# Advanced Text Reveal

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

![Advanced Text Reveal preview image 1](https://framer.elliotli.dev/og/component/advanced-text-reveal/e2b13b82dba84092/1600x1200.jpg)

## Summary

✨ Text Reveal with Media & Gradients Bring your typography to life with animated word-by-word reveals, dynamic gradients, and inline media embeds.

## Description

## ✨ Text Reveal with Media & Gradients

Bring your typography to life with **animated word-by-word reveals**, **dynamic gradients**, and **inline media embeds**. Perfect for hero sections, storytelling, or any scroll-based interaction that needs a wow factor.

🔥 Key Features

-   **Word-by-Word Scroll Reveal**Each word fades in smoothly as you scroll, creating cinematic storytelling moments.
    
-   **Custom Gradients Per Word**Apply unique **multi-color animated gradients** to specific words. Control **angle, speed, and color stops** for maximum flexibility.
    
-   **SVG Masking Shapes for Media**Insert **images or videos inline with text** and mask them into over **15 creative shapes**:
    
    -   Circle, Rounded, Square
        
    -   Diamond, Hexagon, Octagon, Pentagon
        
    -   Star, Triangle, Heart
        
    -   Trapezoid, Parallelogram, Cross
        
    -   Cloud, Wave, Infinity, Flower
        
-   **Video Upload Support**Drop in an **MP4, MOV, or WebM video** to seamlessly replace words with live motion content.
    
-   **Dynamic Line Height Control**Maintain full typography control with adjustable line-height and font settings.
    
-   **Gradient Motion Animation**Gradients automatically animate across words with smooth shifting for a modern, energetic feel.
    

⚙️ Full Customization

-   Choose which words are plain, gradient, or media.
    
-   Assign multiple gradient styles to different words.
    
-   Control scroll timing with **reveal start & end offsets**.
    
-   Fine-tune **font, size, color, and spacing** directly in Framer.
    

**Understanding the Properties & How They Work**

1.  **Text-**The text you want to animate. Each word will fade in individually as you scroll.
    
2.  **Font-** Choose any font, size, and weight from your Framer font settings to match your project’s style.
    
3.  **Text Color-**Sets the default color for words that don’t have gradient effects applied.
    
4.  **Line Height-**Adjusts the vertical spacing between lines of text. Helps fine-tune text layout and readability.
    
5.  **Reveal Start-**Controls **when** the word animation begins relative to scroll position.
    
    -   Higher values (e.g. 0.9) mean the reveal starts **later** — closer to the bottom of the viewport.
        
    -   Lower values (e.g. 0.5) mean it starts **earlier** — higher up on the screen.
        
6.  **Reveal End-** Controls **when** the word animation finishes.
    
    -   Lower values (e.g. 0.1) make the animation complete **faster**.
        
    -   Higher values (e.g. 0.4) make the reveal **slower and longer** during scroll.
        
7.  **Gradients-** Assign animated gradients to specific words.
    
    -   **Word Index:** Choose which word (starting from 0) gets the gradient.
        
    -   **Colors:** Add multiple colors for the gradient transition.
        
    -   **Angle:** Set the gradient direction (0–360°).
        
    -   **Speed:** Control how fast the gradient shifts across the word.
        
8.  **Media-** Insert images or videos inline with your text. Perfect for adding logos, icons, or short motion clips.
    
    -   **Image / Video:** Upload your media (supports MP4, MOV, or WebM).
        
    -   **Word Index:** Choose after which word the media appears.
        
    -   **Shape:** Pick from 15+ creative masking shapes like Circle, Star, Heart, Cloud, etc.
        
    -   **Rotation:** Slightly rotate the media for a more dynamic look.
        
    -   **Width & Height:** Adjust the media size.
        
    -   **Roundness:** Control corner roundness when using the “Rounded” shape.
        

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

-   All · #9049

## Details

- **Author**: Kunal Bats
- **Price**: $6.00
- **Published**: 2025-10-08
- **Updated**: 2025-12-29
- **Added**: 2025-10-01
- **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