Halftone Free WebGPU shader

Print language. Digital motion.

A procedural halftone background for React with drifting tones and interactive dots. Adjust screen angle and dot gain, then export the WebGPU shader.

Open editor Meet the surface

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet.

A surface, not a screenshot.

FreeReact exportRaw WGSL

THE SYSTEM BEHIND THE SURFACE

Inside Halftone.

Halftone translates a generated drifting tone field into dots. Screen angle rotates the sampling grid, density sets the pattern and dot gain changes how strongly the tones fill each cell.

It does not convert uploaded images into halftone and is not a CMYK print-separation tool. The tone source is procedural.

0.404 ms legacy timing (method not recorded; not a pure GPU measurement). 1440x900 @ dpr 2; Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-09-02. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

Screen density

Dots per unit across the rotated screen.

Dot gain

How large a dot grows for a given tone.

Screen angle

25 degrees is the classic single-plate angle. Near 0 or 90 the rows align with the pixel grid and moire.

Tone scale

Size of the light and dark areas in the field; higher values make them smaller.

Color Looks preserve these settings. Open the editor for all 11 controls.

KEEP THE SOURCE. KEEP THE CONTROL.

From preview to your project.

Choose a Look, tune it in the editor, then download the Export Kit. Install the runtime and copy the generated component into your project.

Every control in the editor is a typed prop. Leave a prop out to keep the value you exported; change one and the running shader updates without restarting. Give the surface a size and pass fallback for browsers without WebGPU.

In Next.js, use a client component and give its container an explicit size. Keep headings, links and accessible content in HTML above the decorative canvas.

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet.

Open editor & export

Markdown guide

Usage example — download Halftone.tsx from the editor first. This example imports that local file; it is not the shader component itself.

Terminal

npm install ./vendor/aperveil-runtime-0.1.0.tgz ./vendor/aperveil-react-0.1.0.tgz

Halftone usage

"use client";

import Halftone from "./Halftone";

export default function Hero() {
  return (
    <Halftone
      className="hero-shader"
      density={60} paperColor="#0f1119ff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

// .hero-shader { width: 100%; height: 560px; }

Download and extract the complete Export Kit first. Run its local package command from the ZIP root, then copy the component into your project. Public npm and CLI distribution is coming soon.

THE SURFACE IN CONTEXT