What is heat·dith·er

Visual exploration tool that turns heatmaps and dithering into a controllable design system letting 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 + 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.