CMYK Halftone Shader for React

CMYK Halftone Shader prints a moving picture the way a magazine does. Soft blooms of cyan-blue, pink, yellow and violet drift slowly across the box, and the picture is separated into four process inks. Each ink is a screen of dots at its classic angle, cyan at 15°, magenta at 75°, yellow at 0° and black at 45°, with each dot sized by how much ink the picture needs there, so together they form the rosettes you see through a loupe. The inks overprint by multiplying on warm, faintly grained paper, and each plate drifts a pixel or so out of register. A WGSL fragment shader on WebGPU computes every dot each frame, for under 1 ms of GPU time.

Use it behind an editorial hero, a zine, a print shop or a design studio's page. For one ink on one screen, in plain CSS, use the Halftone background; for 1-bit pixel dithering, Dither Gradient Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS gradient of the same inks under a dot grid in browsers without WebGPU.

Installation

Usage

import {
  CmykHalftoneShader,
} from "@/components/ui/cmyk-halftone-shader";

<CmykHalftoneShader className="flex min-h-[32rem] items-center justify-center">
  <div className="bg-[#f5f0e6]/80 px-8 py-6">
    <h1 className="font-serif text-6xl font-bold text-neutral-900">Issue 04</h1>
  </div>
</CmykHalftoneShader>

CMYK Halftone Shader is a container: your content sits on top of the print, in normal flow. It fills its own box, so give it a height or content. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10". The paper is light in both color schemes, so use dark text: it reads on the paper and the lighter tints, about three quarters of the box, but not on the dense blooms. For copy over them, use a paper panel like the bg-[#f5f0e6]/80 one above, which keeps near-black text above 9.5:1 everywhere.

Demos

Pop art

pitch={14} doubles the distance between dots, so each dot is big enough to see on its own, like a Lichtenstein panel, and intensity={1.3} lays down more ink, for bolder color.

Zine

cyanColor="#0078bf" and magentaColor="#ff48b0" swap in a risograph's blue and fluorescent pink, and misregister={3} lets the plates wander up to 3 pixels apart, for a hand-printed feel.

Performance

About 0.8 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. Each pixel checks the four nearest dots on each of the four plates, so pitch doesn't change the cost. Keep the default quality: the dots are a few pixels across and blur at half resolution. The animation stops when the shader scrolls out of view, and the browser pauses it in a hidden tab. Every shader on a page shares one GPU device and one frame loop, and vgpu (about 50 KB gzipped) loads only when the first one mounts.

Browser support

The shader needs WebGPU: Chrome and Edge, Safari 26 and later, and Firefox on Windows and macOS. Elsewhere, and until the first frame, the box shows soft CSS blooms of the same inks under a fine dot grid, so the layout never jumps. data-state on the root reads unsupported there, if you want to style around it. See Shader Canvas.

Accessibility

The print is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame and stops. Nothing flashes: the blooms take a minute or more to drift across, so dots grow and shrink slowly, and the plates wander over seconds; measured over 6 seconds with WCAG's area test, and even in 32-pixel patches, it never flashes. Use dark text, on a paper panel over the blooms, as in Usage.

FAQ

API Reference