Fluid Canvas · Playground

Fluid Canvas @caustics/fluid-canvas

Motion 0.70×

Speed 0.70×

Fluid simulation speed — slows or energizes the dye/flow without touching dissipation or curl. Agents have their own Speed in the Agents panel.

Seed random

Lock a seed for a reproducible composition — the same seed reproduces the same canvas on a fixed timestep. Apply recomposes from a clean slate; ↻ rolls a fresh random seed. Empty = a new look each load.

Preset gradient-flow

Preset Background #130c0a Transparent background Texture

A seamless pattern tiled behind the fluid — scale, rotate, tile, and pan it independently. Regenerates as you change the colour.

Agent colours preset

Source

Edit any swatch to switch to this custom palette. Each agent samples one colour for life.

Paint colours preset

Source

Colour of the dye you paint by dragging (and the ambient auto-splats). Edit a swatch to use a custom palette; cycle speed moves through it (0 holds one colour).

Post-processing

Highlight rolloff 0.90

Tames blown-out white cores (hue preserved). 0 = raw hot-white look; 1 = fully capped to the saturated colour. Applies before bloom/sunrays.

Bloom Bloom strength 0.18 Bloom threshold 0.78

Strength = glow amount; threshold = how bright dye must be before it blooms (higher = only the densest cores glow). Keep strength modest + threshold high for a tasteful halo.

Sunrays Shading

Colour grade finish

Exposure 1.00× Contrast 1.00 Saturation 0.92 Vignette 0.12 Hue drift 2.5°/s

Tone finishing over the whole frame: exposure & contrast shape tone, saturation pulls colour back (0 = greyscale) or pushes it, vignette seats the frame. Hue drift slowly rotates the whole palette (OKLab, luminance-safe) so a long-running canvas breathes — 0 freezes it.

Grain

Amount 0.06 Noise Grain size 1.00× Grain motion 1.00× Grain chroma 0.00

Film/print texture. Noise picks the character; size scales its features; motion animates it (0 = a frozen still texture); chroma blends monochrome → per-channel colour speckle.

Gradient map

Off. Toggle on to recolour the frame through a 2–5 stop gradient (duotone / tritone).

Second dye

Off. A second, independently-tinted pigment over the primary dye — a two-ink duotone.

Flow colour

Off. Make the current visible — dye colour that flows along the velocity field.

Iridescence

Off. A view-dependent thin-film sheen (oil-slick / beetle-shell) on dense dye.

Stylize none

Look

Feedback / echo

Off. The temporal instrument — Droste zooms, feedback tunnels, long echo trails. Heavier than the other effects; try Amount 0.7, zoom+rotate.

Symmetry

Off. The kaleidoscope — toggle on and every stroke becomes an N-fold mandala. Try 8 segments over the orbit flow.

Tiling

Off. Wallpaper repeat — a repeating ink textile. Pair with Symmetry for a rose-window wallpaper.

Polar warp

Off. The kaleidoscope's geometric sibling — swirl, tunnel, twist or bulge the whole field. Try Spiral over 8-fold symmetry.

Domain warp

Off. Marble, melt, or heat-haze any preset. Try Amount 0.02, Source "velocity" over a lively flow for liquid glass.

Text / logo mask

Off. Confine the fluid to a word or emit ink from it — "your headline made of living ink". Toggle on and type.

Caustics

Off. The signature water-light look — toggle on for area-ratio caustics rendered from the dye.

Accumulation

Off. The self-painting canvas — toggle on and the moving dye + agent trails build a persistent painting.

Brush & medium round

Stroke stretch 1.00× Wet edge off

Stroke stretch elongates deposits along their motion — calligraphic gesture instead of circular dabs (1 = round). Wet edge darkens pigment where a wash meets clean ground, the watercolour tell; strongest on light backgrounds.

Interaction paint

Mode Splat radius 50 px Splat force 6000 Auto-splats

Physics

Curl 24 Pressure iterations 20 Velocity dissipation 0.20 Density dissipation 1.00 a.k.a. trail decay — how fast all dye (incl. agent trails) fades

Flow field

Program Strength 0.15 Direction 15° Eddy size 1.60× Evolution 1.00×

A continuous field-level current — the composition gets a direction instead of being splat-soup. Drift for silk banners, vortex/orbit for circulation, turbulence for weather. Deterministic under a seed; 0° points right, 90° up.

Buoyancy

Off. Matter with weight — toggle on so dense dye rises like smoke (or sinks like ink).

Agents flock

Spawn agent swarm Count 18 Spawn origin Behavior Separation 0.40 Alignment 0.25 Cohesion 0.70 Trail radius 4 px Speed 0.15 Wake / stir 0.15

How hard agents push the fluid. 0 = pure dye (calligraphic); higher = turbulent stirring.

Intensity min 0.20 Intensity max 0.80 Lifespan 8s Respawn on death Trail decay 1.00

Trail decay is the shared dye-fade (same knob as Physics → Density dissipation). 0 = trails persist forever; higher = quicker fade.

On cursor Cursor force 1.60 Cursor radius 0.35

Force = how hard the cursor pushes; radius = how far its influence reaches. Now independent.

Layout elements none

Drop real website chrome onto the canvas — the boids steer around it (avoid), circle it (orbit), or drift toward it (attract). Drag a chip on the stage to reposition it; the swarm responds live. This is the bridge from sandbox to a fluid that reacts to your actual UI.

Save artwork PNG / clip

PNG saves the exact current frame at full canvas resolution. Record captures a live WebM of the canvas — start it, perform, stop to download. The preset + seed are stamped into the filename, so with the seed locked the artwork is reproducible.

Export config JSON

Copies the full current look — engine props (paste straight into mount()), the agent swarm, the texture, and the colour choices — to your clipboard as JSON. Paste it back to share an exact configuration.

Import config load JSON

Upload JSON file…

Restores a full look from JSON — upload a file or paste an exported config (from the Export panel above), then hit Load. Every control, the agent swarm, the texture, and the paint palette are applied and the canvas remounts. Missing fields keep their current value.

DOM bindings — hover / click these

Each button has data-fluid-hover or data-fluid-click attributes. The engine scans them on mount and emits fluid effects whenever you interact. Buttons live in this side drawer (outside the canvas) — the engine clamps the splat position to the canvas edge nearest the button, so you'll see the effect appear at the left boundary of the stage as you hover.