CircularTextReveal

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