model output
Gemini 3 Flash Preview

Animated Concepts #3
A 0.77T 0.32
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>Staggered Bar Loader</title>
7    <style>
8        /* 
9           Background matches the dark gray of the video (#1a1a1a).
10           Centering the loader in the viewport.
11        */
12        body {
13            margin: 0;
14            padding: 0;
15            background-color: #1a1a1a;
16            height: 100vh;
17            display: flex;
18            justify-content: center;
19            align-items: center;
20            overflow: hidden;
21        }
22
23        /* 
24           Container for the bars. 
25           Uses flexbox to align them horizontally with a small gap.
26        */
27        .loader {
28            display: flex;
29            align-items: center;
30            justify-content: center;
31            gap: 5px;
32            height: 40px; /* Constraints the container height */
33        }
34
35        /* 
36           Individual bar styling. 
37           Color is a specific coral/salmon pink (#e68d7d).
38           Rounded ends achieved with border-radius.
39        */
40        .bar {
41            width: 3px;
42            height: 22px;
43            background-color: #e68d7d;
44            border-radius: 4px;
45            /* 
46               Animation: 1-second duration to match the video loop.
47               Ease-in-out creates a smooth pulse transition.
48               Infinite loop.
49            */
50            animation: pulse 1s ease-in-out infinite;
51            /* Anchors the scaling to the center of each bar */
52            transform-origin: center;
53        }
54
55        /* 
56           Staggering the animation timing to create the 'wave' effect 
57           seen in the video. Using negative delays so the animation 
58           starts mid-cycle immediately upon load.
59        */
60        .bar:nth-child(1) {
61            animation-delay: -0.2s;
62        }
63        .bar:nth-child(2) {
64            animation-delay: -0.1s;
65        }
66        .bar:nth-child(3) {
67            animation-delay: 0s;
68        }
69
70        /* 
71           Keyframes for the vertical scaling.
72           Matches the height oscillation (roughly 0.6x to 1.6x original size).
73        */
74        @keyframes pulse {
75            0%, 100% {
76                transform: scaleY(0.6);
77            }
78            50% {
79                transform: scaleY(1.6);
80            }
81        }
82    </style>
83</head>
84<body>
85
86    <div class="loader">
87        <div class="bar"></div>
88        <div class="bar"></div>
89        <div class="bar"></div>
90    </div>
91
92</body>
93</html>