Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Dither Animation (1-Bit Look)

Turns any animation into crisp, retro dot patterns in two to four colours, with an optional choppy low frame rate, like the dithered videos all over social feeds.

Effect, V1 Effects2DSeamless loop, verified208 lines of codev1.0.0

In Patterns & illusions, Craft & heritage

Next: Lava LampSurprise me

Dither Animation (1-Bit Look) preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

What the demo dithers. Your own project can dither anything.

4

Screen pixels per dot. Bigger is more retro.

Used when Colours is set to My two colours.

Used when Colours is set to My two colours.

12

Holds frames for a jumpy, hand-cranked look. 30 is smooth.

1.15
0
7

Changes the moon surface, stars and ash.

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 290 KB)
Info

What it is

The dithered look: smooth shading becomes a pattern of hard dots in just two colours (or four, Game Boy style), like an old Mac screen or a newspaper photo. Pick the dot pattern (fine checkerboard, round halftone dots or engraving lines), how big the dots are, the colours and how choppy the motion feels. The pattern stays locked in place from frame to frame so it never shimmers. The demo dithers a turning moon under drifting light and falling ash, or an endless tunnel; the same code dithers your own canvas, photo, video frame or 3D scene.

Reuse it in your own idea

  • Draw Hypnotic Particle Tunnel or Torus Wave Loop on a 2D canvas, then call applyToCanvas for a dithered version of either loop.
  • Dither a photo or a frame of AI-generated video for the 'dithered website background' look: draw it, call applyToCanvas, and play frames at 8–12 fps with stepTime.
  • Dither the background only, then draw Kinetic Title Reveal on top in a clean colour for a retro title card.

Which part is reusable

src/dither-animation.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

  • Ordered patterns only: no error-diffusion (Floyd–Steinberg, Atkinson) look, which shimmers on video anyway.
  • Brightness only: colour is replaced by the palette, so a colourful source loses its hues.
  • Up to four colours, spread evenly from dark to light.

Technical details

Technical details
Implementation
Canvas 2D — plain browser JavaScript, no libraries · ES module src/dither-animation.js
Exports
  • createDither({ pixelSize?, pattern?, palette?, contrast?, brightness?, invert? }) => { grid(width, height), drawField(ctx, width, height, field), drawBuffer(ctx, width, height, buffer), applyToCanvas(ctx, width, height), pixelSize }
  • stepTime(info, stepsPerSecond?) => { time, phase }
Dependencies (exact)
  • apw-runtime@1.0.0 (demo) — Demo harness and seeded random numbers. src/dither-animation.js has no dependencies.
How it fits a scene

Coordinates: Brightness field uses u, v from 0..1 across the frame; dots are pixelSize screen pixels square from the top left.

Lighting: None of its own; it reinterprets brightness. Light comes from what you feed it.

Timing: Stateless; pure function of its input. Use stepTime(info, n) for the choppy low-frame-rate feel.

Output
1080×1080, 30 fps, 8 s · procedural (computed from the frame number) · seamless loop — Everything is driven by one phase that runs 0..1 over the loop: the moon turns once, ash falls whole screens, stars twinkle whole cycles, the tunnel moves four ring spacings. stepTime returns phase 0 again at the end.
Tested
Rendered 240 frames on 2026-10-03 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (Canvas 2D). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
One pass over (width / dot size) × (height / dot size) values per frame: about 73,000 at 1080×1080 with 4-pixel dots, well under a millisecond for the dither itself. The demo's moon scene costs more than the dither. applyToCanvas does a GPU-to-CPU readback each frame; at 4K with 1-pixel dots expect a few frames per second in a browser preview (offline renders are fine).
Export a video yourself
Download the source, then in the folder: npm install npm run render -- dither-animation/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:baa134bfe90b5ec0… · other versions: 1.1.0
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
Original code written for AI Pixel Wizard on 2026-10-03 by an automated agent (the daily trend routine), inspired by the dithered-animation trend on social video and the web (see content/trends/2026-10-03-dither-animation.md). Ordered (Bayer) dithering and clustered-dot halftoning are long-standing public techniques; the threshold matrices are generated by this code. The note that ordered dithering stays stable on video while error diffusion boils follows https://modulate.to/effects/dither/. No code, images, fonts or shaders were copied.
BinMore like this

More like this

Play these full screen

Lava Lamp

3D object3DSeamless loop15 seconds