Claude JavaScript Video · Canvas, Playwright, FFmpeg and the Animate Skill

Quick Summary

• Claude does not generate the pixels with a diffusion video model in this workflow. It writes JavaScript that maps a time value to a deterministic Canvas frame, then repeats that function across the timeline.
• Playwright drives a headless Chromium browser and captures the requested frames. FFmpeg encodes those frames into an MP4, combines audio and video, and can generate contact sheets or run technical media checks.
• Chase organizes the process into four levels: direct prompting, an explicit tool and review loop, image or video references, then a reusable Claude Code skill that preserves the workflow.
• The Level 1 test uses the same short showreel prompt at low, high and ultra effort. Chase reports that low and high already produced credible results, while ultra took roughly eight hours. His conclusion is that better planning often matters more than simply increasing effort.
• The verified Animate repository implements the Level 4 idea as an MIT-licensed Claude Code plugin and skill. It includes seven styles, custom reference matching, story and storyboard approvals, Canvas rendering, procedural sound, Playwright capture and FFmpeg delivery tools.
• The custom Canvas route offers low-level procedural control, but it is not always the most efficient production choice. Remotion and HyperFrames provide reusable composition and rendering systems that can reduce repeated infrastructure work for branded or recurring videos.
• Free means no separate After Effects, editor or generative-video charge in the demonstrated route. Claude usage, model plan, computer, electricity, storage, music, voice services and production time still have costs.

Credit, publication date and evidence level

The embedded tutorial was created by Chase AI and published on October 6, 2026. The transcript, test durations and quality judgments are Chase's creator-reported results, not a controlled benchmark of model effort settings.

Chase promotes his own Chase AI Plus training during the video. He says the ElevenLabs mention is not sponsored. The open-source Animate repository linked in this article is maintained under the cth9191 account and independently confirms the core Canvas, Playwright and FFmpeg workflow described in the tutorial.

The exact Level 1 and Level 2 prompts below were supplied with this article request. The remaining templates are original adaptations based on the demonstrated production stages. Always inspect a third-party skill and its commands before installation.

The core idea · video as a function of time

A conventional editor stores layers and keyframes on a timeline. Chase's custom route expresses the frame as code: renderFrame(t) receives time t and draws the full state of the composition onto an HTML Canvas.

At 60 frames per second, one second requires sixty calls at sixty different times. Because the same input time should return the same pixels, the renderer can jump directly to a frame, regenerate a failed interval and create review stills without replaying the animation from the beginning.

The deterministic rule is more important than the specific renderFrame name. Avoid timers, unseeded randomness and hidden state that depends on the order in which frames were visited. Store scene timing, palette, typography and seeded variation in explicit data.

This is programmatic animation, not text-to-video generation. Claude writes and revises the production system, while the browser and encoder turn that system into media.

What each part of the toolchain actually does

JavaScript and Canvas draw shapes, type, charts, textures, characters and transitions. Web Audio or another code-based synthesizer can generate a soundtrack and effects tied to the same timeline.

Playwright launches Chromium, loads the composition, seeks to a requested time and captures the browser output. It provides automation and repeatable screenshots. Claude can inspect selected captures, but Playwright itself does not understand whether a scene is attractive or correct.

FFmpeg converts the frame sequence into H.264 or another delivery codec, combines the video with a soundtrack, trims or resamples media and creates contact sheets. Its filters can measure properties such as loudness or detect some technical defects, but aesthetic judgment still belongs to the model and human reviewer.

Whisper or faster-whisper can produce word-level timestamps from voice.mp3. Those timestamps become animation cues, letting key words, diagrams and transitions appear when the narrator reaches the relevant phrase.

What free means here

The workflow can avoid a separate After Effects license, timeline editor and pay-per-clip AI video model. Canvas, Chromium automation and FFmpeg can all run locally, and the Animate repository is MIT-licensed.

It is not zero-cost production. Claude usage is explicitly consumed, especially during long autonomous runs and repeated rewrites. Hardware, storage, electricity, setup, render time and human review remain part of the cost. Optional services such as ElevenLabs, licensed music or cloud infrastructure add their own charges.

A better label is low marginal tooling cost. The pipeline is attractive when you already have Claude access and value deterministic revisions more than the convenience of a visual editor.

Level 1 · Prompt the raw capability

Chase starts by forbidding skills and giving Opus 5.5 one short assignment: make a dynamic fifteen-second résumé showreel that demonstrates excellent motion design. He runs the same instruction at low, high and ultra effort.

His reported runtimes are roughly twenty minutes for low, thirty minutes for high and eight hours for ultra. He prefers the ultra output, but argues that low and high are already credible. The test suggests that an underspecified concept cannot always be repaired by spending more reasoning time.

This is a useful smoke test, not a complete production method. A short prompt leaves the model to choose the storyboard, art direction, typography, pace, renderer and review standard, so different creators often receive similar centered type, gradients and technique labels.

The most important Level 1 upgrade is a storyboard

Before asking for the full build, request a beat sheet and one representative frame for each major scene. Review the story, composition, information density and visual variety while changes are still cheap.

Chase recommends this because a custom JavaScript film can take twenty minutes or several hours to implement and review. Without a storyboard, an unwanted creative direction may be discovered only after the entire renderer and soundtrack exist.

A good approval sequence is concept, numbered beats, visual system, representative frames, timing map, low-resolution animatic and final render. The Animate skill formalizes almost exactly this sequence.

Level 2 · Make the tools and review loop explicit

The Level 2 brief specifies duration, format, Canvas, programmatic sound, Playwright, FFmpeg and an optional narration file. It also names the implementation contract, including renderFrame(), frame timing and the final MP4.

The quality-control instruction asks FFmpeg to produce a contact sheet, Claude to inspect it, the code to be corrected and the film to be rendered again. This loop converts a vague request for polish into observable evidence.

Contact sheets are necessary but incomplete. They can reveal clipped type, empty frames, continuity drift and inconsistent composition. They do not expose every motion defect, one-frame flash, audio pop or timing problem. Add interval strips around fast transitions, listen to the full mix and review the exported video in real time.

Audio can be decoration or the production clock

A visuals-first project can synthesize music and effects after the animation works. That is appropriate for abstract experiments where the imagery leads.

A narration-first project begins with script and voice.mp3. Whisper produces word timings, then scene changes, labels and diagrams are aligned to speech. A music-first project measures beats and phrases, then places motion on that grid.

For explainers, narration usually provides the strongest clock because each visual has a semantic job. For showreels and product launches, the music grid may be more important. Decide which source owns timing before implementation so the project does not need a full retime later.

Level 3 · Use references without cloning the source

Chase demonstrates a JavaScript reconstruction that borrows composition from a currency explainer while replacing the subject with the history of electricity. The outputs feel related even though the content changes.

A reference analysis should extract measurable design properties: palette, line weight, texture, negative space, type hierarchy, camera behavior, transition grammar, cut frequency and sound density. It should also list protected or source-specific elements that must remain original.

Skillry provides a searchable index of Opus 5.5 videos with prompts and side-by-side remakes. Some browsing is free and some features are paid. Chase also recommends Kevin Ngo's work as a high-quality reference for code-drawn storytelling.

Level 4 · Codify the workflow as the Animate skill

The public Animate repository is a Claude Code plugin and skill for deterministic Canvas videos. It requires Claude Code, Node.js 18 or newer, Playwright with Chromium and FFmpeg on the system path. Narrated work additionally uses Python with faster-whisper, while ElevenLabs is optional.

The plugin can be installed through Claude Code's plugin marketplace or copied into the local skills directory. Installation can download Chromium and add dependencies, so inspect the repository and commands before running them.

The skill asks about subject, formats, voice, look, hero element, music and product. It then gates the expensive build behind a story check, look check and storyboard approval. Build and delivery include review tools rather than treating the first successful encode as completion.

The repository ships seven visual systems: cut paper, crosshatch, riso, sketchbook, math, pixel and isometric. A custom look measures references, creates comparison frames and saves the approved style as a reusable project module.

What the verified Animate repository adds

Animate stores each film as a piece and assembles it into a self-contained index.html. Its toolkit includes storyboards, stills, test tiles, beat mapping, product-page capture, narration timing, multi-format export, contact-sheet review and reference comparison.

The review stage checks more than appearance. The README describes beat-grid cuts, story-arc loudness, hero anchoring, the location of the loudest moment and narration pace. It can also look for cropped or overlapping text.

Each style contains explicit rules, a drawing kit, sample frame and demo. That separation lets the same story and renderer use a new look without rewriting the entire pipeline. It is the main architectural advantage of turning the experiment into a skill.

The implementation is still a work in progress. Keep it pinned to a reviewed commit for important work, test it in a disposable project first and do not assume a skill can safely install dependencies, read references or connect to paid services without supervision.

Remotion vs. HyperFrames vs. custom Canvas

Remotion offers React components, a documented timeline model, previews, rendering tools and official agent skills. Its potential token efficiency comes from reusing components and framework conventions instead of asking Claude to reinvent capture, timing and export for every film. It is a strong default for branded videos, reusable templates and teams already working in React.

HyperFrames is designed for agent-authored web video and supports HTML, CSS, JavaScript, GSAP, Lottie, shaders and Three.js. Its deterministic virtual clock and agent workflow make it attractive for AI-generated motion systems, data stories and browser-native compositions.

Custom Canvas plus Playwright and FFmpeg offers the lowest-level control. It is excellent for procedural illustration, custom physics, unusual shaders, compact single-file films and experiments where every pixel comes from code. Token and maintenance efficiency depend heavily on the harness, because the agent may otherwise generate thousands of lines of renderer infrastructure.

There is no published apples-to-apples token benchmark for these three routes. Treat potentially high efficiency as an architectural expectation, not a measured guarantee. The best choice depends on repetition, team skills, licensing, art direction, delivery formats and how much infrastructure already exists.

Why generated lines of code are not token consumption

A claim such as 59,231 generated lines describes output size, not the number of tokens placed in the model's active context. A tool can write a large file without resending every line in every turn, or it can repeatedly reopen and revise the same file and consume far more context than the final source length suggests.

Dependencies, command output, screenshots, contact sheets, error logs, diff strategy, prompt caching, subagents and retry loops all affect usage. Rendering time also consumes wall-clock time without necessarily consuming model tokens at the same rate.

Measure what matters for your workflow: model usage, number of revision turns, files read, render duration, failed builds, final source size and human review time. Do not use line count as a substitute for any of those metrics.

Practical recommendation

For recurring product explainers, branded motion systems and social variants, start with Claude Code plus Remotion. Its component model and established rendering workflow usually make revision and reuse easier.

Test HyperFrames when you want an agent-native HTML composition, already have web-animation expertise or need CSS, GSAP, Lottie, shaders or Three.js in one deterministic renderer.

Choose custom Canvas when the visual idea depends on procedural drawing, a single self-contained page or exact frame-level control that a component framework would fight. In that case, begin with the Animate skill rather than rebuilding the intake, storyboard, capture, sound and QA harness from scratch.

Whichever route you choose, approve the story and representative frames before the full render, then keep the contact-sheet loop and human final review. The production discipline is more transferable than the renderer.