Fluid Mask Reveal

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/FluidMaskReveal.svelte and installs its dependencies.

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

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

Overview

Fluid Mask 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.

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 FluidMaskReveal from '$lib/components/ui/FluidMaskReveal.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<FluidMaskReveal
		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 FluidMaskReveal from '$lib/components/ui/FluidMaskReveal.svelte';
</script>

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

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

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

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

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

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<FluidMaskReveal
				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 FluidMaskReveal from '@/components/ui/FluidMaskReveal.vue';
</script>

<template>
	<section class="relative h-128 overflow-hidden">
		<FluidMaskReveal
			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 FluidMaskReveal from '@/components/ui/FluidMaskReveal.vue';
</script>

<template>
	<section class="relative h-128 overflow-hidden">
		<FluidMaskReveal
			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.

Component API

Types below match the selected Svelte component.

Types below match the selected React component.

Types below match the selected Vue component.