xaio
A martial-arts movie that plays itself. One white stick figure fights through five procedural worlds, improvising with whatever is within reach. Recurring rivals, changing bosses and an Endless Film mode keep the night going.
Type: Autonomous 2D Martial-Arts Simulation / Single Page Application (SPA)
Domain: Procedural Animation / Generative Entertainment
Purpose & Origins
xaio began as a tribute to Xiao Xiao’s stick-figure fights and the crowd-combat spectacle of The One. The premise is deliberately simple: someone wakes up in the wrong place, a lot of colourful people want to fight, and there ought to be a way out.
The aim is cinematic plausibility rather than a realistic fighting simulator. A strike should have preparation, contact and a consequence. An opponent should be able to miss, a weapon should need room to work, and a railing should occasionally become the answer to a difficult situation. The hero is impressive because of what they do, not because every incoming hit can be ignored.
You watch rather than steer the punches. Choose a setting, hero and seed, then let the scene unfold. Pause, change playback speed, enable automatic or manual slow motion, or choose an available exit between sections. Defeat offers three straightforward choices: Restart, Rebirth or Randomize.
The title screen says “A tribute.” That is the starting point, not a claim to reproduce the original animations.
Architecture & Technology
The application is written in TypeScript, compiled to JavaScript and packaged with HTML and CSS in one self-contained file. Canvas 2D draws the world, while a custom fixed-step simulation runs movement and combat at sixty updates per simulated second, independently of the rendering cadence.
Characters use code-defined skeletal rigs, authored movement clips and procedural adjustments for foot placement, reach, grip and recovery. Collision, weapon spacing and defensive positioning determine whether an attack lands. The choreography is assembled live from those systems; it is neither prerecorded video nor output from a remote generative-AI service.
Separate seeded systems handle world layouts, encounters, tactical variation and procedural incidents. A director manages pressure and recent repetition, while rival history and boss state provide continuity. Endless Film retains the current campaign and bounded recent history rather than accumulating every previous room indefinitely.
Sound is synthesized locally through the Web Audio API. There are no external runtime libraries, downloaded art or audio assets, application servers or account services. The HTML can be opened directly or served from a static host.
Preferences use browser storage; ongoing films are session-local and end when the page is closed or reloaded. Hidden tabs pause the simulation.
Scope & Uniqueness
Five settings each contain fifteen substantial sections and two bosses. Tower is a climb, retrieval and return journey. Train pushes through confined carriages and exposed rooftops. Airport favours pursuit, long approaches and moving walkways. Stadium adds vertical arrivals and rival gangs fighting one another. Fair supplies moving attractions, breakable scenery and plenty of objects to improvise with.
The three heroes change the character of the film. Prodigy favours flowing, acrobatic entries and wushu-inspired weapon work. Survivor relies on interception, catches and redirecting momentum. Salaryman boxes, grapples, scrambles and throws whatever might buy enough space to leave. They are different approaches to the same predicament, not simply three health settings.
Equipment has a physical history: it can be found, dropped, thrown, recovered or broken, and its wear remains. Procedural incidents alter entrances, machinery, reinforcement timing and opportunities. Rivals who genuinely survive can return; bosses can abandon an unsuccessful approach without resetting their health. Director’s Cut varies act-level themes and discourages recent repetition without making successful hits disappear.
Single Film ends after one campaign. Endless Film links complete campaigns with new seeds, carried equipment and eligible surviving rivals. Optional Auto Rebirth keeps the film moving through defeats by using the ordinary checkpoint rules, not by guaranteeing victory.
There are no visible damage meters, firearms, blood, unlock trees or purchases. The spectacle is white against black, bright gangs, blunt impacts and the occasional useful piece of furniture. No accounts, advertising or tracking. Just a very long, very bad night.
Screenshots
