{"slug": "i-built-a-browser-based-pixel-art-animation-editor-with-vue-laravel-and-ai", "title": "I built a browser-based pixel-art & animation editor with Vue, Laravel and AI", "summary": "A solo developer launched Pixanima, a browser-based pixel-art and animation editor with an optional AI assistant, built with Vue 3 and Laravel 12. The editor is free, with AI features as the only paid component, and uses a post-processing pipeline to convert raw AI output into usable pixel art. The developer also implemented a bulletproof credit system with idempotent transactions and auto-refunds on failure.", "body_md": "I'm a solo dev, and for the past few months I've been building ** Pixanima** — a pixel-art and animation editor that runs entirely in the browser, with an optional AI assistant baked in. It just launched, and I wanted to share the parts that were technically interesting: making a general image model output\n\nDraw pixel art with layers, groups and effects, animate it on a frame timeline with onion-skin, and export to GIF / sprite sheets / PNG — all client-side, no install. On top of that, an AI assistant turns a text prompt into sprites, seamless tiles and palettes, re-poses characters, and generates in-between animation frames.\n\nThe frontend is **Vue 3** driving an HTML canvas; the backend is **Laravel 12 (PHP 8.4)**. Here's what I learned.\n\nThe entire editor is client-side. Projects live in **IndexedDB**; nothing is uploaded. That's great for privacy and speed, but it has a consequence a lot of people miss: **you cannot meaningfully gate a client-side feature.** If drawing, layers and export all run in the user's browser, any \"pro\" paywall around them is both unenforceable and, honestly, hostile to a price-sensitive hobbyist community.\n\nSo I flipped it: the **editor is 100% free, forever**. The only paid thing is AI — because AI is the only part with a real marginal cost, and it *requires* a backend (which conveniently also protects the code that costs money to run). More on that below.\n\nThe naive approach — prompt a diffusion model with \"pixel art, 16 colors\" — gives you *pixel-art-ish* mush: anti-aliased edges, hundreds of colors, no real grid. Useless as an actual sprite.\n\nThe fix is a post-processing pipeline. The model just produces raw input; the \"pixel art\" is made deterministically afterward with PHP's GD:\n\n```\n1. Generate a normal image from the prompt (flux-schnell on Replicate)\n2. Area-downscale to the target grid (e.g. 32×32 cells)\n3. Quantize to N colors (imagetruecolortopalette) + optional ordered dithering\n4. Key out the background with a tolerant corner flood-fill → transparency\n```\n\nThat's the difference between \"AI slop\" and something you can actually drop onto a canvas and edit. The model is swappable behind an interface, so the same pipeline backs sprites, tiles and palette extraction.\n\nThe feature I'm most happy with is **AI inbetweening** — give it two keyframes and it generates the frames between them.\n\nUnder the hood it runs Google's **FILM** frame-interpolation model on the two frame PNGs, gets back an mp4, then **ffmpeg** splits it into stills. Each interior frame goes through the same pixelization pass (keying out the video's black background), and the results are inserted into the timeline as real, editable frames. For an *animation* tool, that's a genuine differentiator over \"just another sprite editor.\"\n\nAI costs money per call, so credits need to be bulletproof. Two rules: never double-charge, and never charge for a failure.\n\nThe ledger (`credit_transactions`\n\n) is the source of truth; the balance on the user row is just a synced cache. Every charge is a locked, idempotent transaction:\n\n``` php\nDB::transaction(function () use ($userId, $cost, $reference) {\n    $user = User::whereKey($userId)->lockForUpdate()->first();\n    if ($user->credit_balance < $cost) {\n        throw new InsufficientCreditsException(); // → HTTP 402\n    }\n    // idempotent on $reference: a retried webhook or AI call\n    // with the same reference never charges twice\n    CreditTransaction::firstOrCreate(\n        ['reference' => $reference],\n        ['user_id' => $userId, 'amount' => -$cost, 'type' => 'spend'],\n    );\n    // ... update the cached balance\n});\n```\n\nThe AI endpoint does **charge → generate → auto-refund on failure**. If Replicate errors or times out, the credits go straight back to the balance. The same idempotency key protects the Stripe webhook that *grants* credits, so a replayed `checkout.session.completed`\n\ncan't credit an account twice.\n\nWriting the tests for this caught a real bug: `credit_balance`\n\nisn't mass-assignable (correct, for security), so an `update([...])`\n\nwas silently doing nothing. Tests > vibes.\n\nDevs sometimes flinch at markup, but it's not greed — it's the only thing keeping the free editor sustainable. The \"they earn → they pay\" pressure is captured by a soft commercial-use note, not by crippling features.\n\nIt's live and free at ** pixanima.app** — no install, projects stay in your browser. I'd genuinely love feedback, especially on the editor feel and the AI features. What would make you actually use it over your current tool?\n\nHappy to go deeper on any part in the comments — the canvas rendering, the pixelization math, or the \"free tool + paid AI\" model.", "url": "https://wpnews.pro/news/i-built-a-browser-based-pixel-art-animation-editor-with-vue-laravel-and-ai", "canonical_source": "https://dev.to/yanbess/i-built-a-browser-based-pixel-art-animation-editor-with-vue-laravel-and-ai-2l58", "published_at": "2026-07-23 18:30:22+00:00", "updated_at": "2026-07-23 19:03:09.090050+00:00", "lang": "en", "topics": ["artificial-intelligence", "developer-tools", "generative-ai", "computer-vision"], "entities": ["Pixanima", "Vue 3", "Laravel 12", "PHP 8.4", "Replicate", "Google FILM", "ffmpeg", "Stripe"], "alternates": {"html": "https://wpnews.pro/news/i-built-a-browser-based-pixel-art-animation-editor-with-vue-laravel-and-ai", "markdown": "https://wpnews.pro/news/i-built-a-browser-based-pixel-art-animation-editor-with-vue-laravel-and-ai.md", "text": "https://wpnews.pro/news/i-built-a-browser-based-pixel-art-animation-editor-with-vue-laravel-and-ai.txt", "jsonld": "https://wpnews.pro/news/i-built-a-browser-based-pixel-art-animation-editor-with-vue-laravel-and-ai.jsonld"}}