Claude Code Recreates Viral Riso Animation: Full Workflow, Prompt Design, and Token Cost Breakdown

After a risograph-style animation — themed around "an ink drop calling out to the world, ripples spreading in response" — went viral on social media, the most common follow-up question became: "What's the prompt?" The original creator never shared it. So someone decided to write their own ~10,000-character creative brief from scratch, feed it into Claude Code with Opus 5, and run the whole thing — producing a 30-second animation built entirely in code. The complete process and cost data were documented openly, making this a rare reproducible reference for "AI coding + generative creative work."

What Claude Actually Built

The final output is a single index.html file — 224 KB, roughly 3,500 lines of code. It uses only Canvas 2D, with zero dependencies on libraries, images, fonts, or network requests. Every pixel and every texture layer is computed in code.

The author's description of the technical implementation is restrained but information-dense. Each "ink" color is a separate halftone layer with its own dedicated screen angle. Layers are deliberately offset by 1–3 pixels to simulate the misregistration characteristic of risograph printing, then layered with paper texture and ink-starvation voids. The key architectural decision: render(t) is a pure function of time, with all randomness seeded, so the animation can seek to any frame without flickering — which is also what makes headless-browser frame-by-frame inspection possible.

Even the soundtrack is synthesized in the same file using WebAudio: a 120 BPM pad with arpeggios, plus a soft chime on each ripple expansion. The brief planned 28 montage scenes; 20 made it into the final cut, with the animation designed to drop scenes before any transition to stay within budget. The final video was captured using a built-in record button on the page and converted to MP4.

Halftone is a traditional printing technique that converts continuous tones into a grid of dots — varying dot size or density to simulate different shades. Risograph printing uses a stencil-based silkscreen process, running each color separately. This means multi-color prints naturally have small misalignment errors between layers — the so-called "misregistration" — which is a defining visual characteristic of the medium and what sets it apart from digital printing aesthetically. The 1–3 pixel random offsets in the code deliberately reproduce this physical artifact, essentially turning a production "flaw" into a style signature. mulberry32 is a lightweight pseudo-random number generator (PRNG) that, given a fixed seed, always produces the same sequence — making the animation's "randomness" fully reproducible. The same time value t always yields the same frame, which is the mathematical foundation for seekable playback and frame-accurate screenshot comparison.

Workflow Design: Explicitly Prohibiting "One-Shot Generation"

The most instructive part of this case isn't how elaborate the prompt is — it's how it orchestrates the AI's working process. The brief explicitly tells Claude not to try generating everything at once, instead proceeding in stages:

• Build the engine first: paper texture, risograph compositor, center ink dot, ripples, timeline, playback controls;
• Generate scenes in batches of ~8, with a visual inspection after each batch;
• Handle Act II transitions and later scenes;
• Do a final full inspection pass.

The human's involvement was minimal — a few short pushes like "continue with the dive shot and first 8 scenes," "continue with Act III's archive room," "please wrap up." The heavy quality-control work was done by Claude itself: rendering frames in a headless browser, capturing a contact sheet every 0.25 seconds around each transition, and systematically fixing visual jumps, drift, and unreadable scenes. The author notes one frame had ~100ms of lag, which was traced through performance profiling to a missing closePath() on an oversized path — this level of granular debugging done autonomously by the model is notably impressive.

The entire session ran approximately 5 hours and 40 minutes (including breaks), completed in one go.

"Contact sheet" is a darkroom-era photography term: all frames from a roll of film printed at reduced size on a single sheet, so the photographer can quickly review and select. Here it's repurposed to describe arranging screenshots from key animation timestamps side by side for batch comparison — Claude captures one frame every 0.25 seconds and outputs them in a grid around each transition, allowing it to spot jumps or rendering anomalies without manually reviewing frame by frame. This "thumbnail array" approach to self-inspection is a textbook example of translating a human visual QA habit into an automated process executable by an AI agent.

Token Costs: The Price of the Write–Check–Fix Loop

From the Claude Code session logs, the consumption figures were:

• ~716,000 output tokens (code, reasoning, tool calls combined);
• ~43 million cache read tokens, with ~1.5 million cache write tokens.

The author highlights a counterintuitive point: frame count itself isn't what drives cost, because the final frames are rendered by the browser — not generated by the model frame by frame. What actually burns tokens is iteration — repeatedly writing code, capturing screenshots, and fixing issues. This explains why cache reads (43M) so dramatically exceed output (716K): every inspection round re-ingests a large amount of existing context.

This data is a useful reference for estimating the real cost of "long-horizon creative tasks with AI": it reveals the cost structure of agentic workflows — the expense isn't in the size of the final deliverable, but in how many cycles it takes to converge on high quality.

Cache reads are produced by Claude's API prompt caching mechanism: when large amounts of context are repeatedly passed in across turns, already-cached content is re-read at a fraction of the full price rather than being billed at the standard rate. In this case, the cache read volume (~43M tokens) vastly exceeds output (~716K tokens), directly reflecting the structure of an agentic workflow — each "screenshot → analyze → fix" cycle re-submits thousands of lines of existing code and context, but most of it hits the cache. Actual billing is far lower than the raw numbers suggest. This also means that without prompt caching, long-form creative tasks like this would cost several times more — making caching a critical piece of infrastructure for this kind of workflow to be economically viable.

What Makes This Prompt Worth Studying

Setting the animation itself aside, this ~10,000-character brief is a model example of how to give an AI a creative task. It doesn't stop at a vague description like "make a risograph-style animation" — it breaks the creative intent down to an executable, verifiable level:

A clear narrative spine. The brief describes the animation as a complete story: a lonely ink dot sends ripples calling out to the world; bells, wolf howls, whales, and fireworks respond and are collected as memories, but alone, memories fade to blue. Then a pink ink dot answers from off-screen, their ripples meet and flowers bloom at the intersection, the world gets reprinted in two inks, and the piece ends on a handwritten signature. This "lead with what you're trying to say" approach gives every technical choice a purpose.

A precise visual system. The brief directly specifies standard risograph color values (Blue #0078BF, fluorescent pink #FF48B0, indigo #2E3192, etc.), mandates "no pure black — shadows are achieved by multiplying overlapping ink layers," and even specifies halftone dot spacing (4–6 px) and screen angles for each ink (15°/45°/75°/0°).

Hard-coded constraints and self-check standards. For example: "one bold subject, identifiable as a silhouette within 0.25 seconds"; "if budget runs short, cut only Act II scenes — never cut transitions or later acts"; "no cross-fades between scenes (the sole exception is the ink-drain effect)." These hard rules significantly reduce the model's room to go off-course.

Architecture requirements stated upfront. The brief directly requires render(t) to be a deterministic pure function, mandates a seeded PRNG like mulberry32, and specifies the timeline must be driven by a data array — not hardcoded if/else logic. Embedding engineering standards into the creative brief is what makes the "seekable, frame-inspectable" self-check loop possible in the first place.

A Reproducible Signal

It's worth being clear-eyed: this is a recreation, not the original work — the author says so explicitly. But its value lies precisely in its transparency — fully publishing the prompt, workflow orchestration, and token bill turns this from a "flashy demo" into a verifiable, reusable methodology.

It also confirms a growing trend in AI-assisted programming: the ceiling on what a model can achieve increasingly depends on whether the human can break the task into self-checkable stages. When an animation can be expressed as a pure function of time, and quality standards can be written as screenshot-comparison rules, AI can largely close the write–check–fix loop on its own — with humans only needing to give it a nudge at key decision points.