← back to Motion Table - Orbitcompare with ground truth →
model output
GPT-5.4
Motion Table - Orbit
A 0.91T 0.35
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>Orbit Pulse Loader</title>
7<style>
8 :root{
9 --bg:#4a4748;
10 --line:rgba(255,255,255,.62);
11 --line-soft:rgba(255,255,255,.18);
12 --red:#a63d45;
13 --blue:rgba(92,150,170,.22);
14 --whiteGlow:rgba(255,255,255,.16);
15 --size:100px;
16 }
17
18 html,body{
19 margin:0;
20 height:100%;
21 background:var(--bg);
22 overflow:hidden;
23 font-family:system-ui,sans-serif;
24 }
25
26 .stage{
27 width:100vw;
28 height:100vh;
29 display:grid;
30 place-items:center;
31 }
32
33 .loader{
34 position:relative;
35 width:var(--size);
36 height:var(--size);
37 }
38
39 /* static radar rings */
40 .ring{
41 position:absolute;
42 inset:50% auto auto 50%;
43 border:1px solid var(--line);
44 border-radius:50%;
45 transform:translate(-50%,-50%);
46 box-sizing:border-box;
47 }
48 .r1{ width:22px; height:22px; }
49 .r2{ width:50px; height:50px; }
50 .r3{ width:98px; height:98px; opacity:.9; }
51
52 .cross{
53 position:absolute;
54 inset:0;
55 }
56 .cross::before,
57 .cross::after{
58 content:"";
59 position:absolute;
60 left:50%;
61 top:50%;
62 transform:translate(-50%,-50%);
63 border-color:var(--line);
64 opacity:.95;
65 }
66 .cross::before{
67 width:0;
68 height:96px;
69 border-left:1px dashed var(--line);
70 }
71 .cross::after{
72 width:96px;
73 height:0;
74 border-top:1px dashed var(--line);
75 }
76
77 .center{
78 position:absolute;
79 left:50%;
80 top:50%;
81 width:6px;
82 height:6px;
83 transform:translate(-50%,-50%);
84 border:1px solid var(--line);
85 border-radius:50%;
86 background:transparent;
87 }
88
89 /* rotating group */
90 .orbit{
91 position:absolute;
92 inset:0;
93 animation:spin 3.2s linear infinite;
94 }
95
96 .dot{
97 position:absolute;
98 left:50%;
99 top:50%;
100 width:16px;
101 height:16px;
102 margin:-8px;
103 border-radius:50%;
104 background:radial-gradient(circle at 35% 35%, rgba(190,70,80,.95), var(--red) 65%, rgba(120,35,42,.95));
105 filter:drop-shadow(0 0 4px rgba(166,61,69,.25));
106 }
107
108 /* three red orbiters on outer ring */
109 .d1{ transform:rotate(0deg) translateX(49px); }
110 .d2{ transform:rotate(120deg) translateX(49px); }
111 .d3{ transform:rotate(240deg) translateX(49px); }
112
113 /* transient bloom layer */
114 .burst{
115 position:absolute;
116 inset:0;
117 animation:burstSpin 3.2s linear infinite;
118 }
119
120 .ghost{
121 position:absolute;
122 left:50%;
123 top:50%;
124 border-radius:50%;
125 transform:translate(-50%,-50%);
126 opacity:0;
127 }
128
129 .g-blue{
130 width:54px;height:54px;
131 background:var(--blue);
132 filter:blur(.2px);
133 animation:bluePulse 3.2s ease-in-out infinite;
134 }
135
136 .g-white{
137 width:64px;height:64px;
138 background:var(--whiteGlow);
139 animation:whitePulse 3.2s ease-in-out infinite;
140 }
141
142 .outline{
143 width:34px;height:34px;
144 border:1px solid var(--line-soft);
145 background:transparent;
146 animation:outlinePulse 3.2s ease-in-out infinite;
147 }
148
149 .o1{ animation-delay:0s; }
150 .o2{ animation-delay:.08s; }
151 .o3{ animation-delay:.16s; }
152 .o4{ animation-delay:.24s; }
153
154 @keyframes spin{
155 0% { transform:rotate(0deg); }
156 100% { transform:rotate(360deg); }
157 }
158
159 /* slight offset so burst appears during left-side sweep like the frames */
160 @keyframes burstSpin{
161 0% { transform:rotate(0deg); }
162 100% { transform:rotate(360deg); }
163 }
164
165 @keyframes bluePulse{
166 0%,34%,100%{
167 opacity:0;
168 transform:translate(-50%,-50%) rotate(20deg) translate(0,0) scale(.6);
169 }
170 42%{
171 opacity:.55;
172 transform:translate(-50%,-50%) rotate(20deg) translate(22px,-18px) scale(1.15);
173 }
174 50%{
175 opacity:.42;
176 transform:translate(-50%,-50%) rotate(20deg) translate(18px,-10px) scale(1.45);
177 }
178 58%{
179 opacity:0;
180 transform:translate(-50%,-50%) rotate(20deg) translate(8px,-2px) scale(1.1);
181 }
182 }
183
184 @keyframes whitePulse{
185 0%,36%,100%{
186 opacity:0;
187 transform:translate(-50%,-50%) translate(0,0) scale(.5);
188 }
189 44%{
190 opacity:.45;
191 transform:translate(-50%,-50%) translate(-22px,14px) scale(1.05);
192 }
193 52%{
194 opacity:.28;
195 transform:translate(-50%,-50%) translate(-18px,10px) scale(1.35);
196 }
197 60%{
198 opacity:0;
199 transform:translate(-50%,-50%) translate(-8px,4px) scale(1.1);
200 }
201 }
202
203 @keyframes outlinePulse{
204 0%,34%,100%{
205 opacity:0;
206 transform:translate(-50%,-50%) scale(.6);
207 }
208 43%{
209 opacity:.9;
210 transform:translate(-50%,-50%) scale(1) translate(-36px,-36px);
211 }
212 50%{
213 opacity:.55;
214 transform:translate(-50%,-50%) scale(1.05) translate(34px,30px);
215 }
216 57%{
217 opacity:.35;
218 transform:translate(-50%,-50%) scale(1.1) translate(-22px,28px);
219 }
220 64%{
221 opacity:0;
222 transform:translate(-50%,-50%) scale(1.15) translate(18px,-26px);
223 }
224 }
225</style>
226</head>
227<body>
228 <div class="stage">
229 <div class="loader">
230 <div class="ring r3"></div>
231 <div class="ring r2"></div>
232 <div class="ring r1"></div>
233 <div class="cross"></div>
234 <div class="center"></div>
235
236 <div class="burst">
237 <div class="ghost g-blue"></div>
238 <div class="ghost g-white"></div>
239 <div class="ghost outline o1"></div>
240 <div class="ghost outline o2"></div>
241 <div class="ghost outline o3"></div>
242 <div class="ghost outline o4"></div>
243 </div>
244
245 <div class="orbit">
246 <div class="dot d1"></div>
247 <div class="dot d2"></div>
248 <div class="dot d3"></div>
249 </div>
250 </div>
251 </div>
252</body>
253</html>