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
