File size: 2,488 Bytes
d456972 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!doctype html>
<html lang="en" data-test-status="starting">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="data:,">
<title>MotionBricks G1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section id="viewport" aria-label="Animated G1 skeleton"></section>
<aside>
<p class="eyebrow">MOTIONBRICKS / G1</p>
<h1>Whole-body motion</h1>
<p class="lede">Move with WASD. The character faces its travel direction; arrow keys turn independently.</p>
<div class="legend" aria-label="Skeleton legend">
<span><i class="animated-swatch"></i>Animated model</span>
<span><i class="target-swatch"></i>Target keyframes</span>
</div>
<label for="style-select">Upstream pose style</label>
<select id="style-select" aria-label="Motion style"></select>
<div class="target-frame-control">
<label for="target-frame">Inspect placed target <output id="target-frame-label" for="target-frame">T3</output></label>
<input id="target-frame" type="range" min="0" max="3" step="1" value="3" aria-label="Target frame">
</div>
<div class="view-options">
<label><input id="show-all-targets" type="checkbox"> Overlay all four consecutive poses</label>
<button id="reset-camera" type="button">Reset camera</button>
</div>
<p class="target-help">T0–T3 are consecutive 30 FPS constraints, so their exact positions are intentionally close.</p>
<p class="camera-help">Drag to orbit · wheel to zoom · tap a pad direction to move, tap it again to stop</p>
<div class="pad" aria-label="Directional controls">
<button data-key="w" data-x="0" data-z="1" aria-label="Walk forward">W</button>
<button data-key="a" data-x="-1" data-z="0" aria-label="Walk left">A</button>
<button data-key="s" data-x="0" data-z="-1" aria-label="Walk backward">S</button>
<button data-key="d" data-x="1" data-z="0" aria-label="Walk right">D</button>
</div>
<dl>
<div><dt>Status</dt><dd id="status">Loading model…</dd></div>
<div><dt>Plan</dt><dd id="plan-info">—</dd></div>
<div><dt>Targets</dt><dd id="target-info">—</dd></div>
<div><dt>Backend</dt><dd>native GGML</dd></div>
</dl>
<p id="test-result" role="status"></p>
</aside>
</main>
<script type="module" src="app.js"></script>
</body>
</html>
|