1 · Upload
Drag & drop a logo anywhere,, or paste ⌘V
PNG · JPG · WebP · SVG
try a sample
2 · Configure
Preview
Upload a logo to begin
Move your cursor over the logo to interact. Pause shows the full logo in dots.
At size
3 · AnimateSelect a logo first
Reveal
Ambient
Transform
Loading
Tune · Swipe
Mouse interaction
4 · Export
Animates anywhere — as <img src>, CSS background, or inlined.
Animated GIF export is a Pro feature — pixel-perfect, watermark-free, plays everywhere.
MP4 video export is a Pro feature — H.264, watermark-free, plays everywhere.
Slack/Discord emoji export is a Pro feature — a 128×128 GIF tuned to clear Slack's 128 KB upload limit.
Email signature export is a Pro feature — a 320×320 GIF loop sized for a signature block.
Social banner export is a Pro feature — a wide GIF or MP4 loop at X/Twitter, LinkedIn, or YouTube header dimensions, mark centered on a board-black backdrop.
Use the npm package
npm i logo-dot-matrix
import { sampleImage } from "logo-dot-matrix/pro/sampler";
import { buildModel, emitSvg, resolveAnimation } from "logo-dot-matrix/pro";
const { grid } = await sampleImage(file, { density: 40 });
const model = buildModel(grid, { /* GridConfig */ });
const anim = resolveAnimation("swipe"); // + sub-control params
const svg = emitSvg(model, anim, { technique: "smil" });The code exports keep mouse interactivity (self-contained, no dependency). The favicon script animates your browser-tab icon at ~10fps and pauses in hidden tabs. WebM is the animation as a video — interaction can't be captured to a flat file.