Components

Six components for different use cases. Each one wraps the same WebGL engine with a different interface.

<Fluid>

The core component. Renders a WebGL fluid simulation on a canvas that fills its parent container.

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

  let fluidRef = $state<{ handle: FluidHandle } | undefined>();
</script>

<button onclick={() => fluidRef?.handle.randomSplats(8)}>Splat</button>

<div style="height: 400px">
  <Fluid bind:this={fluidRef} curl={30} bloom shading colorful />
</div>

Accepts all FluidConfig props plus:

Exposes a FluidHandle via bind:this for programmatic control (splats, pause, resume).

<FluidBackground>

Full-viewport fluid behind page content. Use this as a page or screen wrapper; the canvas is fixed to the viewport and the slotted content layer is stacked above it.

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

<FluidBackground exclude=".card, .sidebar" splatOnHover colorful shading bloom>
  <!-- your page content -->
</FluidBackground>

DOM elements matching the exclude selector become physical "holes" — the fluid pools around them. The component observes scroll, resize, and DOM mutations to keep exclusion zones accurate.

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

<FluidBackground class="fluid-screen" exclude=".site-nav, .panel" splatOnHover>
  <nav class="site-nav">...</nav>
  <main class="hero-copy">...</main>
  <section class="panel">...</section>
</FluidBackground>

<style>
  :global(.fluid-screen) {
    min-height: 100vh;
    isolation: isolate;
  }

  .site-nav,
  .panel {
    position: relative;
    z-index: 2;
    pointer-events: auto;
  }

  .hero-copy {
    position: relative;
    z-index: 1;
  }
</style>

Defaults to pointerTarget='window' and splatOnHover=true. All FluidConfig props are accepted.

<FluidReveal>

The fluid acts as an opacity mask — cursor movement reveals content behind a solid cover. Great for scratch-to-reveal effects and interactive hero sections.

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

<FluidReveal
  sensitivity={0.24}
  coverColor={{ r: 0.15, g: 0.15, b: 0.18 }}
  fringeColor={{ r: 0.6, g: 0.7, b: 0.85 }}
  accentColor={{ r: 0.2, g: 0.35, b: 0.7 }}
>
  <div>Your hidden content here</div>
</FluidReveal>

Also accepts width, height, class, style, lazy, autoPause, and all FluidConfig props.

<FluidDistortion>

The fluid velocity field warps an underlying image like liquid glass. Move your cursor to create ripples.

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

<FluidDistortion src="/hero.jpg" strength={0.4} intensity={24} />

Also accepts width, height, class, style, lazy, autoPause, and all FluidConfig props.

<FluidStick>

Dye clings to text or SVG paths via physics-level modulation. Reduced dissipation on the mask makes dye persist, while artificial pressure pushes fluid around the shape.

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

<!-- Text mode -->
<FluidStick text="FLUID" font="900 120px sans-serif" />

<!-- SVG path mode -->
<FluidStick d="M55 5 L25 45 L45 45 L20 95 L75 50 L55 50 L80 5 Z" />

Also accepts width, height, class, style, lazy, autoPause, and all FluidConfig props.

<FluidText>

Fluid confined inside text letterforms. Wraps <Fluid> with an svgPath container shape in text mode. Automatically computes the correct aspect ratio via measureText() so the font appears at a consistent visual height regardless of text length.

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

<FluidText
  text="SVELTE"
  height={100}
  seed={42}
  splatOnHover
  shading
  colorful
/>

Also accepts class, style, lazy, autoPause, and all FluidConfig props. Defaults to transparent=true.