Fluid Reveal - Animated Liquid Logo Effect
Transform your logo into a mesmerizing liquid experience with Fluid Reveal. This component creates a smooth, animated reveal effect using advanced shader-based distortion that makes your logo appear to flow.
Fluid Reveal applies a dynamic liquid distortion effect to your logo with an elegant wipe animation. The distortion uses fractal Brownian motion (FBM) noise to create organic, flowing movement that catches the eye without overwhelming your brand. As the wipe animation progresses across your logo, the liquid effect intensifies, creating a sophisticated reveal that elevates any hero section, landing page, or brand showcase.
Flexible Image Input
Upload PNG or JPG logos with transparency support
Paste SVG code directly for vector graphics
Automatic aspect ratio preservation
Fallback white rectangle included for testing
Real-Time Customization
Scale: Adjust logo size (0.1x - 3x)
Intensity: Control distortion strength (0 - 0.3)
Speed: Set animation velocity (0 - 1)
Duration: Customize wipe timing (0.5s - 10s)
Delay: Set pause between animation loops (0s - 3s)
Toggle Animation: Turn the wipe effect on/off
Professional Quality
WebGL-powered shader effects for smooth 60fps performance
Orthographic camera setup ensures pixel-perfect rendering
Works flawlessly in canvas, preview, and published sites
No image loading required in production - instant display
Automatic cleanup prevents memory leaks
Hero sections and landing pages
Brand showcases and portfolio headers
Product launch pages
Agency and creative studio sites
SaaS homepages
Event and conference sites
Any project needing an eye-catching logo presentation
Built with Three.js and GSAP, Fluid Reveal uses custom GLSL shaders to create the liquid effect. The distortion is generated using gradient noise combined with fractal Brownian motion, creating natural, organic movement. The wipe animation uses GSAP's timeline system for buttery-smooth transitions with customizable easing.
The component is optimized for Framer's preview and publish modes, using the container div pattern for reliable Three.js rendering across all environments.
Simply drop the component onto your canvas, upload your logo (or paste SVG code), and adjust the controls to match your aesthetic. The effect works immediately in the canvas and will render perfectly when you preview or publish your site. All controls update in real-time, so you can dial in the perfect look without refreshing
IMPORTANT: Due to the nature of digital code components, all sales are final and non-refundable. Once purchased, you receive immediate access to the complete component code, which cannot be returned.
Before purchasing, please:
Review the component demo and documentation carefully
Check the feature list to ensure it meets your needs
Contact us at troy@merokeeventures.com with any pre-purchase questions
Troy Miller
