← back to Water Dropcompare with ground truth →
model output
Gemini 3 Flash Preview
Water Drop
A 0.87T 0.26
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>Clean Water Animation</title>
7 <style>
8 :root {
9 --bg-color: #1a237e;
10 --shape-color: #eff0f6;
11 --text-heading: #7a869a;
12 --text-body: #9ea7b8;
13 }
14
15 * {
16 box-sizing: border-box;
17 margin: 0;
18 padding: 0;
19 }
20
21 body {
22 background-color: var(--bg-color);
23 height: 100vh;
24 display: flex;
25 justify-content: center;
26 align-items: center;
27 overflow: hidden;
28 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
29 }
30
31 .scene {
32 position: relative;
33 display: flex;
34 justify-content: center;
35 align-items: center;
36 width: 100%;
37 height: 100%;
38 }
39
40 /* The Main Morphing Shape */
41 .shape {
42 width: 150px;
43 height: 150px;
44 background-color: var(--shape-color);
45 position: relative;
46 z-index: 2;
47 display: flex;
48 flex-direction: column;
49 justify-content: center;
50 align-items: center;
51 text-align: center;
52 padding: 20px;
53
54 /* Initial Drop Shape */
55 border-radius: 50% 50% 50% 0;
56 transform: rotate(-45deg);
57
58 /* Animation sequence */
59 animation: morph 5s cubic-bezier(0.45, 0, 0.55, 1) forwards;
60 }
61
62 @keyframes morph {
63 0%, 20% {
64 /* Drop phase */
65 width: 150px;
66 height: 150px;
67 border-radius: 50% 50% 50% 0;
68 transform: rotate(-45deg) translateY(0);
69 }
70 30% {
71 /* Landing/Squash effect */
72 transform: rotate(-45deg) translateY(10px) scale(1.05, 0.95);
73 }
74 45% {
75 /* Transition to Square */
76 width: 160px;
77 height: 160px;
78 border-radius: 25px;
79 transform: rotate(0deg) translateY(0);
80 }
81 65%, 100% {
82 /* Transition to Rectangle */
83 width: 450px;
84 height: 280px;
85 border-radius: 30px;
86 transform: rotate(0deg) translateY(0);
87 }
88 }
89
90 /* Ripples at the base */
91 .ripple-container {
92 position: absolute;
93 top: 50%;
94 left: 50%;
95 transform: translate(-50%, 60px) rotateX(75deg);
96 width: 300px;
97 height: 300px;
98 pointer-events: none;
99 }
100
101 .ripple {
102 position: absolute;
103 top: 50%;
104 left: 50%;
105 width: 10px;
106 height: 10px;
107 border: 2px solid rgba(255, 255, 255, 0.4);
108 border-radius: 50%;
109 transform: translate(-50%, -50%) scale(0);
110 opacity: 0;
111 }
112
113 .ripple-1 {
114 animation: ripple-effect 2.5s ease-out 1.2s forwards;
115 }
116
117 .ripple-2 {
118 animation: ripple-effect 2.5s ease-out 1.5s forwards;
119 }
120
121 @keyframes ripple-effect {
122 0% {
123 transform: translate(-50%, -50%) scale(0);
124 opacity: 0.8;
125 }
126 100% {
127 transform: translate(-50%, -50%) scale(30);
128 opacity: 0;
129 }
130 }
131
132 /* Text Content */
133 .content {
134 opacity: 0;
135 animation: fade-in 1s ease-out 3.5s forwards;
136 pointer-events: none;
137 }
138
139 h1 {
140 color: var(--text-heading);
141 font-size: 2.2rem;
142 line-height: 1.1;
143 margin-bottom: 15px;
144 font-weight: 700;
145 }
146
147 p {
148 color: var(--text-body);
149 font-size: 0.95rem;
150 max-width: 300px;
151 line-height: 1.4;
152 }
153
154 @keyframes fade-in {
155 from { opacity: 0; transform: translateY(10px); }
156 to { opacity: 1; transform: translateY(0); }
157 }
158
159 /* Responsive scaling */
160 @media (max-width: 500px) {
161 .shape {
162 animation-name: morph-mobile;
163 }
164 @keyframes morph-mobile {
165 0%, 20% { width: 120px; height: 120px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
166 45% { width: 130px; height: 130px; border-radius: 20px; transform: rotate(0deg); }
167 65%, 100% { width: 300px; height: 200px; border-radius: 20px; transform: rotate(0deg); }
168 }
169 h1 { font-size: 1.5rem; }
170 p { font-size: 0.8rem; }
171 }
172 </style>
173</head>
174<body>
175
176 <div class="scene">
177 <!-- Ripple Effect -->
178 <div class="ripple-container">
179 <div class="ripple ripple-1"></div>
180 <div class="ripple ripple-2"></div>
181 </div>
182
183 <!-- Central Animating Shape -->
184 <div class="shape">
185 <div class="content">
186 <h1>Protecting Our Clean Water</h1>
187 <p>Addressing phosphorus, the greatest threat to clean water in Lake Champlain</p>
188 </div>
189 </div>
190 </div>
191
192 <script>
193 // No heavy JS needed as CSS handles timing and transforms.
194 // We can restart the animation on click for viewing convenience.
195 document.body.addEventListener('click', () => {
196 const shape = document.querySelector('.shape');
197 const content = document.querySelector('.content');
198 const ripples = document.querySelectorAll('.ripple');
199
200 // Trigger reflow to restart animations
201 [shape, content, ...ripples].forEach(el => {
202 el.style.animation = 'none';
203 void el.offsetWidth;
204 el.style.animation = null;
205 });
206 });
207 </script>
208</body>
209</html>