Coded motion for the web. A field of light flows and folds across the frame, drawn as a grid of characters: blank where it is empty, then dots, dashes, plus signs and stars, up to dense hashes and @ signs where it is brightest, with the densest cells in an accent colour. A slow twinkle runs through the grid. Switch the character set to binary digits, Braille-style dot cells or flow lines that follow the field.

Made for developer and product sites, changelogs, docs and launch pages, stream scenes and video backgrounds. Every colour is a setting, along with row count, shape size, swirl, density, contrast, stroke weight, twinkle and glow. The demo has presets for ink, green phosphor, amber, paper, blueprint and binary looks, and a Behind text preset for body copy.

It is a usable background, not just a loop: its reduced-motion setting holds the picture still on its poster frame for visitors who ask for less motion, and a veil setting fades the characters so text reads over them. At the Behind text preset, light text keeps a contrast ratio of at least 5.1:1 against 98 % of the background under it.

What you get: a GLSL ES 3.00 fragment shader for plain WebGL2, an ES module that returns a three.js ShaderMaterial, a Shadertoy version, an offline demo page with a settings panel, a 10-second 1920 x 1080 H.264 loop that plays end to start without a seam, the same loop upright at 1080 x 1920 for vertical video, and the poster frame as a PNG (and a WebP for the web). The characters are drawn as strokes, so no font file or texture is needed.

One pass, about 2.1 ms of GPU time per 1920 x 1080 frame on a recent laptop, measured in headless Chromium. The README covers set-up in WebGL2, three.js and Shadertoy, reduced motion, every uniform with its default and range, and performance notes.