WebGL fluid simulation,
as a Svelte 5 component.

Multi-instance, resize-stable, deterministic seeding. Drop one tag into any sized container and ship a fluid hero, background, interactive surface, or solver-native flow scene.

Get started GitHub
$ npm install svelte-fluid
Get started in 10 seconds 
<script>
  import { Fluid } from 'svelte-fluid';
</script>

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

No props required — <Fluid /> fills its parent. Requires Svelte 5, zero runtime dependencies. See the docs for presets, container shapes, and the imperative API.

Visual presets

Six featured visual wrappers from the 14 exported presets.

LavaLamp Slow warm blobs.
Plasma High-energy chromatic turbulence.
InkInWater Saturated dye dispersing.
FrozenSwirl Crystalline vortex.
Aurora Drifting polar ribbons.
Toroidal Annular storm.

Flow scenes

Persistent sources, scalar fields, outlets, and physical obstruction masks. Move the cursor through a scene to stir it.

GasFlare Temperature scalar with buoyancy.
Venturi Pressure-driven throat speed-up.
Karman Streakline rake shedding around a painted cylinder.
TeslaValve Forward routing with bypass recirculation.

Shapes

Six container primitives — as exported shape wrappers where one exists, or raw containerShape configs otherwise.

CircularFluid Vivid fluid in a circular boundary.
Rounded Rect Raw containerShape with a glass edge.
FrameFluid Circulation around an inner cutout.
AnnularFluid Ring vortex between two circles.
SVG Path Raw svgPath container (lightning).
SvgPathFluid Text-mode SVG mask container.

Glass

Refraction, reflectivity, and chromatic fringe. The shader does the work.

Crystal orb High refraction, vivid chroma.
Soft lens Low refraction, gentle chroma.
Portal ring Annular shape, prismatic edges.
Glass frame Frame shape, framed.

Sticky

Dye clings to text or SVG paths.

Quick fade Trails evaporate within a second.
Long-lasting dye Slow dissipation keeps cursor trails around.

Reveal

The simulation as an opacity mask. Move the cursor to uncover.

Revealed
Scratch to reveal
Auto reveal
Auto-reveal

Distortion

An image, warped by the velocity field.

Subtle strength 0.3, intensity 20.
Strong strength 0.45, intensity 28.

Playground

Live component previews with copyable Svelte snippets.

Library presets