← back to Only CSS: Milkcompare with ground truth →
model output
Gemini 3 Flash Preview
Only CSS: Milk
A 0.61T 0.14
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>Fluid Wavy Animation</title>
7 <style>
8 /*
9 Analysis:
10 - Background: Pure black (#000).
11 - Foreground: Solid white (#fff) with an undulating wavy top edge.
12 - Movement: Slow, organic, liquid-like horizontal and vertical shifting.
13 - Timing: The cycle is approximately 6-10 seconds, very smooth easing.
14 */
15
16 body, html {
17 margin: 0;
18 padding: 0;
19 width: 100%;
20 height: 100%;
21 background-color: #000;
22 overflow: hidden;
23 display: flex;
24 align-items: flex-end;
25 }
26
27 .container {
28 position: relative;
29 width: 100%;
30 height: 100%;
31 display: flex;
32 flex-direction: column;
33 justify-content: flex-end;
34 }
35
36 /* The wave section height matches the video's white area (~65% of screen) */
37 .wave-wrapper {
38 position: relative;
39 width: 100%;
40 height: 70vh;
41 overflow: hidden;
42 background-color: #fff;
43 }
44
45 .waves-svg {
46 position: absolute;
47 top: -150px; /* Offset the SVG to sit on top of the solid white section */
48 left: 0;
49 width: 100%;
50 height: 200px;
51 /* Filter to soften the edge slightly, mimicking the video's smooth texture */
52 filter: blur(1px);
53 }
54
55 /* SVG Animation */
56 .parallax > use {
57 /* Using a smooth cubic-bezier to create the slow, liquid momentum */
58 animation: move-forever 12s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
59 }
60
61 /* Layering multiple identical white paths with different speeds and offsets
62 creates the complex, evolving shape seen in the video without transparency. */
63 .parallax > use:nth-child(1) {
64 animation-delay: -2s;
65 animation-duration: 9s;
66 transform: translate3d(-90px, 0, 0);
67 }
68
69 .parallax > use:nth-child(2) {
70 animation-delay: -4s;
71 animation-duration: 14s;
72 transform: translate3d(-90px, 0, 0);
73 }
74
75 .parallax > use:nth-child(3) {
76 animation-delay: -5s;
77 animation-duration: 20s;
78 transform: translate3d(-90px, 0, 0);
79 }
80
81 /* Keyframes for horizontal undulation */
82 @keyframes move-forever {
83 0% {
84 transform: translate3d(-90px, 0, 0);
85 }
86 100% {
87 transform: translate3d(85px, 0, 0);
88 }
89 }
90
91 /* Mobile specific scaling to preserve the aspect ratio of the waves */
92 @media (max-width: 768px) {
93 .waves-svg {
94 height: 100px;
95 top: -80px;
96 }
97 .wave-wrapper {
98 height: 60vh;
99 }
100 }
101 </style>
102</head>
103<body>
104
105 <div class="container">
106 <div class="wave-wrapper">
107 <svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
108 viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
109 <defs>
110 <!-- Defined path for a smooth, wide wave loop -->
111 <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
112 </defs>
113 <g class="parallax">
114 <!-- Multiple instances of the same white path overlapping -->
115 <use xlink:href="#gentle-wave" x="48" y="0" fill="#fff" />
116 <use xlink:href="#gentle-wave" x="48" y="3" fill="#fff" />
117 <use xlink:href="#gentle-wave" x="48" y="6" fill="#fff" />
118 </g>
119 </svg>
120 </div>
121 </div>
122
123 <script>
124 // Adding a subtle vertical breathing effect to the entire wave container
125 // to match the shifting heights seen between frames 02.000 and 04.000
126 const waveWrapper = document.querySelector('.wave-wrapper');
127
128 let startTime = Date.now();
129 function animate() {
130 const elapsed = (Date.now() - startTime) / 1000;
131 // Slow sine wave for vertical "breathing"
132 const yOffset = Math.sin(elapsed * 0.5) * 15;
133 waveWrapper.style.transform = `translateY(${yOffset}px)`;
134 requestAnimationFrame(animate);
135 }
136
137 // Start the subtle vertical motion
138 animate();
139 </script>
140</body>
141</html>