Motion Core

Canvas

Fluid Image Reveal

A fluid simulation mask that reveals a second image through pointer-driven splats.

@threlte/core@threlte/extrasthree

Installation

Install the component

Run the following command to install the component and its dependencies:
npx @motion-core/cli add fluid-image-reveal

Import the component

Import the component into your Svelte file: 
import { FluidImageReveal } from "$lib/motion-core";
import { FluidImageReveal } from "$lib/motion-core";

Usage

<script lang="ts">
	import { FluidImageReveal } from "motion-core";

	const baseImage = "/images/demos/night.png";
	const revealImage = "/images/demos/day.png";
</script>

<FluidImageReveal
	{baseImage}
	{revealImage}
	dissipation={0.97}
	pointerSize={0.007}
	blendSoftness={0.3}
	class="h-full min-h-96 w-full"
/>

Props

FluidImageReveal

PropTypeDefault
baseImage
string —
revealImage
string —
dissipation
number 0.96
pointerSize
number 0.005
velocityDissipation
number 0.96
pressureIterations
number 10
blendSoftness
number 0.22
class
string ""