Lab

Wordmark halftone

A print-shop trick in a shader: two ink plates on a rotated dot screen, slightly out of register. Nothing moves until you touch it.

Cost: WebGL through three.js, loaded when this page opens. On touch, swipe up or down to scroll past the panel, and drag sideways on it to push the plates.

RAFIIMANGGALAJAPAMELRAFIIMANGGALAJAPAMEL

Loading three.js and drawing the wordmark texture...

Controls
10 px
15°
14 px

How it works

  • The name is drawn into a 2D canvas first, then read as a texture by one fragment shader on a full-screen quad.
  • Two plates, one per ink, each on its own rotated screen. Every dot is sized by the tone under its centre, so a dot is always a clean circle.
  • Press and drag on the panel and the plates slide toward the pointer, then ease back on release. The separation slider does the same job with the keyboard.
  • It draws a frame only when something changes, then stops. The pixel ratio is capped, and the loop pauses when the tab is hidden or the panel is off screen.