heat·dith·er

A WebGL visual exploration tool that turns heatmaps and dithering into a controllable, shippable design system.

What is heat·dith·er

Visual exploration tool that turns heatmaps and dithering into a controllable design system, letting you experiment with intensity, speed, pixel size, and squircle radii in real time. Built as a rebranding exploration.

Most rebranding explorations live in Figma frames. Mine run in the browser.

Why I built it

When exploring a new visual direction, I wanted to feel the motion, not just see static mockups. So I built a shader playground to test it live.

Under the hood

heat·dith·er uses Bayer matrix dithering (2x2, 4x4, 8x8) and simplex noise to generate animated heatmap gradients - rendered entirely in WebGL via GLSL fragment shaders.

7 shape modes. Mouse interaction. Pixel size control. All real time.

The whole thing is wired to Tweakpane - so every value is live-editable from a floating UI panel.

How I prototype

Speed, pixel size, dithering type, shape mode, squircle radii. This is how I prototype motion and feel without touching code between iterations.

Shipping the system

Shaders alone are cool. Shaders you can actually ship are better. So I built 4 production-ready CTA components using the same system: Side by Side, Top Strip, Split Large, Ripple overlay. Each one accepts the shader as a prop. Drop in, configure, done.

This is the part of my job I love most. Taking a brand direction - "warm, energetic, technical" - and translating it into something a developer can actually ship. Not a mood board. A working component with props.

Implementation details

heat·dith·er is ~400 lines of GLSL plus a React/TypeScript wrapper with a clean props API: shape, type, pxSize, speed, interactive.

Designed to drop into any codebase. Because great design tooling should feel like great engineering.