Watercolor Image

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

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

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

Overview

Watercolor Image uses a Sobel structure tensor to steer an eight-sector anisotropic Kuwahara filter while preserving the source color.

The filtered image is rendered over the same procedural paper grain used by Pencil Logo. It has no fluid simulation, reveal mask, or desaturation stage.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Use Watercolor radius to control the scale of the painted color regions.
The tensor and watercolor passes are cached and rerun only when the image, filter radius, fit, size, or rendering quality changes.
Higher filter radius, target resolution, and device pixel ratio increase the 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.