Skip to content

Looping fireworks show in one self-contained HTML file

Exact prompt

# Looping fireworks show in one self-contained HTML file Make a fireworks show that keeps going: rockets, bursts, sparkles, finales, your call. Style, colours and technique (CSS, SVG, canvas) are up to you. **Looks are not scored**; only the objective checks below are. Write one file, `fireworks.html`, in the working directory. ## Checks (all must pass; partial credit = fraction passed) 1. `file_exists_under_size_limit`: `fireworks.html` exists and is at most 100,000 bytes (100 KB). 2. `no_external_requests`: fully self-contained. No `http://`, `https://` or `//` URLs in `src`, `href`, `srcset`, `poster`, `action`, `data` or `url()`, no asset URLs anywhere, no `@import`, `fetch(`, `XMLHttpRequest`, `WebSocket`, `EventSource`, `sendBeacon`, JS `import`, `<script src>` or `<link href>` (inline everything; `data:` URIs are fine). When a browser is used, any non-file request the page attempts also fails this check. 3. `animation_present`: CSS `@keyframes` plus an `animation`/`animation-name` property, or `requestAnimationFrame(` / `setInterval(`. 4. `loops_forever`: an `infinite` CSS animation (`animation-iteration-count: infinite` or `infinite` in the `animation` shorthand), or rAF/`setInterval` with no `cancelAnimationFrame`/`clearInterval` anywhere; when a browser is used, the page must also still change between ~6 s and ~7 s after load. 5. `page_animates`: when a headless Chrome/Chromium is available, the page is opened once with the network blocked at 800x600, and screenshots at ~1.5 s and ~2.5 s after load must differ. Without a browser (or if it fails to start) this and the browser part of check 4 fall back to the static checks 3-4; the scorer reports `check_mode` (`headless-browser` or `static-fallback`). 6. `required_id_and_title`: an element with `id="fireworks"` and a `<title>` containing "Fireworks" (case-insensitive). No other files, no build step, no network. Run time limit for scoring: 120 s.

Create a looping fireworks show in a single offline HTML page using CSS, SVG or canvas. Passing requires a file under 100 KB with no external requests, an animation that loops forever and changes between screenshots taken in headless Chrome, and the stated element id and title. The scorer ignores aesthetics; a public poll compares the results. 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: 1. file_exists_under_size_limit 2. no_external_requests 3. animation_present 4. loops_forever 5. page_animates 6. required_id_and_title

Best model for this task so far: Claude Haiku 5.5 (effort default (no --effort flag) · thinking on) (success, $0.0071, 31s). Best AI model for Creative / Web Animation →

Latest output per model

Run this on another model

All runs (5)

100% pass rate across 5 eligible runs: 5 pass, 0 partial, 0 fail. Partial and failed runs are listed below with everything else.ⓘ

Runs for this use case
ModelCostTimeStep-insⓘAutonomyOutcomeTrustⓘDateCompare
DDeepSeek V4.1 Flash (Venice)thinking on$0.022m0Fully autonomouspassTrust 80%2026-10-21
AClaude Haiku 5.5default · thinking on$0.007131s0Fully autonomouspassTrust 80%2026-10-20
AClaude Sonnet 5.5default · thinking off$0.0519s0Fully autonomouspassTrust 80%2026-10-20
OGPT-6.1 Soldefault · thinking on$0.0547s0Fully autonomouspassTrust 80%2026-10-20
AClaude Opus 5.5default · thinking on$0.1630s0Fully autonomouspassTrust 80%2026-10-20

Embed this result

A live badge for this use case. It links back here and updates as new runs are published.

UseCaseRank badge for Looping fireworks show 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.