← back to Only CSS: Cry Babycompare with ground truth →
model output
GPT-5.4
Only CSS: Cry Baby
A 0.74T 0.22
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" />
6<title>Crying Eyes Loop</title>
7<style>
8 :root{
9 --bg:#000;
10 --fg:#fff;
11 --dur:3.2s;
12 --ease:cubic-bezier(.45,0,.2,1);
13 }
14
15 html,body{
16 margin:0;
17 height:100%;
18 background:var(--bg);
19 overflow:hidden;
20 }
21
22 body{
23 display:grid;
24 place-items:center;
25 }
26
27 .scene{
28 position:relative;
29 width:min(92vw,900px);
30 aspect-ratio:16/9;
31 background:#000;
32 }
33
34 .eye{
35 position:absolute;
36 top:34%;
37 width:140px;
38 height:72px;
39 color:var(--fg);
40 }
41 .eye.left{ left:33%; transform:translateX(-50%); }
42 .eye.right{ left:67%; transform:translateX(-50%) scaleX(-1); }
43
44 .lashes{
45 position:absolute;
46 inset:0;
47 }
48
49 /* upper lid */
50 .lid{
51 position:absolute;
52 left:18px;
53 top:10px;
54 width:104px;
55 height:22px;
56 border-bottom:5px solid var(--fg);
57 border-radius:0 0 70px 70px / 0 0 28px 28px;
58 transform-origin:50% 0%;
59 animation:blink var(--dur) var(--ease) infinite;
60 }
61
62 /* lashes under the lid */
63 .lash{
64 position:absolute;
65 top:18px;
66 width:24px;
67 height:14px;
68 border-bottom:4px solid var(--fg);
69 border-radius:0 0 24px 24px;
70 }
71 .lash.l1{ left:8px; transform:rotate(18deg); }
72 .lash.l2{ left:26px; transform:rotate(10deg); }
73 .lash.l3{ left:46px; transform:rotate(3deg); }
74 .lash.l4{ left:66px; transform:rotate(-6deg); }
75 .lash.l5{ left:86px; transform:rotate(-14deg); }
76
77 /* white fill that swells during blink */
78 .sclera{
79 position:absolute;
80 left:28px;
81 top:24px;
82 width:76px;
83 height:10px;
84 background:var(--fg);
85 border-radius:0 0 50px 50px / 0 0 24px 24px;
86 transform-origin:50% 0%;
87 animation:swell var(--dur) var(--ease) infinite;
88 }
89
90 /* hanging tear mass */
91 .tearStem{
92 position:absolute;
93 left:58px;
94 top:30px;
95 width:24px;
96 height:0;
97 background:var(--fg);
98 border-radius:14px;
99 transform-origin:50% 0%;
100 animation:stem var(--dur) linear infinite;
101 }
102
103 .drop{
104 position:absolute;
105 left:62px;
106 top:54px;
107 width:14px;
108 height:18px;
109 background:var(--fg);
110 border-radius:50% 50% 55% 55%;
111 opacity:0;
112 filter:blur(.2px);
113 }
114
115 .drop.d1{ animation:drop1 var(--dur) linear infinite; }
116 .drop.d2{ animation:drop2 var(--dur) linear infinite; }
117 .drop.d3{ animation:drop3 var(--dur) linear infinite; }
118
119 @keyframes blink{
120 0%,12% { transform:scaleY(.18) translateY(0); }
121 18% { transform:scaleY(.45) translateY(1px); }
122 24% { transform:scaleY(.95) translateY(2px); }
123 31% { transform:scaleY(1.25) translateY(3px); }
124 38% { transform:scaleY(.95) translateY(2px); }
125 46% { transform:scaleY(.55) translateY(1px); }
126 56%,100% { transform:scaleY(.18) translateY(0); }
127 }
128
129 @keyframes swell{
130 0%,10% { height:0; width:0; left:66px; top:28px; opacity:0; }
131 14% { height:8px; width:44px; left:44px; top:26px; opacity:1; }
132 22% { height:18px; width:72px; left:30px; top:24px; opacity:1; }
133 30% { height:28px; width:82px; left:24px; top:22px; opacity:1; }
134 38% { height:18px; width:62px; left:34px; top:24px; opacity:1; }
135 48% { height:8px; width:28px; left:50px; top:27px; opacity:1; }
136 56%,100% { height:0; width:0; left:66px; top:28px; opacity:0; }
137 }
138
139 @keyframes stem{
140 0%,26% { height:0; opacity:0; }
141 30% { height:18px; opacity:1; }
142 36% { height:62px; opacity:1; }
143 42% { height:78px; opacity:1; }
144 48% { height:46px; opacity:1; }
145 54% { height:0; opacity:0; }
146 100% { height:0; opacity:0; }
147 }
148
149 @keyframes drop1{
150 0%,31% { opacity:0; transform:translate(0,0) scale(.5,.5); }
151 34% { opacity:1; transform:translate(0,18px) scale(1,1.15); }
152 42% { opacity:1; transform:translate(0,92px) scale(1.15,1.55); }
153 50% { opacity:.95; transform:translate(2px,170px) scale(.8,1.35); }
154 58%,100% { opacity:0; transform:translate(4px,230px) scale(.35,.7); }
155 }
156
157 @keyframes drop2{
158 0%,40% { opacity:0; transform:translate(0,0) scale(.4); }
159 44% { opacity:1; transform:translate(-2px,70px) scale(.7,.9); }
160 52% { opacity:1; transform:translate(1px,150px) scale(.95,1.25); }
161 60% { opacity:.8; transform:translate(3px,220px) scale(.45,.9); }
162 68%,100% { opacity:0; transform:translate(5px,260px) scale(.2); }
163 }
164
165 @keyframes drop3{
166 0%,52% { opacity:0; transform:translate(0,0) scale(.3); }
167 56% { opacity:.9; transform:translate(1px,120px) scale(.45,.65); }
168 64% { opacity:.8; transform:translate(4px,205px) scale(.35,.8); }
169 72%,100% { opacity:0; transform:translate(6px,270px) scale(.15); }
170 }
171
172 /* slight phase offset between eyes like the reference */
173 .right .lid,
174 .right .sclera,
175 .right .tearStem,
176 .right .drop{
177 animation-delay:-.22s;
178 }
179</style>
180</head>
181<body>
182 <div class="scene">
183 <div class="eye left">
184 <div class="lashes">
185 <div class="lid"></div>
186 <div class="lash l1"></div>
187 <div class="lash l2"></div>
188 <div class="lash l3"></div>
189 <div class="lash l4"></div>
190 <div class="lash l5"></div>
191 <div class="sclera"></div>
192 <div class="tearStem"></div>
193 <div class="drop d1"></div>
194 <div class="drop d2"></div>
195 <div class="drop d3"></div>
196 </div>
197 </div>
198
199 <div class="eye right">
200 <div class="lashes">
201 <div class="lid"></div>
202 <div class="lash l1"></div>
203 <div class="lash l2"></div>
204 <div class="lash l3"></div>
205 <div class="lash l4"></div>
206 <div class="lash l5"></div>
207 <div class="sclera"></div>
208 <div class="tearStem"></div>
209 <div class="drop d1"></div>
210 <div class="drop d2"></div>
211 <div class="drop d3"></div>
212 </div>
213 </div>
214 </div>
215</body>
216</html>