---
title: "Line Text Reveal — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Pavlo Zhydkykh · Text. Overview for Line Text Reveal Component LineTextReveal animates any heading line by line."
canonical: "https://framer.elliotli.dev/component/line-text-reveal"
---

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

# Line Text Reveal

Line-by-line text reveal animation

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

![Line Text Reveal preview image 1](https://framer.elliotli.dev/og/component/line-text-reveal/44c6091c3e224c76/1600x1200.jpg)

## Summary

Overview for Line Text Reveal Component LineTextReveal animates any heading line by line.

## Description

## **Overview for Line Text Reveal Component**

LineTextReveal animates any heading line by line. A solid color bar wipes in to cover each line, then slides off to reveal the text underneath — and every line fires in sequence with a stagger you control. Crisp, GPU-friendly, and works on a single word or a full multi-line headline.

### **Features**

-   Line-by-line sequential reveal with adjustable stagger
    
-   Two-phase bar wipe (covers, then uncovers) for a clean, intentional look
    
-   Plays when scrolled into view, or on page load
    
-   Left-to-right or right-to-left direction
    
-   Full typography control via the native Font picker
    
-   Independent colors for text, bar, and background
    
-   Tune duration, start delay, easing, and line spacing
    
-   Descenders never clip — tall, short, and accented words render fully
    

### **Property controls**

-   **Text** — type your copy; each new line animates in sequence
    
-   **Font** — family, weight, size, line height, letter spacing
    
-   **Text / Bar / Background** — independent colors
    
-   **Align** — left, center, right
    
-   **Direction** — left → right or right → left
    
-   **Trigger** — when in view or on load, replay once or every view
    
-   **Duration · Stagger · Start delay · Easing · Line gap**
    

### **How to use**

1.  Drag LineTextReveal onto the canvas.
    
2.  Type your headline in the Text field — press Enter for each new line.
    
3.  Pick your font and colors, then set duration and stagger to taste.
    
4.  Preview to see it play. On the canvas it shows the final revealed state, so your layout stays readable.
    

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

-   All · #5932

## Details

- **Author**: Pavlo Zhydkykh
- **Price**: $5.00
- **Published**: 2026-06-17
- **Updated**: 2026-06-17
- **Added**: 2026-06-17
- **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