← back to Only CSS: Flex Breezecompare with ground truth →
model output
Gemini 3 Flash Preview
Only CSS: Flex Breeze
A 0.88T 0.50
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>Breeze Animation</title>
7 <style>
8 :root {
9 --color-blue: #34d3f9;
10 --color-pink: #ffd1e8;
11 --color-green: #49e335;
12 --bg-color: #ffffff;
13 --bar-width: 8px;
14 --bar-gap: 4px;
15 --seg-gap: 5px;
16 --total-height: 180px;
17 --mid-height: 50px;
18 --skew-angle: -12deg;
19 }
20
21 body {
22 margin: 0;
23 padding: 0;
24 display: flex;
25 flex-direction: column;
26 align-items: center;
27 justify-content: center;
28 height: 100vh;
29 background-color: var(--bg-color);
30 font-family: 'Arial Black', 'Arial', sans-serif;
31 overflow: hidden;
32 }
33
34 .header {
35 color: var(--color-blue);
36 font-size: 2.2rem;
37 letter-spacing: 2px;
38 margin-bottom: 30px;
39 font-style: italic;
40 text-transform: uppercase;
41 }
42
43 .container {
44 display: flex;
45 gap: var(--bar-gap);
46 transform: skewX(var(--skew-angle));
47 }
48
49 .column {
50 display: flex;
51 flex-direction: column;
52 gap: var(--seg-gap);
53 width: var(--bar-width);
54 height: var(--total-height);
55 }
56
57 .segment {
58 border-radius: 100px;
59 width: 100%;
60 }
61
62 .top {
63 background-color: var(--color-blue);
64 animation: wave-top 3s ease-in-out infinite;
65 }
66
67 .mid {
68 background-color: var(--color-pink);
69 height: var(--mid-height);
70 flex-shrink: 0;
71 }
72
73 .bot {
74 background-color: var(--color-green);
75 flex-grow: 1; /* Automatically fills the remaining space */
76 }
77
78 /*
79 The wave effect:
80 As the top segment height changes, the middle segment moves
81 downward because it follows the top segment.
82 The bottom segment fills the remaining fixed total height.
83 */
84 @keyframes wave-top {
85 0%, 100% {
86 height: 15%;
87 }
88 50% {
89 height: 55%;
90 }
91 }
92
93 /* Responsive adjustments */
94 @media (max-width: 600px) {
95 .container {
96 gap: 3px;
97 }
98 :root {
99 --bar-width: 6px;
100 }
101 }
102 </style>
103</head>
104<body>
105
106 <div class="header">Breeze</div>
107
108 <div class="container" id="bar-container">
109 <!-- Bars will be generated by JS -->
110 </div>
111
112 <script>
113 const container = document.getElementById('bar-container');
114 const totalBars = 45; // Number of vertical columns
115 const waveFrequency = 0.08; // How tight the wave is
116 const waveSpeed = 0.06; // Timing offset per bar
117
118 for (let i = 0; i < totalBars; i++) {
119 const column = document.createElement('div');
120 column.className = 'column';
121
122 const topSeg = document.createElement('div');
123 topSeg.className = 'segment top';
124
125 // Stagger the animation delay to create the traveling wave effect
126 // Multiplying by -1 makes the wave move from left to right
127 topSeg.style.animationDelay = `${i * -waveSpeed}s`;
128
129 const midSeg = document.createElement('div');
130 midSeg.className = 'segment mid';
131
132 const botSeg = document.createElement('div');
133 botSeg.className = 'segment bot';
134
135 column.appendChild(topSeg);
136 column.appendChild(midSeg);
137 column.appendChild(botSeg);
138 container.appendChild(column);
139 }
140 </script>
141</body>
142</html>