Motion Core

canvas

Dithered Image

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

@threlte/core@threlte/extrasthree

Installation

Install the component

Run the following command to install the component and its dependencies:
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

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

<DitheredImage
	src="/images/demos/sample-6.jpg"
	ditherMap="bayer8x8"
	class="h-full min-h-96 w-full"
	pixelSize={2}
	threshold={0.05}
/>

Props

DitheredImage

PropTypeDefault
src
string —
ditherMap
"bayer4x4""bayer8x8""halftone""voidAndCluster" "bayer4x4"
pixelSize
number 1
color
string "#ff6900"
backgroundColor
string "#111113"
threshold
number 0.0
class
string ""