model output
Gemini 3 Flash Preview

Motion Table - Solid Rotation
A 0.75T 0.24
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>Rotating Orbital Sphere</title>
7  <style>
8    /* Match background color from video */
9    body {
10      margin: 0;
11      padding: 0;
12      background-color: #3c3a3b;
13      height: 100vh;
14      display: flex;
15      justify-content: center;
16      align-items: center;
17      overflow: hidden;
18    }
19
20    /* 3D Scene setup */
21    .scene {
22      perspective: 1200px;
23      width: 400px;
24      height: 400px;
25      display: flex;
26      justify-content: center;
27      align-items: center;
28    }
29
30    /* Container for all rings, provides the overall rotation */
31    .assembly {
32      position: relative;
33      width: 100%;
34      height: 100%;
35      transform-style: preserve-3d;
36      display: flex;
37      justify-content: center;
38      align-items: center;
39      animation: globalRotation 20s infinite linear;
40    }
41
42    /* Individual orbital ring */
43    .ring {
44      position: absolute;
45      width: 280px;
46      height: 280px;
47      /* Dashed border matches the textured look in the video */
48      border: 1px dashed rgba(255, 255, 255, 0.5);
49      border-radius: 50%;
50      box-sizing: border-box;
51      transform-style: preserve-3d;
52      /* Animation: fans out, then spins continuously */
53      animation: orbit 7.5s infinite ease-in-out;
54    }
55
56    /* Set rotation offsets for each ring to create the sphere structure */
57    .ring:nth-child(1) { --rz: 0deg; }
58    .ring:nth-child(2) { --rz: 30deg; }
59    .ring:nth-child(3) { --rz: 60deg; }
60    .ring:nth-child(4) { --rz: 90deg; }
61    .ring:nth-child(5) { --rz: 120deg; }
62    .ring:nth-child(6) { --rz: 150deg; }
63
64    /* The core movement: Fan out from center then rotate around Y-axis */
65    @keyframes orbit {
66      0% {
67        transform: rotateZ(0deg) rotateY(0deg);
68        opacity: 0;
69      }
70      5% {
71        opacity: 1;
72      }
73      /* Fanning out phase (matching 0:00 - 0:02 of video) */
74      20%, 35% {
75        transform: rotateZ(var(--rz)) rotateY(0deg);
76      }
77      /* Main spinning phase (matching 0:02 - end of video) */
78      100% {
79        transform: rotateZ(var(--rz)) rotateY(360deg);
80      }
81    }
82
83    /* Slight continuous rotation for the entire assembly */
84    @keyframes globalRotation {
85      from { transform: rotateZ(0deg); }
86      to { transform: rotateZ(360deg); }
87    }
88
89    /* Add a subtle glow to match the visual artifacts in the video */
90    .ring::after {
91      content: '';
92      position: absolute;
93      top: -1px; left: -1px; right: -1px; bottom: -1px;
94      border-radius: 50%;
95      box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.1);
96      pointer-events: none;
97    }
98  </style>
99</head>
100<body>
101
102  <div class="scene">
103    <div class="assembly">
104      <!-- 6 rings spaced 30 degrees apart around the Z-axis -->
105      <div class="ring"></div>
106      <div class="ring"></div>
107      <div class="ring"></div>
108      <div class="ring"></div>
109      <div class="ring"></div>
110      <div class="ring"></div>
111    </div>
112  </div>
113
114  <script>
115    /**
116     * The animation is handled purely by CSS for performance and smoothness.
117     * The timing functions (ease-in-out for the fanning) and durations
118     * are synchronized to match the provided source video frames.
119     */
120  </script>
121</body>
122</html>