dither me.

A real-time, one-bit webcam studio by Gumbo.

Open dither me →

dither me turns a live camera feed into a moving dithered portrait directly in the browser. Adjust the texture, choose the ink color, capture a frame, or make a five-second animated GIF.

Nothing is uploaded. Photos and GIFs stay on your device.

What it does

• Processes the webcam in real time with the Canvas API
• Switches live between Bayer 4×4, Floyd–Steinberg diffusion, and hard threshold effects
• Adjusts pixel size, contrast, and threshold live
• Changes the dither ink color with a picker and preset palette
• Mirrors the camera for a natural selfie view
• Captures the processed frame and downloads it as a PNG
• Records a lightweight, silent five-second animated GIF at 10 frames per second
• Keeps controls in a collapsible overlay so the image stays front and center
• Adapts the controls into a compact expandable panel on mobile

Privacy

Camera access happens through the browser's getUserMedia API. Video frames are processed locally on the device and drawn to a canvas. Photos and GIF frames are encoded in the browser and are never uploaded. The app has no account, analytics, or remote storage flow.

Run it locally

Requires Node.js 22.13.0 or newer.

git clone https://github.com/hellogumbo/ditherme.git
cd ditherme
npm install
npm run dev

Open http://localhost:3000, select Start camera, and allow camera access when prompted.

Useful commands

npm run dev      # Start the local development server
npm run build    # Create a production build
npm run lint     # Run ESLint
npm test         # Build and run the rendered HTML test

How the effect works

Each video frame is sampled at the selected pixel size, converted to luminance, and adjusted for contrast. The selected effect then applies an ordered Bayer matrix, Floyd–Steinberg error diffusion, or a direct threshold. The result is mapped to two colors: near-black and the selected ink color. A second canvas scales captured frames back to the camera's full resolution with smoothing disabled, preserving the crisp pixel texture.

Built with

• React 19
• Next.js 16
• Canvas API and getUserMedia
• gifenc
• Canvas UI — Dithered Object
• PP Mondwest and PP Neue Montreal Mono

Deployment

The main branch deploys automatically to Vercel at ditherme.vercel.app.

License

Released under the MIT License.

---

An open source project by Gumbo.