model output
Gemini 3 Flash Preview

Wavy Loading Animations
A 0.66T 0.45
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>Audio Visualizer Animation</title>
7    <style>
8        /* Base page styling to match the video background */
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: #eeeeee; /* Light gray background seen in video */
17            overflow: hidden;
18        }
19
20        /* Container for the bars, positioned slightly high as in the video */
21        .visualizer {
22            display: flex;
23            align-items: flex-end; /* Bars grow upwards from the bottom */
24            gap: 3px;
25            height: 60px; /* Container height to accommodate max bar height */
26            transform: translateY(-150px); /* Positioned near the top center */
27        }
28
29        /* Styling for each individual bar */
30        .bar {
31            width: 4px;
32            height: 4px; /* Minimum height */
33            background-color: #555555; /* Dark gray color of the bars */
34            border-radius: 1px;
35            animation: wave 1.2s ease-in-out infinite;
36        }
37
38        /* Keyframe animation for the "see-saw" wave effect */
39        @keyframes wave {
40            0%, 100% {
41                height: 4px;
42            }
43            50% {
44                height: 35px; /* Maximum height reached in the middle of the cycle */
45            }
46        }
47
48        /* 
49           Apply staggered delays to create the wave effect.
50           The timing matches the transition from a downward slope (0.5s) 
51           to an upward slope (1.0s) as seen in the video.
52        */
53        .bar:nth-child(1) { animation-delay: 0.0s; }
54        .bar:nth-child(2) { animation-delay: 0.05s; }
55        .bar:nth-child(3) { animation-delay: 0.1s; }
56        .bar:nth-child(4) { animation-delay: 0.15s; }
57        .bar:nth-child(5) { animation-delay: 0.2s; }
58        .bar:nth-child(6) { animation-delay: 0.25s; }
59        .bar:nth-child(7) { animation-delay: 0.3s; }
60        .bar:nth-child(8) { animation-delay: 0.35s; }
61        .bar:nth-child(9) { animation-delay: 0.4s; }
62        .bar:nth-child(10) { animation-delay: 0.45s; }
63
64    </style>
65</head>
66<body>
67
68    <div class="visualizer">
69        <!-- 10 bars as observed in the video -->
70        <div class="bar"></div>
71        <div class="bar"></div>
72        <div class="bar"></div>
73        <div class="bar"></div>
74        <div class="bar"></div>
75        <div class="bar"></div>
76        <div class="bar"></div>
77        <div class="bar"></div>
78        <div class="bar"></div>
79        <div class="bar"></div>
80    </div>
81
82    <script>
83        /**
84         * The animation is handled entirely via CSS for performance and accuracy.
85         * The timing function 'ease-in-out' replicates the smooth oscillation of the bars.
86         * The animation-delay values create the sequential wave movement seen in the video frames.
87         */
88    </script>
89</body>
90</html>