Loading...
FreeLoading component details...
Interact with the physics above: hover, drag or click to distort fluids.
Wavemelt renders fluid physics calculations in high-performance HTML5 Canvas and optimized CSS matrix filters, delivering silky smooth 60fps renders even on mobile browsers.
Viscoelastic physics engine calculated per-particle, resulting in detailed, high-fidelity liquid wavemelt curves.
Fine-tune every animation. Tweak viscosity, shear forces, gravity, dimensions, and typography inside the workbench.
Instant standalone code files. Packages contain copy-paste ready HTML, Vanilla CSS, JS scripts, or functional React/Vue wrappers.
We combine a large feGaussianBlur with a high-contrast feColorMatrix. The blur expands the boundaries of rendering shapes, while the matrix filter clamps alpha values back to 1.0, creating a liquid fusing and tearing threshold.
By leveraging hardware-accelerated 2D canvases, we avoid standard DOM layout calculations during physics loops. This ensures minimal CPU overhead, making these animations suitable for performance-critical landing pages.
Yes. Every component includes code blueprints showing how to bind life-cycle event listeners inside useEffect or onMounted components, ensuring clean element garbage collection.
Unlock the licensing code for Asset Name