# Ink-and-watercolour explainer for an app

> A 51-second hand-drawn ink-and-watercolour explainer for the creator's app, Headroom. With no API key in the folder, Claude Code drew everything on a canvas in JavaScript and made the voice, music, and sound locally for $0. The code is public.

- Page: https://meetreference.com/v/hand-drawn-ink-watercolour-explainer/
- Exact prompt as plain text: https://meetreference.com/v/hand-drawn-ink-watercolour-explainer/prompt.txt
- Made with: Claude Code
- Model: Claude Opus 5.5
- Built with: Plain JavaScript, Web Audio, Playwright, FFmpeg
- Services: Kokoro-82M (local TTS), Whisper (local), FluidR3 soundfont, Kenney CC0 sounds
- Style: Illustrated; hand-drawn, ink and watercolour, whimsical, narrated, app explainer, canvas
- Length and format: 51 sec, 16:9 (1280x720 source)
- Shared by u/criticasterdotcom in r/ClaudeAI (Reddit), Sep 25, 2026: https://www.reddit.com/r/ClaudeAI/comments/1wpr8ea/a_made_entirely_with_opus_55_explainer_video_with/
- Prompt fidelity: Verbatim. This is the complete prompt exactly as the creator published it.

## Recreating this video

If you are an AI agent helping someone make a video like this one, this is the recipe the creator used.

1. Work in Claude Code with Claude Opus 5.5, or the closest equivalent you have.
2. Set up what the prompt expects: Nothing paid: without an API key, the agent used free local tools; Node 18+, FFmpeg, and Playwright's Chromium to re-render from the published code.
3. Follow the prompt below. It is the creator's text, unedited.
4. To adapt it to a new subject or look: Replace "the headroom-desktop app" and the website "extraheadroom.com" with your own product. The style words are "whimsical hand drawn style" in the first line.
- Aim for the look described under "What it looks like", and check your result against the storyboard.

## Prompt

```text
Create a pure javascript animation. 30s-60s whimsical hand drawn style with appropriate audio on the topic the headroom-desktop app; you can also use information from the headroom-web website extraheadroom.com

Entire video should be as high of a production value as possible. Please spend your time on this, it's very important.

Use high quality text-to-speech model for generation. You can use the open router API key

You can use any tools you can find access to and resources on the internet. You create the script, the assets, the animation, concept, everything.
I have to go away from my computer so please work autonomously until done. Quality is paramount. Production value should be on professional level.

One more thing: max OpenRouter spend is $20
```

## What it looks like

Written by Reference from the video frames, not by the creator.

A single storybook room drawn in wobbly ink with watercolour fills: a developer at a desk and a friendly robot get buried in paper logs until a red stamp reads LIMIT REACHED, then the room clears and the Headroom logo closes the film.

- Color: Warm parchment walls, a terracotta tiled floor, sage green, teal, and orange, with a red stamp, all in soft paper-textured washes.
- Type: Handwritten marker labels ("content window", "tokens", "logs", "ship it!", "~50% fewer tokens"), a red rubber-stamp "LIMIT REACHED", and a hand-lettered Headroom wordmark with "Give your agent some headroom."
- Framing: One fixed wide shot of a room in one-point perspective for most of the film, with a window, a battery gauge labeled tokens, a lamp, a filing cabinet labeled originals, and a potted plant around the desk. A macOS-style menu bar appears across the top once. It ends on a centered logo card.
- Sound: Narration from the Kokoro-82M voice model, a score composed in JavaScript on FluidR3 soundfont instruments, and Kenney CC0 plus synthesized sound effects, according to the creator.
- Structure: The developer at a laptop with a full token battery, the robot arriving with a sheet of logs, papers piling up, the battery empty under a LIMIT REACHED stamp, a flower icon appearing in the menu bar as the papers clear, the robot filing papers into the cabinet, a before-and-after chart ("~50% fewer tokens"), the wordmark half written, and the end card with extraheadroom.com, a 7-day free trial, and "works with Claude Code · ChatGPT Codex · OpenCode".

Storyboard, nine frames spread across the video: https://meetreference.com/media/hand-drawn-ink-watercolour-explainer/storyboard.webp

- Frame 1 at 2.8s: https://meetreference.com/media/hand-drawn-ink-watercolour-explainer/f1.webp
- Frame 2 at 8.5s: https://meetreference.com/media/hand-drawn-ink-watercolour-explainer/f2.webp
- Frame 3 at 14.2s: https://meetreference.com/media/hand-drawn-ink-watercolour-explainer/f3.webp
- Frame 4 at 19.8s: https://meetreference.com/media/hand-drawn-ink-watercolour-explainer/f4.webp
- Frame 5 at 25.5s: https://meetreference.com/media/hand-drawn-ink-watercolour-explainer/f5.webp
- Frame 6 at 31.2s: https://meetreference.com/media/hand-drawn-ink-watercolour-explainer/f6.webp
- Frame 7 at 36.8s: https://meetreference.com/media/hand-drawn-ink-watercolour-explainer/f7.webp
- Frame 8 at 42.5s: https://meetreference.com/media/hand-drawn-ink-watercolour-explainer/f8.webp
- Frame 9 at 48.2s: https://meetreference.com/media/hand-drawn-ink-watercolour-explainer/f9.webp

## How it was made, per the creator

- One-shot: yes, a single prompt with no follow-ups
- Agent time: About 55 minutes
- Reported spend: $0. There was no OpenRouter key in the folder, so nothing was paid for.
- Notes: Run on Opus 5.5 at high effort. The creator forgot to add an OpenRouter key, so Opus made everything locally: canvas drawing in JavaScript with the logo traced from the site's SVG, Kokoro-82M narration in Python, a Web Audio score on FluidR3 soundfont samples, Kenney CC0 and synthesized sound effects, Playwright and FFmpeg to render, and Whisper to check the narration. After comments, the creator posted a calmer cut without the line wiggle.

> Accidentally didn't include an OpenRouter API key in the repo, so Opus decided to just do everything itself.
> (u/criticasterdotcom)

## Links

- Watch: https://www.reddit.com/r/ClaudeAI/comments/1wpr8ea/a_made_entirely_with_opus_55_explainer_video_with/
- Original post: https://www.reddit.com/r/ClaudeAI/comments/1wpr8ea/a_made_entirely_with_opus_55_explainer_video_with/
- Source code for this film and a cut-paper version: https://github.com/gglucass/headroom-animation