Motion Core

Canvas

Watercolor Image

An image display component that applies a structure-tensor guided anisotropic Kuwahara watercolor filter.

ogl

Installation

Install the component

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

Import the component

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

Usage

Props

6
<script lang="ts">
	import { WatercolorImage } from "motion-core";
	import type { ComponentProps } from "svelte";

	type Props = Partial<ComponentProps<typeof WatercolorImage>>;

	let { radius = 6, tensorPass = true, kuwaharaPass = true }: Props = $props();
</script>

<WatercolorImage
	src="/images/photos/sample-image-16.webp"
	class="h-full min-h-96 w-full"
	{radius}
	{tensorPass}
	{kuwaharaPass}
/>

<script lang="ts">
	import { WatercolorImage } from "motion-core";
	import type { ComponentProps } from "svelte";

	type Props = Partial<ComponentProps<typeof WatercolorImage>>;

	let { radius = 6, tensorPass = true, kuwaharaPass = true }: Props = $props();
</script>

<WatercolorImage
	src="/images/photos/sample-image-16.webp"
	class="h-full min-h-96 w-full"
	{radius}
	{tensorPass}
	{kuwaharaPass}
/>

Props

WatercolorImage

PropTypeDefault
src
string —
radius
number 6
tensorPass
boolean true
kuwaharaPass
boolean true
class
string ""