Animately

We built Animately as a Next.js application using the App Router, which gives us a clear way to split the interface into routes and load only what each screen needs. That matters here because the editor is doing real work in the browser. Users can crop, trim, resize, adjust speed and compare the original against the optimised version side by side, all without leaving the page.

The heavier image processing runs on the server through a signed transform pipeline, so the browser stays responsive while the actual optimisation happens elsewhere. We kept the editor state resilient too. Your original file persists across reloads, and we handle the quirks of how Safari reconstructs files so the experience holds up in real browsers rather than just ideal ones.

The part that makes Animately feel quick is the analysis running in the browser through WebAssembly. It lets us decode and inspect GIFs, read colour data and estimate quality and file size at close to native speed, so users see meaningful feedback rather than waiting on a round trip to the server for every change.

Behind the product sits Supabase, which handles authentication, the user's saved library and the credits system that gates premium work. Payments run through Stripe, and we keep the two in sync so a completed checkout reliably tops up a user's balance. None of this is much use if it breaks quietly, so we wrote end-to-end tests with Playwright, including the payment flows, to check the routes real users depend on keep working as the product grows.