← back to Camera following: Step8compare with ground truth →
model output
Gemini 3 Flash Preview
Camera following: Step8
A 0.78T 0.36
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>3D Orbiting Spheres Animation</title>
7 <style>
8 :root {
9 --sphere-size: 80px;
10 --orbit-radius: 120px;
11 --anim-speed: 4s;
12 --bg-color-top: #e2e2ed;
13 --bg-color-bottom: #ffffff;
14 --sphere-gradient: radial-gradient(circle at 35% 35%, #a5b4fc 0%, #4f46e5 40%, #1e1b4b 100%);
15 }
16
17 * {
18 margin: 0;
19 padding: 0;
20 box-sizing: border-box;
21 }
22
23 body {
24 height: 100vh;
25 width: 100vw;
26 display: flex;
27 justify-content: center;
28 align-items: center;
29 background: radial-gradient(circle at center, var(--bg-color-bottom) 0%, var(--bg-color-top) 100%);
30 overflow: hidden;
31 }
32
33 /* Perspective wrapper */
34 .scene {
35 perspective: 1200px;
36 width: 100%;
37 height: 100%;
38 display: flex;
39 justify-content: center;
40 align-items: center;
41 }
42
43 /* The horizontal plane that rotates */
44 .orbit-system {
45 position: relative;
46 width: 1px;
47 height: 1px;
48 transform-style: preserve-3d;
49 transform: rotateX(-15deg); /* Slight tilt for depth */
50 }
51
52 .pivot {
53 position: absolute;
54 width: 100%;
55 height: 100%;
56 transform-style: preserve-3d;
57 animation: rotateMain var(--anim-speed) linear infinite;
58 }
59
60 .sphere-container {
61 position: absolute;
62 left: 50%;
63 top: 50%;
64 transform-style: preserve-3d;
65 /* Anchors spheres around the circle */
66 }
67
68 .sphere-container:nth-child(1) { transform: translate(-50%, -50%) rotateY(0deg) translateZ(var(--orbit-radius)); }
69 .sphere-container:nth-child(2) { transform: translate(-50%, -50%) rotateY(120deg) translateZ(var(--orbit-radius)); }
70 .sphere-container:nth-child(3) { transform: translate(-50%, -50%) rotateY(240deg) translateZ(var(--orbit-radius)); }
71
72 /* Counter-rotation to keep sphere face and reflection facing the camera */
73 .visual-group {
74 transform-style: preserve-3d;
75 animation: counterRotate var(--anim-speed) linear infinite;
76 }
77
78 .sphere {
79 width: var(--sphere-size);
80 height: var(--sphere-size);
81 border-radius: 50%;
82 background: var(--sphere-gradient);
83 box-shadow: inset -5px -5px 15px rgba(0,0,0,0.3);
84 position: relative;
85 z-index: 2;
86 }
87
88 /* Reflection Effect */
89 .reflection {
90 width: var(--sphere-size);
91 height: var(--sphere-size);
92 border-radius: 50%;
93 background: var(--sphere-gradient);
94 position: absolute;
95 top: 100%; /* Position directly below */
96 left: 0;
97 transform: scaleY(-0.6) translateY(10px) skewX(2deg);
98 opacity: 0.15;
99 filter: blur(1px);
100 mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);
101 -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);
102 z-index: 1;
103 }
104
105 /* Shadow on the "floor" */
106 .shadow {
107 position: absolute;
108 width: var(--sphere-size);
109 height: 20px;
110 background: rgba(0, 0, 0, 0.1);
111 border-radius: 50%;
112 bottom: -10px;
113 left: 0;
114 filter: blur(8px);
115 z-index: 0;
116 }
117
118 @keyframes rotateMain {
119 from { transform: rotateY(0deg); }
120 to { transform: rotateY(360deg); }
121 }
122
123 @keyframes counterRotate {
124 from { transform: rotateY(0deg) rotateX(15deg); }
125 to { transform: rotateY(-360deg) rotateX(15deg); }
126 }
127
128 /* Soft light glow at the bottom center to match video */
129 .floor-glow {
130 position: absolute;
131 bottom: 0;
132 width: 100%;
133 height: 40vh;
134 background: radial-gradient(ellipse at center bottom, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
135 pointer-events: none;
136 }
137 </style>
138</head>
139<body>
140
141 <div class="scene">
142 <div class="orbit-system">
143 <div class="pivot">
144 <!-- Sphere 1 -->
145 <div class="sphere-container">
146 <div class="visual-group">
147 <div class="sphere"></div>
148 <div class="reflection"></div>
149 <div class="shadow"></div>
150 </div>
151 </div>
152 <!-- Sphere 2 -->
153 <div class="sphere-container">
154 <div class="visual-group">
155 <div class="sphere"></div>
156 <div class="reflection"></div>
157 <div class="shadow"></div>
158 </div>
159 </div>
160 <!-- Sphere 3 -->
161 <div class="sphere-container">
162 <div class="visual-group">
163 <div class="sphere"></div>
164 <div class="reflection"></div>
165 <div class="shadow"></div>
166 </div>
167 </div>
168 </div>
169 </div>
170 </div>
171
172 <div class="floor-glow"></div>
173
174 <script>
175 /**
176 * The animation is purely CSS-driven for performance.
177 * The 'preserve-3d' property ensures that spheres correctly
178 * overlap each other as they rotate in 3D space.
179 *
180 * Pivot rotates the whole coordinate system.
181 * visual-group counter-rotates to keep the gradient highlight
182 * and the reflection vertical relative to the screen.
183 */
184 </script>
185</body>
186</html>