whatisgithub

What is ditherme?

hellogumbo/ditherme — explained in plain English

Analysis updated 2026-07-25

★ 2TypeScriptAudience · vibe coderComplexity · 2/5Setup · easy

In one sentence

A browser-based webcam tool that turns your live camera feed into retro, one-bit dithered portraits. Adjust pixel size and ink color, then capture photos or GIFs, all processed locally for total privacy.

Mindmap

mindmap
  root((repo))
    What it does
      Live webcam dithering
      Capture photos and GIFs
      Runs locally for privacy
    Dithering effects
      Bayer 4x4 retro pattern
      Floyd-Steinberg soft grain
      Hard threshold on off
    Tech stack
      React 19
      Next.js 16
      Canvas API
      gifenc library
    Use cases
      Retro selfie portraits
      Animated GIF art
      Private photo booth
    Audience
      Vibe coders
      Creatives
      Privacy minded users

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Create retro-style dithered portraits from your webcam feed.

USE CASE 2

Record short animated GIFs with a vintage one-bit aesthetic.

USE CASE 3

Capture stylized PNG stills with adjustable pixel size and ink color.

USE CASE 4

Use as a private, no-upload photo booth for events or personal art.

What is it built with?

TypeScriptReact 19Next.js 16Canvas APIgifenc

How does it compare?

hellogumbo/ditherme4ssh1/mine-sweeperachawla19/intuitcode-extension
Stars222
LanguageTypeScriptTypeScriptTypeScript
Last pushed—2026-01-31—
Maintenance—Maintained—
Setup difficultyeasymoderatemoderate
Complexity2/52/54/5
Audiencevibe codervibe coderdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Requires Node.js version 22.13.0 or newer, but otherwise runs with a standard install and single dev command.

The license is not specified in the repository's documentation.

So what is it?

dither me is a browser-based webcam studio that converts a live camera feed into a dithered, one-bit portrait in real time. You can adjust the texture, pick an ink color, capture a still frame, or record a short animated GIF. Everything runs locally on your device, so nothing is uploaded. The app offers three dithering effects you can switch between live. Bayer 4x4 applies an ordered matrix pattern for a structured, retro look. Floyd-Steinberg diffusion spreads pixel errors across neighbors for a softer, film-grain appearance. A hard threshold option simply snaps each pixel to on or off based on a cutoff value. You can adjust pixel size, contrast, and threshold on the fly, and the ink color is selectable through a color picker or a preset palette. The camera can be mirrored for a natural selfie view, and captured frames download as PNG files. A five-second silent GIF can be recorded at 10 frames per second. Controls sit in a collapsible overlay so the image stays the main focus, and on mobile they collapse into a compact panel. Privacy is a central design choice. Camera access happens through the browser's getUserMedia API, and video frames are processed and drawn to a canvas on the device. Photos and GIF frames are encoded in the browser and never uploaded. The app has no account system, analytics, or remote storage. To run it locally, you need Node.js version 22.13.0 or newer. After cloning the repository and installing dependencies, a single command starts a local development server. The project is built with React 19, Next.js 16, the Canvas API, and a GIF encoding library called gifenc. It uses a dithered object component from Canvas UI and specific typefaces from Pangram Pangram. The main branch deploys automatically to Vercel.

Copy-paste prompts

Prompt 1
Help me add a new dithering algorithm to ditherme that applies a halftone dot pattern, similar to how the existing Bayer 4x4 and Floyd-Steinberg effects are structured.
Prompt 2
How can I modify ditherme to let users upload an image file from their device and apply the dithering effects to it instead of using the webcam?
Prompt 3
Guide me through deploying ditherme to my own Vercel account and connecting it to a custom domain, starting from the clone step.
Prompt 4
Show me how to add a custom color palette preset to ditherme's existing color picker, including where the palette array is defined in the code.

Frequently asked questions

What is ditherme?

A browser-based webcam tool that turns your live camera feed into retro, one-bit dithered portraits. Adjust pixel size and ink color, then capture photos or GIFs, all processed locally for total privacy.

What language is ditherme written in?

Mainly TypeScript. The stack also includes TypeScript, React 19, Next.js 16.

What license does ditherme use?

The license is not specified in the repository's documentation.

How hard is ditherme to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is ditherme for?

Mainly vibe coder.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.

What are similar repos?