stir.html · 210 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A cup of coffee, stirred</title>
<style>
:root{ --coffee: 204px; }
html,body{height:100%;}
body{
margin:0;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:radial-gradient(circle at 50% 30%, #7d5836 0%, #4a3018 46%, #201106 100%);
}
.scene{
position:relative;
width:420px; height:400px; /* cup centre: (210,190) */
}
/* ---------- saucer ---------- */
.saucer{
position:absolute; left:40px; top:20px;
width:340px; height:340px; border-radius:50%;
background:radial-gradient(circle at 41% 36%,
#ffffff 0%, #f3f3f6 42%, #d8d8df 68%, #bdbdc6 88%, #9fa0aa 100%);
box-shadow:
0 34px 55px rgba(0,0,0,.55),
0 8px 16px rgba(0,0,0,.35),
inset 0 0 0 2px rgba(255,255,255,.55);
z-index:1;
}
.saucer::after{
content:""; position:absolute; left:50%; top:50%;
width:286px; height:286px; transform:translate(-50%,-50%);
border-radius:50%;
box-shadow:inset 0 0 0 2px rgba(0,0,0,.05), inset 0 8px 18px rgba(0,0,0,.12);
}
/* ---------- cup handle (a clean loop behind the cup) ---------- */
.cup-handle{
position:absolute; left:318px; top:190px;
width:120px; height:136px;
transform:translate(-50%,-50%);
box-sizing:border-box;
border:23px solid #e9e9ef;
border-radius:50%;
box-shadow:
0 14px 24px rgba(0,0,0,.45),
inset 0 0 0 2px rgba(255,255,255,.6),
0 0 0 2px rgba(0,0,0,.06);
z-index:2;
}
/* ---------- cup ---------- */
.cup{
position:absolute; left:85px; top:65px;
width:250px; height:250px; border-radius:50%;
background:radial-gradient(circle at 39% 32%,
#ffffff 0%, #f4f4f7 38%, #dcdce2 62%, #c2c2cb 82%, #a9a9b4 100%);
box-shadow:
0 22px 34px rgba(0,0,0,.45),
inset 0 0 0 3px rgba(255,255,255,.7),
inset 0 -12px 22px rgba(0,0,0,.14);
z-index:3;
}
/* inner wall of the cup, sloping down to the coffee */
.rim{
position:absolute; left:98px; top:78px;
width:224px; height:224px; border-radius:50%;
background:radial-gradient(circle at 44% 38%,
#f7f7f9 0%, #e9e9ee 55%, #cfcfd7 80%, #b6b6c0 100%);
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.8),
inset 0 10px 20px rgba(0,0,0,.16),
inset 0 -6px 14px rgba(0,0,0,.08);
z-index:4;
}
/* ---------- coffee ---------- */
.coffee{
position:absolute; left:108px; top:88px;
width:var(--coffee); height:var(--coffee);
border-radius:50%; overflow:hidden;
background:radial-gradient(circle at 42% 36%,
#93613a 0%, #6f4626 28%, #4c2d16 60%, #2c1809 86%, #180c03 100%);
box-shadow:
inset 0 0 0 2px rgba(0,0,0,.4),
inset 0 0 0 9px rgba(196,150,98,.13),
inset 0 10px 28px rgba(0,0,0,.6),
inset 0 -6px 16px rgba(255,255,255,.05);
z-index:5;
}
/* crema / swirling surface */
.crema{
position:absolute; inset:0; border-radius:50%;
background:repeating-conic-gradient(from 0deg,
rgba(255,228,184,.07) 0deg 9deg,
rgba(110,66,30,.07) 9deg 20deg,
rgba(255,255,255,.02) 20deg 30deg);
mix-blend-mode:screen;
opacity:.55;
animation:swirl 1.1s linear infinite;
}
.crema::after{
content:""; position:absolute; inset:30px; border-radius:50%;
background:radial-gradient(circle,
rgba(255,255,255,.08), rgba(255,255,255,0) 72%);
}
/* glossy highlight on the liquid */
.gloss{
position:absolute; left:26px; top:18px;
width:92px; height:56px; border-radius:50%;
transform:rotate(-28deg);
background:radial-gradient(ellipse at 50% 50%,
rgba(255,242,218,.45), rgba(255,242,218,0) 70%);
filter:blur(1px);
}
/* ---------- the spoon ---------- */
.spoon{
position:absolute; left:108px; top:88px;
width:var(--coffee); height:var(--coffee);
transform-origin:50% 50%;
animation:stir 0.5s linear infinite;
filter:drop-shadow(3px 5px 3px rgba(0,0,0,.5));
z-index:6;
}
/* handle runs from the bowl out to the rim */
.spoon .handle{
position:absolute;
left:calc(50% - 5px);
top:-18px;
width:10px;
height:124px;
border-radius:5px;
background:linear-gradient(90deg,
#6d6e76 0%, #b7b8c0 16%, #fcfcfe 44%, #d6d7dd 60%, #8c8d96 82%, #5c5d65 100%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
/* shallow spoon bowl */
.spoon .bowl{
position:absolute;
left:calc(50% - 21px);
top:58px;
width:42px;
height:60px;
border-radius:50%;
background:radial-gradient(ellipse at 36% 28%,
#ffffff 0%, #ececf1 20%, #c3c4cd 46%, #8f909a 70%, #63646d 100%);
box-shadow:
inset 0 3px 5px rgba(255,255,255,.85),
inset 0 -9px 14px rgba(0,0,0,.5);
}
.spoon .bowl::after{
content:""; position:absolute; left:7px; top:9px;
width:28px; height:40px; border-radius:50%;
background:radial-gradient(ellipse at 42% 34%,
#74757f 0%, #a3a4ad 38%, #d6d6dc 74%, #f4f4f7 100%);
box-shadow:inset 0 4px 7px rgba(0,0,0,.5);
}
/* ---------- a few bubbles ---------- */
.bubble{
position:absolute; border-radius:50%;
background:radial-gradient(circle at 35% 30%,
rgba(255,255,255,.6), rgba(255,255,255,.04) 70%);
z-index:7;
}
.b1{left:150px; top:120px; width:9px; height:9px; animation:drift 0.8s ease-in-out infinite;}
.b2{left:124px; top:152px; width:6px; height:6px; animation:drift 0.8s ease-in-out infinite .2s;}
.b3{left:132px; top:196px; width:7px; height:7px; animation:drift 0.8s ease-in-out infinite .4s;}
@keyframes stir{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes swirl{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes drift{
0%,100%{transform:translate(0,0) scale(1); opacity:.75;}
50% {transform:translate(4px,-5px) scale(1.25); opacity:1;}
}
</style>
</head>
<body>
<div class="scene">
<div class="saucer"></div>
<div class="cup-handle"></div>
<div class="cup"></div>
<div class="rim"></div>
<div class="coffee">
<div class="crema"></div>
<div class="gloss"></div>
</div>
<div class="spoon">
<div class="handle"></div>
<div class="bowl"></div>
</div>
<div class="bubble b1"></div>
<div class="bubble b2"></div>
<div class="bubble b3"></div>
</div>
</body>
</html>round 1 of 6
A spoon stirring in a cup, in HTML and CSS: DeepSeek 4.1 Flash
modeldeepseek/deepseek-v4.1-flashtaskcss-stirring-spoon@v1, checks c1, harness h1date2026-10-19rounds6 of 8 allowed, 12 minutes on the clockcost$0.1996thinkingmediumtokens948,403 in, 31,965 out, of which 21,144 reasoningtime8 min 46 sfailedThe spoon does the stirring: broken, behaviour missing, critical
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 disagreefail
Reads as inside the cupdecided by looking · someone else could reasonably disagreepass
Handle stays on the bowldecided by looking · someone else could reasonably disagreepass
run 1 · 3r · $0.2820
run 2 · 6r · $0.2704same 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.