Run Detail

completednemotron-3.5-super-vl:free

30bad

Every model's answer from this round

Recorded for these videos

27:18

Gemini 4 Hydrogen: Cheaper Tokens, More Expensive Answers?

Nov 13, 2026 · YouTube

18:40

ERNIE 5.5 Flash Preview vs GLM 5.3 Flash: Baidu's new model is very impressive!

Nov 11, 2026 · YouTube

36:22

Fable 5.2 robbing me blind, plus: Nex AGI's N2.6 vs GLM 5.3 Flash

Nov 11, 2026 · YouTube

14:03

Gemini 4 Carbon: Can it handle my challenges? (First look with one-shot coding tests)

Nov 10, 2026 · YouTube

47:51

Ranking 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:58

Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency

Oct 28, 2026 · YouTube

22:14

GPT-6.1 Terra Pro vs Terra: How Much Better Is Pro?

Oct 27, 2026 · YouTube

29:55

Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.

Oct 26, 2026 · YouTube

31:28

Is this company reselling GPT Sol 6.1 at a loss (for non-agentic/text-only)?🤔 Is this sustainable?

Oct 20, 2026 · YouTube

17:58

Nemotron 3.5 Super VL vs Opus 5.5: Testing NVIDIA’s new coding juggernaut

Oct 15, 2026 · YouTube

16:04

Testing a *massive* new open-weights model 🤯: Muse Spark Open (vs. Nemotron, Opus 5.5, and more)

Oct 15, 2026 · YouTube

16:43

Gemini 4 Argon: Great 🐈 Animation, but a broken escalator. (Coding challenge vs Opus 5.5, Sol 6.1)

Oct 13, 2026 · YouTube

16:37

Meta's new "Muse Wonder" AI is impressive... but can it compete with Anthropic's models?

Oct 12, 2026 · YouTube

11:12

WOW... Haiku 5.5 is very impressive. RIP OpenAI?

Oct 7, 2026 · YouTube

22:47

Mistral Large 4 Is Cheap. But Is It Good Enough to Compete?

Oct 6, 2026 · YouTube

22:02

Is Pareto 26.10 Preview Just Routing to GPT Sol? I Tested It Against Sol 6.1 Pro

Oct 1, 2026 · YouTube

11:22

I Tested Sonnet 5.5 Against Opus 5.5. Is It Actually Cheaper?

Sep 28, 2026 · YouTube

Provider

openrouter

Challenge Version

v1.0

Turns

Duration

106.2s

Total Tokens

32,885

Input Tokens

667

Output Tokens

32,218

Reasoning Tokens

24,598

Reasoning Effort

default

Est. Cost

$0.0000

Started

10/15/2026, 3:50:40 PM

OR Provider

Nvidia

Finish Reason

stop

Generation ID

gen-1792079440-mG9r48OtgTlNQCSuCkRn

Turns (1)

Turn #1

667 in32,218 out24,598 reasoning32,885 total106.2s

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 or indexedDB — sandboxed frame, they throw.
Return the file as exactly one fenced html block.

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

With the shop capped at eight customers inside, a new customer entering roughly every one to two seconds once the line is full, each drink held for about six seconds, and an independent 1-in-6 roll per drink, the mean number of Neon Unicorn holders active at once hovers around 1.0–1.3. Treating concurrent unicorns as a Poisson process with λ ≈ 1, the chance of seeing three or more at any instant is only about 8%, and the event requires the transition into three—two unicorns already alive when a third drink is rolled. At full tilt a unicorn drink appears roughly every six to ten seconds, so you need two to survive their six-second hold while a third is rolled. That works out to roughly one catastrophe per 70–120 customers served, or about every three to five minutes at normal speed; the true variance is high because the die has no memory, so you can go ten minutes without one or get two events in quick succession if the dice cluster.

The page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Unicorn Frappuccino Shop</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: #0b0b10; color: #eee; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; overflow: hidden; }
  #canvas { display: block; width: 100vw; height: 100vh; background: linear-gradient(#141420, #0a0a0f); }
  #ui { position: absolute; top: 12px; left: 12px; pointer-events: none; width: 300px; }
  #ui > * { pointer-events: auto; }
  .panel { background: rgba(0,0,0,0.65); border: 2px solid #2a2a40; border-radius: 8px; padding: 10px; margin-bottom: 8px; backdrop-filter: blur(6px); }
  .panel h2 { margin: 0 0 7px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #ffd166; }
  .stat { font-size: 12.5px; display: flex; justify-content: space-between; margin: 2.5px 0; }
  .stat .val { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
  .stat .val.warn { color: #ff9ff3; }
  .stat .val.danger { color: #ff4d4d; animation: blink 0.6s infinite; }
  @keyframes blink { 50% { opacity: 0.5; } }
  .controls { margin-top: 6px; }
  .controls label { font-size: 11px; display: block; margin-bottom: 4px; }
  .controls input[type=range] { width: 100%; cursor: pointer; accent-color: #ff4d4d; }
  .speed-pills { display: flex; gap: 5px; margin-top: 5px; }
  .speed-pills button { flex: 1; padding: 3px 5px; font-size: 10px; background: #1a1a2e; border: 1px solid #3a3a50; color: #ccc; border-radius: 4px; cursor: pointer; }
  .speed-pills button.active { background: #ff4d4d; border-color: #ff4d4d; color: #fff; }
  #event-banner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; display: none; }
  #event-banner h1 { font-size: 56px; text-transform: uppercase; color: #ff00ff; text-shadow: 0 0 15px #ff00ff, 0 0 30px #00ffff, 0 0 60px #ff00ff; margin: 0; animation: shake 0.15s infinite; }
  @keyframes shake { 0% { transform: translate(-50%, -50%) rotate(-2deg); } 50% { transform: translate(-50%, -50%) rotate(2deg); } 100% { transform: translate(-50%, -50%) rotate(-2deg); } }
  .small { font-size: 10.5px; color: #888; margin-top: 5px; line-height: 1.4; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="ui">
  <div class="panel">
    <h2>Live Statistics</h2>
    <div class="stat"><span>Customers served</span><span class="val" id="stat-served">0</span></div>
    <div class="stat"><span>Neon Unicorns made</span><span class="val" id="stat-neon">0</span></div>
    <div class="stat"><span>Observed unicorn rate</span><span class="val" id="stat-rate">0.00%</span></div>
    <div class="stat"><span>True rate</span><span class="val">16.67%</span></div>
    <div class="stat"><span>Catastrophes</span><span class="val" id="stat-cat">0</span></div>
    <div class="stat"><span>Inside shop</span><span class="val" id="stat-inside">0</span> / 8</div>
    <div class="stat"><span>Unicorns inside</span><span class="val" id="stat-unicorns-inside">0</span></div>
    <div class="stat"><span>Waiting outside</span><span class="val" id="stat-waiting">0</span></div>
    <div class="stat"><span>Peak unicorns inside</span><span class="val" id="stat-peak">0</span></div>
  </div>
  <div class="panel">
    <h2>Simulation Speed</h2>
    <div class="controls">
      <label>Speed <span id="speed-label">1×</span></label>
      <input type="range" id="speed" min="1" max="20" step="1" value="1">
      <div class="speed-pills">
        <button data-speed="1">1×</button>
        <button data-speed="2">2×</button>
        <button data-speed="5">5×</button>
        <button data-speed="10">10×</button>
        <button data-speed="20">20×</button>
      </div>
    </div>
  </div>
  <div class="panel">
    <h2>Shop Status</h2>
    <div class="stat"><span>Status</span><span class="val" id="stat-status">Open</span></div>
    <div class="small">Every drink is an independent 1-in-6 roll. No timers, no quotas, no scripted disaster.</div>
  </div>
</div>
<div id="event-banner"><h1 id="event-text">NEON UNICORN EVENT</h1></div>

<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d', { alpha: false });
let width, height;

function resize() {
  width = canvas.width = window.innerWidth;
  height = canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();

const SHOP = { x: 0, y: 0, w: 340, h: 220, doorX: 0, doorY: 0, counterX: 0, counterY: 0 };
function updateShopGeometry() {
  SHOP.x = width * 0.55;
  SHOP.y = height * 0.5;
  SHOP.w = Math.min(340, width * 0.5);
  SHOP.h = Math.min(220, height * 0.6);
  SHOP.doorX = SHOP.x - 10;
  SHOP.doorY = SHOP.y + SHOP.h * 0.4;
  SHOP.counterX = SHOP.x + SHOP.w - 45;
  SHOP.counterY = SHOP.y + SHOP.h * 0.5;
}
updateShopGeometry();

const MAX_INSIDE = 8;
const BASE_ARRIVAL_INTERVAL = 2.5;
const SERVICE_TIME = 1.0;
const HOLD_TIME = 6.0;
const UNICORN_CHANCE = 1 / 6;

let speed = 1;
let paused = false;
let time = 0;
let customers = [];
let particles = [];
let beast = null;
let catastrophe = false;
let catastropheTime = 0;
const CATASTROPHE_DURATION = 9;

let stats = {
  served: 0,
  neonMade: 0,
  catastrophes: 0,
  inside: 0,
  waiting: 0,
  unicornsInside: 0,
  peakUnicornsInside: 0,
  totalEntered: 0,
  totalLeft: 0
};

let arrivalTimer = 0;

function rand(min, max) { return Math.random() * (max - min) + min; }
function chance(p) { return Math.random() < p; }

function getFirstWaiting() {
  for (let c of customers) if (c.state === 'WAITING_OUTSIDE') return c;
  return null;
}
function someoneAtCounter() {
  for (let c of customers) if (c.state === 'AT_COUNTER') return true;
  return false;
}

class Customer {
  constructor() {
    this.state = 'WAITING_OUTSIDE';
    this.x = -60;
    this.y = 0;
    this.targetX = -60;
    this.targetY = 0;
    this.speed = rand(45, 75);
    this.radius = 7;
    this.hasDrink = false;
    this.isUnicorn = false;
    this.drinkColor = '#d4a373';
    this.timer = 0;
    this.lineIndex = 0;
    this.angle = 0;
    this.panic = false;
  }

  spawn() {
    this.state = 'WAITING_OUTSIDE';
    this.hasDrink = false;
    this.isUnicorn = false;
    this.drinkColor = '#d4a373';
    this.timer = 0;
    this.panic = false;
    this.lineIndex = stats.waiting;
    this.x = -60 - Math.random() * 50;
    this.y = SHOP.doorY + (this.lineIndex % 5) * 16 - 32;
    this.targetX = -60;
    this.targetY = this.y;
    stats.waiting++;
    stats.totalEntered++;
  }

  update(dt) {
    if (catastrophe && this.state !== 'GONE' && this.state !== 'WAITING_OUTSIDE' && this.state !== 'OUTSIDE_LEAVING') {
      if (!this.panic) {
        this.panic = true;
        this.state = 'LEAVING';
        this.targetX = SHOP.doorX + 10;
        this.targetY = SHOP.doorY;
        this.speed *= 2.2;
      }
      this.move(dt);
      if (Math.hypot(this.x - this.targetX, this.y - this.targetY) < 6) {
        if (this.state === 'LEAVING') {
          this.state = 'OUTSIDE_LEAVING';
          this.targetX = -100 - Math.random() * 80;
          this.targetY = SHOP.doorY + (Math.random() - 0.5) * 120;
        } else {
          this.leave();
        }
      }
      return;
    }

    this.timer += dt;

    switch (this.state) {
      case 'WAITING_OUTSIDE':
        this.targetX = -60;
        this.targetY = SHOP.doorY + (this.lineIndex % 5) * 16 - 32;
        this.move(dt);
        if (stats.inside < MAX_INSIDE && !catastrophe && this === getFirstWaiting()) {
          this.state = 'ENTERING';
          this.targetX = SHOP.doorX - 6;
          this.targetY = SHOP.doorY;
        }
        break;

      case 'ENTERING':
        this.move(dt);
        if (Math.hypot(this.x - this.targetX, this.y - this.targetY) < 4) {
          this.state = 'IN_LINE';
          const idx = stats.inside;
          this.targetX = SHOP.counterX - 55 - (idx % 4) * 15;
          this.targetY = SHOP.counterY - 38 + Math.floor(idx / 4) * 15;
          stats.inside++;
          stats.waiting--;
        }
        break;

      case 'IN_LINE':
        this.move(dt);
        if (Math.hypot(this.x - this.targetX, this.y - this.targetY) < 4) {
          if (!someoneAtCounter()) {
            this.state = 'AT_COUNTER';
            this.targetX = SHOP.counterX - 12;
            this.targetY = SHOP.counterY;
            this.timer = 0;
          }
        }
        break;

      case 'AT_COUNTER':
        this.move(dt);
        if (Math.hypot(this.x - this.targetX, this.y - this.targetY) < 4) {
          if (this.timer >= SERVICE_TIME) {
            this.serveDrink();
          }
        }
        break;

      case 'HOLDING_DRINK':
        this.move(dt);
        if (this.timer >= HOLD_TIME) {
          this.state = 'LEAVING';
          this.targetX = SHOP.doorX - 6;
          this.targetY = SHOP.doorY;
        }
        break;

      case 'LEAVING':
        this.move(dt);
        if (Math.hypot(this.x - this.targetX, this.y - this.targetY) < 5) {
          this.state = 'OUTSIDE_LEAVING';
          this.targetX = -100 - Math.random() * 80;
          this.targetY = SHOP.doorY + (Math.random() - 0.5) * 120;
        }
        break;

      case 'OUTSIDE_LEAVING':
        this.move(dt);
        if (Math.hypot(this.x - this.targetX, this.y - this.targetY) < 8) {
          this.leave();
        }
        break;
    }

    const dx = this.targetX - this.x;
    const dy = this.targetY - this.y;
    if (Math.abs(dx) > 0.1 || Math.abs(dy) > 0.1) {
      this.angle = Math.atan2(dy, dx);
    }
  }

  move(dt) {
    const dx = this.targetX - this.x;
    const dy = this.targetY - this.y;
    const dist = Math.hypot(dx, dy);
    if (dist < 0.5) return;
    const step = Math.min(dist, this.speed * dt);
    this.x += (dx / dist) * step;
    this.y += (dy / dist) * step;
  }

  serveDrink() {
    this.hasDrink = true;
    this.isUnicorn = chance(UNICORN_CHANCE);
    stats.served++;
    if (this.isUnicorn) {
      stats.neonMade++;
      stats.unicornsInside++;
      if (stats.unicornsInside > stats.peakUnicornsInside) stats.peakUnicornsInside = stats.unicornsInside;
      this.drinkColor = '#ff00ff';
      if (stats.unicornsInside >= 3 && !catastrophe) {
        triggerCatastrophe();
      }
    } else {
      this.drinkColor = Math.random() > 0.5 ? '#8B4513' : '#d4a373';
    }
    this.timer = 0;
    this.state = 'HOLDING_DRINK';
    this.targetX = SHOP.x + SHOP.w * 0.28 + rand(-45, 45);
    this.targetY = SHOP.y + SHOP.h * 0.42 + rand(-35, 35);
  }

  leave() {
    if (this.isUnicorn) stats.unicornsInside = Math.max(0, stats.unicornsInside - 1);
    stats.inside = Math.max(0, stats.inside - 1);
    stats.totalLeft++;
    this.state = 'GONE';
  }

  draw() {
    if (this.state === 'GONE') return;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);

    ctx.fillStyle = this.isUnicorn ? '#ffb7ff' : '#f3f3f3';
    ctx.beginPath();
    ctx.arc(0, 0, this.radius, 0, Math.PI * 2);
    ctx.fill();
    ctx.strokeStyle = '#222';
    ctx.lineWidth = 1;
    ctx.stroke();

    ctx.fillStyle = '#111';
    ctx.beginPath(); ctx.arc(-2, -2, 1.2, 0, Math.PI * 2); ctx.fill();
    ctx.beginPath(); ctx.arc(2, -2, 1.2, 0, Math.PI * 2); ctx.fill();

    if (this.hasDrink) {
      ctx.save();
      ctx.translate(0, this.radius + 5);
      ctx.fillStyle = this.drinkColor;
      ctx.beginPath(); ctx.arc(0, 0, 4, 0, Math.PI * 2); ctx.fill();
      ctx.strokeStyle = '#fff'; ctx.lineWidth = 1; ctx.stroke();
      ctx.fillStyle = '#fff';
      ctx.fillRect(-1, -7, 2, 7);
      if (this.isUnicorn) {
        ctx.shadowColor = this.drinkColor;
        ctx.shadowBlur = 12;
        ctx.strokeStyle = '#fff';
        ctx.beginPath(); ctx.arc(0, 0, 4, 0, Math.PI * 2); ctx.stroke();
      }
      ctx.restore();
    }

    if (this.isUnicorn) {
      ctx.fillStyle = '#ffff00';
      ctx.beginPath();
      ctx.moveTo(0, -this.radius);
      ctx.lineTo(-2, -this.radius - 7);
      ctx.lineTo(2, -this.radius);
      ctx.fill();
      ctx.shadowColor = '#ff00ff';
      ctx.shadowBlur = 10;
      ctx.strokeStyle = '#ff00ff';
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(0, -this.radius);
      ctx.lineTo(-2, -this.radius - 7);
      ctx.lineTo(2, -this.radius);
      ctx.stroke();
    }

    ctx.restore();
  }
}

class Particle {
  constructor(x, y, color, speed, life, size) {
    this.x = x; this.y = y;
    const a = rand(0, Math.PI * 2);
    this.vx = Math.cos(a) * speed;
    this.vy = Math.sin(a) * speed;
    this.color = color;
    this.life = life;
    this.maxLife = life;
    this.size = size;
  }
  update(dt) {
    this.x += this.vx * dt;
    this.y += this.vy * dt;
    this.vy += 25 * dt;
    this.life -= dt;
  }
  draw() {
    ctx.globalAlpha = this.life / this.maxLife;
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x - this.size / 2, this.y - this.size / 2, this.size, this.size);
    ctx.globalAlpha = 1;
  }
}

class UnicornBeast {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
    this.time = 0;
    this.scale = 0;
    this.parts = [];
    for (let i = 0; i < 36; i++) {
      this.parts.push({
        type: i < 6 ? 'leg' : i < 12 ? 'mane' : i < 18 ? 'body' : i < 24 ? 'head' : i < 30 ? 'tail' : 'horn',
        offsetX: rand(-50, 50),
        offsetY: rand(-50, 50),
        radius: rand(7, 20),
        phase: rand(0, Math.PI * 2),
        color: `hsl(${rand(280, 360)}, 100%, 60%)`
      });
    }
  }
  update(dt) {
    this.time += dt;
    if (this.scale < 1.4) this.scale += dt * 0.35;
  }
  draw() {
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.scale(this.scale, this.scale);
    ctx.shadowColor = '#ff00ff';
    ctx.shadowBlur = 25;
    for (let p of this.parts) {
      const t = this.time + p.phase;
      const ox = p.offsetX + Math.sin(t * 2.2) * 12;
      const oy = p.offsetY + Math.cos(t * 1.7) * 10;
      ctx.fillStyle = p.color;
      ctx.beginPath();
      ctx.arc(ox, oy, p.radius, 0, Math.PI * 2);
      ctx.fill();
      ctx.strokeStyle = '#fff';
      ctx.lineWidth = 2;
      ctx.stroke();
    }
    ctx.fillStyle = '#ffff00';
    ctx.beginPath();
    ctx.moveTo(0, -35);
    ctx.lineTo(-10, -70);
    ctx.lineTo(10, -35);
    ctx.fill();
    ctx.restore();
    ctx.shadowBlur = 0;
  }
}

function triggerCatastrophe() {
  catastrophe = true;
  catastropheTime = 0;
  stats.catastrophes++;
  beast = new UnicornBeast();
  document.getElementById('event-banner').style.display = 'block';
  const cx = SHOP.x + SHOP.w / 2;
  const cy = SHOP.y + SHOP.h / 2;
  for (let i = 0; i < 180; i++) {
    particles.push(new Particle(cx, cy, `hsl(${rand(280, 360)}, 100%, 60%)`, rand(60, 300), rand(0.6, 2.2), rand(2, 7)));
  }
}

function resetShop() {
  catastrophe = false;
  beast = null;
  catastropheTime = 0;
  document.getElementById('event-banner').style.display = 'none';
  for (let c of customers) {
    if (c.state !== 'WAITING_OUTSIDE' && c.state !== 'OUTSIDE_LEAVING' && c.state !== 'GONE') {
      c.leave();
    }
  }
  stats.unicornsInside = 0;
  stats.inside = 0;
  particles = [];
}

let last = performance.now();
function loop(now) {
  const dtRaw = (now - last) / 1000;
  last = now;
  if (!paused) {
    const dt = dtRaw * speed;
    time += dt;
    arrivalTimer += dt;

    while (arrivalTimer >= BASE_ARRIVAL_INTERVAL / speed) {
      arrivalTimer -= BASE_ARRIVAL_INTERVAL / speed;
      const c = new Customer();
      c.spawn();
      customers.push(c);
    }

    for (let c of customers) c.update(dt);
    customers = customers.filter(c => c.state !== 'GONE');

    for (let p of particles) p.update(dt);
    particles = particles.filter(p => p.life > 0);

    if (catastrophe) {
      catastropheTime += dt;
      if (beast) beast.update(dt);
      if (catastropheTime >= CATASTROPHE_DURATION) resetShop();
    }
  }

  draw();
  requestAnimationFrame(loop);
}

function draw() {
  ctx.fillStyle = '#0a0a0f';
  ctx.fillRect(0, 0, width, height);

  let shakeX = 0, shakeY = 0;
  let filter = '';

  if (stats.unicornsInside >= 1) {
    ctx.shadowColor = '#ff00ff';
    ctx.shadowBlur = 12 + Math.sin(time * 6) * 6;
  }
  if (stats.unicornsInside >= 2) {
    const flash = Math.floor(time * 18) % 2 === 0 ? '#ff00ff' : '#00ffff';
    ctx.strokeStyle = flash;
    ctx.lineWidth = 5;
    ctx.strokeRect(SHOP.x - 6, SHOP.y - 6, SHOP.w + 12, SHOP.h + 12);
    shakeX = (Math.random() - 0.5) * 8;
    shakeY = (Math.random() - 0.5) * 8;
    filter = `hue-rotate(${Math.sin(time * 12) * 40}deg) saturate(1.6)`;
  }
  if (catastrophe) {
    shakeX = (Math.random() - 0.5) * 24;
    shakeY = (Math.random() - 0.5) * 24;
    filter = `hue-rotate(${time * 70}deg) saturate(2.2) contrast(1.6)`;
  }

  ctx.save();
  ctx.translate(shakeX, shakeY);
  if (filter) ctx.filter = filter;

  ctx.fillStyle = '#12121e';
  ctx.fillRect(0, height * 0.72, width, height * 0.28);

  if (!catastrophe || catastropheTime < 1.6) {
    drawShop();
  }

  for (let c of customers) c.draw();

  if (!catastrophe) {
    ctx.fillStyle = 'rgba(255,255,255,0.06)';
    ctx.fillRect(SHOP.counterX - 28, SHOP.counterY - 28, 56, 56);
  }

  for (let p of particles) p.draw();
  if (catastrophe && beast) beast.draw();

  ctx.restore();
  ctx.shadowBlur = 0;
  ctx.filter = 'none';

  document.getElementById('stat-served').textContent = stats.served;
  document.getElementById('stat-neon').textContent = stats.neonMade;
  const rate = stats.served > 0 ? (stats.neonMade / stats.served * 100).toFixed(2) : '0.00';
  document.getElementById('stat-rate').textContent = rate + '%';
  document.getElementById('stat-cat').textContent = stats.catastrophes;
  document.getElementById('stat-inside').textContent = stats.inside;
  document.getElementById('stat-unicorns-inside').textContent = stats.unicornsInside;
  document.getElementById('stat-waiting').textContent = stats.waiting;
  document.getElementById('stat-peak').textContent = stats.peakUnicornsInside;

  const statusEl = document.getElementById('stat-status');
  if (catastrophe) {
    statusEl.textContent = 'CATASTROPHE';
    statusEl.className = 'val danger';
  } else if (stats.unicornsInside >= 2) {
    statusEl.textContent = 'UNSTABLE';
    statusEl.className = 'val warn';
  } else if (stats.unicornsInside === 1) {
    statusEl.textContent = 'GLIMMER';
    statusEl.className = 'val warn';
  } else {
    statusEl.textContent = 'Open';
    statusEl.className = '';
  }
}

function drawShop() {
  ctx.fillStyle = 'rgba(0,0,0,0.35)';
  ctx.fillRect(SHOP.x + 12, SHOP.y + 12, SHOP.w, SHOP.h);

  ctx.fillStyle = '#2a2a40';
  ctx.fillRect(SHOP.x, SHOP.y, SHOP.w, SHOP.h);

  ctx.fillStyle = '#161628';
  ctx.beginPath();
  ctx.moveTo(SHOP.x - 12, SHOP.y);
  ctx.lineTo(SHOP.x + SHOP.w / 2, SHOP.y - 34);
  ctx.lineTo(SHOP.x + SHOP.w + 12, SHOP.y);
  ctx.closePath();
  ctx.fill();

  ctx.fillStyle = '#111';
  ctx.fillRect(SHOP.doorX - 9, SHOP.doorY - 2, 18, 42);

  ctx.fillStyle = '#4a4a6a';
  ctx.fillRect(SHOP.x + 45, SHOP.y + 45, 52, 28);
  ctx.fillRect(SHOP.x + 45, SHOP.y + 95, 52, 28);

  ctx.fillStyle = '#3a3a50';
  ctx.fillRect(SHOP.counterX - 22, SHOP.counterY - 12, 44, 24);
  ctx.fillStyle = '#ffd166';
  ctx.fillRect(SHOP.counterX - 20, SHOP.counterY - 10, 40, 5);

  ctx.fillStyle = '#ff4d4d';
  ctx.fillRect(SHOP.x + SHOP.w / 2 - 34, SHOP.y - 14, 68, 12);
  ctx.fillStyle = '#fff';
  ctx.font = '11px sans-serif';
  ctx.textAlign = 'center';
  ctx.fillText('COFFEE', SHOP.x + SHOP.w / 2, SHOP.y - 4);
  ctx.textAlign = 'start';
}

const speedInput = document.getElementById('speed');
const speedLabel = document.getElementById('speed-label');
const pills = document.querySelectorAll('.speed-pills button');

function setSpeed(v) {
  speed = v;
  speedInput.value = v;
  speedLabel.textContent = v + '×';
  pills.forEach(b => b.classList.toggle('active', b.dataset.speed == v));
}

speedInput.addEventListener('input', (e) => setSpeed(parseInt(e.target.value, 10)));
pills.forEach(b => b.addEventListener('click', () => setSpeed(parseInt(b.dataset.speed, 10))));

for (let i = 0; i < 3; i++) {
  const c = new Customer();
  c.spawn();
  customers.push(c);
}

requestAnimationFrame(loop);
</script>
</body>
</html>

What it actually does

The page opens with an empty shop and a slow trickle of customers arriving every 2.5 seconds. For the first minute or so you will mostly see single customers enter, receive a brown frappuccino, stand around holding it, and leave; the observed unicorn rate will swing wildly between 0% and 30% because the sample is tiny. Around the two- to four-minute mark at normal speed, the shop is usually near capacity and the first Neon Unicorn appears, tinting the shop with a subtle magenta glow. If a second unicorn is rolled before the first holder leaves, the lights start flashing, the building shakes, and particles leak from the walls. The disaster only arrives when a third unicorn-holder is inside at the same time; there is no countdown, quota, or loaded die, so you can go ten minutes without one or get two events in quick succession if the dice cluster. After the event the shop explodes into neon particles, a giant procedural unicorn beast dances in the wreckage for several seconds, then the building reassembles and the line outside pours back in.

Tuned and special-cased values: arrival interval 2.5 s, service time 1 s, drink hold time 6 s, max 8 inside, unicorn chance exactly 1/6 via Math.random(), catastrophe lasts 9 s and wipes all in-shop customers. Speed multiplies both arrival rate and movement, so fast-forwarding genuinely accelerates disasters.

What it does badly: because the shop starts empty, early catastrophes are rare and the observed rate looks broken until the law of large numbers kicks in. The catastrophe reset instantly deletes everyone inside, which can defuse a tense “two unicorns” moment. Canvas shadowBlur and filters get expensive when the particle explosion is thick, especially at high speed. There is no sound and no pause button, the unicorn beast loops the same sine-wave dance, and if you leave it running for hours the customer counters will climb indefinitely while the outside line can grow without bound.

Attachments

nvidia/nemotron-3.5-super-vl:free — page