← back to Motion Table - Orbitcompare with ground truth →
model output
LLaMA 4 Scout
Motion Table - Orbit
A 0.63T 0.23
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 padding: 0;
12 overflow: hidden;
13 }
14 .target {
15 position: absolute;
16 top: 50%;
17 left: 50%;
18 transform: translate(-50%, -50%);
19 width: 100px;
20 height: 100px;
21 }
22 .circle {
23 position: absolute;
24 top: 50%;
25 left: 50%;
26 transform: translate(-50%, -50%);
27 width: 100px;
28 height: 100px;
29 border-radius: 50%;
30 border: 2px solid #fff;
31 }
32 .dot {
33 position: absolute;
34 top: 50%;
35 left: 50%;
36 transform: translate(-50%, -50%);
37 width: 10px;
38 height: 10px;
39 background-color: #ccc;
40 border-radius: 50%;
41 }
42 .orbit {
43 position: absolute;
44 top: 50%;
45 left: 50%;
46 transform: translate(-50%, -50%);
47 width: 50px;
48 height: 50px;
49 border-radius: 50%;
50 border: 2px solid #fff;
51 animation: orbit 8s linear infinite;
52 }
53 @keyframes orbit {
54 0% {
55 transform: translate(-50%, -50%) rotate(0deg);
56 }
57 100% {
58 transform: translate(-50%, -50%) rotate(360deg);
59 }
60 }
61 .fade-in {
62 animation: fade-in 1s ease-out;
63 }
64 @keyframes fade-in {
65 0% {
66 opacity: 0;
67 }
68 100% {
69 opacity: 1;
70 }
71 }
72 </style>
73</head>
74<body>
75 <div class="target">
76 <div class="circle"></div>
77 <div class="dot" style="top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(0deg);"></div>
78 <div class="dot" style="top: 50%; left: 60%; transform: translate(-50%, -50%) rotate(90deg);"></div>
79 <div class="dot" style="top: 60%; left: 50%; transform: translate(-50%, -50%) rotate(180deg);"></div>
80 <div class="dot" style="top: 50%; left: 40%; transform: translate(-50%, -50%) rotate(270deg);"></div>
81 <div class="orbit" style="animation-delay: 0s;"></div>
82 <div class="orbit" style="animation-delay: 2s;"></div>
83 <div class="orbit" style="animation-delay: 4s;"></div>
84 <div class="orbit" style="animation-delay: 6s;"></div>
85 </div>
86 <script>
87 // JavaScript code here
88 </script>
89</body>
90</html>