---
title: "TextRevealRectangles — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Oleksandr Demydov · Text. Animated Text Reveal on Scroll"
canonical: "https://framer.elliotli.dev/component/textrevealrectangles"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/TextRevealRectangles

# TextRevealRectangles

Animated Text Reveal on Scroll

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

![TextRevealRectangles preview image 1](https://framer.elliotli.dev/og/component/textrevealrectangles/b213c5bb7fccbda9/1600x1200.jpg)

## Summary

Animated Text Reveal on Scroll

## Description

TextReveal makes text appear line by line as colored rectangles sweep across each line, revealing the content underneath. The effect triggers automatically when the component scrolls into view — or bind it to scroll progress for full cinematic control.

Each line gets its own rectangle with a randomized width, creating an organic, staggered feel that avoids the robotic uniformity of typical reveal animations. Optional width growth physics make rectangles pulse wider mid-sweep for added dynamism.

**Key Features**

Two trigger modes: viewport entry (Intersection Observer) or scroll-driven reveal tied to a parent section. In scroll mode, make the component sticky and lines reveal progressively as the user scrolls — perfect for storytelling sections and landing page heroes.

Keep Background mode transforms the effect into a permanent text highlighter — rectangles stretch to full line width and stay behind the text as colored underlay.

Repeat mode replays the animation at a configurable interval, ideal for looping hero sections or attention-grabbing CTAs.

Canvas-safe: the component shows plain text in the Framer editor with no animation, so it never interferes with your design workflow.

**Customization**

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-lujmcmje-TCILrokdIer6aHN8MbG4LcZtrL3fL9)

Typography: native Framer font picker with full control over family, size, weight, line height, and letter spacing. Text color and alignment are separate controls.

Sweep animation: color, min/max rectangle width (% of line), duration, line-by-line stagger delay, and viewport trigger threshold.

Physics: toggle random width growth on or off, with adjustable intensity.

Behavior: keep background as highlight, enable repeat with custom interval, switch to scroll-driven mode with optional CSS selector targeting.

**Best For**

Hero headlines and landing page statements. Scroll-driven storytelling sections. Highlighted quotes and key metrics. Any text block that deserves more than a simple fade-in.

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

-   All · #9644

## Details

- **Author**: Oleksandr Demydov
- **Price**: $5.00
- **Published**: 2026-04-27
- **Updated**: 2026-09-03
- **Added**: 2026-04-09
- **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