Duotone Halftone

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

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

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

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

Duotone Halftone converts source luminance into the area of one antialiased dot per rotated screen cell.

Each cell samples the image at its own center, so color boundaries cannot slice through individual dots and the print structure stays coherent.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Pair larger cells with a lower Dot scale to expose more of the paper color.
• Use Screen angle to align the print texture with surrounding layout geometry.