Fluid Watercolor 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/FluidWatercolorReveal.svelte and installs its dependencies.

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

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

Overview

Fluid Watercolor Reveal derives a Sobel structure tensor from the fitted source, then uses its dominant orientation to guide an eight-sector anisotropic Kuwahara filter.

The cached watercolor result becomes a monochrome paper print. Pointer-driven fluid dye reveals its full-color watercolor rendering without recalculating the filter passes every frame.

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

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

	<div class="relative z-10">Your content</div>
</section>
<script lang="ts">
	import FluidWatercolorReveal from '$lib/components/ui/FluidWatercolorReveal.svelte';
</script>

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

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

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

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

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

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

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

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

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

		<div class="relative z-10">Your content</div>
	</section>
</template>
<script setup lang="ts">
import FluidWatercolorReveal from '@/components/ui/FluidWatercolorReveal.vue';
</script>

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

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

Move the pointer across the image to reveal the full-color watercolor rendering.
Watercolor radius reruns the cached filter; fluid and color controls update independently.
Higher filter radius, target resolution, and device pixel ratio increase the one-time preprocessing cost.

Component API

Types below match the selected Svelte component.

Types below match the selected React component.

Types below match the selected Vue component.