---
title: "Dia Text Reveal — Free Framer component · Best of Framer"
description: "Free Framer component · by Ritesh  · Text. Dia Text Reveal is a premium animated typography component for Framer that makes it effortless to create smooth cyclic text reveal effects."
canonical: "https://framer.elliotli.dev/component/dia-text-reveal"
---

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

# Dia Text Reveal

A premium cyclic text reveal compo

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

![Dia Text Reveal preview image 1](https://framer.elliotli.dev/og/component/dia-text-reveal/d1d4cc97c306311a/1600x806.jpg)

## Summary

Dia Text Reveal is a premium animated typography component for Framer that makes it effortless to create smooth cyclic text reveal effects.

## Description

**Dia Text Reveal** is a premium animated typography component for Framer that makes it effortless to create smooth cyclic text reveal effects. Customize fonts, colors, gradients, easing, timing, stagger, direction, and triggers to match your brand. Whether you're building a SaaS landing page, portfolio, startup website, or personal brand, Dia Text Reveal helps your headlines feel dynamic, polished, and unforgettable.

**Customizable Properties**

-   **Text**: Set multiple words or phrases to cycle through.
    
-   **Font**: Choose any Framer font or typography style.
    
-   **Base Color**: Color of the static text.
    
-   **Sweep Colors**: Create multi-color sweep gradients with unlimited color stops.
    
-   **Duration**: Control the animation speed.
    
-   **Delay**: Set the pause between animation cycles.
    
-   **Easing**: Choose from different easing curves for the transition.
    
-   **Cycle Text**: Enable or disable continuous looping.
    
-   **Stagger**: Adjust the delay between each character's animation.
    
-   **Trigger**: Play on load, on scroll into view, or other supported triggers.
    
-   **Play Once**: Animate only once or loop repeatedly.
    
-   **Direction**: Change the sweep direction (Left → Right, Right → Left, etc.).
    
-   **Overflow**: Control whether animated content is clipped or visible.
    

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

-   All · #1054

## Details

- **Author**: Ritesh
- **Published**: 2026-07-28
- **Updated**: 2026-07-28
- **Added**: 2026-07-28
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos