← back to Motion Table - Orbitcompare with ground truth →
model output
Gemini 3 Flash Preview
Motion Table - Orbit
A 0.78T 0.34
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 Animation</title>
7 <style>
8 :root {
9 --bg-color: #444141;
10 --dot-color: #a2a85f;
11 --line-color: rgba(255, 255, 255, 0.25);
12 --line-color-dashed: rgba(255, 255, 255, 0.2);
13 }
14
15 body, html {
16 margin: 0;
17 padding: 0;
18 width: 100%;
19 height: 100%;
20 display: flex;
21 justify-content: center;
22 align-items: center;
23 background-color: var(--bg-color);
24 overflow: hidden;
25 }
26
27 .radar {
28 position: relative;
29 width: 200px;
30 height: 200px;
31 display: flex;
32 justify-content: center;
33 align-items: center;
34 }
35
36 /* Concentric Rings */
37 .ring {
38 position: absolute;
39 border-radius: 50%;
40 border: 1px solid var(--line-color);
41 box-sizing: border-box;
42 }
43
44 .ring-inner {
45 width: 40px;
46 height: 40px;
47 }
48
49 .ring-middle {
50 width: 80px;
51 height: 80px;
52 }
53
54 .ring-outer {
55 width: 120px;
56 height: 120px;
57 border-style: dashed;
58 border-color: var(--line-color-dashed);
59 }
60
61 /* Center Point */
62 .center-point {
63 position: absolute;
64 width: 4px;
65 height: 4px;
66 background-color: var(--line-color);
67 border-radius: 50%;
68 }
69
70 /* Crosshairs */
71 .crosshair {
72 position: absolute;
73 background-color: transparent;
74 }
75
76 .crosshair-h {
77 width: 150px;
78 height: 1px;
79 border-top: 1px dashed var(--line-color-dashed);
80 }
81
82 .crosshair-v {
83 width: 1px;
84 height: 150px;
85 border-left: 1px dashed var(--line-color-dashed);
86 }
87
88 /* Rotating Dots */
89 .orbit {
90 position: absolute;
91 width: 100%;
92 height: 100%;
93 display: flex;
94 justify-content: center;
95 align-items: center;
96 animation: rotate linear infinite;
97 }
98
99 .dot {
100 position: absolute;
101 width: 8px;
102 height: 8px;
103 background-color: var(--dot-color);
104 border-radius: 50%;
105 box-shadow: 0 0 6px var(--dot-color);
106 }
107
108 /* Specific Dot Positions and Speeds */
109 /* Orbit 1: Inner (radius 20px) */
110 .orbit-1 {
111 animation-duration: 3.5s;
112 }
113 .dot-1 {
114 transform: translateY(-20px);
115 }
116
117 /* Orbit 2: Middle (radius 40px) */
118 .orbit-2a {
119 animation-duration: 6s;
120 animation-delay: -1s;
121 }
122 .dot-2a {
123 transform: translateY(-40px);
124 }
125
126 .orbit-2b {
127 animation-duration: 4.5s;
128 animation-delay: -2.5s;
129 }
130 .dot-2b {
131 transform: translateY(-40px);
132 }
133
134 /* Orbit 3: Outer (radius 60px) */
135 .orbit-3 {
136 animation-duration: 10s;
137 animation-delay: -3s;
138 }
139 .dot-3 {
140 transform: translateY(-60px);
141 }
142
143 @keyframes rotate {
144 from {
145 transform: rotate(0deg);
146 }
147 to {
148 transform: rotate(360deg);
149 }
150 }
151 </style>
152</head>
153<body>
154
155 <div class="radar">
156 <!-- Static Radar Elements -->
157 <div class="center-point"></div>
158 <div class="ring ring-inner"></div>
159 <div class="ring ring-middle"></div>
160 <div class="ring ring-outer"></div>
161
162 <div class="crosshair crosshair-h"></div>
163 <div class="crosshair crosshair-v"></div>
164
165 <!-- Animated Blips -->
166 <div class="orbit orbit-1">
167 <div class="dot dot-1"></div>
168 </div>
169
170 <div class="orbit orbit-2a">
171 <div class="dot dot-2a"></div>
172 </div>
173
174 <div class="orbit orbit-2b">
175 <div class="dot dot-2b"></div>
176 </div>
177
178 <div class="orbit orbit-3">
179 <div class="dot dot-3"></div>
180 </div>
181 </div>
182
183</body>
184</html>