Build a browser-based generative dithering tool. Deliver it as one completely self-contained HTML file with all HTML, CSS and JavaScript included. It must work locally without installation, external libraries, API keys, servers, trackers or network requests. All uploaded media must remain inside the browser. ## Core concept The tool should analyse the brightness of an image, video, live webcam feed or text composition by dividing it into a grid. Each grid cell should be replaced with a graphic pixel or custom mark selected according to its tonal value. The result must update live on an HTML5 canvas. ## Interface Create a clean, typography-led interface with: - Sticky top toolbar - Scrollable control panel on the left - Large responsive canvas preview on the right - Light and dark modes - Collapsible control sections - Exact numerical inputs paired with sliders - Responsive mobile layout - Drag-and-drop support - Current canvas dimensions, grid density, frame rate and status messages Top toolbar actions: - Upload image or video - Activate webcam - Export PNG - Start and stop video recording - Toggle light/dark mode Include a built-in tonal demo so the interface is useful before anything is uploaded. ## Source support Support: - Images - Videos with looping playback - Live webcam and microphone - Typed text - Drag-and-drop media uploads Automatically use the original source aspect ratio after an upload, while allowing the user to override it. ## Frame and grid Include: - Original source ratio - 2:1 and 1:2 - 4:3 and 3:4 - A-series landscape and portrait - 16:9 and 9:16 - 1:1 - Export sizes: 1080, 2560 and 3840 px - Canvas zoom from 25–400% - Manual or automatic columns and rows - Up to 1,000 columns and rows - Even and hexagonal grids - Adjustable grid scatter The live preview should automatically fit its available area while preserving the selected aspect ratio. ## Image controls Provide: - Brightness - Contrast - Gamma - Threshold bias - Independent source width and height - Inverted tonal mapping Sample the source efficiently at the grid resolution instead of analysing the full-resolution image for every mark. ## Text source Allow users to type up to eight lines of text and use it as the dither source. Include: - Common system font choices - Upload custom TTF, OTF, WOFF or WOFF2 fonts - Font size - Leading - Kerning - Independent text width and height - Blur - Automatic fitting and centring For every unique visible character, let the user optionally upload an SVG, PNG, JPEG or WebP image to replace that character. Preserve the uploaded image’s proportions. ## Pixel design Include: - Square pixels - Random width with fixed height - Fixed width with random height - Uploaded asset proportions - Pixel size - Spacing - Overall overlap - Independent horizontal and vertical overlap - Minimum and maximum shape scale Use tonal brightness to interpolate each mark between the minimum and maximum scale. Add a **Strong-area merge** option that combines qualifying neighbouring cells into 2×2, 3×3 or 4×4 blocks above an adjustable tonal threshold. ## Custom midtones Start with six built-in tonal levels. For every midtone, allow users to: - Change its colour - Upload a custom SVG, PNG, JPEG or WebP graphic - Drag and drop a graphic directly onto its row - Remove the uploaded graphic - Preserve the graphic’s original proportions - Use its original colours or recolour it with the assigned midtone colour Allow midtones to be added dynamically, up to 16 levels. Include colour blend modes: - Normal - Multiply - Screen - Overlay - Soft light - Hard light - Colour dodge - Colour burn - Difference Add a button to restore the six built-in midtones. ## Random midtone switching Add an optional system that randomly substitutes nearby tonal marks. Controls: - Switch amount - Switch reach - Timed switching or manual switching with the Q key - Adjustable hold duration Random arrangements should remain stable during each hold period rather than flickering every frame. ## Background Support: - Flat colour - Linear gradient - Uploaded background image For gradients, provide: - Adjustable angle - Multiple editable colour stops - Editable stop positions Scale uploaded background images to cover the canvas. ## Pixel animation Allow pixels to animate continuously between small and large sizes. Controls: - Enable animation - Small size - Large size - Linear, smooth, cubic in/out and elastic easing - Cycle duration - Travelling-wave amount - Wave angle - Bounce/ping-pong motion - Rotational wobble - Base rotation - Continuous rotation speed - Rotation snap angle - Pause duration at each snap Animations must remain deterministic across the grid and use a single animation clock. ## Parameter automation Create a multi-lane automation system that can animate nearly any editable parameter. Each lane should contain: - Target parameter - From value - To value - Duration - Delay - Easing - Loop, ping-pong or play-once mode - Remove action Include: - Master play toggle - Master speed - Restore original values - Multiple simultaneous automation lanes Automatable properties should include frame zoom, grid density, scatter, image adjustments, pixel settings, text settings, random midtone behaviour and individual midtone colours. Upload actions and export settings should remain manual. ## Export ### PNG Export the current composition as a high-resolution PNG using the selected 1K, 2K or 4K size. Render directly at the target resolution instead of enlarging the preview canvas. ### Video Record the animated canvas using `canvas.captureStream()` and `MediaRecorder`. Include: - 24, 30 and 60 fps - MP4/H.264 when supported by the browser - WebM VP9, VP8 or standard WebM fallbacks - Source audio when available - Webcam microphone audio - Start/stop recording with no fixed duration - Resolution-aware video bitrates - Automatic file download Keep the canvas, source video and audio on the same timing source to minimise drift. Clearly explain that browser format support varies, particularly in Safari. ## Privacy and safety - Never upload user files - Use local object URLs for media and fonts - Revoke obsolete object URLs - Stop webcam and microphone tracks when changing source or closing the page - Escape all user-controlled text before inserting it into generated interface markup - Validate supported file types - Avoid `eval`, dynamic script execution and third-party dependencies - Store only the user’s light/dark theme preference in `localStorage` ## Performance - Use `requestAnimationFrame` - Reuse small sampling canvases - Cache recoloured custom marks - Limit cached mark dimensions - Avoid unnecessary full-resolution processing - Display an approximate live frame-rate counter - Warn users that extremely dense grids can slow preview and export - Clean up video streams, media tracks and object URLs correctly The finished result should feel like a real designer’s tool rather than a technical demo: immediate, visual, minimal and suitable for producing polished still and motion artwork.