model output
Gemini 3 Flash Preview

Nice spinny stuff
A 0.92T 0.30
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>Wave Loading Animation</title>
7    <style>
8        /* Reset and centering */
9        body {
10            margin: 0;
11            padding: 0;
12            display: flex;
13            justify-content: center;
14            align-items: center;
15            height: 100vh;
16            background-color: #ffffff;
17            overflow: hidden;
18        }
19
20        /* Container for the dots */
21        .wave-container {
22            display: flex;
23            gap: 8px; /* Spacing between dots */
24        }
25
26        /* Individual dot styling */
27        .dot {
28            width: 10px;
29            height: 10px;
30            background-color: #f8bbd0; /* Soft pink color matching the video */
31            border-radius: 50%;
32            /* 
33               Animation: 
34               - 2s duration matches the video cycle (0.5s peak, 1.5s trough)
35               - ease-in-out for smooth harmonic motion
36            */
37            animation: wave-motion 2s ease-in-out infinite;
38        }
39
40        /* 
41           Keyframes for the vertical movement. 
42           The wave reaches its highest point at 25% and lowest at 75%.
43        */
44        @keyframes wave-motion {
45            0%, 100% {
46                transform: translateY(0);
47            }
48            25% {
49                transform: translateY(-18px);
50            }
51            75% {
52                transform: translateY(18px);
53            }
54        }
55
56        /* 
57           Staggered delays to create the wave effect.
58           Delaying each dot by 0.1s relative to its predecessor.
59        */
60        .dot:nth-child(1) { animation-delay: 0.0s; }
61        .dot:nth-child(2) { animation-delay: 0.1s; }
62        .dot:nth-child(3) { animation-delay: 0.2s; }
63        .dot:nth-child(4) { animation-delay: 0.3s; }
64        .dot:nth-child(5) { animation-delay: 0.4s; }
65        .dot:nth-child(6) { animation-delay: 0.5s; }
66        .dot:nth-child(7) { animation-delay: 0.6s; }
67
68    </style>
69</head>
70<body>
71
72    <div class="wave-container">
73        <!-- 7 dots as observed in the video -->
74        <div class="dot"></div>
75        <div class="dot"></div>
76        <div class="dot"></div>
77        <div class="dot"></div>
78        <div class="dot"></div>
79        <div class="dot"></div>
80        <div class="dot"></div>
81    </div>
82
83</body>
84</html>