How to use it: It is completely plug-and-play. Just drag and drop the component onto your canvas, resize it to fit any layout (from small cards to fullscreen backgrounds), and it instantly comes to life. No coding required—just tweak the physics and colors in the sidebar!
Because you can resize it to fit any container, it is perfect for creating high-end, award-winning web experiences:
Immersive Hero Backgrounds: Replace boring static backgrounds with a living, breathing liquid simulation that visitors can play with.
Interactive Logo & Text Reveals: Connect your own text or Framer components to the "Custom Texture" slot to have the fluid distort and wash over your brand name.
Creative Portfolios: Perfect for digital artists, agencies, and developers wanting to show off top-tier technical design capabilities.
Web3 & Luxury Tech: Create an ethereal, futuristic vibe with glowing inks and deep liquid reflections.
🌊 True Fluid Physics: This isn't a fake animation. It calculates real vorticity, buoyancy, surface tension, and pressure dynamics in real-time.
🎨 40+ Customization Controls: Total creative freedom. Adjust the water color, ink strength, wave steepness, light positions, and ambient temperature directly from the Framer properties panel.
✨ Caustics & Reflections: Features high-end rendering techniques including Screen Space Reflections (SSR), light caustics, and realistic specular highlights.
🪄 Interactive Particles: Turn on the built-in particle engine to emit glowing dust that gets swept up and carried by the fluid currents.
🖼️ Custom Backgrounds: Drop any Framer component into the component slot, and the fluid will act as a distorting, refractive glass layer over it.
⚙️ Performance Optimized: Built-in quality controls let you scale the simulation resolution up or down to ensure buttery-smooth performance across desktop and mobile.