stir.html · 106 lines
<!DOCTYPE html>
<html>
<head>
<style>
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;}
.scene{position:relative;width:100vw;height:100vh;
background:linear-gradient(#efe4d2,#dccbae);}
.table{position:absolute;left:0;top:72%;width:100%;height:28%;
background:linear-gradient(#b98d5a,#8a5e35);}
/* saucer */
.saucer{position:absolute;left:22%;top:70%;width:56%;height:14%;
background:radial-gradient(ellipse at 50% 38%, #ffffff 42%, #e2ddd4 75%, #c9c2b3 100%);
border-radius:50%;
box-shadow:0 8px 14px rgba(0,0,0,.3);}
/* cup body */
.cup{position:absolute;left:31%;top:49%;width:38%;height:26%;
background:linear-gradient(90deg,#d8d2c8 0%,#ffffff 28%,#f4f1ea 55%,#c9c2b5 100%);
border-radius:0 0 50% 50% / 0 0 78% 78%;
box-shadow:inset 0 -14px 20px rgba(0,0,0,.12);}
/* cup handle */
.cuphandle{position:absolute;left:64.5%;top:53%;width:6.5%;height:11%;
border:14px solid #e8e2d8;border-radius:50%;
border-left-color:transparent;
box-shadow:3px 4px 5px rgba(0,0,0,.12);}
/* rim */
.rim{position:absolute;left:29%;top:41%;width:42%;height:12%;
background:#f7f4ee;border-radius:50%;
box-shadow:inset 0 5px 9px rgba(0,0,0,.18);}
/* coffee */
.coffee{position:absolute;left:30.4%;top:42.8%;width:39.2%;height:9.5%;
background:radial-gradient(ellipse at 50% 45%, #6b3d1e 55%, #4a2610 85%, #371b0a 100%);
border-radius:50%;
overflow:hidden;}
/* rotating cream swirl */
.swirl{position:absolute;left:50%;top:50%;width:0;height:0;
animation:spin 2.4s linear infinite;}
.swirl i{position:absolute;left:-12px;top:-95px;width:24px;height:95px;
background:linear-gradient(rgba(238,200,150,1),rgba(238,200,150,0));
border-radius:50%;
transform-origin:12px 95px;
opacity:1;}
.swirl i:nth-child(1){transform:rotate(0deg);}
.swirl i:nth-child(2){transform:rotate(90deg);}
.swirl i:nth-child(3){transform:rotate(180deg);}
.swirl i:nth-child(4){transform:rotate(270deg);}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
/* ripple rings */
.ripple{position:absolute;left:50%;top:50%;border:3px solid rgba(230,190,140,.85);
border-radius:50%;animation:rip 2.4s linear infinite;}
.r1{width:20%;height:44%;margin:-22% 0 0 -10%;}
.r2{width:40%;height:88%;margin:-44% 0 0 -20%;animation-delay:.8s;}
.r3{width:62%;height:132%;margin:-66% 0 0 -31%;animation-delay:1.6s;}
@keyframes rip{0%{transform:scale(.25);opacity:0;}25%{opacity:.8;}100%{transform:scale(1.3);opacity:0;}}
/* spoon: pivot above rim, handle dips into coffee, bowl sweeps through it */
.spoon{position:absolute;left:44%;top:19%;width:0;height:0;
transform-origin:0 0;
animation:stir 2.4s ease-in-out infinite alternate;}
@keyframes stir{from{transform:rotate(-20deg);}to{transform:rotate(20deg);}}
.handle{position:absolute;left:-6px;top:0;width:12px;height:120px;
background:linear-gradient(90deg,#f4f4f4,#a7acb1 60%,#71777d);
border-radius:6px;
box-shadow:0 2px 3px rgba(0,0,0,.25);}
.knob{position:absolute;left:-9px;top:-14px;width:15px;height:22px;
background:linear-gradient(#fdfdfd,#8b9096);border-radius:8px;}
.bowl{position:absolute;left:-19px;top:110px;width:44px;height:38px;
background:radial-gradient(ellipse at 38% 32%, #f0f2f4, #9aa0a6 62%, #5f656b);
border-radius:50%;
box-shadow:0 3px 5px rgba(0,0,0,.35);}
/* steam */
.steam{position:absolute;top:12%;width:5px;height:24%;
background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.8),rgba(255,255,255,0));
border-radius:5px;
animation:steam 3s ease-in-out infinite;
transform-origin:bottom;}
.s1{left:47%;}
.s2{left:50%;animation-delay:1s;height:20%;}
.s3{left:44%;animation-delay:2s;height:22%;}
@keyframes steam{0%{transform:translateY(14px) scaleY(.4) rotate(-6deg);opacity:0;}
40%{opacity:.8;}100%{transform:translateY(-46px) scaleY(1.1) rotate(20deg);opacity:0;}}
</style>
</head>
<body>
<div class="scene">
<div class="table"></div>
<div class="saucer"></div>
<div class="cuphandle"></div>
<div class="cup"></div>
<div class="rim"></div>
<div class="coffee">
<div class="swirl"><i></i><i></i><i></i><i></i></div>
<div class="ripple r1"></div>
<div class="ripple r2"></div>
<div class="ripple r3"></div>
</div>
<div class="spoon">
<div class="knob"></div>
<div class="handle"></div>
<div class="bowl"></div>
</div>
<div class="steam s1"></div>
<div class="steam s2"></div>
<div class="steam s3"></div>
</div>
</body>
</html>round 1 of 6
A spoon stirring in a cup, in HTML and CSS: GLM 5.3 FlashX
modelz-ai/glm-5.3-flashxtaskcss-stirring-spoon@v1, checks c1, harness h1date2026-10-19rounds6 of 8 allowed, 12 minutes on the clockcost$0.0539thinkingmediumtokens193,369 in, 8,831 out, of which 3,046 reasoningtime3 min 41 sfailedReads as inside the cup: false, relation transposed, major
HTML and CSS onlydecided by a number, from the filepass
A CSS loop that moves somethingdecided by a number, from the filepass
Reads as a cup seen intodecided by looking · someone else could reasonably disagreepass
The spoon does the stirringdecided by looking · someone else could reasonably disagreepass
Reads as inside the cupdecided by looking · someone else could reasonably disagreefail
Handle stays on the bowldecided by looking · someone else could reasonably disagreepass
run 1 · 6r · $0.0385
run 3 · 8r · $0.0836same prompt, other modelsall 9 runs on A spoon stirring in a cup, in HTML and CSS →
Using only HTML and CSS, with no JavaScript, SVG or images, make a cup of coffee with a spoon stirring round and round inside it.Frozen at v1. This model got this and nothing else.
HTML and CSS alone, a continuous loop, and a cup seen from slightly above. The file is read for the brief and for the loop: an @keyframes rule that changes a position or a transform, named by an element, with the iteration count set to infinite. The picture is four moments of the animation, left to right, taken at 0.4 s, 1.2 s, 2.0 s and 2.8 s. Whether the rim reads as an ellipse seen from above, whether the spoon passes behind the far rim on the back half of its circuit, and whether the handle stays on the bowl are judged by eye from the page the run rendered, with the four frames as a first look. How it is scored, and this run's files on GitHub.