Halftone Cell Wall

Preparing preview…

Installation

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

Installation unavailable

The preview is public, but its installable release is still being prepared.

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

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

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

The effect is procedural and ships without image assets or auxiliary textures.

Both GPU backends use the same fixed 3 by 3 neighbor search and derivative-based antialiasing.

Overview

Halftone Cell Wall samples a continuous animated field once per cell, converts coverage to radius by area, and searches neighboring cells so large dots remain intact beyond the original grid.

The result sits between print halftone and a liquid cell wall: structured at close range and smoothly tonal from a distance.

Basic usage

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

Hero.svelte

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

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

	<div class="relative z-10">Your content</div>
</section>
<script lang="ts">
	import HalftoneCellWall from '$lib/components/ui/HalftoneCellWall.svelte';
</script>

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

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

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

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

			<div className="relative z-10">Your content</div>
		</section>
	);
}
import { HalftoneCellWall } from '@/components/ui/HalftoneCellWall';

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

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

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

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

		<div class="relative z-10">Your content</div>
	</section>
</template>
<script setup lang="ts">
import HalftoneCellWall from '@/components/ui/HalftoneCellWall.vue';
</script>

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

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

Raise Dot reach above one to make neighboring dots overlap into larger scalloped regions.
Cell size is measured in render-target pixels, so the pattern remains legible across aspect ratios.

Component API

Types below match the selected Svelte component.

Types below match the selected React component.

Types below match the selected Vue component.