---
title: "CircularTextReveal — Free Framer component · Best of Framer"
description: "Free Framer component · by Olivar Grant · Text. The CircularTextReveal effect creates a visually engaging transition where content is initially hidden behind a circular overlay."
canonical: "https://framer.elliotli.dev/component/circulartextreveal"
---

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

# CircularTextReveal

Inreactive Scroll

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

![CircularTextReveal preview image 1](https://framer.elliotli.dev/og/component/circulartextreveal/30080f87d18bdbe4/1600x1200.jpg)

## Summary

The CircularTextReveal effect creates a visually engaging transition where content is initially hidden behind a circular overlay.

## Description

The **CircularTextReveal** effect creates a visually engaging transition where content is initially hidden behind a circular overlay. As the user scrolls, the overlay is progressively removed, revealing the content underneath in a smooth and focused way.

This interaction emphasizes **directional reveal**—instead of transforming the content itself, the overlay acts as a mask that dynamically uncovers the layout. The result is a clean and modern storytelling effect that guides user attention step by step.

Built using Framer’s scroll-based interactions, the effect ensures smooth, performance-friendly motion while maintaining a minimal visual style.

A key feature of this component is its **scroll-driven mask behavior**—the reveal is directly tied to scroll progress, creating a natural and immersive experience.

Additionally, the component supports **image integration**, allowing visuals to be revealed alongside text for richer, more dynamic layouts. Use “\[\]” where you want to add an image.

Key highlights:

-   **Circle overlay reveal:** Content is uncovered through a circular mask
    
-   **Scroll-driven interaction:** Animation progresses with scroll movement
    
-   **Image support:** Works seamlessly with images and text
    
-   **Minimal & modern:** Clean effect with strong visual focus
    
-   **Reusable component:** Perfect for storytelling sections and landing pages
    

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

-   All · #6616

## Details

- **Author**: Olivar Grant
- **Published**: 2026-04-17
- **Updated**: 2026-04-17
- **Added**: 2026-04-07
- **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