Fluid Image Reveal

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

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

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

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

Fluid Image Reveal uses the same curl, vorticity, divergence, pressure, and advection pipeline as Fluid Simulation, with transported dye serving as the reveal mask.

A softly thresholded density field reveals the second fitted image while pointer movement continuously injects motion and mask density.

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

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

<section class="relative h-128 overflow-hidden">
	<FluidImageReveal
		class="absolute inset-0"
		baseImage="/images/your-image.jpg"
		revealImage="/images/your-image.jpg"
	/>

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

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

<section class="relative h-128 overflow-hidden">
	<FluidImageReveal
		class="absolute inset-0"
		baseImage="/images/your-image.jpg"
		revealImage="/images/your-image.jpg"
	/>

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

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

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<FluidImageReveal
				className="absolute inset-0"
				baseImage="/images/your-image.jpg"
				revealImage="/images/your-image.jpg"
			/>

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

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

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<FluidImageReveal
				className="absolute inset-0"
				baseImage="/images/your-image.jpg"
				revealImage="/images/your-image.jpg"
			/>

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

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

<template>
	<section class="relative h-128 overflow-hidden">
		<FluidImageReveal
			class="absolute inset-0"
			baseImage="/images/your-image.jpg"
			revealImage="/images/your-image.jpg"
		/>

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

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

<template>
	<section class="relative h-128 overflow-hidden">
		<FluidImageReveal
			class="absolute inset-0"
			baseImage="/images/your-image.jpg"
			revealImage="/images/your-image.jpg"
		/>

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

• Move the pointer across the canvas to reveal the second image.
• The first pointer move establishes history without injecting a jump from the canvas origin.
• Higher pressure iterations and target resolutions improve fidelity but increase GPU work.