LiquidEther/Liquid Ether is a full Navier-Stokes fluid simulation running entirely on the GPU via WebGL. Under the hood it runs a multi-pass render pipeline, velocity advection (with optional BFECC for sharper detail), external force injection at the cursor position, viscous diffusion, divergence calculation, iterative Poisson pressure solving, and pressure gradient subtraction, all at a configurable simulation resolution so you can trade quality for performance on lower-end devices.
Color is driven by a velocity-magnitude palette sampler, mapping fluid speed to a three-stop gradient you control. The background is fully transparent, so it composites cleanly over any color or image layer in Framer.
An auto-demo mode keeps the animation alive when no cursor is present, useful for previews, hero sections, and loading screens. It ramps up smoothly, yields instantly when a real pointer enters, and resumes after a configurable idle delay. All transitions between auto and manual control are interpolated so there are no jumps.
Key controls:
Mouse Force — How strongly the cursor pushes the fluid. Higher values create dramatic, fast-moving streaks.
Cursor Size — The radius of the force injection point. Larger values produce wider, softer fluid plumes.
Viscous — Toggle viscosity on or off. When off, the fluid behaves like a thin, near-frictionless liquid.
Viscosity — Thickness of the fluid when Viscous is enabled. Higher values make motion feel heavy and slow to dissipate.
Viscous Iterations — How many solver passes refine viscosity each frame. More iterations = more accurate but heavier on the GPU.
Poisson Iterations — How many passes solve the pressure field. More iterations produce more realistic, divergence-free flow.
Time Step — How far the simulation advances each frame. Increase for faster flow, decrease for smoother, more stable motion.
BFECC Advection — A higher-order advection method that reduces blur. Keeps fluid streaks sharper and more defined over time.
Sim Resolution — Scale of the simulation grid relative to canvas size. Lower values run faster; higher values preserve finer detail.
Bounce Walls — When on, fluid reflects off canvas edges instead of slipping past them, creating a contained, ricocheting effect.
Color 1 / Color 2 / Color 3 — Three palette stops mapped from low to high velocity. Slow fluid shows Color 1, fast streaks peak toward Color 3.
Auto Demo — When on, the fluid self-animates when no cursor is present — ideal for previews and hero sections.
Auto Speed — How fast the auto demo cursor moves across the canvas.
Auto Intensity — How strongly the auto demo cursor pushes the fluid compared to a real pointer.
Takeover (s) — Transition duration in seconds when a real cursor takes over from the auto demo.
Auto Resume (ms) — How long in milliseconds the cursor must be idle before auto demo resumes.
Auto Ramp (s) — How long the auto demo takes to ramp up to full intensity after resuming.
Sperara
