svelte-fluid

WebGL fluid simulation as a Svelte 5 component. Multi-instance, resize-stable, deterministic seeding.

Drag inside any canvas. Try resizing the window — every instance tears down and reinitializes with the same initial splats thanks to the seed prop.

Get started

bun add svelte-fluid

<script lang="ts">
  import { Fluid, LavaLamp } from 'svelte-fluid';
</script>

<div style="height: 100vh"><LavaLamp /></div>

That's the entire setup — the canvas fills its parent and tracks parent size automatically. Six presets ship out of the box; <Fluid /> exposes the full ~28-prop config surface for custom physics and visuals.

Default

Out-of-the-box configuration with bloom + sunrays.

No bloom, low curl

bloom=false curl=5 densityDissipation=0.4

No shading, big splats

shading=false splatRadius=0.8

Slow mo, transparent

velocityDissipation=0.05 transparent

Presets

Drop-in wrapper components with hard-coded physics + hand-crafted opening splats. Import any of them from svelte-fluid and render in a sized container.

Lava Lamp

Slow, lazy warm blobs drifting on a warm-silver background.

Plasma

Persistent full-spectrum energy field.

Ink in Water

Dark blue dye blooming on a pale background.

Frozen Swirl

A single icy whirlpool that spins itself out.

Aurora

Northern-lights ribbons drifting laterally.

Galaxy

Spiral arms with bloom-lit core.

Playground

Tweak any parameter live — changes apply instantly via setConfig() without remounting the engine.