← back to Motion Table - Orbitcompare with ground truth →
model output
GPT-5.4
Motion Table - Orbit
A 0.92T 0.34
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>Radar Orbit Animation</title>
7<style>
8 :root{
9 --bg:#4a4748;
10 --line:rgba(255,255,255,.62);
11 --line-soft:rgba(255,255,255,.18);
12 --dot:#a3a33f;
13 --blue:rgba(74,122,145,.42);
14 --white:rgba(255,255,255,.22);
15 --ghost:rgba(255,255,255,.12);
16 --size:108px;
17 }
18
19 html,body{
20 margin:0;
21 width:100%;
22 height:100%;
23 overflow:hidden;
24 background:var(--bg);
25 font-family:sans-serif;
26 }
27
28 .stage{
29 position:relative;
30 width:100vw;
31 height:100vh;
32 background:var(--bg);
33 }
34
35 .radar{
36 position:absolute;
37 left:50%;
38 top:50%;
39 width:var(--size);
40 height:var(--size);
41 transform:translate(-50%,-50%);
42 }
43
44 /* static guide */
45 .ring{
46 position:absolute;
47 border:1px solid var(--line);
48 border-radius:50%;
49 box-sizing:border-box;
50 }
51 .ring.outer{ inset:6px; opacity:.7; }
52 .ring.mid{ inset:30px; opacity:.9; }
53 .ring.inner{ inset:42px; opacity:.95; }
54
55 .cross{
56 position:absolute;
57 left:50%;
58 top:50%;
59 transform:translate(-50%,-50%);
60 opacity:.9;
61 }
62 .cross.v{
63 width:0;
64 height:74px;
65 border-left:1px dashed var(--line);
66 }
67 .cross.h{
68 width:74px;
69 height:0;
70 border-top:1px dashed var(--line);
71 }
72
73 .center{
74 position:absolute;
75 left:50%;
76 top:50%;
77 width:8px;
78 height:8px;
79 transform:translate(-50%,-50%);
80 border:1px solid var(--line);
81 border-radius:50%;
82 background:transparent;
83 }
84
85 /* orbiting dots */
86 .orbit{
87 position:absolute;
88 inset:0;
89 animation:spin 2.8s linear infinite;
90 }
91 .dot{
92 position:absolute;
93 width:16px;
94 height:16px;
95 margin:-8px 0 0 -8px;
96 border-radius:50%;
97 background:var(--dot);
98 filter:blur(.2px);
99 opacity:.92;
100 box-shadow:0 0 0 1px rgba(163,163,63,.08);
101 }
102
103 /* positions approximated from frames */
104 .d1{ left:50%; top:14px; }
105 .d2{ left:95px; top:50%; }
106 .d3{ left:58px; top:98px; }
107 .d4{ left:17px; top:55px; }
108
109 /* transient blobs seen in middle frames */
110 .pulse-layer{
111 position:absolute;
112 inset:0;
113 pointer-events:none;
114 }
115
116 .blob{
117 position:absolute;
118 border-radius:50%;
119 transform:translate(-50%,-50%) scale(.2);
120 opacity:0;
121 animation:blobCycle 2.8s ease-in-out infinite;
122 }
123
124 .blob.blue{
125 width:42px;height:42px;
126 left:73px; top:38px;
127 background:var(--blue);
128 animation-delay:1.55s;
129 }
130 .blob.white{
131 width:58px;height:58px;
132 left:34px; top:58px;
133 background:var(--white);
134 animation-delay:1.72s;
135 }
136
137 .ghost-ring{
138 position:absolute;
139 width:36px;height:36px;
140 border:1px solid var(--ghost);
141 border-radius:50%;
142 transform:translate(-50%,-50%) scale(.4);
143 opacity:0;
144 animation:ghostCycle 2.8s ease-out infinite;
145 }
146 .g1{ left:28px; top:82px; animation-delay:1.48s; }
147 .g2{ left:28px; top:38px; animation-delay:1.58s; }
148 .g3{ left:86px; top:82px; animation-delay:1.68s; }
149 .g4{ left:86px; top:38px; animation-delay:1.78s; }
150
151 @keyframes spin{
152 from{ transform:rotate(0deg); }
153 to{ transform:rotate(360deg); }
154 }
155
156 @keyframes blobCycle{
157 0%,52%{ opacity:0; transform:translate(-50%,-50%) scale(.15); }
158 58%{ opacity:.55; transform:translate(-50%,-50%) scale(.9); }
159 66%{ opacity:.42; transform:translate(-50%,-50%) scale(1.08); }
160 76%{ opacity:.18; transform:translate(-50%,-50%) scale(1.22); }
161 100%{ opacity:0; transform:translate(-50%,-50%) scale(1.28); }
162 }
163
164 @keyframes ghostCycle{
165 0%,50%{ opacity:0; transform:translate(-50%,-50%) scale(.35); }
166 58%{ opacity:.45; transform:translate(-50%,-50%) scale(.9); }
167 72%{ opacity:.18; transform:translate(-50%,-50%) scale(1.15); }
168 100%{ opacity:0; transform:translate(-50%,-50%) scale(1.25); }
169 }
170</style>
171</head>
172<body>
173 <div class="stage">
174 <div class="radar">
175 <div class="ring outer"></div>
176 <div class="ring mid"></div>
177 <div class="ring inner"></div>
178 <div class="cross v"></div>
179 <div class="cross h"></div>
180 <div class="center"></div>
181
182 <div class="pulse-layer">
183 <div class="blob blue"></div>
184 <div class="blob white"></div>
185 <div class="ghost-ring g1"></div>
186 <div class="ghost-ring g2"></div>
187 <div class="ghost-ring g3"></div>
188 <div class="ghost-ring g4"></div>
189 </div>
190
191 <div class="orbit">
192 <div class="dot d1"></div>
193 <div class="dot d2"></div>
194 <div class="dot d3"></div>
195 <div class="dot d4"></div>
196 </div>
197 </div>
198 </div>
199</body>
200</html>