From video to sprite sheet
in minutes.
Converting video sequences to sprite sheets took artists hours of manual work per asset. Sprite Studio replaces that with an AI-powered pipeline — grid detection, chroma key, and multi-format export — reducing the process from a multi-hour ordeal to a few clicks.
Open the live tool
The full production pipeline, live in your browser. Drop a video, configure the grid, key out the background, and export a ready-to-use sprite sheet.
Design system
Deep Space Pro tokens — electric violet on near-black, cyber-cyan secondary, glassmorphic panels, and the sprite-grid mark. The full, code-truthful spec.
Under the hood
Vanilla JS · HTML5 Canvas · Gemini 2.0 · Replicate. Client-side frame extraction, AI-assisted grid detection, and multi-format export — zero server round-trips for local ops.
Multi-hour sprite work that shouldn't take more than minutes.
Technical artists and game developers need sprite sheets from video sequences constantly — walk cycles, explosions, UI animations. The standard workflow was: scrub through footage manually, screenshot frames, import into a grid editor, key out backgrounds frame by frame, then export. For a single asset this could take two to four hours. The underlying task was mechanical and repetitive — exactly the kind of thing a tool should handle. Sprite Studio was built to reduce that multi-hour process to minutes.
Five steps. One drag-and-drop. Done.
The pipeline was mapped as a linear sequence before a single line of code was written — so every UI decision could be traced back to a real stage in the production workflow.
drag & drop
any format
frame grid &
dimensions
with live
preview
trim empty
slots, preview
quality tuned,
download done
The decisions that shaped everything else.
"Fast and powerful" is easy to say and hard to design. Three early bets drove the UX from a workflow map to a shipped tool.
AI automates the tedious part, not the creative part.
Gemini handles grid-dimension detection and Replicate handles sprite island normalisation — purely mechanical tasks. Layout choices, frame selection, and background-removal thresholds stay in the artist's hands. The tool assists; it doesn't decide.
Client-side first. No upload, no wait.
Frame extraction, canvas compositing, filters, and local export all run in the browser. AI calls only go out for grid detection and island normalisation — the minimum viable surface of inference. Everything else is instant, offline-capable, and private by default.
One glass surface, always in context.
The studio layout keeps the canvas and controls on the same screen at all times. Glassmorphic sidebar panels float over the dark workspace so every control change updates the preview instantly. No context switches, no separate screens, no commit-before-you-see-it.
Small calls that change how the whole thing feels.
Most of what makes a pro tool feel fast rather than merely functional is a pile of small, invisible decisions. Here are the ones worth defending.
Stride control tunes density before extraction runs.
A capture-stride slider (1 = every frame, 5 = every fifth) lets artists trade frame count for sheet size before extraction runs. This single control replaces the old round-trip of "extract everything, throw half away."
Live animation preview skips empty slots automatically.
The real-time playback loop scans the grid and skips empty cells — so a half-filled sheet still plays as a smooth, correctly-paced animation. Artists get accurate feedback without having to clean up the sheet first.
Nudge buttons for pixel-perfect alignment after AI detection.
Plus/minus nudge buttons let artists shift the grid by single pixels after auto-detection places it. AI gets you 90% there; nudge handles the last 10% without retyping coordinates or re-running inference.
Chroma key and alpha threshold in the same panel.
Two background-removal modes — colour-key for green/blue-screen footage and alpha threshold for clean line art — live side by side. Artists switch based on source material without hunting through menus.
Output format chosen at export, not at import.
PNG or WebP and quality level are selected at the moment of download rather than at the start of the session. Artists don't commit to an output format before they know what the sheet looks like.
Auto-trim snaps to valid frames with one click.
A single button trims the canvas to the bounding box of actual frames, removing the blank margin that video files almost always carry. One click replaces a common manual crop operation.
One dark system, used everywhere.
Sprite Studio runs on a "Deep Space Pro" system — near-black backgrounds, electric violet primary, cyber cyan secondary, and glassmorphic panels. Every surface echoes the environment of a technical creative tool: confident, focused, permanently dark. The full spec lives on the Design page.
Electric on dark — the exact values from the source CSS.
No pure blacks or whites. The studio background is near-black #09090e; text is near-white #f8fafc; all saturation lives in the two accents. Glass panels use a transparent overlay so the canvas shows through the controls.
Space Grotesk up top, Inter throughout.
Confident, slightly technical character that fits a pro creative tool. Its angular terminals read as precise — appropriate for a pipeline used by technical artists.
Maximum legibility at small sizes in a dark UI. Used at weight 400–600 depending on hierarchy; never decorative.
Only where a value needs to read as a technical spec — pixel counts, format labels, this design system. Matches the tool's engineering sensibility.
Slightly sharper than consumer apps.
A pro tool lives next to external editors. Sharper corners read as purposeful and technical — still rounded for legibility, but not soft enough to look like a consumer product.
A sprite-grid in a violet frame.
The mark is a 2×3 grid of frame cells on a violet-to-deep-violet background — the sprite-sheet format reduced to its simplest visual form. The top-left cell is brightest (the active frame); the bottom row is dimmed (empty or pending frames). At small sizes it reads as a grid tool; at icon size it's instantly recognisable to anyone who has worked with sprite sheets.
Feedback, not decoration.
The cuts I'd defend.
A focused pipeline has to be ruthless about scope. Here's what was left out on purpose — each cut keeps the tool fast, private-by-default, and free of complexity that kills creative momentum.
No login, no cloud storage, no project files. Everything stays in the browser session. Artists deal with enough login walls in their daily toolchain — a sprite-sheet tool should open and work immediately, with output going straight to disk.
Frame extraction and compositing run entirely client-side. Source video never leaves the browser. AI calls are scoped to grid detection and island normalisation — the minimum viable surface of inference. This means no upload wait, no privacy concern, and instant feedback loops for local operations.
Sprite Studio is a sheet tool, not a video editor. A full timeline with frame-level editing would serve a different (and much larger) problem. The stride slider and auto-trim cover 95% of frame-selection needs without the authoring cost of a timeline UI.
Output formats are limited to PNG and WebP — the two formats game engines and web pipelines actually consume. GIF is excluded because its 256-colour palette makes it unsuitable for production-quality sprite sheets. Artists export PNG/WebP and convert downstream if needed.
Vanilla stack. No shortcuts.
No heavy framework, no bundler in the critical path. JavaScript, Canvas, and two AI APIs — deployed as a Google Apps Script web app, running live on Vercel.