Palette Dither

Choose your framework. The registry installs one component file and its PixiJS dependency.

The registry command writes the component to src/lib/components/ui/PaletteDither.svelte and installs its dependencies.

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

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

Palette Dither samples an image on a canvas-aligned grid, compares its luminance against a Bayer threshold, and resolves every pixel to one of four explicit palette colors.

The ordered pattern restores the impression of intermediate tones without introducing colors outside the selected palette.

The shader fills its parent. Your layout decides whether that parent is a card, hero, or viewport.

<script lang="ts">
	import PaletteDither from '$lib/components/ui/PaletteDither.svelte';
</script>

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

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

<script lang="ts">
	import PaletteDither from '$lib/components/ui/PaletteDither.svelte';
</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Use Pixel size to trade fine photographic detail for a more graphic low-resolution texture.
• Dither strength at zero keeps the same palette while removing the spatial threshold pattern.