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. Presets enable splatOnHover by default; pass splatOnHover={false} to disable pointer-driven splats. Flow-scene presets also expose pointerInput.

Each preset below has a Show code action (the wrapper usage plus the full <Fluid> recipe to fork from) and an Open in Playground link that loads the exact configuration into the interactive playground. The prop tables are generated directly from the preset registry, so they always match what the component renders.

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.

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).

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).

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).

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).

Toroidal

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).

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).

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).

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).

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").

GasFlare

A natural-gas flare plume from a short exit nozzle. A hot vertical jet enters through a physical slot, entrains surrounding fluid, rolls into shear-layer vortices, and rises under temperature-scalar buoyancy with a fire transfer ramp.

Obstructions: two lower slabs form the left and right walls of a flare stack, leaving a center nozzle slot open. The top and side edges drain the plume so hot content can vent instead of saturating the canvas.

Honest physics note: this is an incompressible jet/plume simulation with advected heat scalar and buoyancy. It does not model combustion chemistry, compressibility, soot, radiation, or heat release.

Venturi

Bernoulli's principle made visible. A gentle left-to-right body force acts like a pressure gradient, pushing fluid through a wide channel that is squeezed through a central throat formed by two concave obstruction islands. The visualization colors the velocity-magnitude field with a CFD-style blue→cyan→green→yellow→red ramp so the throat acceleration is readable instead of appearing as a uniform center jet.

Obstructions: two concave islands (top + bottom) pinching a horizontal channel from a wide inlet to a ~5.3:1 contraction at the throat. Open left/right boundaries let the inlet feed throughflow while the solid obstruction mask forms the throat; laminar (curl 0) so the streamlines stay ordered.

Honest physics note: the throat speed-up is an incompressible, low-speed effect and belongs in the live solver. Pressure/density changes from compressible gas flow are not modeled.

Karman

Flow past a single cylinder, evocative of a von Kármán vortex street — the alternating wake of vortices shed behind a bluff body in steady cross-flow. A pressure-gradient body force drives the field left to right while a rake of six persistent dye-only streakline sources (one hue each — the classic wind-tunnel smoke-rake, passively riding the flow) feeds continuous colored filaments through the wake. The cylinder is painted via obstructionColor so the bluff body reads as a visible object.

Obstruction: a single cylinder (circle authored as two SVG arcs, radius 10 in a [0,0,100,100] viewBox, fit: 'fill') placed left of center and slightly below the inflow centerline — the deliberate vertical offset breaks symmetry so the wake sheds instead of forming a stable standing pair. All canvas edges are open with dye sponge drains; only the downstream outlet damps velocity.

Honest physics note: this is evocative of a vortex street, not a validated shedding simulation. The cylinder is a rasterized mask, shedding emerges from shear layers rolling up behind the disc, and its frequency is not a real Strouhal number.

TeslaValve

A passive Tesla-valve-like channel with a straight conduit and patent-style alternating bypass loops. A pressure-gradient drive carries discrete multicolor left-edge splats through a high-viscosity channel, making dye packets and side-bucket recirculation easier to inspect; forward throughflow is expected.

Geometry: a cropped reference SVG path defines the conduit, side-channel buckets, and internal slots as one even-odd container mask. The filled SVG region is the physical fluid domain, so the slots and walls are solved as part of the same boundary.

Honest physics note: this is a live incompressible throughflow visualization, not a hard-stop check valve. It gives plausible routing, separation, and recirculation cues, but it does not calculate a reverse/forward pressure-drop ratio or real valve rectification.

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, splatOnHover, aria-label, and backColor directly to the underlying <Fluid> component. Flow-scene presets also forward pointerInput.

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 — the Show code action above gives you the full recipe to paste.
• 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.