Getting Started

Add a GPU-accelerated fluid simulation to your Svelte app in under a minute.

Install

npm install svelte-fluid

Or with your preferred package manager:

bun add svelte-fluid
pnpm add svelte-fluid
yarn add svelte-fluid

Requires Svelte 5. No runtime dependencies.

Your first fluid

Drop a <Fluid> component into any container. It fills its parent automatically.

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

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

Click and drag to create splats. The simulation runs on the GPU via WebGL, so it's fast even on mobile.

For a blank scaffold, this starter config gives you an immediately visible canvas while you confirm the install:

<div style="width: 100%; height: 400px">
  <Fluid
    seed={42}
    initialSplatCount={20}
    autoSplatRate={0.25}
    autoSplatCount={2}
    densityDissipation={0.35}
    velocityDissipation={0.08}
    curl={45}
    splatRadius={0.35}
    bloomIntensity={1.2}
    sunraysWeight={0.6}
    backColor={{ r: 6, g: 10, b: 26 }}
  />
</div>

Use a preset

Presets are opinionated <Fluid> wrappers with tuned physics and visuals. Drop one in with zero configuration:

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

<!-- Warm blobs in a glass vessel -->
<LavaLamp />

<!-- Rapid color jets with vivid bloom -->
<Plasma />

<!-- Northern-lights ribbons -->
<Aurora />

See all 10 presets on the Presets page.

Customize

Every aspect of the simulation is controllable via props. Here's a common starting point:

<Fluid
  curl={30}
  splatRadius={0.3}
  splatForce={8000}
  densityDissipation={0.5}
  velocityDissipation={0.3}
  bloom
  shading
  colorful
/>

See the full list of 50+ props on the Configuration page.

Container shapes

Confine the fluid to a geometric shape. The simulation physically enforces the boundary — fluid bounces off the walls.

<Fluid containerShape={{ type: 'circle', cx: 0.5, cy: 0.5, radius: 0.45 }}  />

<Fluid containerShape={{ type: 'roundedRect', cx: 0.5, cy: 0.5,
  halfW: 0.35, halfH: 0.4, cornerRadius: 0.06 }}  />

Five shape types are available: circle, frame, roundedRect, annulus, and svgPath. See the Container Shapes guide.

Beyond the basics

svelte-fluid ships six component variants for different use cases:

For programmatic control (injecting splats, pausing, resuming), see the API Reference.