No-upload media workflow
Browser GIF & Meme Maker
A browser-native meme and GIF maker: place any number of Impact captions on a photo, add a caption bar above it, or convert a short screen recording with trim, boomerang playback, filters, and target-size compression — without sending source files to a server.
Live · ported into Golden Data
The decision moment
You have a screen recording or a photo and need something that will actually post. The decision is not which encoder flag to memorize; it is how small the output needs to be and whether it still reads.
The constraint
GIF export is compute-heavy, files get large fast, and the source may be private. The tool has to run locally in the browser, expose the useful controls, and avoid making the user reason about ffmpeg directly. A still image should not have to pay any of that cost.
The numbers
What shipped
- React island mounted inside Astro so the heavy ffmpeg workflow only loads on the tool page
- Client-side conversion with file picker, drag-and-drop, clipboard paste, preview, and download
- Platform-aware target-size mode that retries with lower width, FPS, and palette size when needed
- A still-image path that skips ffmpeg entirely — canvas straight to PNG, so photo memes export instantly
- Caption geometry as a tested pure module, sized in fractions of the frame so text holds its weight at any export size
- Free-placement caption layers with drag-to-position, and keyboard nudging so every layer stays reachable without a pointer
- Panel templates (two-panel reaction, before/after, 2x2, escalating list) shipped as zone layouts over the user’s own pictures — no third-party meme images hosted
What changed
- The conversion workflow now sits inside the Golden Data site as a native browser tool.
- The user can trim, caption, preview, and target a platform file-size cap before committing to a full render.
- Images take a separate path that never loads ffmpeg: source to canvas to PNG, which exports instantly rather than running a palette pass and a size search to produce one frame.
- The source file stays in the browser tab; ffmpeg.wasm does the video work client-side.
- The port keeps the app useful while turning it into a proof point for client-side AI/data tool integration.
This is the lens I bring to client work. Find the moment of decision, surface the constraint, make the next step obvious — then ship it in production, evaluated.