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