[Framer component] Circular Mask Reveal

A playful scroll-based transition effect that reveals content through dynamically animated circular masks.

Circular Mask Reveal brings a sense of motion and depth to your designs — as you scroll, soft expanding circles uncover your next section, blending two layers of content in a cinematic way. Perfect for hero transitions, landing pages, or storytelling layouts that need an extra layer of polish.

Key features

• ⚡ Scroll-Triggered Animation – Circles expand and drift as you scroll for a smooth, organic reveal.

• 🟣 Customizable Colors & Layers – Define top and bottom backgrounds, circle color, and seed-based randomness for unique compositions.

• 🎨 Responsive & Adaptive – Automatically adjusts circle layout and sizing for mobile, tablet, and desktop.

• 🧠 Deterministic Randomness – Use a variation seed to generate consistent yet unique mask patterns.

• 🧩 Framer-Native Controls – Easy color and seed adjustments directly from the properties panel.

Perfect for: creative hero sections, scroll-based transitions, interactive landing pages, and storytelling visuals.

See it here