WebGL fluid simulation as a Svelte 5 component. Multi-instance, resize-stable, deterministic seeding.
Get started
npm install svelte-fluid<script lang="ts">
import { Fluid } from 'svelte-fluid';
</script>
<div style="width: 100%; height: 100vh">
<Fluid />
</div>Start with the core <Fluid /> primitive. It fills its parent automatically,
and you can add typed props when you want custom physics, visuals, or masks.
Presets
Optional wrappers built on <Fluid /> for finished looks.
Each one pins its own physics, visuals, and opening splats.
Lava Lamp
Warm blobs in a glass vessel with rim refraction.
Plasma
Rapid color jets with strong curl and vivid bloom lighting up a dark canvas.
Ink in Water
Deep blue ink diffusing through dark water with a soft glow.
Frozen Swirl
Cyan dye flash-frozen in a circular vessel. Strong swirl, instant slowdown.
Aurora
Layered aurora ribbons that glow and slowly settle into the night-sky backdrop.
Toroidal Tempest
Full-spectrum storm circulating in a high-velocity ring.
Build with <Fluid />
Every prop on <Fluid /> is optional.
Use props directly when you want to design your own behavior.
Default
Out-of-the-box look with bloom, sunrays, and shading.
Flat + soft
Bloom off, low curl, faster dye fade.
Bold splats
Shading off, oversized splats, high force.
Slow + transparent
Low velocity dissipation on a transparent canvas.
Container shapes
Masks confine the fluid to a region. Choose from five built-in shapes or use custom SVG paths.
Circle
Fluid swirling inside a circular boundary.
Frame
Sharp-edged rectangular frame with no rounding.
Ring
Fluid flowing in a ring between two circles.
Rounded frame
Soft-edged frame with rounded inner and outer corners.
SVG path
Fluid shaped by an arbitrary SVG path — a lightning bolt.
Text glyph
Fluid shaped by a bold ampersand. Any text string can become a container.
Container effects
The glass prop adds a lens effect.
Circles get a dome with optical refraction;
other shapes get edge refraction at the boundary.
Crystal orb
Glass sphere with rainbow color fringing. The fluid magnifies at center and bends at the rim.
Soft lens
Subtle glass lens with soft edge reflections. Glass you feel more than see.
Portal ring
Rainbow light bending on a ring shape. Colorful fringes at both edges.
Glass frame
Light bending along a rounded picture frame. Rainbow fringes at the walls.
Reveal
<FluidReveal> uses the simulation as an opacity mask.
Cursor movement reveals content behind the fluid cover.
Scratch to reveal
Move your cursor to uncover the gradient. Tight, viscous trails with iridescent fringes that fade back over time.
Permanent reveal
Dark cover with gold fringes — a luxury scratch-card effect. Once revealed, content stays.
Auto-reveal
A cursor traces a path automatically. Teal fringes on a deep navy cover — touch to take over.
Turbulent reveal
Blush cover with purple fringes. High curl and low pressure create swirling, chaotic reveals.
Circle reveal
Reveal clipped to a circle — fluid flows freely past the boundary (openBoundary). A peephole scratch-card.
Bounded reveal
Rounded-rect boundary with openBoundary off — fluid bounces off the walls, creating turbulence at the edges.
Distortion
<FluidDistortion> warps an image using the fluid velocity field.
Move your cursor to create liquid ripples.
Image distortion
Cursor movement warps the image like liquid glass. The velocity field bends UV coordinates.
Auto-distort
An automated cursor creates a continuous ripple effect. Touch or click to take over.
Strong warp
High distortion power and intensity for dramatic liquid warping.
Contained with shape
Distortion confined to a circular container shape.
Sticky
<FluidStick> makes dye cling to text or SVG paths.
Physics-level modulation: reduced dissipation, artificial pressure, and amplified splats.
Sticky text
Dye accumulates on the word and resists fading. Fluid flows around the letterforms.
Lightning bolt
SVG path acts as a dye attractor. The shape glows with accumulated color.
Sticky + circle
Sticky text inside a circular container. The fluid is confined to the circle while dye clings to the letters.
Strong pressure
High stickyPressure makes fluid visibly deflect around the shape, creating turbulent vortices.
Playground
Tweak any parameter live. Switch between <Fluid>, <FluidReveal>, <FluidStick>, and <FluidDistortion> modes.