Run Detail
completedgpt-6-sol-proRecorded for these videos
27:18Gemini 4 Hydrogen: Cheaper Tokens, More Expensive Answers?
Nov 13, 2026 · YouTube
18:40ERNIE 5.5 Flash Preview vs GLM 5.3 Flash: Baidu's new model is very impressive!
Nov 11, 2026 · YouTube
36:22Fable 5.2 robbing me blind, plus: Nex AGI's N2.6 vs GLM 5.3 Flash
Nov 11, 2026 · YouTube
14:03Gemini 4 Carbon: Can it handle my challenges? (First look with one-shot coding tests)
Nov 10, 2026 · YouTube
47:51Ranking major U.S. Open-Weights Models. (Where does Ripple 65B fit in?)
Nov 6, 2026 · YouTube
10:57"Crouton Alpha": the latest super-efficient coding model by Meta?
Nov 3, 2026 · YouTube
38:58Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency
Oct 28, 2026 · YouTube
22:14GPT-6.1 Terra Pro vs Terra: How Much Better Is Pro?
Oct 27, 2026 · YouTube
29:55Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.
Oct 26, 2026 · YouTube
31:28Is this company reselling GPT Sol 6.1 at a loss (for non-agentic/text-only)?🤔 Is this sustainable?
Oct 20, 2026 · YouTube
17:58Nemotron 3.5 Super VL vs Opus 5.5: Testing NVIDIA’s new coding juggernaut
Oct 15, 2026 · YouTube
16:04Testing a *massive* new open-weights model 🤯: Muse Spark Open (vs. Nemotron, Opus 5.5, and more)
Oct 15, 2026 · YouTube
16:43Gemini 4 Argon: Great 🐈 Animation, but a broken escalator. (Coding challenge vs Opus 5.5, Sol 6.1)
Oct 13, 2026 · YouTube
16:37Meta's new "Muse Wonder" AI is impressive... but can it compete with Anthropic's models?
Oct 12, 2026 · YouTube
11:12WOW... Haiku 5.5 is very impressive. RIP OpenAI?
Oct 7, 2026 · YouTube
22:47Mistral Large 4 Is Cheap. But Is It Good Enough to Compete?
Oct 6, 2026 · YouTube
22:02Is Pareto 26.10 Preview Just Routing to GPT Sol? I Tested It Against Sol 6.1 Pro
Oct 1, 2026 · YouTube
11:22I Tested Sonnet 5.5 Against Opus 5.5. Is It Actually Cheaper?
Sep 28, 2026 · YouTube
Provider
openrouter
Challenge Version
v1.0
Turns
1
Duration
Batched — not timed
Total Tokens
50,593
Input Tokens
26,423
Output Tokens
24,170
Reasoning Tokens
6,766
Reasoning Effort
default
Est. Cost
$0.1473
Started
9/28/2026, 8:15:46 PM
OR Provider
OpenAI
Finish Reason
stop
Generation ID
gen-batch-1790626568-fdc09c5e8146fa105eb3
Turns (1)
Turn #1
26,423 in24,170 out6,766 reasoning50,593 total
user
You write simulations where the interesting behavior is supposed to come out of the dice rather than be animated by hand.
Build me a single HTML page: a Starbucks-style coffee shop running a bizarre promotion, simulated live.
The build
- Customers are simple circles or dots. They line up outside, enter the shop, order, receive a drink, and leave. At most 8 customers are inside at once; the rest wait in line.
- Every Frappuccino sold has an independent 1-in-6 chance of coming out as a glowing Neon Unicorn Frappuccino in psychedelic colors. Roll it per drink, at the counter, and let nothing else decide it.
- Track how many customers currently inside the shop are holding a Neon Unicorn. The shop reacts to that count:
- 1: a subtle neon glow, or some small wrongness in the picture.
- 2: an increasingly unstable coincidence — flashing lights, a shaking building, particles, warped colors.
- 3 or more: the catastrophic NEON Unicorn EVENT. Go completely overboard: the shop collapses, explodes, mutates or otherwise fails spectacularly, and a giant dancing neon Unicorn creature emerges.
- After the catastrophe the shop resets or rebuilds, and the simulation carries on.
- No scripted catastrophe. No timer, no quota, no loaded die that makes an event arrive on schedule. An event happens because three unicorns were in the room at once and for no other reason. If you nudge the odds anywhere, say so in the notes.
- Live statistics: customers served, Neon Unicorns produced, the observed unicorn rate beside the true 1-in-6, catastrophes, and any other amusing metrics you invent.
- A control for simulation speed, so I can fast-forward to the next disaster.
- Simple geometric graphics and procedural animation, not detailed artwork. The effort goes into movement, escalation and the payoff. Invent further mechanics, effects, statistics or escalating disasters if you like. Make it funny, polished and satisfying to watch.
House rules
- One file. Everything inline — no CDN, no external stylesheet, font, script or image.
data:URIs are fine. - No libraries.
- No network at runtime.
- No
localStorage,sessionStorage, cookies orindexedDB— sandboxed frame, they throw. - Return the file as exactly one fenced
htmlblock.
Answer in exactly these sections
The odds
One paragraph, before the file. Given your own timings — how long a customer stays inside holding a drink, how fast the counter serves — roughly how many customers should pass through between catastrophes? Show the working, not just the number.
The page
The single fenced html block.
What it actually does
Having written it, what does the page do in its first few minutes? Name anything you tuned, special-cased or nudged. Say what it does badly — I am going to leave it running and watch the counters.
assistant
The odds
The counter can serve a drink about every 2 simulated seconds, and a customer stays inside with it for roughly 9 seconds. That puts about four earlier drinks in the shop when the next one is served. For a catastrophe, at least two of those four must be Neon Unicorns and the new drink must roll neon: (\bigl1-(5/6)^4-4(1/6)(5/6)^3\bigr\approx0.022), or about one opportunity per 45 drinks. Rebuilding clears the shop, so the practical average should be somewhat longer—roughly 50–70 customers served per catastrophe, with substantial random variation.
The page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Starbeans — Neon Unicorn Incident Simulator</title>
<style>
:root {
color-scheme: dark;
--ink: #edf7ef;
--muted: #a8bdb5;
--panel: #152922;
--edge: #355447;
--mint: #8bf5bd;
--pink: #ff76d5;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background:
radial-gradient(ellipse at 50% -15%, #255743 0, transparent 55%),
#0a1714;
color: var(--ink);
font: 14px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
main { max-width: 1280px; margin: auto; padding: 22px clamp(12px, 3vw, 32px) 30px; }
header {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.brand { display: flex; align-items: center; gap: 13px; }
.mark {
display: grid; place-items: center; width: 48px; height: 48px;
border: 2px solid var(--mint); border-radius: 50%;
color: var(--mint); font-size: 28px; transform: rotate(-12deg);
box-shadow: 0 0 19px #8bf5bd38;
}
h1 { font-size: clamp(20px, 3vw, 29px); letter-spacing: .045em; margin: 0; line-height: 1; }
.subtitle { color: var(--muted); font-size: 12px; letter-spacing: .12em; margin-top: 6px; }
.stamp {
padding: 8px 12px; border: 1px solid #6f6650; border-radius: 8px;
color: #e5d2a0; font-size: 11px; letter-spacing: .12em;
background: #312d2080;
}
.stats {
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 9px; margin-bottom: 13px;
}
.stat {
min-height: 79px; padding: 11px 12px;
border: 1px solid var(--edge); border-radius: 11px;
background: linear-gradient(145deg, #1b352b, var(--panel));
}
.stat .label {
color: var(--muted); font-size: 10px; font-weight: 750;
text-transform: uppercase; letter-spacing: .11em;
}
.stat .value { font-size: clamp(20px, 2.6vw, 29px); font-weight: 800; line-height: 1.23; }
.stat .small { color: var(--muted); font-size: 11px; }
.stat:nth-child(2) .value, .stat:nth-child(4) .value { color: var(--pink); }
.scene {
position: relative; overflow: hidden; border-radius: 15px;
border: 1px solid #517461; background: #142c27;
box-shadow: 0 20px 70px #0007, inset 0 0 40px #0004;
}
canvas { display: block; width: 100%; aspect-ratio: 1200 / 680; }
.scene::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(0deg, transparent 0 4px, #06120b09 5px 6px);
}
.bottom {
display: flex; justify-content: space-between; align-items: center;
gap: 18px; flex-wrap: wrap; margin-top: 14px;
}
.status { display: flex; align-items: center; gap: 10px; font-weight: 750; letter-spacing: .04em; }
.lamp { width: 10px; height: 10px; border-radius: 50%; background: #8bf5bd; box-shadow: 0 0 12px #8bf5bd; }
.status.warn .lamp { background: #ffbb63; box-shadow: 0 0 14px #ffbb63; }
.status.danger .lamp { background: #ff76d5; box-shadow: 0 0 18px #ff76d5; }
.status.event .lamp { background: white; box-shadow: 0 0 18px #fff; }
.controls { display: flex; align-items: center; gap: 12px; }
label { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
input[type=range] { width: clamp(115px, 17vw, 210px); accent-color: var(--mint); cursor: pointer; }
output { min-width: 38px; color: var(--mint); font-weight: 800; }
button {
border: 1px solid #739781; border-radius: 7px; background: #254b38;
color: var(--ink); padding: 8px 12px; font: inherit; font-weight: 700; cursor: pointer;
}
button:hover { background: #35664b; }
.foot {
margin: 15px 2px 0; color: var(--muted); font-size: 12px;
display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.foot strong { color: #d6ecde; }
@media (max-width: 750px) {
.stats { grid-template-columns: repeat(3, 1fr); }
.stat { min-height: 72px; }
.stamp { display: none; }
}
@media (max-width: 410px) {
.stats { grid-template-columns: repeat(2, 1fr); }
.bottom { align-items: flex-start; }
}
</style>
</head>
<body>
<main>
<header>
<div class="brand">
<div class="mark" aria-hidden="true">✳</div>
<div>
<h1>STARBEANS</h1>
<div class="subtitle">NEON UNICORN INCIDENT SIMULATOR</div>
</div>
</div>
<div class="stamp">PROMOTION TERMS SUBJECT TO STRUCTURAL INTEGRITY</div>
</header>
<section class="stats" aria-label="Live statistics">
<div class="stat"><div class="label">Customers served</div><div class="value" id="served">0</div><div class="small">one drink each</div></div>
<div class="stat"><div class="label">Neon produced</div><div class="value" id="produced">0</div><div class="small">independent rolls</div></div>
<div class="stat"><div class="label">Observed / true</div><div class="value" id="rate">—</div><div class="small">true rate: 16.67%</div></div>
<div class="stat"><div class="label">Catastrophes</div><div class="value" id="events">0</div><div class="small">insurance declined</div></div>
<div class="stat"><div class="label">Neons inside</div><div class="value" id="inside">0</div><div class="small">three is too many</div></div>
<div class="stat"><div class="label">Mundane saves</div><div class="value" id="saves">0</div><div class="small">normal rolls with two inside</div></div>
</section>
<div class="scene">
<canvas id="world" width="1200" height="680" role="img"
aria-label="Animated coffee shop. Customers queue outside, collect drinks inside and leave. Three neon drinks inside cause a unicorn catastrophe."></canvas>
</div>
<div class="bottom">
<div class="status" id="status"><span class="lamp"></span><span id="statusText">NORMAL OPERATIONS, ALLEGEDLY</span></div>
<div class="controls">
<label for="speed">Simulation speed</label>
<input id="speed" type="range" min="1" max="20" value="1">
<output id="speedValue" for="speed">1×</output>
<button id="pause" type="button">Pause</button>
</div>
</div>
<div class="foot">
<span><strong>Rules:</strong> Each sale rolls once: <strong>Math.random() < 1/6</strong>. Three neon drinks inside trigger the event.</span>
<span id="footCount">Outside queue: 10 · Inside: 0 · Escaped disasters: 0</span>
</div>
</main>
<script>
(() => {
"use strict";
const canvas = document.getElementById("world");
const ctx = canvas.getContext("2d");
const $ = id => document.getElementById(id);
const ui = {
served: $("served"), produced: $("produced"), rate: $("rate"),
events: $("events"), inside: $("inside"), saves: $("saves"),
status: $("status"), statusText: $("statusText"),
foot: $("footCount"), speed: $("speed"), speedValue: $("speedValue"),
pause: $("pause")
};
const DPR = Math.min(window.devicePixelRatio || 1, 2);
canvas.width = Math.round(1200 * DPR);
canvas.height = Math.round(680 * DPR);
ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
const TAU = Math.PI * 2;
const colors = ["#f2bf9d", "#c5dbeb", "#edc3e0", "#e6d696", "#b7d6b3", "#d5b9ef"];
const rainbow = ["#ff65b6", "#ffb35c", "#fff481", "#80f5a9", "#6de8ff", "#b78aff"];
let people = [];
let walkers = [];
let debris = [];
let waiting = 10; // Opening queue; no drinks or dice rolls are pre-generated.
let nextId = 0;
let served = 0, produced = 0, events = 0, saves = 0, evacuated = 0;
let arrival = 1.3, admission = 0, service = 1.2;
let simTime = 0, visualTime = 0, eventTime = -1, accumulator = 0;
let speed = 1, paused = false, frame = 0;
const neonInside = () => people.filter(p => p.neon && (p.state === "holding" || p.state === "leaving")).length;
const fmt = n => n.toLocaleString();
function rect(x, y, w, h, fill) {
ctx.fillStyle = fill;
ctx.fillRect(x, y, w, h);
}
function box(x, y, w, h, r, fill, stroke, lineWidth = 1) {
ctx.beginPath();
ctx.roundRect(x, y, w, h, r);
if (fill) { ctx.fillStyle = fill; ctx.fill(); }
if (stroke) { ctx.lineWidth = lineWidth; ctx.strokeStyle = stroke; ctx.stroke(); }
}
function circle(x, y, r, fill, stroke, lineWidth = 1) {
ctx.beginPath(); ctx.arc(x, y, r, 0, TAU);
if (fill) { ctx.fillStyle = fill; ctx.fill(); }
if (stroke) { ctx.lineWidth = lineWidth; ctx.strokeStyle = stroke; ctx.stroke(); }
}
function line(points, color, width = 2) {
ctx.beginPath();
ctx.moveTo(points[0][0], points[0][1]);
for (let i = 1; i < points.length; i++) ctx.lineTo(points[i][0], points[i][1]);
ctx.strokeStyle = color; ctx.lineWidth = width; ctx.stroke();
}
function text(s, x, y, size = 15, color = "#eff9ef", align = "left", weight = 700) {
ctx.fillStyle = color;
ctx.font = `${weight} ${size}px system-ui, sans-serif`;
ctx.textAlign = align;
ctx.fillText(s, x, y);
}
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
const mix = (a, b, t) => a + (b - a) * t;
function makePerson() {
const id = ++nextId;
return {
id, x: 363, y: 506, tx: 445, ty: 410, color: colors[id % colors.length],
state: "queued", neon: false, held: 0, bob: id * 1.31
};
}
function triggerEvent() {
// This function is called ONLY when the count actually reaches three.
events++;
evacuated += people.length;
eventTime = 0;
people = []; // Evacuate the room; no drinks are secretly re-rolled.
accumulator = 0;
debris = [];
for (let i = 0; i < 125; i++) {
const a = Math.random() * TAU, v = 75 + Math.random() * 340;
debris.push({
x: 714 + (Math.random() - .5) * 280,
y: 334 + (Math.random() - .5) * 160,
vx: Math.cos(a) * v, vy: Math.sin(a) * v - 105,
size: 3 + Math.random() * 15,
color: i % 3 === 0 ? rainbow[i % 6] : ["#305448", "#ddc59b", "#74917b"][i % 3],
angle: Math.random() * TAU, spin: (Math.random() - .5) * 11
});
}
syncUI();
}
function servePerson(p) {
// The sole promotion roll. Visual randomness and customer timing never touch its odds.
const neon = Math.random() < 1 / 6;
const before = neonInside();
served++;
if (neon) produced++;
else if (before === 2) saves++;
p.state = "holding";
p.neon = neon;
p.held = 0;
p.tx = 750 + (p.id % 3) * 91;
p.ty = 451 + (Math.floor(p.id / 3) % 2) * 60;
if (neon && neonInside() >= 3) triggerEvent();
syncUI();
}
function updateSim(dt) {
simTime += dt;
arrival -= dt;
while (arrival <= 0) {
waiting++;
arrival += 2.05; // Demand, not a promotion or event timer.
}
admission -= dt;
if (people.length < 8 && waiting > 0 && admission <= 0) {
waiting--;
people.push(makePerson());
admission = .43;
}
const queued = people.filter(p => p.state === "queued").sort((a, b) => a.id - b.id);
queued.forEach((p, i) => {
p.tx = i === 0 ? 656 : 604 - (i - 1) * 52;
p.ty = i === 0 ? 378 : 412;
});
for (const p of people) {
if (p.state === "holding") {
p.held += dt;
if (p.held >= 8.25) {
p.state = "leaving";
p.tx = 1050; p.ty = 504;
}
}
const follow = Math.min(1, dt * (p.state === "leaving" ? 3.6 : 4.5));
p.x += (p.tx - p.x) * follow;
p.y += (p.ty - p.y) * follow;
if (p.state === "leaving" && p.x > 1016) {
p.state = "outside";
walkers.push({ x: p.x, y: p.y, color: p.color, neon: p.neon, age: 0 });
}
}
people = people.filter(p => p.state !== "outside");
for (const w of walkers) { w.age += dt; w.x += dt * 83; }
walkers = walkers.filter(w => w.age < 2.3);
service = Math.max(0, service - dt);
const first = people.filter(p => p.state === "queued").sort((a, b) => a.id - b.id)[0];
if (first && first.x > 633 && service <= 0) {
service = 2; // One service opportunity every two simulated seconds.
servePerson(first);
}
}
function updateEvent(dt) {
// Playback uses wall time so a 20× viewer can actually see the catastrophe.
// Normal shop simulation is frozen during playback.
eventTime += dt;
for (const d of debris) {
d.x += d.vx * dt; d.y += d.vy * dt;
d.vy += 320 * dt; d.vx *= Math.max(0, 1 - dt * .36);
d.angle += d.spin * dt;
}
if (eventTime >= 5.1) {
eventTime = -1;
debris = [];
admission = 0;
service = .5;
syncUI();
}
}
function syncUI() {
ui.served.textContent = fmt(served);
ui.produced.textContent = fmt(produced);
ui.rate.textContent = served ? (100 * produced / served).toFixed(1) + "%" : "—";
ui.events.textContent = fmt(events);
const n = neonInside();
ui.inside.textContent = n;
ui.saves.textContent = fmt(saves);
ui.foot.textContent = `Outside queue: ${fmt(waiting)} · Inside: ${people.length} / 8 · Evacuated: ${fmt(evacuated)}`;
ui.status.className = "status " + (eventTime >= 0 ? "event" : n === 2 ? "danger" : n === 1 ? "warn" : "");
ui.statusText.textContent = eventTime >= 0 ? "NEON UNICORN EVENT · PLEASE REMAIN CALM-ISH"
: n === 2 ? "TWO INSIDE · REALITY REQUESTS A MANAGER"
: n === 1 ? "ONE INSIDE · THE LIGHTS ARE PROBABLY FINE"
: "NORMAL OPERATIONS, ALLEGEDLY";
}
function drawBackdrop() {
const bg = ctx.createLinearGradient(0, 0, 0, 680);
bg.addColorStop(0, "#203d39"); bg.addColorStop(.72, "#142a27"); bg.addColorStop(1, "#142322");
rect(0, 0, 1200, 680, bg);
circle(102, 112, 55, "#f8e1a222");
for (let i = 0; i < 11; i++) {
const x = i * 125 - 33, h = 55 + (i * 53 % 90);
rect(x, 184 - h, 97, h + 260, i % 2 ? "#1b3432" : "#1b3935");
for (let j = 0; j < 3; j++)
rect(x + 15 + j * 27, 203 - h, 10, 13, "#e6c88827");
}
rect(0, 560, 1200, 120, "#24352e");
rect(0, 566, 1200, 3, "#7b796050");
for (let i = 0; i < 10; i++) rect(i * 138 + 22, 645, 72, 3, "#aaa38a38");
text("THE LINE STARTS HERE", 43, 384, 13, "#a4d4bc");
line([[70, 396], [252, 396], [282, 426]], "#789e89", 2);
text("⇢", 280, 431, 25, "#a4d4bc");
}
function drawQueue() {
const count = Math.min(waiting, 20);
for (let i = count - 1; i >= 0; i--) {
const row = Math.floor(i / 5), col = i % 5;
const x = 283 - col * 49, y = 513 + row * 42;
drawCustomer(x, y, colors[(i + nextId + 2) % colors.length], false, .8, 0);
}
if (waiting > 20) {
box(32, 586, 172, 29, 7, "#122b25", "#789e89");
text(`+ ${fmt(waiting - 20)} more in line`, 118, 606, 12, "#d6ecde", "center");
}
text(`WAITING: ${fmt(waiting)}`, 48, 477, 15, "#e5f6e6");
}
function drawShop(n, t) {
const event = eventTime >= 0;
const collapse = event ? clamp((eventTime - .16) / .8, 0, 1) : 0;
const rebuilt = event ? clamp((eventTime - 3.65) / .95, 0, 1) : 1;
const intact = event ? (1 - collapse) + rebuilt * collapse : 1;
const shake = !event && n === 2 ? Math.sin(t * 66) * 2.5 : 0;
const wrong = !event && n > 0;
const pulse = .5 + .5 * Math.sin(t * (n === 2 ? 14 : 4));
const aura = event ? "#ff52c5" : n === 2 ? "#ff5cb2" : "#8bf5bd";
if (wrong || event) {
ctx.save();
ctx.shadowBlur = event ? 85 : n === 2 ? 54 : 27;
ctx.shadowColor = aura;
box(344, 142, 673, 420, 13, event ? "#eb55de33" : n === 2 ? "#ff55d428" : "#76ffc014");
ctx.restore();
}
// The floor stays after the roof has made its regrettable decision.
box(343, 401, 672, 167, 8, "#8e967b", "#aac1a1", 3);
for (let i = 0; i < 10; i++) line([[347 + i * 67, 482], [347 + i * 67, 566]], "#697b68", 1);
line([[344, 482], [1014, 482]], "#697b68", 2);
line([[344, 526], [1014, 526]], "#697b68", 2);
ctx.save();
ctx.globalAlpha = clamp(intact, 0, 1);
ctx.translate(shake, collapse * 95 * (1 - rebuilt));
box(344, 174, 671, 286, 7, "#d9d2aa", "#0c2b22", 8);
box(353, 184, 653, 265, 3, "#b9c9ad", "#315d46", 3);
// Windows, counter and improbable interior decor.
box(369, 261, 212, 183, 5, "#233d40", "#496d62", 5);
box(594, 261, 396, 183, 5, "#2a4140", "#496d62", 5);
for (let i = 0; i < 4; i++)
box(613 + i * 88, 274, 77, 157, 2, i % 2 ? "#3c6259" : "#345951", "#628575");
box(592, 326, 140, 57, 5, "#755647", "#402e2d", 3);
rect(596, 327, 133, 10, "#d6a978");
box(647, 301, 33, 28, 4, "#25372d", "#a9cdb2");
text("ORDER", 666, 320, 9, "#b8f3cc", "center");
box(376, 286, 180, 73, 4, "#254636", "#9eb99d", 2);
text("FRAPPUCCINO", 465, 310, 14, "#def2d6", "center");
text("BUY ONE · TEMPT FATE", 465, 336, 11, "#c4d9bf", "center");
// Sign and roof.
box(335, 142, 687, 107, 7, "#17513c", "#0d3226", 7);
rect(340, 240, 677, 12, "#0b3428");
circle(401, 195, 32, "#e5f0d1");
text("✳", 401, 206, 33, "#176045", "center");
text("STARBEANS", 455, 211, 47, "#edf5db", "left", 850);
text("COFFEE & OTHER CONSEQUENCES", 459, 231, 10, "#c9e5ca", "left", 800);
if (wrong) {
ctx.save();
ctx.globalAlpha = .13 + pulse * (n === 2 ? .62 : .20);
ctx.shadowColor = aura; ctx.shadowBlur = 24;
box(338, 146, 680, 100, 6, null, aura, n === 2 ? 8 : 4);
ctx.restore();
}
ctx.restore();
// The entrance remains passable until it emphatically does not.
if (!event) {
box(345, 448, 72, 105, 3, "#28423b", "#d0d6b2", 3);
rect(402, 456, 7, 89, "#a3bdab");
text("IN", 383, 476, 11, "#e1eed2", "center");
box(995, 448, 48, 106, 3, "#304d40", "#d0d6b2", 3);
text("OUT", 1019, 478, 10, "#e1eed2", "center");
}
if (n === 2 && !event) {
ctx.save();
ctx.globalAlpha = .15 + .38 * pulse;
rect(343, 144, 672, 6, "#faff9c");
rect(343, 438, 672, 4, "#ff63d9");
for (let i = 0; i < 15; i++) {
const x = 365 + (i * 97 + t * 24) % 620;
circle(x, 167 + (i * 73 % 235), 2 + i % 3, rainbow[i % 6]);
}
ctx.restore();
}
text("CAPACITY 8", 860, 555, 11, "#213a2c");
}
function drawDrink(x, y, neon, t, scale = 1) {
ctx.save(); ctx.translate(x, y); ctx.scale(scale, scale);
if (neon) {
ctx.shadowColor = rainbow[Math.floor(t * 5) % 6];
ctx.shadowBlur = 20;
circle(0, 0, 15 + Math.sin(t * 9) * 2, "#fd71e421");
}
box(-8, -4, 16, 19, 3, neon ? "#e67aff" : "#caa876", "#f7eed3", 1.5);
rect(-10, -6, 20, 4, "#e9f1d9");
line([[2, -6], [7, -18]], neon ? "#7cffff" : "#e9f1d9", 2);
if (neon) {
for (let i = 0; i < 3; i++)
circle(Math.sin(t * 5 + i * 2) * 15, -13 - i * 7 - Math.cos(t * 4 + i) * 4,
2.2, rainbow[(i + Math.floor(t * 3)) % 6]);
}
ctx.restore();
}
function drawCustomer(x, y, color, neon, scale, t) {
ctx.save(); ctx.translate(x, y); ctx.scale(scale, scale);
ctx.globalAlpha = .3; circle(0, 15, 15, "#071813"); ctx.globalAlpha = 1;
circle(0, 2, 13, color, "#172b29", 2);
circle(-4, 0, 1.5, "#263830"); circle(4, 0, 1.5, "#263830");
if (neon) drawDrink(16, 4, true, t, .78);
ctx.restore();
}
function drawPeople(t) {
for (const p of people) {
if (p.neon) {
ctx.save();
ctx.shadowColor = "#f072ef"; ctx.shadowBlur = 26;
circle(p.x, p.y, 19 + Math.sin(t * 9 + p.bob) * 2, "#ff80f322");
ctx.restore();
}
drawCustomer(p.x, p.y + Math.sin(t * 5 + p.bob) * 1.1, p.color, p.neon, 1, t);
}
for (const w of walkers) {
ctx.globalAlpha = clamp((2.3 - w.age) / .7, 0, 1);
drawCustomer(w.x, w.y + Math.sin(t * 6) * 2, w.color, w.neon, 1, t);
ctx.globalAlpha = 1;
}
}
function drawUnicorn(t) {
const dance = Math.sin(t * 10), bounce = Math.abs(Math.sin(t * 5)) * 15;
const x = 724 + dance * 21, y = 340 - bounce;
ctx.save();
ctx.translate(x, y);
ctx.rotate(Math.sin(t * 5) * .095);
ctx.shadowColor = rainbow[Math.floor(t * 9) % 6];
ctx.shadowBlur = 48;
// Tail: five geometric ribbons, not a sprite.
for (let i = 0; i < 5; i++) {
line([[70, -16], [118 + Math.sin(t * 8 + i) * 17, -73 + i * 23],
[154 + Math.sin(t * 7 + i) * 25, -111 + i * 27]], rainbow[i], 13);
}
// Dancing legs.
for (let i = 0; i < 4; i++) {
const ox = i < 2 ? -53 : 46, phase = t * 8 + i * 2.1;
const ly = 76 + Math.sin(phase) * 24;
line([[ox, 35], [ox + Math.sin(phase) * 18, ly], [ox + Math.sin(phase) * 35, ly + 51]],
i % 2 ? "#a4faff" : "#ff83e0", 24);
box(ox - 16 + Math.sin(phase) * 35, ly + 39, 38, 13, 5, "#eaff81");
}
// Body, neck, face.
ctx.beginPath(); ctx.ellipse(0, 0, 91, 61, 0, 0, TAU);
ctx.fillStyle = "#eea3ff"; ctx.fill(); ctx.lineWidth = 5; ctx.strokeStyle = "#7dfff2"; ctx.stroke();
box(-66, -81, 51, 105, 22, "#ffa8ee", "#72fff2", 5);
ctx.beginPath(); ctx.ellipse(-55, -92, 48, 35, -.14, 0, TAU);
ctx.fillStyle = "#ffd6fb"; ctx.fill(); ctx.lineWidth = 4; ctx.strokeStyle = "#78fff0"; ctx.stroke();
// Horn is deliberately enormous.
ctx.beginPath(); ctx.moveTo(-83, -115); ctx.lineTo(-49, -226); ctx.lineTo(-33, -116);
ctx.closePath(); ctx.fillStyle = "#fff37f"; ctx.fill(); ctx.strokeStyle = "#ff68cc"; ctx.stroke();
for (let i = 0; i < 5; i++)
line([[-87 + i * 11, -119 + i * 4], [-12 + i * 9, -106 + i * 7]],
rainbow[i], 12);
circle(-69, -96, 5, "#2c234b");
circle(-71, -98, 1.8, "#fff");
circle(-96, -82, 7, "#fe75ae");
text("✳", 8, 15, 49, "#fff784", "center");
ctx.restore();
}
function drawCatastrophe(t) {
const e = eventTime;
const blast = clamp(1 - Math.abs(e - .35) / .35, 0, 1);
if (blast > 0) {
ctx.fillStyle = `rgba(255,238,251,${blast * .72})`;
ctx.fillRect(0, 0, 1200, 680);
}
ctx.save();
ctx.globalCompositeOperation = "screen";
for (let i = 0; i < 8; i++) {
const a = i * TAU / 8 + t * .12;
line([[717, 353], [717 + Math.cos(a) * (270 + e * 18),
353 + Math.sin(a) * (220 + e * 13)]], rainbow[i % 6], 3 + (i % 3));
}
ctx.restore();
for (const d of debris) {
ctx.save(); ctx.translate(d.x, d.y); ctx.rotate(d.angle);
rect(-d.size / 2, -d.size / 2, d.size, d.size * .64, d.color);
ctx.restore();
}
if (e > .33 && e < 4.75) drawUnicorn(t);
ctx.save();
ctx.textAlign = "center";
ctx.shadowColor = "#ff5ed5"; ctx.shadowBlur = 30;
text("NEON UNICORN EVENT", 600 + Math.sin(t * 22) * 3, 79,
48, rainbow[Math.floor(t * 7) % 6], "center", 950);
ctx.shadowBlur = 0;
text(e < 3.6 ? "WE REGRET THE PROMOTION" : "REBUILDING. AGAIN.",
600, 111, 16, "#fff9e5", "center", 850);
ctx.restore();
if (e > 3.6) {
const a = clamp((e - 3.6) / 1.15, 0, 1);
box(424, 589, 354, 12, 5, "#14291e", "#dcffe5", 1);
box(428, 592, 346 * a, 6, 3, "#89f6b0");
text("AUTOMATED REBUILD CREW", 601, 624, 12, "#dbf1d9", "center");
}
}
function draw() {
const t = visualTime;
const n = neonInside();
ctx.clearRect(0, 0, 1200, 680);
drawBackdrop();
drawShop(n, t);
drawQueue();
drawPeople(t);
if (eventTime >= 0) drawCatastrophe(t);
if (eventTime < 0 && n === 2) {
ctx.save();
ctx.globalAlpha = .08 + .08 * Math.sin(t * 16);
rect(0, 0, 1200, 680, "#ff5cef");
ctx.restore();
}
box(1038, 153, 125, 60, 9, "#112820d9", "#638977");
text("INSIDE", 1054, 176, 11, "#a9c7b1");
text(`${people.length} / 8`, 1053, 201, 23, "#f0f7e8");
}
ui.speed.addEventListener("input", () => {
speed = Number(ui.speed.value);
ui.speedValue.textContent = `${speed}×`;
});
ui.pause.addEventListener("click", () => {
paused = !paused;
ui.pause.textContent = paused ? "Resume" : "Pause";
});
let last = performance.now();
function loop(now) {
const realDt = Math.min((now - last) / 1000, .06);
last = now;
if (!paused) {
visualTime += realDt;
if (eventTime >= 0) {
updateEvent(realDt);
} else {
accumulator += realDt * speed;
let steps = 0;
while (accumulator >= .025 && steps++ < 50 && eventTime < 0) {
updateSim(.025);
accumulator -= .025;
}
if (eventTime >= 0) accumulator = 0;
// Avoid an endless catch-up spiral if the browser throttles the tab.
if (steps >= 50) accumulator = Math.min(accumulator, .025);
}
if (++frame % 12 === 0) syncUI();
}
draw();
requestAnimationFrame(loop);
}
syncUI();
requestAnimationFrame(loop);
})();
</script>
</body>
</html>
What it actually does
The opening queue feeds a counter that rolls once per sale. Ordinary drinks leave quietly; one neon drink adds a glow, two make the shop shake and flash, and the third simultaneously inside triggers the collapse and dancing unicorn. The room is evacuated, rebuilt, and reopened while the counters keep their history. Speed goes to 20×, but the catastrophe plays at real-time speed so it remains watchable.
I tuned the two-second service interval, roughly nine-second drink occupancy, arrival rate, eight-person cap, opening queue, and five-second rebuild animation. I did not nudge the 1-in-6 roll or schedule an event. The opening queue is prepopulated, not pre-rolled. It does badly at depicting a very long queue: after 20 dots, it compresses the remainder into a count. The estimate above is only an estimate; long dry spells and clusters are expected.
Attachments
openai/gpt-6-sol-pro — page