Addon · Fluid Backdrop

A background that reads the theme.

A GPU fluid whose ink is your --brand and --accent. Every constant the solver used to hide is on a slider, and the setting you land on leaves as JSON.

Tune it

Move the pointer over the frame to stir it. The colour pickers rewrite the theme variables rather than a palette of their own, so the page and the fluid always agree. Drop the backing plate to zero and the simulation composites straight onto the page background.

move to stir

Take it with you

Save keeps the setting in this browser and restores it on your next visit. Copy JSON puts it on the clipboard; Copy snippet puts a ready-to-paste block there instead. Import reads whatever sits in the box — unknown keys are dropped and every value is clamped, so a hand-edited configuration cannot break the solver.

Configuration

In another project

One script, one canvas. The bundle carries vgpu and the shaders — nothing else to install.

<canvas id="backdrop"></canvas>
<script src="https://eva-css.xyz/assets/fluid-backdrop.js"></script>
<script>
  EvaFluid.mountFluid(document.getElementById("backdrop"), {
    settings: { plate: 0, filter: 1, filterCell: 16 },
  }).start();
</script>

Without WebGPU, under prefers-reduced-motion, or when initialisation fails, mountFluid reports it and paints nothing: give the canvas a CSS background and the page degrades on its own. The simulation also stops as soon as the canvas leaves the viewport.

Sources and credits

The solver and its shaders come from the Interactive Fluid example of vgpu, vercel-labs/vgpu, by Vercel Labs. The React wrapper is the only part that was replaced outright.

What was changed — The React mount became vanilla JS with three guards: WebGPU support, off-screen pause, prefers-reduced-motion. Every hard-coded constant in the shaders was lifted to a uniform. A filter stage and a transparent-plate mode were added to the display pass.

Requirements — WebGPU — Chrome and Edge, Safari 26+, recent Firefox. A secure context is required, so localhost or HTTPS.