YanBess

Posted on Jul 23

I built a browser-based pixel-art & animation editor with Vue, Laravel and AI

#showdev #vue #laravel #ai

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 clean pixel art, an atomic credit system, AI inbetweening for animation, and why the whole business model falls out of one architectural fact.

What it is

Draw 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.

The frontend is Vue 3 driving an HTML canvas; the backend is Laravel 12 (PHP 8.4). Here's what I learned.

Everything runs in the browser — and that decided the business model

The 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.

So 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.

Making a general model output clean pixel art

The 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.

The fix is a post-processing pipeline. The model just produces raw input; the "pixel art" is made deterministically afterward with PHP's GD:

1. Generate a normal image from the prompt (flux-schnell on Replicate)
2. Area-downscale to the target grid (e.g. 32×32 cells)
3. Quantize to N colors (imagetruecolortopalette) + optional ordered dithering
4. Key out the background with a tolerant corner flood-fill → transparency

That'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.

AI inbetweening: the animation trick

The feature I'm most happy with is AI inbetweening — give it two keyframes and it generates the frames between them.

Under 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."

The credit system: charge-then-generate, idempotent, refundable

AI costs money per call, so credits need to be bulletproof. Two rules: never double-charge, and never charge for a failure.

The ledger (credit_transactions) is the source of truth; the balance on the user row is just a synced cache. Every charge is a locked, idempotent transaction:

DB::transaction(function () use ($userId, $cost, $reference) {
    $user = User::whereKey($userId)->lockForUpdate()->first();
    if ($user->credit_balance < $cost) {
        throw new InsufficientCreditsException(); // → HTTP 402
    }
    // idempotent on $reference: a retried webhook or AI call
    // with the same reference never charges twice
    CreditTransaction::firstOrCreate(
        ['reference' => $reference],
        ['user_id' => $userId, 'amount' => -$cost, 'type' => 'spend'],
    );
    // ... update the cached balance
});

The 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 can't credit an account twice.

Writing the tests for this caught a real bug: credit_balance isn't mass-assignable (correct, for security), so an update([...]) was silently doing nothing. Tests > vibes.

Monetization, stated plainly

Editor: free forever. Drawing/animation/export are all client-side; gating them is pointless.
AI: prepaid credits, marked up over raw model cost to leave a real margin (payment fees, trial credits, refunds, infra, taxes and time are not free). New accounts get free credits to try it.

Devs 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.

The stack, briefly

Frontend: Vue 3 SPA, canvas rendering, IndexedDB persistence, Vite.
Backend: Laravel 12 / PHP 8.4, Sanctum (Bearer tokens), Socialite (Google/GitHub).
AI: Replicate (FLUX for generation, FLUX Kontext for pose edits, FILM for interpolation), GD + ffmpeg for the pixelization/animation pipeline.
Payments: Stripe Checkout + idempotent webhooks.
Infra: Docker stacks on a single Hetzner box behind system nginx + Cloudflare.

Try it / roast it

It'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?

Happy to go deeper on any part in the comments — the canvas rendering, the pixelization math, or the "free tool + paid AI" model.

DEV Community