AI model race explainer

1 test · 1 finished runs (0 agent, 1 raw one-shot) · 1 live demo

The prompt

Create a single self-contained HTML file (inline CSS and JavaScript only; SVG and/or canvas; no external libraries, fonts, images or network requests) that plays a polished 35-second animated explainer video in the browser, like a studio motion-design piece. It plays once from start to finish and then holds on the final frame. Topic: "How an AI model race works" — how one prompt is sent to four AI models and their results are compared fairly. Scenes and timing (total 35 s): 1. 0-5 s: Hook. Big kinetic headline "One prompt. Four AIs." builds letter by letter; a glowing prompt card slides in. 2. 5-11 s: The prompt card splits into four copies that fly into four lanes labelled Model A, Model B, Model C, Model D. 3. 11-18 s: Each lane builds something: blocks of code stream in, a small preview window fills with a different mini artwork per lane (a wave, a chart, a planet, a city skyline), and a stopwatch per lane ticks at a different speed. 4. 18-25 s: A camera icon records each preview; the four previews line up side by side like a film strip, and one lane stalls with a friendly "error" wobble before recovering. 5. 25-31 s: Judging: score bars grow under each preview, a checklist ticks ("same prompt", "no edits", "timed", "saved"), and a folder icon swallows the four results labelled "receipts". 6. 31-35 s: Outro: all elements collapse into a single line: "Same prompt. Real receipts." and hold. Style: - Brand colours: deep navy background #0B1020, electric teal #19E3B1 as the main accent, warm amber #FFB547 as the secondary accent, white text. - Clean geometric shapes, expressive easing (overshoot, staggered delays), smooth transitions between scenes (no hard blank frames), large readable text for a phone screen. - Portrait 4:5 layout, scaled to fit the browser window and centred. - Drive all animation from one timeline using requestAnimationFrame and performance.now; the first motion is visible within the first half second; no user interaction needed. Reply with only the complete HTML file.