클로드 오퍼스 5.5(Claude Opus 5.5) API

1. Ask for a program with a frame contract, not for a video

The one rule that makes everything else work: the page must expose window.renderFrame(t) and draw frame t from scratch, with no clock, no randomness and no state carried between calls. Then a script can ask for frame 0, frame 1 … frame 359 in any order and get the same picture every time, which is what a video encoder needs. A page that animates itself with requestAnimationFrame looks fine in a browser but cannot be exported frame-accurately. We also fixed the rhythm in the prompt (120 BPM, a beat every 0.5 s) and asked the model to list its beat plan as a comment; it did, 24 beats, and every cut landed on one.

2. Tell the story in time ranges, then the style

Describe what happens in each time window (problem, turn, payoff) before any visual detail. Name the labels you want on screen and say what must not appear (we asked for plain rounded labels instead of real company logos). Style comes last and stays short: one accent colour, which easing functions, and an explicit "no clutter in the last 3 seconds". The full prompt we sent is below, unedited.

The prompt we sent (verbatim)

You are writing a program that renders a video. Output one complete, self-contained HTML file and nothing else.

Rules for the program (these make it renderable frame by frame):
1. A single <canvas> of exactly 1280x720, no CSS scaling, black page background.
2. Expose a global function window.renderFrame(t) that draws the frame at time t (seconds, 0 <= t < 12) from scratch. Everything on screen must be a pure function of t: no Date.now, no performance.now, no Math.random (use a seeded PRNG if you need noise), no accumulated state between calls, no requestAnimationFrame loop.
3. Also expose window.DURATION = 12 and window.FPS = 30. When the page is opened normally, play it once in a loop with requestAnimationFrame by calling renderFrame, so a human can preview it.
4. No external assets, fonts, images or libraries. Use system-ui for text.
5. The rhythm is 120 BPM: a beat every 0.5 s. Put every major cut, text entrance and impact on a beat time (a multiple of 0.5). List the beat plan as a comment at the top of the script.

The story (tell this, then decide the visuals):
A 12-second promo for "APIMODELS", an API gateway. Problem, then turn, then payoff:
- 0-3 s: a developer's screen is cluttered with many different API keys and SDK logos flying in from every side, overlapping, getting chaotic (draw them as simple rounded labels such as "image", "video", "LLM", "audio", "key_1", "key_2", "sdk", not real company logos).
- 3-4.5 s: everything snaps together on a beat and collapses into one glowing key.
- 4.5-9 s: from that one key, lines fan out to a grid of model cards that light up one per beat (label them "145 models", "image", "video", "LLM", "audio", "one endpoint").
- 9-12 s: clean end card: the word APIMODELS, the line "One key. Every model.", and "apimodels.app" small underneath; hold still for the last second.

Style: dark background, one accent colour (electric violet #7c5cff) plus white, motion with easing (easeOutCubic / easeInOutQuad written by you), subtle depth (scale and blur fall-off), no clutter in the final 3 seconds.

Before the code, do not explain. Return only the HTML.

3. Call Opus 5.5 with streaming and no max_tokens

Opus 5.5 thinks before it writes, and the thinking counts as output. On this prompt the first character of the answer arrived after 110 seconds and the whole reply took 6 minutes 37 seconds: 31,786 output tokens for about 16,000 characters of HTML. Stream the request so the connection stays alive, and do not send a small max_tokens; the gateway forwards none when you omit it, so the model uses its own limit. The call cost $0.368 at $2.40 / $12 per million tokens, and the exact amount is returned by GET /v1/records/{id}.

curl https://api.apimodels.app/v1/chat/completions \
  -H "Authorization: Bearer $APIMODELS_API_KEY" \
  -H "Content-Type: application/json" \
  -d "$(jq -n --rawfile p prompt.md \
        '{model:"claude-opus-5-5", stream:true, messages:[{role:"user", content:$p}]}')" \
  --no-buffer > stream.txt
# no max_tokens on purpose: this run used 31,786 output tokens, mostly thinking

4. Render every frame with headless Chrome

Open the page, stop its preview loop, then call renderFrame(i / 30) for every frame and read the canvas back as a PNG. 360 frames took 14 seconds on a laptop and the page threw no errors. Encoding to H.264 with faststart gave a 1.8 MB file that plays everywhere.

// render.mjs — pnpm add puppeteer-core; uses the Chrome you already have
import puppeteer from 'puppeteer-core'
import { mkdirSync, writeFileSync } from 'node:fs'

mkdirSync('frames', { recursive: true })
const browser = await puppeteer.launch({
  executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
})
const page = await browser.newPage()
await page.setViewport({ width: 1280, height: 720 })
await page.goto('file://' + process.cwd() + '/promo.html')
await page.evaluate(() => { window.requestAnimationFrame = () => 0 }) // stop the preview loop
const { DURATION, FPS } = await page.evaluate(() => ({ DURATION, FPS }))
for (let i = 0; i < DURATION * FPS; i++) {
  const png = await page.evaluate((t) => {
    window.renderFrame(t)
    return document.querySelector('canvas').toDataURL('image/png')
  }, i / FPS)
  writeFileSync(`frames/f${String(i).padStart(4, '0')}.png`, Buffer.from(png.split(',')[1], 'base64'))
}
await browser.close()

ffmpeg -framerate 30 -i frames/f%04d.png -c:v libx264 -pix_fmt yuv420p -crf 20 -movflags +faststart promo.mp4
# add a soundtrack afterwards if you have one:
# ffmpeg -i promo.mp4 -i beat.mp3 -c:v copy -shortest promo-with-audio.mp4

5. Check the frames before you judge the video

Pull a few frames at the story beats into one contact sheet and compare them with the brief: here 2.3 s (the clutter), 3.5 s (one key), 7.2 s (cards lighting up) and 11.3 s (end card). All four matched on the first try. To change something, ask for it by timecode and beat ("at 7.5 s the sixth card should light up with a pulse"), and ask for the whole file back so the frame contract stays intact.

Limits we hit

• No audio. The program draws pictures only; add a soundtrack with ffmpeg afterwards and keep the BPM you gave the model.
• Slow first token. Expect around two minutes before the first character on a prompt like this; streaming keeps the connection alive, a short client timeout will not.
• It does not check its own output. The model never ran the page; we did. Render it, look at the frames, and treat the HTML as untested code.

Files from this run

• The 12-second MP4
• The HTML exactly as Opus 5.5 returned it (open it to preview)
• Four-frame contact sheet

Related guides

• Making videos with Opus 5.5: what it can and cannot do
• Claude Code with Opus 5.5: setup and cost
• Opus 5.5 vs Sonnet 5.5