opus-js-animations: Direct and render frame-accurate JavaScript films with Opus inside Claude Code

Who it's for

• For anyone who wants Claude Opus 5.5 in Claude Code to act like a "film director," developing a brief creative idea step by step into a frame-accurate MP4 animated short. Each film is an HTML page: every frame is a pure function of time (seek(t)), drawn into a canvas, then rendered by headless Chrome across parallel workers. The official positioning is a skill and plugin for Claude Code.
• Situations where it's not a fit, and prerequisites:
  • You need Claude Opus 5.5 within Claude Code to do the directing and animation coding; without this environment the official workflow cannot be followed.
  • The rendering and inspection tooling requires Node ≥ 22 (built-in fetch and WebSocket, no npm install); frame-accurate rendering requires Chrome/Chromium headless, encoding requires ffmpeg, and audio analysis requires Python 3 + numpy. If these are not all in place, the complete workflow cannot be finished.
  • An ElevenLabs/OpenAI key is only needed if you want voiceover; you can do a voiceover-free attempt without one, but the official documentation does not describe the specific fallback behavior of the voiceover step when no key is available.
  • The skill's output and workflow target "films/animations"; the official documentation does not state that it applies to general writing, code review, or other tasks — do not infer beyond the evidence.

Your first attempt in 3 minutes

The recommended main path is the officially listed Claude Code plugin installation. Inside Claude Code, run the two official commands in sequence:

/plugin marketplace add klsoen/opus-js-animations
/plugin install opus-js-animations@opus-js-animations

These are plugin commands inside Claude Code (not npm or system shell commands); the success signals are the marketplace being added successfully and the plugin opus-js-animations@opus-js-animations finishing installation. The official documentation also offers an alternative manual route: git clone https://github.com/klsoen/opus-js-animations, then copy skills/opus-js-animations into ~/.claude/skills/ to use it as a personal skill; this article does not present that as a co-equal recommended main entry point.

After installation, kick off a low-risk first "film" task in Claude Code with Claude Opus 5.5 — for example, describe a simple animation idea a few seconds long. The key point of the official workflow: at the Treatment stage nothing has been built yet, Nothing is built until you say go — no deliverables are built until you explicitly say go. So the confirmation point for your first attempt is: after reading through the five dialogue stages (brief, sound, listening, direction, treatment), decide yourself whether to say go. Whether this stage involves file writes, command execution, or network access is not stated in the official evidence; do not assume it is zero-risk or side-effect-free.

Success signals for the first attempt: you can complete a director-style dialogue with it (such as brief and treatment), you see the director's overview (Treatment) in the conversation, and no film files have been generated yet; if you continue to the rendering stage, the observable result is a frame-accurate MP4. The official documentation does not state the supported text/language scope, nor the form of intermediate artifacts before rendering — these are unknowns.

Use cases

• Case 1: Start from a one-line idea. Tell it a simple concept in Claude Code (e.g., a few seconds of geometric-shape animation). It enters the official five-stage dialogue (brief, sound, listening, direction, treatment), first giving you the director's overview (Treatment), and builds nothing until you say go. You can iterate on direction during the Treatment stage, then decide whether to green-light.
• Case 2: A short film with voiceover. Mention in the conversation that you want voiceover. The official documentation says voiceover requires an ElevenLabs/OpenAI key — that step alone; if you provide the key and proceed to rendering, the final result is a frame-accurate MP4. Without a key, you can still get as far as the Treatment/direction stage; the actual behavior of the voiceover step is not stated officially.

Both cases depend on you having met the environment prerequisites (Node ≥ 22, headless Chrome, ffmpeg, Python 3 + numpy); the evidence is insufficient to describe the interface details of every rendering step — what can be reliably confirmed is the dialogue flow and the final MP4 output.

Boundaries of use

• Environment and commands: the rendering/inspection tooling runs on Node ≥ 22 (no npm install); frame rendering depends on Chrome/Chromium headless; encoding depends on ffmpeg; audio analysis depends on Python 3 + numpy. These tools are invoked during the workflow, meaning local commands will be executed; the exact timing of each invocation is not itemized in the official documentation.
• Network access: voiceover requires a key for an external service (ElevenLabs/OpenAI); whether other network requests occur is not stated in the evidence.
• File writes: rendering outputs an MP4, but the official documentation does not specify the location of intermediate files or the output directory, nor whether you need to pre-authorize writes.
• Confirmation point: the officially documented biggest control point is that nothing is built before you "say go" at the Treatment stage; put all the changes you want before saying go.
• Platform differences: the plugin method installs inside Claude Code (marketplace + plugin install); the manual copy method targets a personal skill in ~/.claude/skills/. The official documentation lists only these two installation methods and does not state whether other agents or clients are supported.
• Not yet confirmed: the supported input language range, per-frame rendering time, whether any dialogue stage can be skipped, and fallback behavior when optional dependencies are missing are all unstated officially — do not assume otherwise.