We built a capoeira fighting game in the browser in two days

It started as one sentence: build a video game like Tekken, but every move is capoeira. Today there's a library of 83 moves with fighting-game frame data, a 3D capoeirista who performs every one of them, and a 3D move viewer in CapoeiraFlow that anyone can open at capoeiraflow.xyz/moves/3d.

It all runs in a web browser. Nearly all of the code was written by Claude Code, Anthropic's coding agent, from short requests in plain English, with helper agents it started to work on several jobs at once. Here's what we built, how, and what still isn't good enough.

Where it started

CapoeiraFlow is our app for learning capoeira: a dictionary of 81 moves with illustrations and YouTube examples, and a builder for chaining moves into combinations. The game began as a side project next to it, using the app's move list and video links as research.

The first decision was the engine. The game had to be playable in a browser, which ruled out Unreal Engine because it no longer publishes to the web. We chose three.js for the 3D, with TypeScript and Vite. A fighting game suits the browser well: there are only two characters and one small arena on screen, so most of the graphics budget can go into the fighters.

The look we had in mind was Eddy Gordo from Tekken 3, the series' famous capoeirista.

83 moves, written down like a fighting game

Before any animation, every move got a fighting-game entry: a button input, frame data, damage, hit level and special properties. The 83 moves are spread over 6 stances (ginga, cocorinha, negativa, queda de quatro, queda de rins and bananeira), and the stance you're in decides what you can do next, much as in Tekken.

The controls map capoeira onto four buttons: 1 for hand strikes (mão), 2 for sweeps (rasteira), 3 for the front-leg kick and 4 for the back-leg kick. Stance moves add a prefix, so NEG.2 is a sweep from negativa. Timing is counted in frames at 60 a second: an armada spends 17 frames winding up, can hit for 4, and takes 26 to recover.

Some ideas came from capoeira rather than from Tekken. The ginga never stops, so there's no standing still. The berimbau sets the tempo. Floreios, the acrobatic flourishes, build a malícia meter. And the roda is the arena.

Can a game learn moves from YouTube?

The most exciting idea was to have the fighters learn their moves from videos of real capoeiristas. In principle that works: Google's MediaPipe Pose finds 33 points on a body in each frame of a video, right in the browser, and those points can drive a 3D figure.

We built a capture studio to find out. You load a video, mark where a move starts and ends, and press capture. The studio follows the player who moves the most (or whoever you click), shows the motion on a 3D figure from every angle, and exports a clip. On two freely licensed street-roda clips from Wikimedia Commons, it captured a 1.6-second move in about 8 seconds on an M1 MacBook.

The results were mixed:

• Worked: standing kicks by a clearly visible player, and following one player in a crowd.
• Struggled: two players overlapping, especially in matching uniforms. At the peak of a kick, their limbs got mixed up.
• Failed: upside-down and floor moves such as aú, negativa and floor spins. Often the player wasn't detected at all.

There's a rights question too. YouTube clips are fine to watch for reference, but the footage belongs to the people who posted it, and YouTube's terms don't allow downloading it without permission. So the animation that ships in the game will come from footage we film ourselves, or that its owners let us use.

Animating every move without motion capture

Until there's footage, every move is animated by hand, though not by dragging bones around in an animation program. Each move is a handful of key poses written as joint angles (raise the right thigh 95 degrees, turn the chest 40 degrees), timed to its frame data. The code fills in the frames between them, and inverse kinematics pins hands and feet to the floor while they carry weight, so a planted foot doesn't slide.

One decision holds everything together: hand-keyed poses are converted into the same 33 body points that MediaPipe gets from video. Captured clips and keyframed moves go through exactly the same pipeline, so a captured clip can replace a hand-keyed move without changing anything else.

Claude Code wrote the skeleton and the tools, then started six helper agents, each taking a family of moves, to key all 83 in parallel. Scripts checked every frame of every move for feet sinking into the floor, limbs jumping between frames, and planted hands or feet sliding.

The result is a move viewer. Pick any move and it plays on a loop, with:

• a timeline coloured by startup, active and recovery frames
• the striking body part lit up while it can hit
• the path of the kick traced in the air
• a ghost opponent at fighting distance, to judge range and height

An armada in the move viewer. The kicking foot lights up during its 4 active frames, and the line traces its path.

A fighter in the spirit of Eddy Gordo

For the first day the fighter was a figure made of capsules. Then came the request: make it look like Eddy from Tekken 3.

Eddy belongs to Bandai Namco, so we didn't copy him. Our fighter is an original capoeirista in the same spirit: lean and muscular, shirtless, with dreadlocks pulled back into a ponytail over shaved sides, a gold earring, loose white abadá trousers, a green-and-yellow corda and bare feet.

We had no 3D artist, so the body is sculpted in code. About 130 rounded shapes stand in for bones and muscles: pecs, a six-pack, deltoids, calves, a face, hands with fingers and feet with toes. They blend into one smooth surface the way muscle does under skin. A build script then:

1. turns the shapes into a mesh with 2.5 mm detail
2. fits the loose trousers around the legs and knots the corda at the hip
3. works out which bones move each patch of skin
4. writes a standard 3D file, compressed from 3.9 MB to 1.2 MB

In the game, each frame's 33 body points are turned back into the angles of a 19-bone skeleton, which bends the skin. The dreadlocks and the loose ends of the corda are simulated as ropes, so they fly out in a spinning armada and hang toward the floor in a handstand. The first renders caught plenty: trousers full of holes, collarbones floating in front of the chest, dreadlocks sticking up like horns. Each was fixed, re-rendered and checked again.

Teaching the ginga to breathe

The ginga is capoeira's base movement, and in the game it's what a fighter does when not attacking: it never stops. Our first version stepped back, froze, stepped forward and froze again. It looked mechanical.

A helper agent rebuilt it as one continuous two-second loop. The body sinks as the back foot lands on its ball and lifts as it leaves. The hips trace a figure-8 over the triangle step, and the shoulders turn against the hips. The guard arm rises inside the other on every step back, so the hands move in loops instead of swinging back and forth. Every move still starts from the same ready position, so none of the other 82 animations had to change.

One ginga cycle before and after: head in yellow, wrists in cyan and red, hips in green, from the front and from above. Shown on the earlier capsule figure.

Watching it on the new fighter raised the next note straight away: the hands don't always cover the face. A second pass is under way to keep one hand in front of the face at every moment.

Shipping it: a 3D mode in CapoeiraFlow

The viewer was built for the game, but it's just as useful for learning, so it now lives in CapoeiraFlow too. Each move's detail window has a 3D button, and capoeiraflow.xyz/moves/3d lists them all. Drag to turn the view, slow a move down to a tenth of its speed, or scrub through it on the timeline.

Under the hood, the game's viewer has an embed mode that a page can drive with messages, and one command builds it into CapoeiraFlow's site. That build refuses to ship if code from the capture studio sneaks in, so learners never download the video-capture model. CapoeiraFlow runs on Cloudflare Workers, and the 3D mode went live on 14 October 2026.

The 3D move viewer, live in CapoeiraFlow.

A second fighter

A fighting game needs more than one fighter, so the next request was for a woman capoeirista. Like him, she is an original design, deliberately unlike Tekken's Christie Monteiro. She wears a teal racer-back crop top, white abadá and a purple corda knotted on her right hip, with long box braids gathered high in a ponytail and held by a gold cuff.

She is sculpted in code the same way, with narrower shoulders, wider hips and stronger legs, but she shares his skeleton exactly. That one decision meant all 83 moves played on her as soon as her model loaded, with no new animation work. Her braids swing with the same rope physics as his locks.

She kicks a martelo at the grey sparring ghost. On the right is her ginga from the front and from behind.

Lighting the roda

The first stage was a flat, evenly lit floor. A graphics pass turned it into a room. A warm spotlight makes a pool of light with soft shadows, a cool light from behind picks out the fighters' edges, and the floor is varnished wood with a worn painted ring. Beyond the roda it fades into darkness, where onlookers stand as silhouettes.

The fighters changed too. The skin no longer looks like wet plastic, the trousers have folds, and creases such as armpits and ears are darkened when the model is built. The floor darkens wherever feet and hands come near it, which keeps the fighters from looking pasted on.

All of it still runs at 60 frames a second on an M1 Mac. On phones and slower machines the game lowers its own quality, and it steps down again if the frame rate drops.

The same martelo before (top) and after (bottom): the spotlight, wood floor and onlookers, and shading on skin and cloth.

Details a capoeirista would catch

Two fixes came from watching the moves the way a capoeirista would.

The queixada, an outside crescent kick, used to cross the back foot over and kick with the front leg. On the way up, the kicking foot passed through the opponent, and the fighter ended 0.6 m to one side. It is now rebuilt the way many groups teach it. The front foot steps across and turns out, and the back leg sweeps from inside to outside across the jaw, then lands back in the ginga. That put it on the wrong button, since 3 is the front-leg kick, so it moved from up-forward + 3 to up-back + 4.

In the ginga, the hands should protect the face. Measured from the opponent's eyes, they covered it in 87.5% of frames, and the guard hand rested on the cheek. Now a hand covers the face in every frame, about 15 cm in front of it, and the other hand stays in front of the body instead of sticking out like a wing.

The ginga as the opponent sees it, before (top) and after (bottom). The face is now covered in every frame.

Two fighters, one roda

The biggest addition is a fight simulator. Two capoeiristas play best of three rounds of 60 seconds in the roda, each run by an AI with four levels, from Beginner to Mestre. The AI sees its opponent a few frames late, tests its escapes and counters against the incoming attack, and picks one that works, with more mistakes at the lower levels. You can also take the left fighter yourself with the arrow keys and the 1 to 4 buttons.

Hits are checked against the animated bodies themselves, so a dodge really goes under a kick, and a low kick misses a fighter in the air. Across ten test fights, 38% of attacks landed and about a third were dodged. A Mestre beat a Beginner 20–0, and two equal AIs split 100 fights 51–49.

The same evening it went live on CapoeiraFlow at capoeiraflow.xyz/fight, along with a Him/Her switch for the 3D move viewer.

A fight on capoeiraflow.xyz: he flips through a macaco while she goes for a tesoura.

Faces you can look at

Up close, the old faces looked melted: a swollen muzzle, a ridge from cheek to jaw, and eyes set in plain holes. The cause was in the sculpting itself. Blending two rounded shapes makes a bulge wherever their surfaces nearly touch, and the old face was full of near-touches.

A helper rebuilt both heads in a new order. Big soft masses come first (skull, brow, cheekbones, jaw and chin), then shallow relief such as the dip under the cheekbones, then the nose, lips, ears and real eyelids. The face is meshed at twice the detail of the body, and the game adds eyelashes and shades the eyeballs under the lids. He has a broad nose, full lips and a short beard. She has high cheeks, a finer nose and a softer jaw. Both models are still under 1.6 MB.

Him and her before and after. They are still sculpted rather than scanned: no teeth, no expressions, and his beard is painted on.

Moves that flow

The animations were hand-keyed: a few poses per move, with motion filled in between. The old in-between curves stopped every joint at every key, so moves looked like a string of poses. A helper replaced them with the smoothest path through the keys. Joints now carry through, and swing a little past a turn the way a body does. Every key is still hit exactly, and wherever the smooth path would sink into the floor or slide a planted foot, the move keeps its keyed frames. Overall jerk fell by 14%, while kicks still land exactly where they did. Changes from one move to the next now keep their momentum, slow motion is smooth, and the hair and corda no longer stretch.

The ginga got a second pass too, because the hands sat too low. The guard hand now rises to brow level with the elbow out, so the eyes look past it, and the other hand is carried between chest and chin. The body drops deeper into each step back, leans into it, and bounces out, while the shoulders turn twice as far. One hand still covers the face in every frame.

The same moment of the ginga before (left) and after (right): the guard at the brow and the other hand up at the chest.

The dictionary, performed

CapoeiraFlow's move dictionary used YouTube thumbnails, a different person in every video. Now each card shows our own fighter, and the move plays while you rest the pointer on it. On a phone, the card in the middle of the screen plays once you stop scrolling. A switch picks him or her, and a move's window opens on the fighter, with the 3D viewer and the YouTube video as tabs.

The clips are rendered from the game itself: 150 short loops for 75 moves and both fighters, 9.4 MB in all, made by one command in about two minutes. When a move or a fighter changes, they are simply rendered again. The same release moved the site's links behind a menu on phones, where the header used to push pages off the side of the screen.

The dictionary on capoeiraflow.xyz, with a Him/Her switch above the cards.

How it fits together

Because hand-keyed poses become the same 33 points that video capture produces, a captured clip can replace a keyed move without changing anything downstream.

How the work got done

The whole project is a conversation. Requests were short, like "make the ginga more expressive" or "make it look like Eddy from Tekken 3". Claude Code planned the work, wrote the code, ran it and checked it. A few habits made that work:

• Helpers in parallel. Independent jobs went to helper agents with written briefs: which files they could touch, what must not change, and how to check their work. While the main agent sculpted the fighter, one helper reworked the ginga and another built the CapoeiraFlow mode. In the second round five helpers worked at once, on her, the graphics, the queixada, the guard and the fight. In the third round four worked at once, on the faces, the smoothing, the ginga and the dictionary clips. Usage limits stopped helpers several times, and each was restarted and carried on from where it had stopped.
• Checking by looking. Every change was rendered in a headless browser and inspected as contact sheets, frames laid side by side from several angles. That's how the holes in the trousers and the floating collarbones were caught before anyone else saw them.
• Numbers as well as pictures. Scripts measured how far planted feet slide, how deep anything sinks into the floor, and how far any body point jumps between frames.
• People decide. Rights, design calls and anything public stayed with us: nothing was downloaded from YouTube, and nothing went live until we said deploy.
• A living status doc recorded what was done and what was blocked, so decisions didn't get lost in the chat.

What's still rough, and what's next

This is a first pass, and it shows up close:

• The faces are sculpted, not scanned: there are no teeth or expressions, and the eyes don't move. The hands can't make fists because there are no finger bones.
• Every animation is an interpretation and needs a capoeirista's eye. Names and definitions vary between groups, and moves like the s-dobrado and the escorpião are best guesses.
• Floor and upside-down moves can't be captured from ordinary video yet. They need a stronger model, a motion-capture session or more hand animation.
• In the fight, bodies can pass up to about 10 cm into each other, because every move was animated for one fighter alone. And 62% of hits knock the other fighter down, which needs balancing.

Next: filming a few moves with a fixed camera, a review session with a mestre, and turning the fight simulator into a game: a second player, sound and the berimbau, and balancing.

If you play capoeira, open the 3D viewer and tell us what looks wrong.