Dithered Wave

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

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

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

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

The Bayer matrix is embedded directly in both shader backends, so no lookup texture is required.

The source field and quantization run in one fragment pass.

Dithered Wave combines several domain-warped sine and radial waves into an organic full-canvas plasma field, samples it on a square pixel grid, then applies a 4 by 4 Bayer threshold before reducing it to four palette levels.

Separating the continuous plasma from the ordered post-process keeps the motion fluid while retaining a deliberate low-resolution surface.

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

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

<section class="relative h-128 overflow-hidden">
	<DitheredWave
		class="absolute inset-0"
		speed={0.8}
	/>

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

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

<section class="relative h-128 overflow-hidden">
	<DitheredWave
		class="absolute inset-0"
		speed={0.8}
	/>

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

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

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<DitheredWave
				className="absolute inset-0"
				speed={0.8}
			/>

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

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

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<DitheredWave
				className="absolute inset-0"
				speed={0.8}
			/>

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

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

<template>
	<section class="relative h-128 overflow-hidden">
		<DitheredWave
			class="absolute inset-0"
			:speed="0.8"
		/>

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

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

<template>
	<section class="relative h-128 overflow-hidden">
		<DitheredWave
			class="absolute inset-0"
			:speed="0.8"
		/>

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

• Set Dither strength to zero to keep the palette quantization without the ordered threshold pattern.
• Pixel size is defined in canvas pixels and can be enlarged for a more graphic texture.