Motion Core

Canvas

Dithered Image

An image display component that applies various ordered dithering algorithms (Bayer, Halftone, Void & Cluster).

ogl

Installation

Install the component

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

Import the component

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

Usage

Props

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

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

	let {
		ditherMap = "halftone",
		pixelSize = 1,
		threshold = 0.2,
		color = "#ff6900",
		backgroundColor = "#17181A",
	}: Props = $props();
</script>

<DitheredImage
	src="/images/photos/sample-image-9.webp"
	class="h-full min-h-96 w-full"
	{ditherMap}
	{pixelSize}
	{threshold}
	{color}
	{backgroundColor}
/>

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

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

	let {
		ditherMap = "halftone",
		pixelSize = 1,
		threshold = 0.2,
		color = "#ff6900",
		backgroundColor = "#17181A",
	}: Props = $props();
</script>

<DitheredImage
	src="/images/photos/sample-image-9.webp"
	class="h-full min-h-96 w-full"
	{ditherMap}
	{pixelSize}
	{threshold}
	{color}
	{backgroundColor}
/>

Props

DitheredImage

PropTypeDefault
src
string —
ditherMap
"bayer4x4""bayer8x8""halftone""voidAndCluster" "bayer4x4"
pixelSize
number 1
color
stringnumber[number, number, number]{ r: number; g: number; b: number } "#ff6900"
backgroundColor
stringnumber[number, number, number]{ r: number; g: number; b: number } "#17181A"
threshold
number 0.0
class
string ""