Bouncing logo screensaver in one self-contained HTML file
Exact prompt
# Bouncing logo screensaver in one self-contained HTML file Make a classic bouncing-logo screensaver: a logo of your own design that bounces off the edges of the window. Style, colours and technique (CSS, SVG, canvas) are up to you. **Looks are not scored**; only the objective checks below are. Write one file, `logo.html`, in the working directory. ## Checks (all must pass; partial credit = fraction passed) 1. `file_exists_under_size_limit`: `logo.html` exists and is at most 50,000 bytes (50 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="logo"` and a `<title>` containing "Bouncing Logo" (case-insensitive). No other files, no build step, no network. Run time limit for scoring: 120 s.
Recreate the classic bouncing-logo screensaver as one self-contained HTML file with a tighter 50 KB size limit. The scorer checks only that it makes no network requests, animates continuously, visibly changes in headless Chrome, and carries the required id and title. Looks are not scored and are left to a public poll. 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.0068, 33s). Best AI model for Creative / Web Animation →
Latest output per model
All runs (4)
100% pass rate across 4 eligible runs: 4 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 Haiku 5.5default · thinking on | $0.0068 | 33s | 0 | Fully autonomous | pass | Trust 80% | 2026-10-20 | |
| AClaude Sonnet 5.5default · thinking off | $0.04 | 10s | 0 | Fully autonomous | pass | Trust 80% | 2026-10-20 | |
| OGPT-6.1 Soldefault · thinking off | $0.04 | 38s | 0 | Fully autonomous | pass | Trust 80% | 2026-10-20 | |
| AClaude Opus 5.5default · thinking on | $0.11 | 21s | 0 | Fully autonomous | pass | Trust 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.
Get new runs and ranking changes weekly
Which models got better or cheaper on real tasks like this one.