← back to Motion Table - Orbitcompare with ground truth →
model output
LLaMA 4 Scout
Motion Table - Orbit
A 0.80T 0.10
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Animation</title>
7 <style>
8 body {
9 background-color: #333;
10 margin: 0;
11 display: flex;
12 justify-content: center;
13 align-items: center;
14 height: 100vh;
15 overflow: hidden;
16 }
17 .circle {
18 position: relative;
19 }
20 .orbit {
21 position: absolute;
22 top: 50%;
23 left: 50%;
24 transform: translate(-50%, -50%);
25 width: 100px;
26 height: 100px;
27 border-radius: 50%;
28 border: 1px solid #fff;
29 }
30 .dot {
31 position: absolute;
32 top: 50%;
33 left: 50%;
34 transform: translate(-50%, -50%);
35 width: 10px;
36 height: 10px;
37 border-radius: 50%;
38 background-color: #fff;
39 }
40 </style>
41</head>
42<body>
43 <div class="circle">
44 <div class="orbit"></div>
45 <div class="dot"></div>
46 </div>
47
48 <script>
49 const dot = document.querySelector('.dot');
50 const orbit = document.querySelector('.orbit');
51 let angle = 0;
52
53 function animate() {
54 angle += 1;
55 if (angle > 360) angle = 0;
56 const x = 50 + Math.cos(angle * Math.PI / 180) * 45;
57 const y = 50 + Math.sin(angle * Math.PI / 180) * 45;
58 dot.style.top = `${y}%`;
59 dot.style.left = `${x}%`;
60 }
61
62 setInterval(animate, 16); // 60fps
63 </script>
64</body>
65</html>