← back to Motion Table - Orbitcompare with ground truth →
model output
Claude Sonnet 4.6
Motion Table - Orbit
A 0.86T 0.30
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>Orbital Animation</title>
7<style>
8 * { margin: 0; padding: 0; box-sizing: border-box; }
9
10 body {
11 background-color: #555353;
12 width: 100vw;
13 height: 100vh;
14 display: flex;
15 align-items: center;
16 justify-content: center;
17 overflow: hidden;
18 }
19
20 .scene {
21 position: relative;
22 width: 200px;
23 height: 200px;
24 }
25
26 /* Center crosshair target */
27 .target {
28 position: absolute;
29 top: 50%;
30 left: 50%;
31 transform: translate(-50%, -50%);
32 width: 60px;
33 height: 60px;
34 }
35
36 /* Concentric circles */
37 .ring {
38 position: absolute;
39 top: 50%;
40 left: 50%;
41 transform: translate(-50%, -50%);
42 border-radius: 50%;
43 border: 1px solid rgba(255,255,255,0.6);
44 }
45
46 .ring-outer {
47 width: 120px;
48 height: 120px;
49 }
50
51 .ring-mid {
52 width: 70px;
53 height: 70px;
54 }
55
56 .ring-inner {
57 width: 30px;
58 height: 30px;
59 }
60
61 .ring-tiny {
62 width: 10px;
63 height: 10px;
64 background: rgba(255,255,255,0.8);
65 border: none;
66 }
67
68 /* Dashed crosshair lines */
69 .crosshair-h, .crosshair-v {
70 position: absolute;
71 top: 50%;
72 left: 50%;
73 background: none;
74 border: none;
75 }
76
77 .crosshair-h {
78 width: 80px;
79 height: 1px;
80 transform: translate(-50%, -50%);
81 border-top: 1px dashed rgba(255,255,255,0.5);
82 }
83
84 .crosshair-v {
85 width: 1px;
86 height: 80px;
87 transform: translate(-50%, -50%);
88 border-left: 1px dashed rgba(255,255,255,0.5);
89 }
90
91 /* Orbit path */
92 .orbit-path {
93 position: absolute;
94 top: 50%;
95 left: 50%;
96 transform: translate(-50%, -50%);
97 width: 120px;
98 height: 120px;
99 border-radius: 50%;
100 border: 1px solid rgba(255,255,255,0.25);
101 }
102
103 /* Orbiting dots container - rotates around center */
104 .orbit-group {
105 position: absolute;
106 top: 50%;
107 left: 50%;
108 width: 0;
109 height: 0;
110 animation: orbit 4s linear infinite;
111 }
112
113 @keyframes orbit {
114 from { transform: rotate(0deg); }
115 to { transform: rotate(360deg); }
116 }
117
118 /* Individual dots placed at orbit radius */
119 .dot {
120 position: absolute;
121 width: 14px;
122 height: 14px;
123 border-radius: 50%;
124 background: #8a8a2a;
125 margin: -7px;
126 }
127
128 /* 4 dots at 90° intervals on the orbit */
129 .dot-right {
130 left: 60px;
131 top: 0;
132 }
133
134 .dot-bottom {
135 left: 0;
136 top: 60px;
137 }
138
139 .dot-left {
140 left: -60px;
141 top: 0;
142 }
143
144 .dot-top {
145 left: 0;
146 top: -60px;
147 }
148
149 /* Ghost trail effect - fading circles that appear during fast rotation */
150 .ghost-group {
151 position: absolute;
152 top: 50%;
153 left: 50%;
154 width: 0;
155 height: 0;
156 animation: orbit-ghost 4s linear infinite;
157 animation-delay: -0.15s;
158 }
159
160 @keyframes orbit-ghost {
161 from { transform: rotate(0deg); }
162 to { transform: rotate(360deg); }
163 }
164
165 .ghost-dot {
166 position: absolute;
167 width: 14px;
168 height: 14px;
169 border-radius: 50%;
170 margin: -7px;
171 animation: ghost-fade 4s linear infinite;
172 }
173
174 @keyframes ghost-fade {
175 0%, 100% { opacity: 0; }
176 25% { opacity: 0.15; }
177 50% { opacity: 0.3; }
178 75% { opacity: 0.15; }
179 }
180
181 /* Expanding ghost rings that appear periodically */
182 .ghost-ring {
183 position: absolute;
184 top: 50%;
185 left: 50%;
186 transform: translate(-50%, -50%);
187 border-radius: 50%;
188 border: 1px solid rgba(255,255,255,0.1);
189 animation: ghost-ring-anim 4s ease-out infinite;
190 pointer-events: none;
191 }
192
193 @keyframes ghost-ring-anim {
194 0% { width: 60px; height: 60px; opacity: 0.3; }
195 50% { width: 130px; height: 130px; opacity: 0.1; }
196 100% { width: 60px; height: 60px; opacity: 0.3; }
197 }
198
199 /* Teal/blue expanding blob that appears in frame 6 */
200 .teal-blob {
201 position: absolute;
202 top: 50%;
203 left: 50%;
204 width: 50px;
205 height: 50px;
206 border-radius: 50%;
207 background: rgba(70, 130, 150, 0.5);
208 transform: translate(-10px, -40px);
209 animation: teal-pulse 4s ease-in-out infinite;
210 animation-delay: -1s;
211 }
212
213 @keyframes teal-pulse {
214 0%, 100% { opacity: 0; transform: translate(-10px, -40px) scale(0.5); }
215 40% { opacity: 0.7; transform: translate(-10px, -40px) scale(1.5); }
216 60% { opacity: 0.4; transform: translate(-10px, -40px) scale(1.2); }
217 80% { opacity: 0; transform: translate(-10px, -40px) scale(0.8); }
218 }
219
220 /* Dark overlay blobs that appear in frames 6-7 */
221 .dark-blob {
222 position: absolute;
223 top: 50%;
224 left: 50%;
225 border-radius: 50%;
226 background: rgba(40, 40, 40, 0.5);
227 animation: dark-pulse 4s ease-in-out infinite;
228 animation-delay: -1.2s;
229 }
230
231 .dark-blob-1 {
232 width: 60px;
233 height: 60px;
234 transform: translate(-50px, 10px);
235 }
236
237 .dark-blob-2 {
238 width: 50px;
239 height: 50px;
240 transform: translate(10px, 20px);
241 }
242
243 @keyframes dark-pulse {
244 0%, 100% { opacity: 0; }
245 40% { opacity: 0.6; }
246 70% { opacity: 0.3; }
247 85% { opacity: 0; }
248 }
249
250</style>
251</head>
252<body>
253
254<div class="scene">
255 <!-- Ghost blobs -->
256 <div class="teal-blob"></div>
257 <div class="dark-blob dark-blob-1"></div>
258 <div class="dark-blob dark-blob-2"></div>
259
260 <!-- Ghost ring -->
261 <div class="ghost-ring"></div>
262
263 <!-- Outer orbit path circle -->
264 <div class="orbit-path"></div>
265
266 <!-- Concentric rings (target) -->
267 <div class="ring ring-outer"></div>
268 <div class="ring ring-mid"></div>
269 <div class="ring ring-inner"></div>
270 <div class="ring ring-tiny"></div>
271
272 <!-- Crosshair dashed lines -->
273 <div class="crosshair-h"></div>
274 <div class="crosshair-v"></div>
275
276 <!-- Orbiting dots -->
277 <div class="orbit-group">
278 <div class="dot dot-right"></div>
279 <div class="dot dot-bottom"></div>
280 <div class="dot dot-left"></div>
281 <div class="dot dot-top"></div>
282 </div>
283</div>
284
285</body>
286</html>