CircularTextReveal

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

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

Inreactive Scroll