# svelte-fluid — Agent Skill

> WebGL Navier–Stokes fluid simulation as a Svelte 5 component library.
> Multi-instance, resize-stable, deterministic seeding. MIT, zero runtime deps.

Package: `svelte-fluid` · Requires Svelte 5 · Homepage: https://svelte-fluid.dev

## Install

```sh
npm install svelte-fluid   # or: bun add svelte-fluid
```

## Mental model (engine background)

- A thin Svelte 5 component (`<Fluid>`) hands a `<canvas>` to a framework-agnostic `FluidEngine` (WebGL2/WebGL1). The engine never imports Svelte.
- Each component instance owns its own GL context, FBOs, programs — many instances coexist on a page. Browsers cap WebGL contexts (~8–16/tab), so use `lazy` on dense pages.
- The sim is a real incompressible fluid solver: advection → (viscosity) → divergence → pressure (Jacobi) → gradient subtract, then dye advection, vorticity confinement (`curl`), bloom/sunrays/shading display.
- Determinism: pass `seed` for reproducible initial splats; the seed survives resize (the engine tears down + rebuilds on resize but keeps the seed).
- Lifecycle: all WebGL access is deferred to `onMount` (SSR-safe). `autoPause` (default true) stops the RAF loop when offscreen/hidden; `lazy` defers engine creation until in view.
- Runtime prop changes go through `setConfig`, which classifies each field: hot scalars (next frame), keyword recompiles (shading/bloom/sunrays/reveal/distortion), FBO rebuilds (resolutions), or construct-only (seed, initial splat counts).

## Components

- `<Fluid>` — Core component. Renders the WebGL fluid sim on a canvas; accepts all FluidConfig props.
- `<FluidBackground>` — Fixed full-viewport fluid behind page content, with DOM exclusion zones.
- `<FluidReveal>` — Uses the fluid as an opacity mask to reveal slotted content underneath.
- `<FluidDistortion>` — Velocity-driven image warping of a supplied src image.
- `<FluidStick>` — Physics-level dye sticking to text/shape masks (e.g. a word).
- `<FluidText>` — Fluid confined inside text letterforms — wraps Fluid with an svgPath text-mode container and auto aspect-ratio via measureText().

Minimal usage:

```svelte
<script>
  import { Fluid } from 'svelte-fluid';
</script>

<div style="width: 100%; height: 420px">
  <Fluid />
</div>
```

`<Fluid>` fills its parent; no props are required. Give the parent a size.

## Key config groups

- Physics: `curl`, `densityDissipation`, `velocityDissipation`, `pressure`, `pressureIterations`, `viscosity`, `splatRadius`, `splatForce`, `maxTimeStep`, `substeps`.
- Auto splats: `autoSplatRate`, `autoSplatCount`, `autoSplatVelocityX/Y`, `autoSplatCenterX/Y`, `autoSplatBandWidth/Height`, `autoSplatSwirl`.
- Visuals: `shading`, `colorful`, `bloom` (+`bloomIntensity`/`bloomThreshold`), `sunrays` (+`sunraysWeight`), `backColor` ({r,g,b} 0–255), `transparent`.
- Shapes: `containerShape` — `circle`, `roundedRect`, `frame`, `annulus` (analytical SDF) or `svgPath` (text/path rasterized to a mask). `glass` adds refraction.
- Flow scenes: `flow` (FlowConfig) for solver-native sources/outlets/forces/scalar fields + `obstructions` the fluid flows around (`obstructionColor` paints them).
- Presetting: `presetSplats` (construct-only initial splats), `seed`.

See the full prop reference: https://svelte-fluid.dev/docs/configuration

## Imperative API (FluidHandle via bind:this)

```svelte
<script>
  let fluid;
</script>
<Fluid bind:this={fluid} />
<!-- fluid.handle.splat(x, y, dx, dy, color) | randomSplats(n) | pause() | resume() | isPaused -->
```

## Presets (zero-config wrappers)

Import and drop in — each pins a tuned `<Fluid>` config. Forwarded props: `width`, `height`, `class`, `style`, `seed`, `lazy`, `splatOnHover`, `aria-label`, `backColor` (flow presets also `pointerInput`).

- **LavaLamp** (classic) — Warm buoyant blobs rising in a glass vessel.
- **Plasma** (classic) — A confined full-spectrum plasma ball churning at center.
- **InkInWater** (classic) — India-ink droplets blooming as they sink through dark water.
- **FrozenSwirl** (classic) — A single icy whirlpool that spins out and freezes in place.
- **Aurora** (classic) — Layered green and magenta ribbons glowing like northern lights.
- **CircularFluid** (container) — Vivid fluid swirling inside a circular container.
- **FrameFluid** (container) — Fluid circulating around a rectangular picture-frame cutout.
- **AnnularFluid** (container) — A ring-vortex orbiting between two concentric circles.
- **SvgPathFluid** (container) — Fluid confined to an ampersand glyph (text container shape).
- **Toroidal** (container) — A violent full-spectrum storm circulating in a toroidal ring.
- **GasFlare** (flow) — A hot buoyant jet rising from a flare-stack nozzle.
- **Venturi** (flow) — Bernoulli's principle: flow accelerating through a pinched throat.
- **Karman** (flow) — Flow past a cylinder, evoking a von Kármán vortex street.
- **TeslaValve** (flow) — Throughflow routing through a passive Tesla-valve channel.

```svelte
<script>
	import { LavaLamp } from 'svelte-fluid';
</script>

<LavaLamp />
```

Full forkable recipes for every preset: https://svelte-fluid.dev/llms-full.txt

## Gotchas

- SSR: components are SSR-safe (engine starts in `onMount`); nothing renders fluid on the server.
- Dense pages: set `lazy` to stay under the WebGL context cap.
- Accessibility: respect `prefers-reduced-motion` in your own auto-animation triggers; pass `aria-label`.
- Colors: `backColor` is 0–255 RGB; splat/dye colors in `presetSplats` are 0–1 (HDR, can exceed 1).


---

## Every preset config (forkable <Fluid> recipe)

### LavaLamp — Lava Lamp

Warm buoyant blobs rising in a glass vessel.

```svelte
<Fluid
	containerShape={{
		type: 'roundedRect',
		cx: 0.5,
		cy: 0.5,
		halfW: 0.38,
		halfH: 0.45,
		cornerRadius: 0.15
	}}
	glass
	glassRefraction={0.3}
	glassReflectivity={0.08}
	glassChromatic={0.1}
	curl={5}
	densityDissipation={0}
	initialDensityDissipation={0.25}
	initialDensityDissipationDuration={1}
	velocityDissipation={0}
	pressure={0.8}
	splatRadius={0.75}
	splatForce={2200}
	shading
	colorful={false}
	bloom={false}
	sunrays={false}
	initialSplatCount={0}
	backColor={{
		r: 222,
		g: 218,
		b: 215
	}}
	presetSplats={[
		{
			x: 0.18,
			y: 0.06,
			dx: 8,
			dy: 180,
			color: {
				r: 1.7,
				g: 0.12,
				b: 0.08
			}
		},
		{
			x: 0.32,
			y: 0.1,
			dx: -5,
			dy: 160,
			color: {
				r: 1.8,
				g: 0.45,
				b: 0.08
			}
		},
		{
			x: 0.46,
			y: 0.04,
			dx: 12,
			dy: 210,
			color: {
				r: 1.7,
				g: 0.95,
				b: 0.18
			}
		},
		{
			x: 0.6,
			y: 0.12,
			dx: -8,
			dy: 180,
			color: {
				r: 1.8,
				g: 0.62,
				b: 0.12
			}
		},
		{
			x: 0.74,
			y: 0.06,
			dx: -15,
			dy: 200,
			color: {
				r: 1.7,
				g: 0.3,
				b: 0.22
			}
		},
		{
			x: 0.86,
			y: 0.1,
			dx: -10,
			dy: 170,
			color: {
				r: 1.6,
				g: 0.18,
				b: 0.4
			}
		},
		{
			x: 0.5,
			y: 0.18,
			dx: 4,
			dy: 140,
			color: {
				r: 1.7,
				g: 0.55,
				b: 0.05
			}
		},
		{
			x: 0.28,
			y: 0.16,
			dx: 10,
			dy: 150,
			color: {
				r: 1.5,
				g: 0.08,
				b: 0.18
			}
		}
	]}
/>
```

### Plasma — Plasma

A confined full-spectrum plasma ball churning at center.

```svelte
<Fluid
	curl={40}
	densityDissipation={0.12}
	initialDensityDissipation={0.6}
	initialDensityDissipationDuration={2}
	velocityDissipation={0.08}
	pressure={0.8}
	splatRadius={0.35}
	splatForce={5000}
	shading
	colorful
	colorUpdateSpeed={8}
	bloom
	bloomThreshold={0.6}
	bloomIntensity={1.5}
	sunrays
	sunraysWeight={0.5}
	initialSplatCount={0}
	backColor={{
		r: 4,
		g: 2,
		b: 12
	}}
	presetSplats={[
		{
			x: 0.5,
			y: 0.95,
			dx: 0,
			dy: -600,
			color: {
				r: 1.8,
				g: 0.05,
				b: 0.1
			}
		},
		{
			x: 0.83,
			y: 0.83,
			dx: -424,
			dy: -424,
			color: {
				r: 1.8,
				g: 0.7,
				b: 0.05
			}
		},
		{
			x: 0.95,
			y: 0.5,
			dx: -600,
			dy: 0,
			color: {
				r: 1.5,
				g: 1.5,
				b: 0.05
			}
		},
		{
			x: 0.83,
			y: 0.17,
			dx: -424,
			dy: 424,
			color: {
				r: 0.1,
				g: 1.8,
				b: 0.2
			}
		},
		{
			x: 0.5,
			y: 0.05,
			dx: 0,
			dy: 600,
			color: {
				r: 0.05,
				g: 1.5,
				b: 1.8
			}
		},
		{
			x: 0.17,
			y: 0.17,
			dx: 424,
			dy: 424,
			color: {
				r: 0.1,
				g: 0.15,
				b: 2.2
			}
		},
		{
			x: 0.05,
			y: 0.5,
			dx: 600,
			dy: 0,
			color: {
				r: 1,
				g: 0.05,
				b: 2
			}
		},
		{
			x: 0.17,
			y: 0.83,
			dx: 424,
			dy: -424,
			color: {
				r: 1.8,
				g: 0.05,
				b: 1.2
			}
		}
	]}
	autoSplatRate={0.4}
	autoSplatCount={4}
	autoSplatEvenX={false}
	autoSplatCenterY={0.5}
/>
```

### InkInWater — Ink in Water

India-ink droplets blooming as they sink through dark water.

```svelte
<Fluid
	curl={8}
	densityDissipation={0.3}
	velocityDissipation={0.15}
	pressure={0.85}
	splatRadius={0.12}
	splatForce={800}
	shading
	colorful={false}
	bloom
	bloomIntensity={0.6}
	bloomThreshold={0.4}
	sunrays={false}
	autoSplatRate={0.2}
	autoSplatColor={{
		r: 0.06,
		g: 0.07,
		b: 0.5
	}}
	autoSplatVelocityX={0}
	autoSplatVelocityY={-180}
	autoSplatCenterY={0.9}
	initialSplatCount={0}
	backColor={{
		r: 6,
		g: 8,
		b: 20
	}}
	presetSplats={[
		{
			x: 0.3,
			y: 0.9,
			dx: 15,
			dy: -180,
			color: {
				r: 0.08,
				g: 0.06,
				b: 0.55
			}
		},
		{
			x: 0.5,
			y: 0.94,
			dx: -10,
			dy: -220,
			color: {
				r: 0.04,
				g: 0.1,
				b: 0.5
			}
		},
		{
			x: 0.7,
			y: 0.88,
			dx: 12,
			dy: -200,
			color: {
				r: 0.12,
				g: 0.05,
				b: 0.45
			}
		},
		{
			x: 0.42,
			y: 0.85,
			dx: -8,
			dy: -160,
			color: {
				r: 0.03,
				g: 0.08,
				b: 0.48
			}
		},
		{
			x: 0.6,
			y: 0.92,
			dx: 5,
			dy: -190,
			color: {
				r: 0.06,
				g: 0.04,
				b: 0.52
			}
		}
	]}
/>
```

### FrozenSwirl — Frozen Swirl

A single icy whirlpool that spins out and freezes in place.

```svelte
<Fluid
	containerShape={{
		type: 'circle',
		cx: 0.5,
		cy: 0.5,
		radius: 0.45
	}}
	curl={50}
	densityDissipation={0}
	velocityDissipation={1}
	pressure={0.95}
	splatRadius={0.5}
	splatForce={8000}
	shading
	colorful={false}
	bloom
	bloomIntensity={1}
	sunrays={false}
	initialSplatCount={0}
	backColor={{
		r: 4,
		g: 8,
		b: 24
	}}
	presetSplats={[
		{
			x: 0.5,
			y: 0.5,
			dx: 1100,
			dy: 0,
			color: {
				r: 0.4,
				g: 0.85,
				b: 1.6
			}
		},
		{
			x: 0.35,
			y: 0.42,
			dx: -300,
			dy: 200,
			color: {
				r: 0.55,
				g: 0.95,
				b: 1.5
			}
		},
		{
			x: 0.62,
			y: 0.58,
			dx: 400,
			dy: -150,
			color: {
				r: 0.7,
				g: 1.1,
				b: 1.7
			}
		}
	]}
/>
```

### Aurora — Aurora

Layered green and magenta ribbons glowing like northern lights.

```svelte
<Fluid
	curl={40}
	densityDissipation={0}
	velocityDissipation={0.3}
	pressure={0.85}
	splatRadius={0.4}
	splatForce={6000}
	shading
	colorful={false}
	bloom
	bloomIntensity={1.5}
	sunrays
	sunraysWeight={1.4}
	initialSplatCount={0}
	backColor={{
		r: 2,
		g: 4,
		b: 18
	}}
	presetSplats={[
		{
			x: 0.15,
			y: 0.55,
			dx: 700,
			dy: 80,
			color: {
				r: 0.1,
				g: 1.6,
				b: 0.45
			}
		},
		{
			x: 0.45,
			y: 0.6,
			dx: 600,
			dy: -60,
			color: {
				r: 0.15,
				g: 1.4,
				b: 0.55
			}
		},
		{
			x: 0.78,
			y: 0.5,
			dx: -550,
			dy: 90,
			color: {
				r: 1.5,
				g: 0.25,
				b: 1.4
			}
		},
		{
			x: 0.3,
			y: 0.45,
			dx: 500,
			dy: 30,
			color: {
				r: 0.45,
				g: 0.9,
				b: 1.6
			}
		},
		{
			x: 0.65,
			y: 0.62,
			dx: -650,
			dy: -40,
			color: {
				r: 0.3,
				g: 1.5,
				b: 0.85
			}
		}
	]}
/>
```

### CircularFluid — Circular Fluid

Vivid fluid swirling inside a circular container.

```svelte
<Fluid
	containerShape={{
		type: 'circle',
		cx: 0.5,
		cy: 0.5,
		radius: 0.45
	}}
	curl={35}
	densityDissipation={0.15}
	initialDensityDissipation={0.5}
	initialDensityDissipationDuration={2}
	velocityDissipation={0.06}
	pressure={0.8}
	splatRadius={0.38}
	splatForce={5000}
	shading
	colorful
	colorUpdateSpeed={8}
	bloom
	bloomThreshold={0.6}
	bloomIntensity={1}
	sunrays={false}
	initialSplatCount={0}
	backColor={{
		r: 4,
		g: 2,
		b: 12
	}}
	presetSplats={[
		{
			x: 0.5,
			y: 0.85,
			dx: 0,
			dy: -500,
			color: {
				r: 0.9,
				g: 0.03,
				b: 0.05
			}
		},
		{
			x: 0.64,
			y: 0.75,
			dx: -354,
			dy: -354,
			color: {
				r: 0.9,
				g: 0.35,
				b: 0.03
			}
		},
		{
			x: 0.69,
			y: 0.5,
			dx: -500,
			dy: 0,
			color: {
				r: 0.8,
				g: 0.8,
				b: 0.03
			}
		},
		{
			x: 0.64,
			y: 0.25,
			dx: -354,
			dy: 354,
			color: {
				r: 0.05,
				g: 0.9,
				b: 0.1
			}
		},
		{
			x: 0.5,
			y: 0.15,
			dx: 0,
			dy: 500,
			color: {
				r: 0.03,
				g: 0.75,
				b: 0.9
			}
		},
		{
			x: 0.36,
			y: 0.25,
			dx: 354,
			dy: 354,
			color: {
				r: 0.05,
				g: 0.08,
				b: 1.1
			}
		},
		{
			x: 0.31,
			y: 0.5,
			dx: 500,
			dy: 0,
			color: {
				r: 0.5,
				g: 0.03,
				b: 1
			}
		},
		{
			x: 0.36,
			y: 0.75,
			dx: 354,
			dy: -354,
			color: {
				r: 0.9,
				g: 0.03,
				b: 0.6
			}
		}
	]}
	autoSplatRate={1.2}
	autoSplatCount={1}
	autoSplatCenterY={0.5}
	autoSplatBandHeight={0.8}
	autoSplatSwirl={500}
/>
```

### FrameFluid — Frame Fluid

Fluid circulating around a rectangular picture-frame cutout.

```svelte
<Fluid
	containerShape={{
		type: 'frame',
		cx: 0.5,
		cy: 0.5,
		halfW: 0.25,
		halfH: 0.25
	}}
	curl={30}
	densityDissipation={0.08}
	initialDensityDissipation={0.5}
	initialDensityDissipationDuration={2}
	velocityDissipation={0.06}
	pressure={0.8}
	splatRadius={0.42}
	splatForce={5000}
	shading
	colorful
	colorUpdateSpeed={8}
	bloom
	bloomThreshold={0.6}
	bloomIntensity={0.9}
	sunrays={false}
	initialSplatCount={0}
	backColor={{
		r: 0,
		g: 0,
		b: 0
	}}
	presetSplats={[
		{
			x: 0.5,
			y: 0.92,
			dx: 400,
			dy: 0,
			color: {
				r: 0.9,
				g: 0.1,
				b: 0.1
			}
		},
		{
			x: 0.92,
			y: 0.5,
			dx: 0,
			dy: -400,
			color: {
				r: 0.1,
				g: 0.9,
				b: 0.1
			}
		},
		{
			x: 0.5,
			y: 0.08,
			dx: -400,
			dy: 0,
			color: {
				r: 0.1,
				g: 0.1,
				b: 0.9
			}
		},
		{
			x: 0.08,
			y: 0.5,
			dx: 0,
			dy: 400,
			color: {
				r: 0.9,
				g: 0.9,
				b: 0.1
			}
		},
		{
			x: 0.9,
			y: 0.9,
			dx: -300,
			dy: -300,
			color: {
				r: 0.9,
				g: 0.5,
				b: 0.1
			}
		},
		{
			x: 0.9,
			y: 0.1,
			dx: -300,
			dy: 300,
			color: {
				r: 0.1,
				g: 0.9,
				b: 0.5
			}
		},
		{
			x: 0.1,
			y: 0.1,
			dx: 300,
			dy: 300,
			color: {
				r: 0.5,
				g: 0.1,
				b: 0.9
			}
		},
		{
			x: 0.1,
			y: 0.9,
			dx: 300,
			dy: -300,
			color: {
				r: 0.9,
				g: 0.1,
				b: 0.9
			}
		}
	]}
	autoSplatRate={0.5}
	autoSplatCount={6}
	autoSplatCenterY={0.5}
	autoSplatBandHeight={2}
	autoSplatSwirl={300}
/>
```

### AnnularFluid — Annular Fluid

A ring-vortex orbiting between two concentric circles.

```svelte
<Fluid
	containerShape={{
		type: 'annulus',
		cx: 0.5,
		cy: 0.5,
		innerRadius: 0.15,
		outerRadius: 0.45
	}}
	curl={35}
	densityDissipation={0.08}
	initialDensityDissipation={0.5}
	initialDensityDissipationDuration={2}
	velocityDissipation={0.06}
	pressure={0.8}
	splatRadius={0.38}
	splatForce={5000}
	shading
	colorful
	colorUpdateSpeed={8}
	bloom
	bloomThreshold={0.6}
	bloomIntensity={1}
	sunrays={false}
	initialSplatCount={0}
	backColor={{
		r: 4,
		g: 2,
		b: 12
	}}
	presetSplats={[
		{
			x: 0.5,
			y: 0.8,
			dx: 400,
			dy: 0,
			color: {
				r: 0.9,
				g: 0.1,
				b: 0.1
			}
		},
		{
			x: 0.61,
			y: 0.71,
			dx: 283,
			dy: -283,
			color: {
				r: 0.9,
				g: 0.5,
				b: 0.1
			}
		},
		{
			x: 0.67,
			y: 0.5,
			dx: 0,
			dy: -400,
			color: {
				r: 0.8,
				g: 0.8,
				b: 0.1
			}
		},
		{
			x: 0.61,
			y: 0.29,
			dx: -283,
			dy: -283,
			color: {
				r: 0.1,
				g: 0.9,
				b: 0.2
			}
		},
		{
			x: 0.5,
			y: 0.2,
			dx: -400,
			dy: 0,
			color: {
				r: 0.1,
				g: 0.7,
				b: 0.9
			}
		},
		{
			x: 0.39,
			y: 0.29,
			dx: -283,
			dy: 283,
			color: {
				r: 0.1,
				g: 0.1,
				b: 0.9
			}
		},
		{
			x: 0.33,
			y: 0.5,
			dx: 0,
			dy: 400,
			color: {
				r: 0.6,
				g: 0.1,
				b: 0.9
			}
		},
		{
			x: 0.39,
			y: 0.71,
			dx: 283,
			dy: 283,
			color: {
				r: 0.9,
				g: 0.1,
				b: 0.6
			}
		}
	]}
	autoSplatRate={0.5}
	autoSplatCount={5}
	autoSplatCenterY={0.5}
	autoSplatBandHeight={0.8}
	autoSplatSwirl={600}
/>
```

### SvgPathFluid — SVG Path Fluid

Fluid confined to an ampersand glyph (text container shape).

```svelte
<Fluid
	containerShape={{
		type: 'svgPath',
		text: '&',
		font: 'bold 200px Georgia, serif',
		fillRule: 'evenodd'
	}}
	curl={30}
	densityDissipation={0.3}
	velocityDissipation={0.1}
	pressure={0.8}
	splatRadius={0.3}
	splatForce={5000}
	shading
	colorful
	bloom
	bloomIntensity={0.9}
	sunrays={false}
	initialSplatCount={8}
	backColor={{
		r: 2,
		g: 2,
		b: 8
	}}
	autoSplatRate={0.8}
	autoSplatCount={1}
	autoSplatBandHeight={2}
	autoSplatSwirl={400}
/>
```

### Toroidal — Toroidal

A violent full-spectrum storm circulating in a toroidal ring.

```svelte
<Fluid
	containerShape={{
		type: 'annulus',
		cx: 0.5,
		cy: 0.5,
		innerRadius: 0.15,
		outerRadius: 0.42
	}}
	curl={50}
	densityDissipation={0.25}
	initialDensityDissipation={0.6}
	initialDensityDissipationDuration={2}
	velocityDissipation={0.02}
	pressure={0.8}
	splatRadius={0.4}
	splatForce={6000}
	shading
	colorful
	colorUpdateSpeed={8}
	bloom
	bloomThreshold={0.5}
	bloomIntensity={1.8}
	sunrays
	sunraysWeight={0.6}
	initialSplatCount={0}
	backColor={{
		r: 2,
		g: 2,
		b: 10
	}}
	presetSplats={[
		{
			x: 0.7192307692307692,
			y: 0.5,
			dx: 0,
			dy: 300,
			color: {
				r: 1.8,
				g: 0.05,
				b: 0.1
			}
		},
		{
			x: 0.6549961538461538,
			y: 0.701495,
			dx: -212.1,
			dy: 212.1,
			color: {
				r: 1.8,
				g: 0.7,
				b: 0.05
			}
		},
		{
			x: 0.5,
			y: 0.7849999999999999,
			dx: -300,
			dy: 0,
			color: {
				r: 1.5,
				g: 1.5,
				b: 0.05
			}
		},
		{
			x: 0.34500384615384616,
			y: 0.701495,
			dx: -212.1,
			dy: -212.1,
			color: {
				r: 0.1,
				g: 1.8,
				b: 0.2
			}
		},
		{
			x: 0.28076923076923077,
			y: 0.5,
			dx: 0,
			dy: -300,
			color: {
				r: 0.05,
				g: 1.5,
				b: 1.8
			}
		},
		{
			x: 0.34500384615384616,
			y: 0.298505,
			dx: 212.1,
			dy: -212.1,
			color: {
				r: 0.1,
				g: 0.15,
				b: 2.2
			}
		},
		{
			x: 0.5,
			y: 0.21500000000000002,
			dx: 300,
			dy: 0,
			color: {
				r: 1,
				g: 0.05,
				b: 2
			}
		},
		{
			x: 0.6549961538461538,
			y: 0.298505,
			dx: 212.1,
			dy: 212.1,
			color: {
				r: 1.8,
				g: 0.05,
				b: 1.2
			}
		}
	]}
/>
```

### GasFlare — Gas Flare

A hot buoyant jet rising from a flare-stack nozzle.

```svelte
<Fluid
	obstructions={[
		{
			d: 'M 34 100 L 46 100 L 46 74 C 44 72, 41 71, 37 72 L 34 76 Z',
			fit: 'fill'
		},
		{
			d: 'M 54 100 L 66 100 L 66 76 L 63 72 C 59 71, 56 72, 54 74 Z',
			fit: 'fill'
		}
	]}
	flow={{
		mode: 'live',
		boundary: {
			left: 'open',
			right: 'open',
			top: 'open',
			bottom: 'wall'
		},
		sources: [
			{
				kind: 'line',
				from: {
					x: 0.455,
					y: 0.245
				},
				to: {
					x: 0.545,
					y: 0.245
				},
				velocity: {
					x: 25,
					y: 760
				},
				dye: {
					r: 0.9,
					g: 0.24,
					b: 0.025
				},
				scalars: {
					temperature: 2.4
				},
				rate: 60,
				radius: 0.045,
				profile: 'parabolic'
			},
			{
				kind: 'line',
				from: {
					x: 0.18,
					y: 0.42
				},
				to: {
					x: 0.18,
					y: 0.82
				},
				velocity: {
					x: 42,
					y: 0
				},
				rate: 10,
				radius: 0.18,
				profile: 'uniform'
			}
		],
		outlets: [
			{
				edge: 'top',
				from: 0,
				to: 1,
				width: 0.09,
				clearDye: 0.18,
				clearScalars: true,
				clearVelocity: true
			},
			{
				edge: 'left',
				from: 0.36,
				to: 1,
				width: 0.035,
				clearDye: 0.35,
				clearScalars: false,
				clearVelocity: false
			},
			{
				edge: 'right',
				from: 0.36,
				to: 1,
				width: 0.035,
				clearDye: 0.35,
				clearScalars: false,
				clearVelocity: false
			}
		],
		scalarFields: [
			{
				name: 'temperature',
				dissipation: 0.5,
				advection: 'standard',
				range: [
					0,
					3.2
				]
			}
		],
		forces: [
			{
				kind: 'buoyancy',
				scalar: 'temperature',
				direction: {
					x: 0,
					y: 1
				},
				strength: 160,
				ambient: 0.03
			}
		],
		visualization: {
			colorBy: 'temperature',
			scalar: 'temperature',
			glowBy: 'scalar',
			transfer: 'fire',
			range: [
				0,
				3.2
			],
			scale: 0.9
		}
	}}
	openBoundary
	curl={16}
	densityDissipation={0.42}
	initialDensityDissipation={0.55}
	velocityDissipation={0.055}
	pressure={0.85}
	pressureIterations={24}
	splatRadius={0.06}
	splatForce={3800}
	shading={false}
	colorful={false}
	bloom
	bloomIterations={5}
	bloomResolution={192}
	bloomThreshold={0.48}
	bloomIntensity={1}
	sunrays={false}
	sunraysWeight={0}
	simResolution={160}
	dyeResolution={768}
	initialSplatCount={0}
	backColor={{
		r: 6,
		g: 6,
		b: 8
	}}
/>
```

### Venturi — Venturi

Bernoulli's principle: flow accelerating through a pinched throat.

```svelte
<Fluid
	obstructions={[
		{
			d: 'M0 0 L100 0 L100 18 C75 18 62 44 50 44 C38 44 25 18 0 18 Z',
			fit: 'fill'
		},
		{
			d: 'M0 100 L100 100 L100 82 C75 82 62 56 50 56 C38 56 25 82 0 82 Z',
			fit: 'fill'
		}
	]}
	flow={{
		mode: 'live',
		boundary: {
			left: 'open',
			right: 'open',
			top: 'wall',
			bottom: 'wall'
		},
		forces: [
			{
				kind: 'pressureGradient',
				vector: {
					x: 42,
					y: 0
				}
			}
		],
		outlets: [
			{
				edge: 'right',
				from: 0,
				to: 1,
				width: 0.05,
				clearDye: 0.35,
				clearScalars: true,
				clearVelocity: true
			}
		],
		visualization: {
			colorBy: 'speed',
			glowBy: 'none',
			transfer: 'cfd',
			range: [
				0,
				170
			],
			scale: 1.12
		}
	}}
	openBoundary
	curl={0}
	densityDissipation={0.35}
	velocityDissipation={0.09}
	maxTimeStep={0.016666666666666666}
	substeps={1}
	viscosity={0.016}
	viscosityIterations={5}
	wallFriction={0.16}
	wallFrictionWidth={2}
	pressure={0.9}
	pressureIterations={26}
	splatRadius={0.055}
	splatForce={6000}
	shading={false}
	colorful={false}
	bloom={false}
	bloomThreshold={0.6}
	bloomIntensity={0.5}
	sunrays={false}
	simResolution={160}
	dyeResolution={512}
	initialSplatCount={0}
	backColor={{
		r: 6,
		g: 10,
		b: 14
	}}
/>
```

### Karman — Kármán Vortex Street

Flow past a cylinder, evoking a von Kármán vortex street.

```svelte
<Fluid
	obstructions={[
		{
			d: 'M 25 52 A 10 10 0 1 0 45 52 A 10 10 0 1 0 25 52 Z',
			viewBox: [
				0,
				0,
				100,
				100
			],
			fit: 'fill'
		}
	]}
	obstructionColor={{
		r: 86,
		g: 98,
		b: 122
	}}
	flow={{
		mode: 'live',
		boundary: {
			left: 'open',
			right: 'open',
			top: 'open',
			bottom: 'open'
		},
		forces: [
			{
				kind: 'pressureGradient',
				vector: {
					x: 64,
					y: 0
				}
			}
		],
		sources: [
			{
				kind: 'point',
				x: 0.03,
				y: 0.2,
				dye: {
					r: 0.42,
					g: 0.07,
					b: 0.1
				},
				rate: 26,
				radius: 0.028
			},
			{
				kind: 'point',
				x: 0.03,
				y: 0.32,
				dye: {
					r: 0.42,
					g: 0.26,
					b: 0.05
				},
				rate: 26,
				radius: 0.028
			},
			{
				kind: 'point',
				x: 0.03,
				y: 0.44,
				dye: {
					r: 0.36,
					g: 0.4,
					b: 0.07
				},
				rate: 26,
				radius: 0.028
			},
			{
				kind: 'point',
				x: 0.03,
				y: 0.56,
				dye: {
					r: 0.07,
					g: 0.38,
					b: 0.18
				},
				rate: 26,
				radius: 0.028
			},
			{
				kind: 'point',
				x: 0.03,
				y: 0.68,
				dye: {
					r: 0.06,
					g: 0.26,
					b: 0.44
				},
				rate: 26,
				radius: 0.028
			},
			{
				kind: 'point',
				x: 0.03,
				y: 0.8,
				dye: {
					r: 0.34,
					g: 0.1,
					b: 0.4
				},
				rate: 26,
				radius: 0.028
			}
		],
		outlets: [
			{
				edge: 'right',
				from: 0,
				to: 1,
				width: 0.075,
				clearDye: 0.08,
				clearScalars: true,
				clearVelocity: true
			},
			{
				edge: 'top',
				from: 0,
				to: 1,
				width: 0.045,
				clearDye: 0.12,
				clearScalars: true,
				clearVelocity: false
			},
			{
				edge: 'bottom',
				from: 0,
				to: 1,
				width: 0.045,
				clearDye: 0.12,
				clearScalars: true,
				clearVelocity: false
			},
			{
				edge: 'left',
				from: 0,
				to: 1,
				width: 0.02,
				clearDye: 0.45,
				clearScalars: true,
				clearVelocity: false
			}
		],
		visualization: {
			colorBy: 'dye'
		}
	}}
	openBoundary
	curl={10}
	densityDissipation={0.7}
	velocityDissipation={0.075}
	maxTimeStep={0.008333333333333333}
	substeps={2}
	viscosity={0.014}
	viscosityIterations={8}
	wallFriction={0.16}
	wallFrictionWidth={2}
	pressure={0.9}
	pressureIterations={34}
	splatRadius={0.06}
	splatForce={6000}
	shading={false}
	colorful={false}
	bloom={false}
	sunrays={false}
	simResolution={192}
	dyeResolution={1024}
	initialSplatCount={0}
	presetSplats={[
		{
			x: 0.04,
			y: 0.14,
			dx: 460,
			dy: 0,
			color: {
				r: 0.2,
				g: 0.12,
				b: 0.3
			}
		},
		{
			x: 0.04,
			y: 0.32,
			dx: 460,
			dy: 0,
			color: {
				r: 0.1,
				g: 0.25,
				b: 0.3
			}
		},
		{
			x: 0.04,
			y: 0.5,
			dx: 460,
			dy: 0,
			color: {
				r: 0.28,
				g: 0.22,
				b: 0.1
			}
		},
		{
			x: 0.04,
			y: 0.68,
			dx: 460,
			dy: 0,
			color: {
				r: 0.1,
				g: 0.28,
				b: 0.16
			}
		},
		{
			x: 0.04,
			y: 0.86,
			dx: 460,
			dy: 0,
			color: {
				r: 0.3,
				g: 0.12,
				b: 0.18
			}
		}
	]}
	backColor={{
		r: 4,
		g: 6,
		b: 14
	}}
/>
```

### TeslaValve — Tesla Valve

Throughflow routing through a passive Tesla-valve channel.

```svelte
<Fluid
	containerShape={{
		type: 'svgPath',
		viewBox: [
			0,
			0,
			1220,
			257
		],
		fillRule: 'evenodd',
		maskResolution: 2048,
		d: '\n\tM 0 93.5 L 0.5 173.8 L 32.5 173.7 L 149.5 155.3 L 163.5 154.4 L 179.5 155.3 L 196.5 158.3 L 427.5 223.7 L 460.5 231.8 L 476.5 229.8 L 489.5 222.7 L 499.9 210.5 L 503.9 201.5 L 505.8 193.5 L 505.8 179.5 L 500.8 164.5 L 496.5 157.9 L 489.1 150.5 L 474.5 142.1 L 474.1 137.5 L 476.5 135.9 L 797.5 226.7 L 818.5 231.7 L 825.5 231.8 L 834.5 229.8 L 846.1 223.5 L 856.9 211.5 L 862.8 195.5 L 862.9 179.5 L 859 166.5 L 850.5 154.4 L 842.5 148 L 832.5 142.5 L 831.2 138.5 L 832.5 136.2 L 834.5 135.7 L 1157.5 227.8 L 1174.5 231.7 L 1190.5 229.8 L 1197.5 226.8 L 1204.5 221.7 L 1214 209.5 L 1219 193.5 L 1217.9 175.5 L 1212.6 162.5 L 1204.1 152.5 L 1188.5 143.1 L 1186.7 139.5 L 1188.5 136.1 L 1191.5 135.9 L 1220 144 L 1220 64.7 L 1031.5 118.6 L 1011.5 123 L 1009.2 120.5 L 1010.5 116.5 L 1024.5 108.8 L 1036.8 95.5 L 1041.8 83.5 L 1043.2 68.5 L 1039.8 53.5 L 1032.5 40.8 L 1020.5 31.2 L 1006.5 27.2 L 987.5 30.3 L 657.5 123.2 L 654 121.5 L 654.4 117.5 L 665.5 111.8 L 672.5 106.7 L 682 95.5 L 686.9 82.5 L 687.9 68.5 L 683.7 51.5 L 676.9 40.5 L 671.5 35.3 L 663.5 30.2 L 651.5 27.3 L 641.5 28 L 628.5 31.3 L 300.5 123.7 L 296.9 121.5 L 297.2 117.5 L 313.5 108.9 L 324.8 96.5 L 329.8 85.5 L 331.8 70.5 L 328.9 54.5 L 320.9 40.5 L 315.5 35.3 L 307.5 30.3 L 295.5 27.3 L 278.5 29.3 L 36.5 90.8 L 0.5 91.8 Z\n\tM 142.4 96.5 L 142.5 95.4 L 146.5 94.1 L 288.5 56.2 L 295.5 57 L 299.4 59.5 L 303 64.5 L 304.6 70.5 L 302.8 80.5 L 299.5 85 L 295.5 87.8 L 200.5 114.1 Z\n\tM 323.2 162.5 L 379.5 144.4 L 469.5 172 L 473.3 174.5 L 477 179.5 L 478.5 185.5 L 477.9 191.5 L 475.7 196.5 L 472.5 199.8 L 468.5 201.9 L 461.5 202.7 Z\n\tM 684 162.5 L 741.5 144.8 L 829.5 172.1 L 833.7 175.5 L 836.8 180.5 L 837.7 185.5 L 837 191.5 L 834.7 196.5 L 831.5 199.8 L 825.4 202.5 L 820.5 202.7 Z\n\tM 507.8 96.5 L 529.5 89.2 L 647.5 56.3 L 652.5 57.1 L 656.5 59.4 L 659.9 63.5 L 661.8 68.5 L 661.9 75.5 L 659.9 81.5 L 656.5 85.7 L 652.5 87.9 L 564.5 114.1 Z\n\tM 1040.1 162.5 L 1097.5 144.7 L 1185.5 172.4 L 1190.9 177.5 L 1192.7 181.5 L 1192.8 191.5 L 1189.6 197.5 L 1185.5 200.9 L 1180.5 202.5 L 1175.5 202.5 Z\n\tM 864.8 96.5 L 879.5 91.3 L 1003.5 56.3 L 1008.5 57.2 L 1012.5 59.7 L 1015.7 63.5 L 1017.6 69.5 L 1017.6 75.5 L 1015.6 81.5 L 1008.5 87.7 L 921.5 114.1 Z\n'
	}}
	flow={{
		mode: 'live',
		boundary: {
			left: 'open',
			right: 'open',
			top: 'wall',
			bottom: 'wall'
		},
		forces: [
			{
				kind: 'pressureGradient',
				vector: {
					x: 28,
					y: 0
				}
			}
		],
		outlets: [
			{
				edge: 'right',
				from: 0.16,
				to: 0.84,
				width: 0.08,
				clearDye: 0.32,
				clearScalars: true,
				clearVelocity: true
			}
		]
	}}
	curl={10}
	densityDissipation={0.36}
	velocityDissipation={0.085}
	maxTimeStep={0.016666666666666666}
	substeps={1}
	viscosity={0.04}
	viscosityIterations={10}
	wallFriction={0.14}
	wallFrictionWidth={2}
	pressure={0.9}
	pressureIterations={30}
	splatRadius={0.085}
	splatForce={6000}
	autoSplatRate={5}
	autoSplatCount={4}
	autoSplatVelocityX={190}
	autoSplatVelocityY={0}
	autoSplatCenterX={0.035}
	autoSplatBandWidth={0.024}
	autoSplatCenterY={0.49}
	autoSplatBandHeight={0.18}
	shading={false}
	colorful={false}
	bloom={false}
	sunrays={false}
	simResolution={192}
	dyeResolution={768}
	initialSplatCount={0}
	backColor={{
		r: 5,
		g: 9,
		b: 12
	}}
/>
```