Web app
Dither Motion
A live WebGL motion tool: procedural 3D and particle scenes pushed through a real-time Bayer dither shader, with PNG and video export.
Overview
Dither Motion renders live 3D scenes, a rotating torus knot, or a persistent particle "Flow Particles" mode, and runs the whole thing through a real-time ordered Bayer dither shader: the pixelated halftone look from old low-color displays and 90s web graphics. It was built with Toolcraft, starting from a short reference clip of a fintech landing page using a similar dithered rotating shape as style inspiration, not a clone target.
How it works
Under the hood it's a two-pass WebGL renderer. The first pass renders the actual 3D scene into an offscreen buffer every frame. The second pass is a full-screen shader that samples that buffer against a selectable Bayer matrix (2x2, 4x4, or 8x8) and turns it into dithered pixels, with its own intensity, brightness, contrast, and gamma controls. Whatever's in the live preview is exactly what gets exported, the preview and the PNG/video export both run through the identical render function.
Flow particles
The Flow Particles mode replaces the rotating object with a few thousand particles simulated with real physics: shape attraction, curl-noise flow fields, ripples, and repulsion, rather than faking movement with a per-frame random offset. Getting it to read as an actual flowing field instead of scattered noise took a couple of passes. The first version had every particle sampling its own random point in the noise, which looked like static rather than a current. Sharing one flow field across every particle, so neighbors move together instead of independently, is what finally made it look like particles being carried by something instead of just jittering in place.