What are you
You are theselection and integration guidefor two Opus 5.5 code video workflows. Full templates, renderers, examples, and scripts are upstream; this directory only contains condensed specifications and previews.
- Upstream:https://github.com/tuzhechen2005/opus-video-skills
- Production and QA contract:references/production.md
painted-animation: p5.js + p5.brush, watercolor/ink character shorts, MVs, lyric videos, and loop animations.kinetic-reel: Canvas 2D + three.js/WebGL, dynamic typography, portfolios, product/title Reels, and synthesized scores.
Supported content/types
| User need | Choice | Unsuitable direction |
|---|---|---|
| Character performance, picture books, hand-drawn MVs, word-by-word lyrics | painted-animation |
Large amounts of body typography, data dashboards, true 3D |
| Portfolios, project collections, product promotion, strong-rhythm title sequences | kinetic-reel |
Soft character acting, watercolor textures, long dialogue-driven narrative |
| Only one of the styles | Install only the corresponding Skill | No need to install the entire project for the other style |
Core workflow
Step 1 — Confirm the brief and upstream environment
Confirm the theme, duration, aspect ratio, key content, fact sources, language, and existing assets. Lyric videos need the song file and LRC; portfolios need real project materials and length allocation. When the user has authorized direct creation, there is no need to repeatedly ask about optional details.
Install the upstream plugin (you can install only one as needed):
/plugin marketplace add tuzhechen2005/opus-video-skills
/plugin install painted-animation@opus-video-skills
/plugin install kinetic-reel@opus-video-skills
Requires Node.js, Google Chrome, FFmpeg; only painted-animation tempo detection additionally requires Python 3 + numpy. Create the project using the scaffold of the selected upstream Skill, and read its full guide; this directory does not copy template/、render.mjs or example projects.
Step 2 — Write the storyboard first
Create in the project STORYBOARD.md: duration budget, visual motifs, unifying thread, mechanism/event per shot, transitions, and sound. Character films add an emotional arc and key poses; Reels add fact sources, section proportions, and HUD information hierarchy.
Unless the user explicitly says to produce directly, first let the user give feedback on the storyboard. Do not treat the storyboard as a pile of "text appears" shots: every shot in a hand-drawn film needs an event, and every shot in a Reel needs a visual mechanism that proves the content.
Step 3 — Frame-by-frame construction and sound sync
- Each frame is a pure function of time
t, and the entire frame can be rendered independently and out of order. Wall clocks, unseeded random numbers, timers, and cross-frame state are prohibited. - Hand-drawn films: one IIFE per scene, key poses first then in-between motion; use the p5.brush drawing language and keep characters and materials consistent.
- Reel：
cues.jsunify scene starts, beats, sections, and total duration; each shot redraws the background, WebGL layers, 2D typography/graphics, and HUD. The score is generated from the same time data. - Music, lyrics, sound effects, and visuals read the same time data; sound effects align to actual transients, not just guesses based on BPM. Synthesized audio must also undergo loudness and peak checks.
Step 4 — Export after render review
At least one contact sheet per shot; add time strips for key actions/transitions; add full-resolution crops for story-bearing expressions or dense typography. Actually open the images to check, and re-render after fixing.
Short videos can use a single process; long videos render frames in parallel with resume support, then are encoded by FFmpeg. When only audio is modified, prefer remixing/reusing the already-verified visuals rather than pointlessly re-rendering the whole video. Finally decode the MP4 and check seams, subtitles, blank frames, audio-visual sync, resolution, duration, and audio.
Hard style constraints
painted-animation
- Watercolor/ink-wash visuals use
paint()、inkLine()and other brush languages; do not fall back to ordinary p5 geometric fills; flat 2D, do not use 3D projection to simulate turning. - By default, do not tell the story with on-screen text; word-by-word karaoke and a small number of onomatopoeic words are exceptions.
- Each shot has an event and causality, and the audience receives only one focal point at a time; characters cannot just be static props.
- Every shot seam must have a designed transition; actions have anticipation, follow-through, and reasonable contact relationships.
kinetic-reel
- Typography is the protagonist, and the visual mechanism proves the title; do not replace demonstration with long blocks of explanatory text.
- Chapter durations are allocated according to the brief, and core chapters do not excessively crowd out other content; editing, glyphs, and counting align with
hits。 - Factual numbers come from user materials; illustrative IDs, sample answers, structural diagrams, etc. are clearly marked
SCHEMATIC, and do not fabricate metrics or clinical effects. - Transitions prioritize shape/visual continuity; sound serves the structure, avoiding stacking a stimulating whoosh at every cut point.
Sources and licenses
Upstream MIT;painted-animation engine/guide and kinetic-reel renderer contain derivative content from John Heibel's ClaudeAnimationBase ; retain his copyright and MIT notice when reusing. p5.js, p5.brush, three.js, Puppeteer, FFmpeg, fonts, songs, and user materials are each subject to their own licenses.