Turn an Article into a Narrated Animation wtt-code-animation-studio

Turn an argument into something viewers can see

An article can explain an idea through paragraphs. Animation needs visible events. Code Animation Studio accepts articles, ideas and existing scripts, develops a Chinese script, asks you to choose a visual style, then writes animation code, prepares narration and exports an MP4.

Watch the two creator samples above. The first runs for about 30 seconds, moving from a cartoon robot to sand drawing and particles, with Chinese narration, music and sound effects. The second is a roughly ten-second story about a bird delivering a letter, moving through pixel art, 2D glass mosaic and retro halftone printing. Notice how the bird, letter and postbox keep the story connected as the visual style changes.

In the original release article, the creator explains that the first film discusses Opus 5.5, while Codex wrote and rendered the animation code. The second is another test made with this skill. These are the creator’s samples, rather than generated versions of the exercise below.

This exercise uses a simpler subject: why breaking a large task into a small action can make starting easier. You will use visible actions to explain the article’s main point, compare styles using the same shot and keep picture timing aligned when narration changes.

Install the skill and choose a narration voice

In a terminal, clone the repository and copy the complete skill into Codex’s skill directory:

git clone https://github.com/WaterDJiang/Wattter_openSkills.git
mkdir -p ~/.codex/skills
cp -R Wattter_openSkills/wattter_skills/wtt-code-animation-studio ~/.codex/skills/

Claude Code users can use the repository’s plugin marketplace instead. Run these inside Claude Code:

/plugin marketplace add WaterDJiang/Wattter_openSkills
/plugin install wtt-code-animation-studio-skills@wattter-skills

Video production requires Python 3, Node.js, FFmpeg/FFprobe, Playwright and Chrome/Chromium. Prepare what the project needs; ordinary animation does not require installing a voice-cloning model.

An existing valid defaultVoice configuration takes priority. Without one, macOS can use say; other systems can use external narration. The bundled voice-cloning setup uses Qwen3-TTS MLX on Apple Silicon Macs, not a verified Windows or Linux cloning backend. If you explicitly request a personal voice and its configuration is invalid, resolve that issue rather than silently substituting a different voice.

The first preflight checks configuration and file presence. It does not establish audio quality. This tutorial was checked against the skill README, SKILL.md, production contract and style guidance. We did not install dependencies or generate this example.

Adapt the article into a script with visible actions

Supply your article and identify the audience and one main takeaway. Here, someone freezes in front of a whole-room cleaning task, then begins by picking up the first of three things on a desk.

Send the following to an agent with the skill installed. These example requests were written for this tutorial. We have not used them to generate a video.

Use wtt-code-animation-studio to adapt my article into a Chinese narrated animation.
Article: [path or pasted text].
Audience: people who struggle to start tasks that feel too large.
Main point: a concrete small action can make the first step easier.
Use “clean the room → put away three things on the desk” throughout.
Do not invent research findings or therapeutic claims.
Write the script first, including what viewers see and hear, then recommend styles.
Estimate duration from the content rather than stretching or cutting it to 30 seconds.

Cover the narration while reading the script. Do the visual descriptions still show a process? “The character feels pressure” is a state. “The character stops in front of a cluttered room, then picks up one book from the desk” describes something the animation can show.

The agent writes the script and storyboard. Initialisation tools supply a project foundation; they do not understand the article and make these creative decisions automatically.

Compare styles using the same shot

After the script, the skill offers one recommendation and two alternatives. Ask the agent to show how each style would handle the same shot so you can judge how style affects the explanation.

Direction	How it could show the organising action
Hand-drawn paper	Clear line drawings of objects, moved aside one at a time.
Retro print	Limited overprinted colours and halftones emphasise clutter becoming order.
Sand drawing	Particles form object outlines while the action stays recognisable.

These are editorial ideas, not rendered previews. The style catalogue guides implementation; new treatments still need scene code and validation for the film.

To choose hand-drawn paper, say: “Use hand-drawn paper, with simple lines and clear organising actions. Do not add other styles.” The decision goes into style-choice.md. If you have already chosen a style, the agent can use it directly. Otherwise, it waits for you to choose before continuing.

Make a first version around the actual narration

Once the style is chosen, the agent completes the storyboard, builds scenes and prepares audio before compiling the timeline. Shot length follows actions, reading time and actual narration, rather than assigning five seconds to every shot.

Make the first version in the selected style.
Establish the large task first, focus on three objects on the desk, and end with the first object put away.
Narration: [existing configuration path or external recording path].
Check key frames and shot boundaries, then play the whole film to check narration, captions and actions.
Deliver the narrated MP4, script, storyboard, source and commands for generating the video again.

film.json stores content and settings, scenes.js draws the scenes, and timeline.json is compiled from actual narration. Selected materials have source and version records. Record later asset replacements so that generating the video again uses the intended versions.

Play the first version rather than only inspecting screenshots. Does picking up the first object match the spoken phrase? Is there enough caption-reading time? Can viewers see a small completed result at the end? Captions are approximately timed using punctuation and character counts, not forced word-by-word alignment, so check them manually.

Revise one line and its matching shot

If the conclusion sounds too absolute, request a local change:

Change the closing narration to: “Completing one small action can make it easier to continue.”
Keep the style, character, first three shots and approved materials.
Regenerate or supply this shot’s audio, rebuild timing from its actual duration, then check the closing action and captions.
Show this section before exporting the whole film again.

Changing captions while keeping the old recording makes sound and picture disagree. Simply extending the last frame after changing audio can also break the relationship between action and pauses. Recheck narration, timeline, mix and export together.

Use your own article, product or story

Fill in these details to reduce guesswork:

Article or subject: [path or text]
Audience and goal: [who should understand what]
Must preserve: [facts, quotations, wording and numbers]
May adapt: [examples, order and phrasing]
Running example: [one concrete scene with a visible change]
Style: [already selected, or recommend options for me to choose]
Voice: [recording, valid voice configuration or available system voice]
Output: [aspect ratio, duration limit and caption language]
Start with the script and style options. Keep source and material records.

For product introductions, supply real interface material, capabilities and approved assets. Choose a main thread for long articles and divide it into chapters where useful, instead of filling time with repeated shots or slow playback.

See the production contract for details of the production process. Delivery includes final.mp4, script, storyboard, style records, project, material records and check reports. Keep personal recordings, voice configuration and model weights private and exclude them when sharing a project.

The repository README and marketplace declare CC BY-NC-SA 4.0, while the skill README still says a code LICENSE has not been supplied. These statements differ. This page displays the repository declaration and records that discrepancy; it does not describe the project as MIT or unrestricted commercial software. Voice models and third-party materials retain their own licences.