Fluid Simulation

Installation

Install the component

Run the following command to install the component and its dependencies:

npx @motion-core/cli add fluid-simulation

npx @motion-core/cli add fluid-simulation

Import the component

Import the component into your Svelte file:

import { FluidSimulation } from "$lib/motion-core";

import { FluidSimulation } from "$lib/motion-core";

Usage

Props

Dissipation

0.960

Pointer Size

0.005

Color

Velocity Dissipation

0.960

Pressure Iterations

<script lang="ts">
	import { FluidSimulation } from "motion-core";
	import type { ComponentProps } from "svelte";

	type Props = Partial<ComponentProps<typeof FluidSimulation>>;

	let {
		dissipation = 0.96,
		pointerSize = 0.005,
		color = "#ff6900",
		velocityDissipation = 0.96,
		pressureIterations = 10,
	}: Props = $props();
</script>

<FluidSimulation
	class="h-full min-h-96 w-full"
	{dissipation}
	{pointerSize}
	{color}
	{velocityDissipation}
	{pressureIterations}
/>

<script lang="ts">
	import { FluidSimulation } from "motion-core";
	import type { ComponentProps } from "svelte";

	type Props = Partial<ComponentProps<typeof FluidSimulation>>;

	let {
		dissipation = 0.96,
		pointerSize = 0.005,
		color = "#ff6900",
		velocityDissipation = 0.96,
		pressureIterations = 10,
	}: Props = $props();
</script>

<FluidSimulation
	class="h-full min-h-96 w-full"
	{dissipation}
	{pointerSize}
	{color}
	{velocityDissipation}
	{pressureIterations}
/>

Props

FluidSimulation

Prop	Type	Default
`dissipation`	`number`	`0.96`
`pointerSize`	`number`	`0.005`
`color`	`stringnumber[number, number, number]{ r: number; g: number; b: number }`	`"#ff6900"`
`velocityDissipation`	`number`	`0.96`
`pressureIterations`	`number`	`10`
`class`	`string`	`""`