Canvas
An image display component that applies various ordered dithering algorithms (Bayer, Halftone, Void & Cluster).
npx @motion-core/cli add dithered-imageimport { DitheredImage } from "$lib/motion-core";import { DitheredImage } from "$lib/motion-core";<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/demos/sample-6.jpg"
class="h-full min-h-96 w-full"
{ditherMap}
{pixelSize}
{threshold}
{color}
{backgroundColor}
/>
| Prop | Type | Default |
|---|---|---|
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 | "" |