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

> Source: <https://dev.to/yanbess/i-built-a-browser-based-pixel-art-animation-editor-with-vue-laravel-and-ai-2l58>
> Published: 2026-07-23 18:30:22+00:00

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

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.

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.

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.

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

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:

``` php
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.

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.

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.