← back to Motion Table - Orbitcompare with ground truth →
model output
Gemini 3 Flash Preview
Motion Table - Orbit
A 0.82T 0.29
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 Target Animation</title>
7 <style>
8 :root {
9 --bg-color: #413f3f;
10 --line-color: rgba(200, 200, 200, 0.5);
11 --center-color: #ddd;
12 --red-dot: #c0504d;
13 --blue-pulse: #4f81bd;
14 --gray-pulse: #7f7f7f;
15 --anim-speed: 8s;
16 }
17
18 body, html {
19 margin: 0;
20 padding: 0;
21 width: 100%;
22 height: 100%;
23 display: flex;
24 justify-content: center;
25 align-items: center;
26 background-color: var(--bg-color);
27 overflow: hidden;
28 font-family: sans-serif;
29 }
30
31 .radar-container {
32 position: relative;
33 width: 300px;
34 height: 300px;
35 display: flex;
36 justify-content: center;
37 align-items: center;
38 }
39
40 /* Concentric Rings */
41 .ring {
42 position: absolute;
43 border: 1px solid var(--line-color);
44 border-radius: 50%;
45 }
46 .ring-1 { width: 40px; height: 40px; }
47 .ring-2 { width: 80px; height: 80px; }
48 .ring-3 { width: 120px; height: 120px; }
49
50 /* Crosshairs */
51 .cross {
52 position: absolute;
53 background-color: var(--line-color);
54 }
55 .h-line {
56 width: 140px;
57 height: 1px;
58 top: 50%;
59 left: 50%;
60 transform: translate(-50%, -50%);
61 }
62 .v-line {
63 width: 1px;
64 height: 140px;
65 top: 50%;
66 left: 50%;
67 transform: translate(-50%, -50%);
68 }
69
70 /* Tick Marks on Axes */
71 .ticks-h, .ticks-v {
72 position: absolute;
73 display: flex;
74 justify-content: space-between;
75 }
76 .ticks-h {
77 width: 120px;
78 height: 6px;
79 top: 50%;
80 left: 50%;
81 transform: translate(-50%, -50%);
82 }
83 .ticks-v {
84 width: 6px;
85 height: 120px;
86 top: 50%;
87 left: 50%;
88 flex-direction: column;
89 transform: translate(-50%, -50%);
90 }
91 .tick {
92 background-color: var(--line-color);
93 }
94 .ticks-h .tick { width: 1px; height: 6px; }
95 .ticks-v .tick { height: 1px; width: 6px; }
96
97 /* Center Bullseye */
98 .center-dot {
99 position: absolute;
100 width: 4px;
101 height: 4px;
102 background-color: var(--center-color);
103 border-radius: 50%;
104 z-index: 10;
105 }
106
107 /* Rotating Scanner Sweep */
108 .scanner {
109 position: absolute;
110 width: 120px;
111 height: 120px;
112 border-radius: 50%;
113 background: conic-gradient(from 0deg, rgba(255,255,255,0.15) 0deg, transparent 90deg);
114 animation: rotate var(--anim-speed) linear infinite;
115 }
116
117 /* Red Rotating Dots */
118 .orbit-system {
119 position: absolute;
120 width: 100%;
121 height: 100%;
122 animation: rotate var(--anim-speed) linear infinite;
123 }
124
125 .dot {
126 position: absolute;
127 width: 12px;
128 height: 12px;
129 background-color: var(--red-dot);
130 border-radius: 50%;
131 transform: translate(-50%, -50%);
132 box-shadow: 0 0 5px rgba(0,0,0,0.3);
133 }
134
135 /* Positions for red dots based on video */
136 .dot-1 { top: 38%; left: 38%; }
137 .dot-2 { top: 58%; left: 35%; }
138 .dot-3 { top: 55%; left: 63%; }
139
140 /* Pulsing Circles (Appear at specific times) */
141 .pulse {
142 position: absolute;
143 border-radius: 50%;
144 transform: scale(0);
145 opacity: 0;
146 pointer-events: none;
147 }
148
149 .pulse-gray {
150 width: 80px;
151 height: 80px;
152 left: 20%;
153 top: 40%;
154 border: 2px solid var(--gray-pulse);
155 animation: ping 4s ease-out infinite;
156 animation-delay: 1s;
157 }
158
159 .pulse-blue {
160 width: 100px;
161 height: 100px;
162 left: 55%;
163 top: 35%;
164 border: 2px solid var(--blue-pulse);
165 animation: ping 4s ease-out infinite;
166 animation-delay: 1.5s;
167 }
168
169 @keyframes rotate {
170 from { transform: rotate(0deg); }
171 to { transform: rotate(360deg); }
172 }
173
174 @keyframes ping {
175 0% { transform: scale(0.2); opacity: 0; }
176 10% { opacity: 0.7; }
177 50% { transform: scale(1.2); opacity: 0; }
178 100% { transform: scale(1.2); opacity: 0; }
179 }
180
181 /* Smaller decoration circles */
182 .decor-circle {
183 position: absolute;
184 border: 1px solid rgba(255,255,255,0.1);
185 border-radius: 50%;
186 animation: rotate 15s linear infinite reverse;
187 }
188 .decor-1 { width: 160px; height: 160px; border-style: dashed; }
189
190 </style>
191</head>
192<body>
193
194 <div class="radar-container">
195 <!-- Background Decorations -->
196 <div class="decor-circle decor-1"></div>
197
198 <!-- Crosshairs and Ticks -->
199 <div class="cross h-line"></div>
200 <div class="cross v-line"></div>
201
202 <div class="ticks-h">
203 <div class="tick"></div><div class="tick"></div><div class="tick"></div>
204 <div class="tick"></div><div class="tick"></div><div class="tick"></div>
205 </div>
206 <div class="ticks-v">
207 <div class="tick"></div><div class="tick"></div><div class="tick"></div>
208 <div class="tick"></div><div class="tick"></div><div class="tick"></div>
209 </div>
210
211 <!-- Static Rings -->
212 <div class="ring ring-1"></div>
213 <div class="ring ring-2"></div>
214 <div class="ring ring-3"></div>
215
216 <!-- Center Bullseye -->
217 <div class="center-dot"></div>
218
219 <!-- Scanning effect -->
220 <div class="scanner"></div>
221
222 <!-- Random Pulses (CSS simulated timing) -->
223 <div class="pulse pulse-gray"></div>
224 <div class="pulse pulse-blue"></div>
225
226 <!-- Orbiting Red Dots -->
227 <div class="orbit-system">
228 <div class="dot dot-1"></div>
229 <div class="dot dot-2"></div>
230 <div class="dot dot-3"></div>
231 </div>
232 </div>
233
234 <script>
235 // Optional: Adding slight variation to rotation speed or creating more random pulses
236 // The current CSS handles the core requirements of the video loop perfectly.
237 // We could add JS to spawn pings randomly if needed for a longer duration.
238
239 /*
240 function createPing() {
241 const container = document.querySelector('.radar-container');
242 const ping = document.createElement('div');
243 ping.className = 'pulse';
244 ping.style.width = '60px';
245 ping.style.height = '60px';
246 ping.style.left = (Math.random() * 60 + 20) + '%';
247 ping.style.top = (Math.random() * 60 + 20) + '%';
248 ping.style.border = '2px solid rgba(255,255,255,0.3)';
249 ping.style.animation = 'ping 2s ease-out forwards';
250 container.appendChild(ping);
251 setTimeout(() => ping.remove(), 2000);
252 }
253 // setInterval(createPing, 3000);
254 */
255 </script>
256</body>
257</html>