---
title: "Wipe Text Reveal — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Daniel Moreno · Text. Wipe Text Reveal creates a clean, line-by-line text animation that gradually unveils paragraphs with a sleek wipe effect."
canonical: "https://framer.elliotli.dev/component/wipe-text-reveal"
---

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

# Wipe Text Reveal

Reveal text with wipe animation

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

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

## Summary

Wipe Text Reveal creates a clean, line-by-line text animation that gradually unveils paragraphs with a sleek wipe effect.

## Description

**Wipe Text Reveal** creates a clean, line-by-line text animation that gradually unveils paragraphs with a sleek wipe effect. As users scroll or when the element enters the viewport, each line of text is revealed in a staggered, linear motion. Fully customizable controls let you adjust font, colors, alignment, direction, duration, and reveal timing, making it perfect for hero sections, feature highlights, testimonials, or any content where you want an engaging text reveal.

### Key Features:

-   Line-by-line reveal animation
    
-   Customizable wipe direction and duration
    
-   Staggered line animation for dynamic flow
    
-   Full typography control
    
-   Adjustable initial and reveal colors
    
-   Responsive and accessible design
    

## Animation Properties

### Direction

-   Options: Left → Right, Right → Left, Top → Bottom, Bottom → Top
    

Determines the direction of the wipe reveal for each line.

### Duration

Sets the total time for the reveal of each line.

### Stagger Delay

Defines the delay between the reveal of each consecutive line, creating a cascading effect.

### Reveal Color

The color that lines transition to when revealed. Typically your primary brand or accent color.

### Line Spacing

The space between lines of the effect, which separates the revealing containers

## Best Practices

-   **Stagger Delay:** Adjust between 0.1–0.3s depending on paragraph length to maintain smooth readability.
    
-   **Font Choice:** Bold or medium-weight fonts are best for clear visibility during animation.
    
-   **Contrast:** Ensure sufficient contrast between the initial and reveal colors for accessibility.
    

### Support & Assistance

If you have any questions, need help using the component, or encounter any issues, you can reach out to me at [**danielgrafix12@gmail.com**](mailto:danielgrafix12@gmail.com). I’ll get back to you as soon as possible.

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

-   All · #2852

## Details

- **Author**: Daniel Moreno
- **Price**: $4.00
- **Published**: 2026-02-11
- **Updated**: 2026-09-02
- **Added**: 2026-02-02
- **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