Back to News & Insights
Artificial Intelligence August 16, 2026 ยท 6 min read

Making a dog talk with zero backend: in-browser segmentation, WebGL lip sync and real MP4 export

This is a submission for Weekend Challenge: Dog Days Edition What I Built My dog has...

Making a dog talk with zero backend: in-browser segmentation, WebGL lip sync and real MP4 export

So I built BarkReels: you upload a photo, and it gives her a voice. The mouth actually moves with the audio, she blinks, her ears twitch, subtitles burn in, and you get a real MP4 at the end.

The goal was to see how far a serious video pipeline could go with no backend at all. No upload, no render queue, no "your video will be ready in 4 minutes" email. Your photo goes to the vision API you picked and nowhere else. Cutting your dog out of the background, animating her, and encoding the MP4 all happen on your own machine, with your own GPU.

Where the words come from. You pick before analysis, so the vision model only does the job you need: Let the AI write the monologue from the photo Write the script yourself, pick a voice Record your own voice and use it directly

| Preset | What it does | | --------------- | ----------------------------------------------------- | | ๐Ÿ—ฟ Locked Off | Only the face moves. The default, and most convincing. | | ๐Ÿƒ Barely There | A whisper of drift | | ๐ŸŽ™๏ธ Portrait | Gentle sway | | ๐Ÿ™ƒ Belly Roll | Lazy sideways flop | | ๐Ÿ€ Bouncy | Springy on the beat | | ๐Ÿ’จ Zoomies | Maximum chaos |

Then sliders for mouth movement, head motion, emphasis nods, camera push-in, handheld shake, background parallax, blink rate and ear twitch.

Backgrounds: blurred, original, your own uploaded image, plus procedural Sunset, Studio, Park, Neon and Solid. Your dog gets segmented out of the photo, so the background genuinely sits behind her and moves independently.

Subtitles: Karaoke (rolling window, highlighted word), Pop-up (two words, hard cuts) or Minimal (full sentence). Size, position, uppercase and colour are yours. The colour picker comes pre-loaded with shades sampled from your actual photo, so a brown dog gets warm captions and a pink collar gets pink ones.

The animation moves specific anatomical points, so the photo matters more than you would expect. This took a lot of bad outputs to work out:

โœ… Head-on portrait. Profile shots hide one eye and one ear, and the rig has nothing to animate on that side. โœ… Face fills the frame. Head and shoulders. In a full-body shot the muzzle is too small to deform cleanly. โœ… Eyes, nose, mouth and ears clearly visible. These are literally the coordinates the animation moves. โœ… One dog. Segmentation keeps a single subject. Two dogs become one blob. โœ… Sharp and well lit. Blur and deep shadow make the cutout edge mushy. โŒ Nothing over the face. Sunglasses, hands, toys. Anything covering an anchor gets deformed along with it.

Start with Locked Off. It is counterintuitive, but motion is what gives away a puppeted photo. Hold the frame completely still and the viewer reads it as real video of a dog sitting calmly, leaving only the mouth to judge. And the mouth is the one part driven by real audio.

Short scripts win. Two or three punchy sentences. Long monologues drift out of sync with the face and burn your free tier faster.

| Step | Time | | ------------------------------------------------------------------------------------------------------ | ------- | | Sign up at ElevenLabs, copy the API key | ~3 min | | Sign up at Google AI Studio with your Google account, copy the key | ~2 min | | Open the app, paste both keys, drop in a dog photo | ~1 min | | Hit analyse, hit generate, hit export | ~4 min |

Both free tiers are enough. No card required for either. The keys live in your browser's local storage and are sent only to the provider you picked, because there is no server of mine to send them to.

โณ What to expect on your first run. Because background removal happens on your machine, the browser fetches the segmentation model before it can cut your dog out. That is roughly 25MB of ONNX runtime and neural network weights, and on a slow connection it can take a minute or two. You get a progress bar, and the download starts the moment you drop a photo in so it overlaps with everything else. It is a one-time cost. Your browser caches it and every run after that goes straight to work. If the first one feels slow, that is what is happening, and it is not stuck.

No dog? Steal one from Unsplash. It works on any dog and I will not tell anyone.

MIT licensed. Fork it, enable Pages in repo settings, and push: there is a GitHub Actions workflow that builds and deploys on every push to main. Since there is no backend, static hosting is all it has ever needed.

Google AI does two jobs in one call. Gemini Flash writes the monologue in the dog's voice and acts as a precise vision annotator, returning normalised bounding boxes for the nose, mouth, eyes and ears. Those coordinates are what the shader deforms. When you supply your own script the prompt drops the writing job entirely, so the model spends all its attention on the coordinates.

ElevenLabs is doing more than narration. The /with-timestamps endpoint returns character-level timings alongside the audio. Those timings drive the karaoke subtitles, and the loudness envelope derived from the same audio drives the jaw. The voice is not decoration here, it is the animation input.

Want to discuss this further?

Book a free strategy call with our team to see how these insights apply to your specific business goals.

Book a consultation