Skip to content

Back to the catalog

Kākāpō Party
simonwillison.netwriteup

Kākāpō Party

Simon Willison describes prompting Claude Opus 5.5 with reference photos to generate an animated pixel-art HTML5 canvas scene (kākāpō parrots partying with confetti), then using a local Claude Code session to drive Playwright, click through the page at scripted timestamps, and record a 15-second video of the result for a keynote slide. The post includes the full Playwright script Claude Code produced, showing how a coding agent can be tasked with browser automation and video capture as an end-to-end deliverable, not just code generation.

TL;DR Simon Willison used Claude Opus 5.5 to generate a pixel-art HTML5 canvas animation from reference photos, then had Claude Code write a Playwright script to click through it and record a video for a keynote.
Document

What it claims

A two-step workflow: Claude Opus 5.5 generated a self-contained HTML5 canvas pixel-art animation from three reference photos and a one-paragraph prompt. A local Claude Code session then turned that page into a 15-second video for a Keynote slide by writing and running a short Playwright script. The author reports the video "was exactly what I needed" with no manual editing mentioned.

How it works

  1. Generation prompt (Opus 5.5, with three photos from Google image search attached): > I need you to make an animation in animated pixel art on HTML 5 canvas of obviously pixel art kakapo jumping up and down having a party with confetti and suchlike - there should be at least 20 of them
  2. Download the HTML locally.
  3. Recording prompt (Claude Code): > Make me a video of file:///Users/simon/Downloads/kakapo-party.html - you need to load it in a browser and click on it a few times to get the confetti effect, the video should be 15s long / don't start clicking until 3s in / make sure several clicks are spread around the clickable area

The requirements are stated as observable outcomes: duration, click delay and click spread. They do not name tools. Claude Code chose Playwright on its own.

How to use it

The script Claude Code produced is reusable for any canvas or interactive page. It uses inline uv-style script metadata, Playwright's built-in context video recording, and a wall-clock-scheduled click list:

# /// script
# dependencies = ["playwright"]
# ///
import time
from playwright.sync_api import sync_playwright
W, H = 1280, 720
clicks = [
    (3.0, 640, 360), (4.2, 160, 120), (5.4, 1120, 120), (6.6, 180, 600),
    (7.8, 1100, 600), (9.0, 640, 100), (10.0, 380, 380), (11.0, 900, 380),
    (12.2, 640, 620), (13.2, 640, 300),
]
with sync_playwright() as p:
    b = p.chromium.launch()
    ctx = b.new_context(viewport={"width":W,"height":H}, record_video_dir="vids", record_video_size={"width":W,"height":H})
    page = ctx.new_page()
    t0 = time.time()
    page.goto("file:///Users/simon/Downloads/kakapo-party.html")
    for t,x,y in clicks:
        time.sleep(max(0, t-(time.time()-t0)))
        page.mouse.click(x,y)
    time.sleep(max(0, 16.0-(time.time()-t0)))
    ctx.close(); b.close()

Key mechanics in the script:

  • The video is only written when ctx.close() runs, into vids/.
  • The viewport size and the recording size are both set to 1280×720.
  • Click times are measured from just before goto, and late clicks are not compensated beyond max(0, …).
  • The script records about 16s against the 15s request. The post does not say whether the result was trimmed.

Limits

  • This is a single anecdote with no comparison against other models or tools. The "buzz" about Opus 5.5's pixel-art ability is cited, not measured.
  • The script has a hardcoded absolute file:// path.
  • Timing relies on time.sleep, so the clicks are approximate, not frame-accurate.
  • The video starts recording when the page is created, so page load time is included in the footage.

Organisations named here

  • WeAreDevelopers
  • Anthropic
  • Google
  • Claude Code

Technologies named here

  • Claude Code
  • Claude Opus 5.5
  • Playwright
  • HTML5 canvas
  • Python