Mosaik ✦

An advanced, interactive browser-based studio for creating stunning dithered art, retro ASCII animations, and custom dot matrix graphics.

Mosaik is a web-based creative tool that brings retro aesthetics into the modern web. Transform your images, videos, and GIFs into classic halftone patterns, raw pixel art, or reactive ASCII animations in real-time. With interactive physics, customizable palettes, and robust export options, it's the perfect playground for digital artists and frontend developers.

✨ Features

• Rich Media Support: Upload Images (PNG, JPG, SVG, WebP, GIF) and Videos (MP4, WebM, MOV).
• Multiple Dithering Algorithms: Choose between Floyd-Steinberg, Atkinson, Ordered (Bayer), and Hard Threshold to get the exact look you want.
• ASCII Art Generation: Convert media into customizable ASCII text rendering with different character sets (Detailed, Blocks, Pixel, Minimal, Braille, or Custom), glowing effects, and terminal-like aesthetics.
• Interactive Physics Engine: Switch to the Preview tab and interact with your dithered dots. Apply particle effects like Repel, Attract, Wave, Noise, Vortex, and Breathe.
• Retro Palettes & Color Matching: Use classic built-in palettes (Game Boy, PICO-8, NES, CGA), preserve the original source colors, or define completely custom background and dot colors.
• High Performance: Heavy pixel manipulation and structural dithering math are safely offloaded to Web Workers to ensure a smooth, lag-free UI experience.
• Developer-Friendly Exports:
  • Download static art as PNG or SVG.
  • Export motion art as WebM video or GIF.
  • Download raw particle coordinates as JSON.
  • Copy React Components or ASCII Animation Code to drop the effect directly into your own websites and projects.
• Post-Processing Overlays: Add CRT scanlines, vignettes, or blend mode tinting for a perfect vintage finish.

🚀 Getting Started

First, install the dependencies:

npm install

Then, start the development server:

npm run dev

Open http://localhost:3000 with your browser to open the studio.

🛠️ Built With

• Framework: Next.js (React 19)
• Styling: Tailwind CSS & plain CSS
• Icons: Lucide React
• Media Decoding: gifuct-js & omggif
• Performance Architecture: Native Web Workers and OffscreenCanvas for intensive frame processing.

🎮 Basic Workflow

1. Upload: Drag and drop an image or video into the studio.
2. Tune: Expand the settings panels on the left. Adjust the dot scale, select a different dithering algorithm, or switch entirely to ASCII mode. Tweak dot sizes, contrast, and brightness to perfection.
3. Play: Switch to the Preview tab to interact with the responsive physics engine. Move your mouse over the canvas to see the dots react!
4. Export: Use the action belt at the top of the sidebar to save your preset, download the media, or copy the interaction code.

📝 License & Attribution

Mosaik is released under the MIT License — © 2026 bedigambar.

You're welcome to use, modify and build on this code, but you must keep the copyright notice and license intact (i.e. give credit). If you ship something based on Mosaik, a shout-out and a link back to this repo is hugely appreciated. 🙏