Presets

Opinionated Fluid wrappers with tuned physics and visuals.

Presets are zero-config wrappers around the core <Fluid> component. Each one pins physics constants, visual settings, and opening splats to produce a specific look. Import a preset and drop it in — no props required.

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

<LavaLamp />

All presets accept width, height, class, style, seed, lazy, splatOnHover, aria-label, and backColor props for sizing, styling, accessibility, interactive splatting, and adapting the empty-canvas substrate to a host page background. Each preset's table below shows the backColor value that ships by default; pass your own to override.

The examples below show the public wrapper API. The detailed tables describe the pinned <Fluid> recipe, but hand-authored presetSplats arrays live in the preset source so copy-paste examples stay small.

LavaLamp

Warm, slow-rising blobs inside a glass rounded-rect vessel on a light-silver background. The blobs never fade and sway with lazy buoyant motion, like real molten wax in a lava lamp.

Container shape: roundedRect (cx: 0.5, cy: 0.5, halfW: 0.38, halfH: 0.45, cornerRadius: 0.15) with glass enabled.

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

<LavaLamp />

Prop	Value
`curl`	5
`densityDissipation`	0
`initialDensityDissipation`	0.25
`initialDensityDissipationDuration`	1.0
`velocityDissipation`	0
`pressure`	0.8
`splatRadius`	0.75
`splatForce`	2200
`shading`	true
`colorful`	false
`bloom`	false
`sunrays`	false
`glass`	true
`glassRefraction`	0.3
`glassReflectivity`	0.08
`glassChromatic`	0.1
`backColor`	{ r: 222, g: 218, b: 215 }
`initialSplatCount`	0
`presetSplats`	8 warm-spectrum blobs

Plasma

A vivid plasma ball with full-spectrum colors converging from all compass directions and churning at the center. Eight inward jets establish a magnetic-pinch convergence zone with intense bloom glow on a near-black backdrop.

Container shape: none (full canvas).

<Plasma />

Prop	Value
`curl`	40
`densityDissipation`	0.12
`initialDensityDissipation`	0.6
`initialDensityDissipationDuration`	2.0
`velocityDissipation`	0.08
`pressure`	0.8
`splatRadius`	0.35
`splatForce`	5000
`shading`	true
`colorful`	true
`colorUpdateSpeed`	8
`bloom`	true
`bloomThreshold`	0.6
`bloomIntensity`	1.5
`sunrays`	true
`sunraysWeight`	0.5
`backColor`	{ r: 4, g: 2, b: 12 }
`initialSplatCount`	0
`autoSplatRate`	0.4
`autoSplatCount`	4
`autoSplatCenterY`	0.5
`presetSplats`	8 inward compass jets

InkInWater

Concentrated ink droplets sinking through dark water, blooming outward as they fall. Modeled after india ink in a deep tank with organic tendrils from gentle Rayleigh-Taylor instability.

Container shape: none (full canvas).

<InkInWater />

Prop	Value
`curl`	8
`densityDissipation`	0.3
`velocityDissipation`	0.15
`pressure`	0.85
`splatRadius`	0.12
`splatForce`	800
`shading`	true
`colorful`	false
`bloom`	true
`bloomIntensity`	0.6
`bloomThreshold`	0.4
`sunrays`	false
`backColor`	{ r: 6, g: 8, b: 20 }
`initialSplatCount`	0
`autoSplatRate`	0.2
`autoSplatColor`	{ r: 0.06, g: 0.07, b: 0.50 }
`autoSplatVelocityX`	0
`autoSplatVelocityY`	-180
`autoSplatCenterY`	0.90
`presetSplats`	5 ink droplets near the top

FrozenSwirl

A single dramatic icy whirlpool in a circular vessel that spins itself out and comes to rest. High velocity dissipation freezes the motion fast, leaving a permanent crystalline curl on a deep navy backdrop.

Container shape: circle (cx: 0.5, cy: 0.5, radius: 0.45).

<FrozenSwirl />

Prop	Value
`curl`	50
`densityDissipation`	0
`velocityDissipation`	1.0
`pressure`	0.95
`splatRadius`	0.5
`splatForce`	8000
`shading`	true
`colorful`	false
`bloom`	true
`bloomIntensity`	1.0
`sunrays`	false
`backColor`	{ r: 4, g: 8, b: 24 }
`initialSplatCount`	0
`presetSplats`	3 icy-blue splats (1 central + 2 off-axis)

Aurora

Northern lights — green, magenta, and pale-blue ribbons layered across a deep night sky. The opening bands have a sideways push, then settle into a luminous steady wash while heavy bloom and sunrays grow the atmospheric glow over time.

Container shape: none (full canvas).

<Aurora />

Prop	Value
`curl`	40
`densityDissipation`	0
`velocityDissipation`	0.3
`pressure`	0.85
`splatRadius`	0.4
`splatForce`	6000
`shading`	true
`colorful`	false
`bloom`	true
`bloomIntensity`	1.5
`sunrays`	true
`sunraysWeight`	1.4
`backColor`	{ r: 2, g: 4, b: 18 }
`initialSplatCount`	0
`presetSplats`	5 horizontal-band ribbon splats

ToroidalTempest

A violent full-spectrum storm circulating in a toroidal ring. Eight high-velocity dye blobs orbit inside an annular container with fierce counter-clockwise flow. Periodic re-injection every 2 seconds keeps the ring fed with fresh color.

Container shape: annulus (cx: 0.5, cy: 0.5, innerRadius: 0.15, outerRadius: 0.42).

<ToroidalTempest />

Prop	Value
`curl`	50
`densityDissipation`	0.25
`initialDensityDissipation`	0.6
`initialDensityDissipationDuration`	2.0
`velocityDissipation`	0.02
`pressure`	0.8
`splatRadius`	0.4
`splatForce`	6000
`shading`	true
`colorful`	true
`colorUpdateSpeed`	8
`bloom`	true
`bloomThreshold`	0.5
`bloomIntensity`	1.8
`sunrays`	true
`sunraysWeight`	0.6
`backColor`	{ r: 2, g: 2, b: 10 }
`initialSplatCount`	0
`presetSplats`	8 tangential ring splats at 45-degree intervals

CircularFluid

Vivid swirling fluid contained inside a circle. Eight inward jets converge from the compass points, and the circular boundary reflects them back inward to produce a self-sustaining vortex. Automatic splats with orbital swirl sustain the motion.

Container shape: circle (cx: 0.5, cy: 0.5, radius: 0.45).

<CircularFluid />

<!-- also accepts splatOnHover -->
<CircularFluid splatOnHover />

Prop	Value
`curl`	35
`densityDissipation`	0.15
`initialDensityDissipation`	0.5
`initialDensityDissipationDuration`	2.0
`velocityDissipation`	0.06
`pressure`	0.8
`splatRadius`	0.38
`splatForce`	5000
`shading`	true
`colorful`	true
`colorUpdateSpeed`	8
`bloom`	true
`bloomThreshold`	0.6
`bloomIntensity`	1.0
`sunrays`	false
`backColor`	{ r: 4, g: 2, b: 12 }
`initialSplatCount`	0
`autoSplatRate`	1.2
`autoSplatCount`	1
`autoSplatCenterY`	0.5
`autoSplatBandHeight`	0.8
`autoSplatSwirl`	500
`presetSplats`	8 inward compass jets

FrameFluid

Fluid swirling around a rectangular inner cutout, like a living picture frame. Four edge jets create clockwise circulation and four diagonal jets add turbulence at the corners. Accepts optional innerCornerRadius and outerCornerRadius props.

Container shape: frame (cx: 0.5, cy: 0.5, halfW: 0.25, halfH: 0.25).

<FrameFluid />

<!-- with rounded corners -->
<FrameFluid innerCornerRadius={0.03} outerCornerRadius={0.05} />

Prop	Value
`curl`	30
`densityDissipation`	0.08
`initialDensityDissipation`	0.5
`initialDensityDissipationDuration`	2.0
`velocityDissipation`	0.06
`pressure`	0.8
`splatRadius`	0.42
`splatForce`	5000
`shading`	true
`colorful`	true
`colorUpdateSpeed`	8
`bloom`	true
`bloomThreshold`	0.6
`bloomIntensity`	0.9
`sunrays`	false
`backColor`	{ r: 0, g: 0, b: 0 }
`initialSplatCount`	0
`autoSplatRate`	0.5
`autoSplatCount`	6
`autoSplatCenterY`	0.5
`autoSplatBandHeight`	2.0
`autoSplatSwirl`	300
`presetSplats`	4 edge jets + 4 corner jets

AnnularFluid

A ring-vortex of fluid contained between two concentric circles. Eight tangential jets establish a counter-clockwise ring vortex. Automatic splats with orbital swirl sustain the motion.

Container shape: annulus (cx: 0.5, cy: 0.5, innerRadius: 0.15, outerRadius: 0.45).

<AnnularFluid />

Prop	Value
`curl`	35
`densityDissipation`	0.08
`initialDensityDissipation`	0.5
`initialDensityDissipationDuration`	2.0
`velocityDissipation`	0.06
`pressure`	0.8
`splatRadius`	0.38
`splatForce`	5000
`shading`	true
`colorful`	true
`colorUpdateSpeed`	8
`bloom`	true
`bloomThreshold`	0.6
`bloomIntensity`	1.0
`sunrays`	false
`backColor`	{ r: 4, g: 2, b: 12 }
`initialSplatCount`	0
`autoSplatRate`	0.5
`autoSplatCount`	5
`autoSplatCenterY`	0.5
`autoSplatBandHeight`	0.8
`autoSplatSwirl`	600
`presetSplats`	8 tangential ring jets

SvgPathFluid

Fluid flowing inside a bold ampersand "&" glyph, demonstrating text-mode container shapes. The letter is rasterized to a mask texture via Canvas 2D fillText, with evenodd fill rule so the counter (hole) in the glyph stays transparent.

Container shape: svgPath (text: "&", font: "bold 200px Georgia, serif", fillRule: "evenodd").

<SvgPathFluid />

Prop	Value
`curl`	30
`densityDissipation`	0.3
`velocityDissipation`	0.1
`pressure`	0.8
`splatRadius`	0.3
`splatForce`	5000
`shading`	true
`colorful`	true
`bloom`	true
`bloomIntensity`	0.9
`sunrays`	false
`backColor`	{ r: 2, g: 2, b: 8 }
`initialSplatCount`	8
`autoSplatRate`	0.8
`autoSplatCount`	1
`autoSplatBandHeight`	2.0
`autoSplatSwirl`	400

Overriding Preset Props

Presets hard-code their physics and visual props internally. However, each preset forwards sizing props (width, height), styling props (class, style), seed, lazy, and aria-label directly to the underlying <Fluid> component.

If you need to override a pinned physics prop, you have two options:

Use the base <Fluid> component directly and copy the preset's prop values as a starting point, changing what you need.
Fork the preset source file into your own component — preset source is short (typically under 100 lines) and self-contained.

Some presets expose additional props beyond the common set. For example, <FrameFluid> accepts innerCornerRadius and outerCornerRadius. Check the preset's exported type for the full list.