Skip to content

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

Run this on another 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.ⓘ

Runs for this use case
ModelCostTimeStep-insⓘAutonomyOutcomeTrustⓘDateCompare
AClaude Opus 5.5default · thinking on$0.1635s0Fully autonomouspassTrust 80%2026-10-26
AClaude Haiku 5.5default · thinking on$0.011m0Fully autonomouspassTrust 80%2026-10-26
AClaude Sonnet 5.5default · thinking on$0.0613s0Fully autonomouspassTrust 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.

UseCaseRank badge for Animate a laundromat's dryer drums spinning up, running and coasting to a stop in one self-contained HTML file

Get new runs and ranking changes weekly

Which models got better or cheaper on real tasks like this one.