← back to Motion Table - Orbitcompare with ground truth →
model output
GPT-5.4
Motion Table - Orbit
A 0.87T 0.31
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" />
6<title>Orbital HUD Animation</title>
7<style>
8 :root{
9 --bg:#4a474b;
10 --line:rgba(255,255,255,.72);
11 --line-soft:rgba(255,255,255,.22);
12 --gold:rgba(201,145,73,.72);
13 --gold-core:rgba(232,176,92,.95);
14 --blue:rgba(74,132,170,.22);
15 --white-fill:rgba(255,255,255,.18);
16 --size:100px;
17 }
18
19 html,body{
20 margin:0;
21 width:100%;
22 height:100%;
23 overflow:hidden;
24 background:var(--bg);
25 }
26
27 body{
28 display:grid;
29 place-items:center;
30 font-family:system-ui,sans-serif;
31 }
32
33 .scene{
34 position:relative;
35 width:var(--size);
36 height:var(--size);
37 }
38
39 .hud{
40 position:absolute;
41 inset:0;
42 border-radius:50%;
43 box-sizing:border-box;
44 }
45
46 .ring.outer{
47 inset:0;
48 border:1px solid rgba(255,255,255,.48);
49 }
50
51 .ring.mid{
52 inset:24px;
53 border:1px solid rgba(255,255,255,.72);
54 }
55
56 .ring.inner{
57 inset:36px;
58 border:1px solid rgba(255,255,255,.72);
59 }
60
61 .cross::before,
62 .cross::after{
63 content:"";
64 position:absolute;
65 left:50%;
66 top:50%;
67 transform:translate(-50%,-50%);
68 background:transparent;
69 }
70
71 .cross::before{
72 width:1px;
73 height:100%;
74 background:
75 repeating-linear-gradient(
76 to bottom,
77 rgba(255,255,255,.85) 0 3px,
78 transparent 3px 5px
79 );
80 opacity:.9;
81 }
82
83 .cross::after{
84 width:100%;
85 height:1px;
86 background:
87 repeating-linear-gradient(
88 to right,
89 rgba(255,255,255,.85) 0 3px,
90 transparent 3px 5px
91 );
92 opacity:.9;
93 }
94
95 .center-dot{
96 position:absolute;
97 left:50%;
98 top:50%;
99 width:4px;
100 height:4px;
101 margin:-2px 0 0 -2px;
102 border-radius:50%;
103 background:rgba(255,255,255,.9);
104 box-shadow:0 0 0 2px rgba(255,255,255,.08);
105 }
106
107 .orbit{
108 position:absolute;
109 inset:0;
110 animation:spin 3.2s linear infinite;
111 }
112
113 .orbit.diag{ animation-delay:-.8s; }
114 .orbit.vert{ animation-delay:-1.6s; }
115
116 .sat{
117 position:absolute;
118 left:50%;
119 top:50%;
120 width:14px;
121 height:14px;
122 margin:-7px;
123 border-radius:50%;
124 background:
125 radial-gradient(circle at 45% 45%,
126 var(--gold-core) 0 18%,
127 rgba(214,157,82,.55) 19% 38%,
128 rgba(201,145,73,.18) 39% 100%);
129 filter:blur(.15px);
130 box-shadow:0 0 8px rgba(201,145,73,.18);
131 }
132
133 .orbit.horiz .sat.a{ transform:translateX(48px); }
134 .orbit.horiz .sat.b{ transform:translateX(-48px); }
135
136 .orbit.diag .sat.a{ transform:rotate(45deg) translateX(48px); }
137 .orbit.diag .sat.b{ transform:rotate(45deg) translateX(-48px); }
138
139 .orbit.vert .sat.a{ transform:rotate(90deg) translateX(48px); }
140 .orbit.vert .sat.b{ transform:rotate(90deg) translateX(-48px); }
141
142 .ghost{
143 position:absolute;
144 width:36px;
145 height:36px;
146 border-radius:50%;
147 border:2px solid rgba(255,255,255,.12);
148 opacity:0;
149 animation:ghosts 3.2s ease-in-out infinite;
150 }
151
152 .g1{ left:4px; top:8px; animation-delay:-2.4s; }
153 .g2{ right:2px; bottom:6px; animation-delay:-1.6s; }
154 .g3{ left:0px; bottom:-2px; width:46px; height:46px; animation-delay:-.8s; }
155
156 .blob{
157 position:absolute;
158 left:50%;
159 top:50%;
160 width:58px;
161 height:58px;
162 margin:-29px;
163 border-radius:50%;
164 opacity:0;
165 filter:blur(.2px);
166 transform-origin:50% 50%;
167 animation:blobCycle 3.2s ease-in-out infinite;
168 }
169
170 .blob.blue{
171 background:radial-gradient(circle at 35% 40%, rgba(120,180,210,.18), rgba(74,132,170,.22) 55%, rgba(74,132,170,0) 72%);
172 animation-delay:0s;
173 }
174
175 .blob.white{
176 background:radial-gradient(circle at 40% 45%, rgba(255,255,255,.28), rgba(255,255,255,.18) 58%, rgba(255,255,255,0) 74%);
177 animation-delay:-1.6s;
178 }
179
180 @keyframes spin{
181 from{ transform:rotate(0deg); }
182 to{ transform:rotate(360deg); }
183 }
184
185 @keyframes ghosts{
186 0%,100%{ opacity:0; transform:scale(.85); }
187 18%,82%{ opacity:.55; transform:scale(1); }
188 }
189
190 /* Two soft lobes appear during diagonal/vertical phases, then fade back to plain horizontal */
191 @keyframes blobCycle{
192 0%,8%,92%,100%{
193 opacity:0;
194 transform:translate(-50%,-50%) rotate(0deg) translateX(0) scale(.8);
195 }
196 18%,30%{
197 opacity:1;
198 transform:translate(-50%,-50%) rotate(45deg) translateX(18px) scale(1);
199 }
200 42%,58%{
201 opacity:1;
202 transform:translate(-50%,-50%) rotate(90deg) translateX(18px) scale(1);
203 }
204 70%,82%{
205 opacity:.55;
206 transform:translate(-50%,-50%) rotate(135deg) translateX(10px) scale(.92);
207 }
208 }
209</style>
210</head>
211<body>
212 <div class="scene">
213 <div class="blob blue"></div>
214 <div class="blob white"></div>
215
216 <div class="ghost g1"></div>
217 <div class="ghost g2"></div>
218 <div class="ghost g3"></div>
219
220 <div class="orbit horiz">
221 <div class="sat a"></div>
222 <div class="sat b"></div>
223 </div>
224 <div class="orbit diag">
225 <div class="sat a"></div>
226 <div class="sat b"></div>
227 </div>
228 <div class="orbit vert">
229 <div class="sat a"></div>
230 <div class="sat b"></div>
231 </div>
232
233 <div class="hud ring outer"></div>
234 <div class="hud ring mid"></div>
235 <div class="hud ring inner"></div>
236 <div class="hud cross"></div>
237 <div class="center-dot"></div>
238 </div>
239</body>
240</html>