← back to Only CSS: Cry Babycompare with ground truth →
model output
Gemini 3 Flash Preview
Only CSS: Cry Baby
A 0.68T 0.20
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>Crying Eyes Animation</title>
7 <style>
8 :root {
9 --bg-color: #000;
10 --line-color: #fff;
11 --animation-speed: 3s;
12 }
13
14 body, html {
15 margin: 0;
16 padding: 0;
17 width: 100%;
18 height: 100%;
19 background-color: var(--bg-color);
20 display: flex;
21 justify-content: center;
22 align-items: center;
23 overflow: hidden;
24 }
25
26 .scene {
27 position: relative;
28 width: 600px;
29 height: 400px;
30 display: flex;
31 justify-content: space-around;
32 align-items: center;
33 }
34
35 .eye-container {
36 position: relative;
37 width: 180px;
38 height: 100px;
39 animation: eye-vibrate 4s infinite ease-in-out;
40 }
41
42 .eye-svg {
43 width: 100%;
44 height: auto;
45 filter: drop-shadow(0 0 2px rgba(255,255,255,0.3));
46 }
47
48 /* Tear logic */
49 .tear {
50 position: absolute;
51 background: var(--line-color);
52 border-radius: 50%;
53 width: 8px;
54 height: 8px;
55 opacity: 0;
56 pointer-events: none;
57 }
58
59 @keyframes eye-vibrate {
60 0%, 100% { transform: translateY(0); }
61 25% { transform: translateY(-2px); }
62 50% { transform: translateY(1px); }
63 75% { transform: translateY(-1px); }
64 }
65
66 @keyframes drip {
67 0% {
68 transform: scale(0.1) translateY(0);
69 opacity: 0;
70 }
71 10% {
72 transform: scale(1) translateY(0);
73 opacity: 1;
74 }
75 25% {
76 transform: scaleY(1.8) scaleX(0.8) translateY(10px);
77 opacity: 1;
78 }
79 35% {
80 transform: scaleY(1) scaleX(1) translateY(20px);
81 opacity: 1;
82 }
83 80% {
84 transform: translateY(250px) scale(0.8);
85 opacity: 1;
86 }
87 100% {
88 transform: translateY(320px) scale(0.2);
89 opacity: 0;
90 }
91 }
92
93 /* Precise eyelash styling */
94 .lash {
95 fill: none;
96 stroke: var(--line-color);
97 stroke-width: 2.5;
98 stroke-linecap: round;
99 }
100
101 .main-lid {
102 fill: none;
103 stroke: var(--line-color);
104 stroke-width: 4;
105 stroke-linecap: round;
106 }
107
108 </style>
109</head>
110<body>
111
112 <div class="scene">
113 <!-- Left Eye -->
114 <div class="eye-container" id="left-eye">
115 <svg class="eye-svg" viewBox="0 0 120 60">
116 <!-- Eyelid -->
117 <path class="main-lid" d="M10,30 Q60,45 110,30" />
118 <!-- Lashes -->
119 <path class="lash" d="M20,33 Q15,45 5,48" />
120 <path class="lash" d="M40,37 Q38,50 32,55" />
121 <path class="lash" d="M60,38 Q60,52 60,58" />
122 <path class="lash" d="M80,37 Q82,50 88,55" />
123 <path class="lash" d="M100,33 Q105,45 115,48" />
124 </svg>
125 </div>
126
127 <!-- Right Eye -->
128 <div class="eye-container" id="right-eye">
129 <svg class="eye-svg" viewBox="0 0 120 60">
130 <!-- Eyelid -->
131 <path class="main-lid" d="M10,30 Q60,45 110,30" />
132 <!-- Lashes -->
133 <path class="lash" d="M20,33 Q15,45 5,48" />
134 <path class="lash" d="M40,37 Q38,50 32,55" />
135 <path class="lash" d="M60,38 Q60,52 60,58" />
136 <path class="lash" d="M80,37 Q82,50 88,55" />
137 <path class="lash" d="M100,33 Q105,45 115,48" />
138 </svg>
139 </div>
140 </div>
141
142 <script>
143 /**
144 * To recreate the organic, layered crying effect from the video,
145 * we programmatically spawn tears at different intervals and positions.
146 */
147
148 function createTear(eyeSide) {
149 const container = document.getElementById(`${eyeSide}-eye`);
150 const tear = document.createElement('div');
151 tear.className = 'tear';
152
153 // Randomize position along the eyelid curve (roughly 20% to 80% width)
154 const xPos = 20 + Math.random() * 80;
155 const yPos = 35 + (Math.sin((xPos / 100) * Math.PI) * 5); // Follows the curve slightly
156
157 tear.style.left = `${xPos}px`;
158 tear.style.top = `${yPos}px`;
159
160 // Randomize tear size slightly
161 const size = 5 + Math.random() * 6;
162 tear.style.width = `${size}px`;
163 tear.style.height = `${size}px`;
164
165 // Randomize timing
166 const duration = 2 + Math.random() * 1.5;
167 tear.style.animation = `drip ${duration}s cubic-bezier(0.5, 0, 0.7, 0.5) forwards`;
168
169 container.appendChild(tear);
170
171 // Cleanup
172 setTimeout(() => {
173 tear.remove();
174 }, duration * 1000);
175 }
176
177 function startCrying() {
178 // Left eye stream
179 setInterval(() => {
180 if (Math.random() > 0.3) createTear('left');
181 }, 600);
182
183 // Right eye stream (slightly offset for natural look)
184 setTimeout(() => {
185 setInterval(() => {
186 if (Math.random() > 0.3) createTear('right');
187 }, 750);
188 }, 300);
189
190 // Occasional "heavy" tears (multiple at once)
191 setInterval(() => {
192 const side = Math.random() > 0.5 ? 'left' : 'right';
193 for(let i=0; i<2; i++) {
194 setTimeout(() => createTear(side), i * 200);
195 }
196 }, 2500);
197 }
198
199 // Delay start to match the video's initial pause
200 setTimeout(startCrying, 500);
201
202 </script>
203</body>
204</html>