A halftone, but built out of little marks instead of dots. Every cell of the source reads one brightness, that brightness picks one of four bands, and the band's glyph gets stamped into the cell and tinted with the band's colour. Four thresholds, four glyphs, four colours — the whole image is just those choices repeated a few thousand times.

The bucketing happens once per cell, not once per pixel: the fragment shader snaps each UV to its cell's centre before sampling the source, so a whole cell reads a single luminance and a single glyph tile, however many screen pixels that cell covers. The glyph itself repeats with a plain mod() on the UV rather than a hardware REPEAT wrap, which sidesteps the non-power-of-two restrictions WebGL1 puts on repeat-wrapped textures — the uploaded photo can be any size.

Remix doesn't cut to the next palette. Every band carries two glyph textures and two colours — the one it's leaving and the one it's headed to — and a single morphT mixes both the glyph alpha and the tint between them, while the thresholds themselves lerp in JS. A remix is a dissolve, the same trick the fade-motion and kinetic-type cards use for their own transitions.

Drop in your own photo or a short video with Upload — video re-uploads a frame to the source texture every draw, so the effect plays through live. Save PNG grabs a still off the canvas; Record pulls a clip straight from canvas.captureStream().

import { SymbolsCard } from "./symbols-card";

// Default export = what <ComponentPreview name="symbols" /> renders.
export default function SymbolsPage() {
  return (
    <div className="w-full max-w-xl px-4">
      <SymbolsCard />
    </div>
  );
}

import { SymbolsCard } from "./symbols-card";

// Default export = what <ComponentPreview name="symbols" /> renders.
export default function SymbolsPage() {
  return (
    <div className="w-full max-w-xl px-4">
      <SymbolsCard />
    </div>
  );
}