what is ditherme fr?

hellogumbo/ditherme — explained in plain English

Analysis updated 2026-07-25

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

vibe map

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

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

what do people make with this?

VIBE 1

Create retro-style dithered portraits from your webcam feed.

VIBE 2

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

VIBE 3

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

VIBE 4

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

what's the stack?

TypeScriptReact 19Next.js 16Canvas APIgifenc

how it stacks up fr

	hellogumbo/ditherme	4ssh1/mine-sweeper	achawla19/intuitcode-extension
Stars	2	2	2
Language	TypeScript	TypeScript	TypeScript
Last pushed	—	2026-01-31	—
Maintenance	—	Maintained	—
Setup difficulty	easy	moderate	moderate
Complexity	2/5	2/5	4/5
Audience	vibe coder	vibe coder	developer

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

how do i run it?

Difficulty · easy time til it works · 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.

in plain english

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.

prompts (copy fr)

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