Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
| <title>MotionBricks Playground</title> | |
| <meta name="description" content="NVIDIA MotionBricks running live in your browser: drive a Unitree G1 humanoid whose every step is generated in real time by a 195M-parameter motion model."> | |
| <meta name="theme-color" content="#0a0a0a"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="css/style.css"> | |
| <script>window.MB_SPACE = 'townbox/motionbricks-playground';</script> | |
| <script type="importmap"> | |
| { "imports": { | |
| "three": "https://cdn.jsdelivr.net/npm/three@0.186.1/build/three.module.js", | |
| "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.186.1/examples/jsm/" | |
| } } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="stage"></div> | |
| <div id="caption"></div> | |
| <div id="card"></div> | |
| <header id="title"> | |
| <button id="panel-toggle" class="icon-btn" title="Show or hide the controls" aria-label="Show or hide the controls"><span data-icon="sliders-horizontal"></span></button> | |
| <div> | |
| <div class="brand"> | |
| <svg class="mark" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><rect x="1" y="1.5" width="10" height="4" rx="1.2"/><rect x="7" y="7" width="10" height="4" rx="1.2"/><rect x="1" y="12.5" width="10" height="4" rx="1.2"/></svg> | |
| MotionBricks <small>Playground</small> | |
| <button id="about-open" class="icon-btn" title="About this demo" aria-label="About this demo"><span data-icon="info" data-size="15"></span></button> | |
| </div> | |
| <div class="sub">Unitree G1 · every step generated live in your browser</div> | |
| </div> | |
| </header> | |
| <section id="stats" class="glass"> | |
| <div class="wide"><label>State</label><span id="state">–</span></div> | |
| <div><label>Speed</label><span id="speed">–</span></div> | |
| <div><label>Generations</label><span id="gens">0</span></div> | |
| <div><label>Inference</label><span><span id="infer">–</span><span id="busy" class="dot" title="Generating"></span></span></div> | |
| <div><label>Runtime</label><span id="threads">–</span></div> | |
| </section> | |
| <aside id="panel" class="glass"> | |
| <h3>Locomotion</h3> | |
| <div id="modes" class="segmented"></div> | |
| <h3>Style</h3> | |
| <div id="styles" class="styles"></div> | |
| <h3>Overlays</h3> | |
| <div id="overlays" class="switches"></div> | |
| <h3>Behavior</h3> | |
| <div id="behavior" class="switches"></div> | |
| <details id="help" open> | |
| <summary><h3>Controls</h3><span data-icon="chevron-down" data-size="14"></span></summary> | |
| <div class="trace"> | |
| <div class="line"><span data-icon="mouse-pointer-click"></span><span class="t">Click or tap the floor</span><span class="d">walk there · double-click to run</span></div> | |
| <div class="line kb"><span data-icon="keyboard"></span><span class="t"><kbd>WASD</kbd></span><span class="d">steer · <kbd>Shift</kbd> run · <kbd>E</kbd> interact</span></div> | |
| <div class="line"><span data-icon="rotate-3d"></span><span class="t">Drag</span><span class="d">orbit · scroll or pinch to zoom</span></div> | |
| <div class="line"><span data-icon="box"></span><span class="t">Walk into an object</span><span class="d">jump, vault, duck or sit</span></div> | |
| </div> | |
| </details> | |
| </aside> | |
| <div id="log" class="trace"></div> | |
| <footer id="timeline-wrap" class="glass"> | |
| <div class="tl-head"><span id="tl-label">–</span><span class="legend"><span class="l-ctx">context</span><span class="l-tgt">target</span><span class="l-plan">path</span><span class="l-tr">transition</span></span></div> | |
| <div id="timeline"><b class="ctx"></b><i class="done"></i><i class="trans"></i><i class="play"></i></div> | |
| </footer> | |
| <div id="touch"> | |
| <div id="joystick"><div id="knob"></div></div> | |
| <div class="touch-buttons"><button id="runbtn">Run</button><button id="interact">Interact</button></div> | |
| </div> | |
| <div id="loading" class="dialog"> | |
| <h1>MotionBricks <span>in your browser</span></h1> | |
| <p>NVIDIA's real-time motion model (195M parameters) runs locally with ONNX Runtime Web. Give it the robot's last four poses and up to four target poses; it generates the motion in between, about once a second, while you steer.</p> | |
| <div class="loadrow" id="load-robot"><span>Robot</span><b><i></i></b><em>waiting…</em></div> | |
| <div class="loadrow" id="load-clips"><span>Target poses</span><b><i></i></b><em>waiting…</em></div> | |
| <div class="loadrow" id="load-model"><span>Model · 369 MB</span><b><i></i></b><em>waiting…</em></div> | |
| <p class="small">The model downloads once and is cached by your browser. A desktop browser with 8 GB of RAM or more is recommended.</p> | |
| <p id="load-error" class="err"></p> | |
| <button id="start" class="btn" onclick="document.body.classList.add('dismissed')">Explore while it loads</button> | |
| </div> | |
| <dialog id="about" class="dialog" aria-labelledby="about-title"> | |
| <button id="about-close" class="icon-btn" aria-label="Close" autofocus><span data-icon="x"></span></button> | |
| <h2 id="about-title">About this demo</h2> | |
| <p><a href="https://github.com/NVlabs/motionbricks" target="_blank" rel="noopener">MotionBricks</a> (Wang et al., SIGGRAPH 2026) is NVIDIA's modular latent generative model for real-time character and robot motion. This page is an independent browser port of its Unitree G1 runtime: the official ONNX model runs in a Web Worker with ONNX Runtime Web, and the locomotion, idle and Smart Primitive logic follows the reference Python runtime.</p> | |
| <p>Because a browser generation takes ~50–250 ms instead of ~3 ms with TensorRT, each request predicts where the robot will be when its motion takes over and builds the context from the poses it will have shown by then.</p> | |
| <p class="small">Model: NVIDIA Open Model Agreement. Runtime code: Apache-2.0. Sample motion clips are streamed from NVIDIA's repository under the NVIDIA Sample Data Evaluation License and are not redistributed here. Robot meshes: Unitree Robotics (BSD-3-Clause).</p> | |
| </dialog> | |
| <script type="module" src="js/main.js"></script> | |
| </body> | |
| </html> | |