Have you ever seen those premium hover reveal effects where you move across a section and content smoothly appears underneath?
Most of them use a simple circular cursor reveal or a basic mask effect. It works, but it often feels predictable and flat.
Fluid Blob Reveal is different.
Instead of revealing content through a hard edge, it creates a smooth smudge reveal that behaves like liquid ink moving across the screen. Multiple animated blobs grow, merge, and soften together to create a natural gooey mask and liquid mask effect. The result feels more organic - a true fluid reveal rather than a standard hover interaction.
This creates a premium blob reveal experience that instantly adds that Awwwards interaction feeling - the kind of effect that makes visitors stop and think "how was that built?"
Powered through an animated SVG mask reveal system, the interaction transforms a normal section reveal into a cinematic and memorable experience. Inspired by Ashley Brooke website and rebuilt as a production-ready Framer component for real-world projects.
It is designed for Framer projects that need a more editorial, high-end, award-winning style feel without requiring complex setup, while still fitting naturally into Framer's Code Component workflow across canvas, preview, and published output.
Add this component above any section you want to reveal.
Set the component position to 'Absolute' and increase its z-index so it stays above the section content.
From the right-side panel, connect any Frame into the Cover slot so that layer becomes the visible surface.
Resize the component so it fully covers the section area.
That's it - move the cursor or touch the screen and the underlying content will be revealed through the animated fluid mask.
Note: For more detailed setup, a remix link of the original project is included after purchase, allowing users to inspect the exact layer structure and recommended placement setup. An example demo is also included in the remix. Buy here: Link
The component includes four main property groups:
Connects the frame or component instance that acts as the visible top layer before revealing content beneath.
Shows or hides the connected cover while designing on the canvas, making positioning easier.
Controls pointer-following behavior:
Trail Lag → controls movement smoothness
Reveal Size → controls blob size and reveal area
Controls how blobs appear and disappear - Grow Size, Grow Time, Grow Ease, Fade Delay, Fade Time, Fade Ease
Shapes the liquid effect:
Edge Softness → blur amount
Goo Strength → controls blob merging intensity
Responsive and works inside Framer layouts and section overlays
Desktop hover interaction with mobile and tablet touch support
Smooth smudge reveal instead of hard circular masking
Organic blob reveal behavior with fluid movement
Dynamic gooey mask effects with customizable intensity
Adjustable trail, blur, growth, and animation timing
Canvas-aware behavior for easier editing
Lightweight and production-ready
Powered by animated SVG mask reveal techniques
Interaction concept inspired by the Ashley Brooke Awwward-Winning website.
Hero Sections: Reveal images, videos, or content beneath a branded cover.
Agency & Portfolio Websites: Add premium hover reveal moments that feel handcrafted.
Editorial Layouts: Create immersive visual storytelling sections.
Landing Pages: Transform static sections into engaging interactions.
Campaign Experiences: Build interactive content reveals for product launches and promotions.
Experimental Storytelling: Use motion and masking to create memorable experiences.
Made with ❤️ by Soyeb
© 2026 Soyeb. All rights reserved.
Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.
Have questions or need a custom Framer component? Reach out at heysoyebali@gmail.com
Soyeb
