Drop your image, video, or GIF
Supports PNG, JPG, WebP, GIF, MP4, WebM, MOV
How to convert images and videos into interactive ASCII & dithered dot art?
ditherit Interactive ASCII & Dot Art Studio is a browser-based graphic engine that processes images, GIFs, and video clips into dithered dot matrices and ASCII art. It features real-time spring physics mouse repulsion (repel, attract, wave, vortex, breathe), WebM recording, background flood-fill removal, Sobel edge glyph rendering, and lightweight React code export (ditherit-react).
Key Takeaways
- Real-Time Physics Interactive Dots — Dots dynamically react to cursor movement with custom force fields.
- Off-Thread Web Worker Dithering — Smooth Floyd-Steinberg, Atkinson, Bayer 8x8, and Sobel edge glyph rendering.
- Video & GIF Frame Extractor — Import animated GIF or video files and record dithered WebM clips.
- React & JS Code Export — Download self-contained React component code to embed interactive dot art on your website.
Physics Dot Repulsion
Experience dynamic spring physics where dithered dots react in real-time to your mouse movement with customizable repel radius, strength, and force fields.
Video & Animated GIF Dithering
Process frame-by-frame MP4, WebM, and animated GIF files in browser memory and export dithered video clips or interactive ASCII animations.
Interactive Code Export
Export generated dot coordinates and physics animation logic directly as lightweight React components (`ditherit-react`) or Vanilla JS snippets.
About Free Interactive ASCII & Dither Dot Art Generator
ditherit is a digital artwork studio created by Prasanjit Dey. Upload any photo, video, or GIF to instantly generate dithered dot matrices, ASCII text glowing characters, or interactive physics-driven canvas art.
How to Use
- 1Upload an image, animated GIF, or video file into the studio canvas.
- 2Choose a dithering algorithm (Floyd-Steinberg, Atkinson, Bayer 8x8, Hard Threshold, Sobel Edge Glyphs).
- 3Pick a preset aesthetic (Dot Art, Neon Glow ASCII, Minimal Charset, Pixel Block).
- 4Adjust physics repulsion mode (Repel, Attract, Wave, Vortex, Breathe) and cursor radius.
- 5Export PNG high-res image, WebM video clip, or click 'React Code' to copy component code.
Key Benefits
- 100% Client-Side Privacy — Media processing happens entirely inside your browser via Web Workers.
- React Code Export — Embed responsive interactive dot art in Next.js/React websites.
- Animated GIF & Video Frame Decoding — Full support for animated media and WebM video export.
- Split Compare Slider — Side-by-side split screen handle to compare original vs dithered result.
Frequently Asked Questions
Click the 'React Code' modal button inside the ditherit editor. It generates a self-contained, lightweight React component (`ditherit-react`) with full Canvas 2D spring physics that you can paste directly into any Next.js or React codebase.
Yes! ditherit extracts individual video and GIF frames locally in browser memory, applies the chosen dithering matrix across frames, and allows you to record and download a WebM video clip.
No. All Web Worker image processing, GIF frame parsing, and physics rendering run 100% locally on your computer.
Open Source Attribution & Credit
This tool is built upon the open-source ditherit project created by Prasanjit Dey (@prasanjit-dey-ux). All algorithms, physics mouse repulsion logic, ASCII renderer, and preset design systems were authored by Prasanjit Dey.
Explore Related Tools
Color Format Suite
Convert seamlessly between HEX, RGB, HSL and CMYK color codes with palette generation.
CSS Layout Generator
Visually build and test CSS Flexbox and Grid layouts with code export.
Drawesome Vector Studio ✦ (by Benji Taylor)
Freehand vector drawing canvas with 7 realistic pens (pencil, ballpoint, fineliner, marker, highlighter, brush, fountain pen), area eraser, and SVG/PNG export.