Sailboat riding animated waves in one self-contained HTML file
Exact prompt
# Sailboat riding animated waves in one self-contained HTML file Make a sailboat riding animated waves. Weather, time of day and style are 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, `sailboat.html`, in the working directory. ## Checks (all must pass; partial credit = fraction passed) 1. `file_exists_under_size_limit`: `sailboat.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="sailboat"` and a `<title>` containing "Sailboat" (case-insensitive). No other files, no build step, no network. Run time limit for scoring: 120 s.
Animate a sailboat riding rolling waves in one self-contained HTML file with no external assets. The scorer checks only objective facts: size under 100 KB, zero network requests, a real animation that never stops and visibly changes in headless Chrome, plus a required element id and page title. Visual quality is left to a public side-by-side vote. 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.0050, 21s). 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.0050 | 21s | 0 | Fully autonomous | pass | Trust 80% | 2026-10-20 | |
| AClaude Sonnet 5.5default · thinking off | $0.05 | 14s | 0 | Fully autonomous | pass | Trust 80% | 2026-10-20 | |
| OGPT-6.1 Soldefault · thinking off | $0.06 | 51s | 0 | Fully autonomous | pass | Trust 80% | 2026-10-20 | |
| AClaude Opus 5.5default · thinking on | $0.20 | 45s | 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.