Fluid Simulation

Preparing preview…

Installation

Choose your framework. The registry installs one component file and its PixiJS dependency.

Installation unavailable

The preview is public, but its installable release is still being prepared.

The registry command writes the component to src/lib/components/ui/FluidSimulation.svelte and installs its dependencies.

The registry command writes the component to src/components/ui/FluidSimulation.tsx and installs its dependencies.

The registry command writes the component to src/components/ui/FluidSimulation.vue and installs its dependencies.

Overview

Fluid Simulation implements Pavel Dobryakov’s minimal incompressible solver: curl, vorticity confinement, reflected-boundary divergence, pressure decay and Jacobi solve, gradient subtraction, advection, and additive splats.

Velocity and pressure run on a compact simulation grid while dye is transported independently at display-oriented resolution.

Basic usage

The shader fills its parent. Your layout decides whether that parent is a card, hero, or viewport.

Hero.svelte

<script lang="ts">
	import FluidSimulation from '$lib/components/ui/FluidSimulation.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<FluidSimulation
		class="absolute inset-0"
		color="#5867D3"
	/>

	<div class="relative z-10">Your content</div>
</section>
<script lang="ts">
	import FluidSimulation from '$lib/components/ui/FluidSimulation.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<FluidSimulation
		class="absolute inset-0"
		color="#5867D3"
	/>

	<div class="relative z-10">Your content</div>
</section>

import { FluidSimulation } from '@/components/ui/FluidSimulation';

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<FluidSimulation
				className="absolute inset-0"
				color="#5867D3"
			/>

			<div className="relative z-10">Your content</div>
		</section>
	);
}
import { FluidSimulation } from '@/components/ui/FluidSimulation';

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<FluidSimulation
				className="absolute inset-0"
				color="#5867D3"
			/>

			<div className="relative z-10">Your content</div>
		</section>
	);
}

<script setup lang="ts">
import FluidSimulation from '@/components/ui/FluidSimulation.vue';
</script>

<template>
	<section class="relative h-128 overflow-hidden">
		<FluidSimulation
			class="absolute inset-0"
			color="#5867D3"
		/>

		<div class="relative z-10">Your content</div>
	</section>
</template>
<script setup lang="ts">
import FluidSimulation from '@/components/ui/FluidSimulation.vue';
</script>

<template>
	<section class="relative h-128 overflow-hidden">
		<FluidSimulation
			class="absolute inset-0"
			color="#5867D3"
		/>

		<div class="relative z-10">Your content</div>
	</section>
</template>

Move the pointer over the canvas to inject velocity and dye; the first move only initializes pointer history.
Simulation and dye resolution rebuild their target sets, while pressure iterations trade GPU cost for incompressibility accuracy.
Density and velocity diffusion are rates, not per-frame retention values; each advection computes result / (1 + rate × dt).

Component API

Types below match the selected Svelte component.

Types below match the selected React component.

Types below match the selected Vue component.