Fluid Simulation

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

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.

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.

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

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