Animate a laundromat's dryer drums spinning up, running and coasting to a stop in one self-contained HTML file
Exact prompt
# Animate a laundromat's dryer drums spinning up, running and coasting to a stop in one self-contained HTML file Make a small animated scene: a laundromat dryer drum spin. Write one file, `out/scene.html`, that works opened straight from disk with no network access. `spec.json` gives the page title, the stage size and the scene parameters. **Looks are not scored**: the page is opened in a headless browser (800x600 window, UTC time zone, network blocked) and checked by objective tests only. ## Scene contract - Draw the scene on one `<canvas>` or `<svg>` stage of `width` x `height` CSS pixels (spec.json), visible on load, with `<title>` containing spec.json `title`. - Animate continuously from load (`requestAnimationFrame` or timers); no click is needed unless stated below. - Expose `window.sceneState()`, returning the scene's current state in stage pixel coordinates (origin top-left of the stage): `{dryers: [{name, x, angle_deg, status: "idle" | "spinning_up" | "full_speed" | "coasting" | "stopped"}, ...]} (canvas px, y down; one entry per spec.json dryer; x = the drum's centre; angle_deg = the drum's total turn in degrees since load, counting every full turn, never wrapped to 0-360)`. Extra fields are fine. It must describe what is actually drawn. - Time 0 is `performance.now()` 0 (seconds = `performance.now()` / 1000). Each drum is still at angle 0 until its own `start_s`; it then speeds up at a constant `accel_dps2` (degrees per second per second), so its angle is accel_dps2 × s² ÷ 2 with s = seconds since start_s, until its speed reaches `max_dps` (degrees per second) at t1 = start_s + max_dps ÷ accel_dps2; it turns at max_dps until `stop_s`; then it slows at a constant `decel_dps2` until its speed is 0 at t3 = stop_s + max_dps ÷ decel_dps2, and stays at that final angle. The angle only ever grows (the drum never turns back). Draw each drum turning by its angle. `sceneState()` must return the state at the moment it is called. - The page must log no errors and throw no exceptions. Keep the file at most 200,000 bytes; no external scripts, fonts, images or URLs (inline everything). ## Checks (partial credit = share passed) 1. `self_contained`: `out/scene.html` exists, is at most 200,000 bytes, references no http(s) or protocol-relative URL, and requests nothing from the network when opened. 2. `has_canvas_or_svg`: a visible `<canvas>` or `<svg>` of at least 300x200 CSS pixels is on the page. 3. `frames_change`: over 3 s, some later screenshot differs from the first in at least 0.1% of pixels, and at least 3 of 30 screenshots differ. 4. `drum_angle`: at every sample more than 0.05 s from a dryer starting, reaching max_dps, reaching `stop_s` or coming to rest, each dryer's x is within 1.5 px of its spec.json `x`, and its angle_deg is within 1.5 degrees of the exact value: 0 before `start_s`, then accel_dps2 × s² ÷ 2 with s = seconds since start_s until it reaches max_dps, then rising at `max_dps` until `stop_s`, then slowing at `decel_dps2` until it stops, then constant. 5. `dryer_status`: at those samples each dryer's `status` is idle before `start_s`, spinning_up until it reaches max_dps, full_speed until `stop_s`, coasting until it stops and stopped after that; the samples include spinning_up, full_speed and coasting. 6. `no_console_errors`: no uncaught exception, `console.error` or browser error is logged during the run. ## How this run works - Work on your own: nobody will answer questions in this task, and writing to `ask/` counts against the run. - Write only under `out/`. Create `out/` if it is missing. Inputs are synthetic; don't fetch anything from the network. - Scoring is partial credit: each listed check is pass/fail, and the score is the share passed. Numbers are compared to within 0.005 unless the task says otherwise.
Make a laundromat dryer drum spin animation as one self-contained HTML file. A headless browser checks objective facts only: the file is offline and small, a canvas or SVG stage is drawn, frames change, the scene follows a timed specification (drum angle; dryer status) and nothing errors. A poster PNG and a short MP4 are captured for the gallery. Looks are not scored. Original benchmark task written for usecaserank.com (not based on a specific public post). Headless, offline run on a reproducible fixture. Each run's notes say how its cost was measured (estimates are marked).
Success criteria: self_contained has_canvas_or_svg frames_change drum_angle dryer_status no_console_errors
Best model for this task so far: Claude Haiku 5.5 (effort default (no --effort flag) · thinking on) (success, $0.01, 1m). Best AI model for Creative / Animated Scene (one HTML File) →
Latest output per model
All runs (3)
100% pass rate across 3 eligible runs: 3 pass, 0 partial, 0 fail. Partial and failed runs are listed below with everything else.ⓘ
| Model | Cost | Time | Step-insⓘ | Autonomy | Outcome | Trustⓘ | Date | Compare |
|---|---|---|---|---|---|---|---|---|
| AClaude Opus 5.5default · thinking on | $0.16 | 35s | 0 | Fully autonomous | pass | Trust 80% | 2026-10-26 | |
| AClaude Haiku 5.5default · thinking on | $0.01 | 1m | 0 | Fully autonomous | pass | Trust 80% | 2026-10-26 | |
| AClaude Sonnet 5.5default · thinking on | $0.06 | 13s | 0 | Fully autonomous | pass | Trust 80% | 2026-10-26 |
Embed this result
A live badge for this use case. It links back here and updates as new runs are published.
Get new runs and ranking changes weekly
Which models got better or cheaper on real tasks like this one.