Turn Narration into Animation in Seven Styles dashi-animationstyle

Make the picture explain the narration

Explainer videos often end up displaying keywords without explaining them. This skill uses Claude Opus 5.5 to write HTML / Canvas animation for a 15–60 second Chinese voice recording. Choose a built-in style, supply a reference image, or describe a visual direction, then review the result in stages before taking the clip into CapCut.

The image above is a frame from the author’s hand-drawn notebook example. A request appears on a computer screen, with “prompt” labelled alongside it: this gives viewers a concrete example of what the narration calls a prompt. The repository README compares seven styles using the same narration about tokens.

For this exercise, record a 20–30 second explanation in Chinese of why turning off notifications does not cancel a subscription. Explain that notifications control reminders, while cancellation requires checking subscription management and the resulting status. The aim is to show the difference, rather than putting every sentence on screen.

Install and render the bundled example first

The author has tested this only on Apple Silicon Macs with Claude Opus 5.5. You need Node.js 22+, FFmpeg and Google Chrome. In a Mac terminal, install the tools and clone the skill:

brew install node ffmpeg
git clone https://github.com/chuspeeism/dashi-animationstyle.git ~/.claude/skills/dashi-animationstyle

In Claude Code, ask: “Check the style-animation environment, then render the bundled example.” This follows the author’s documented starting workflow. The skill checks dependencies and renders the approximately 21-second Token example. Resolve missing requirements before using your own recording.

Some macOS fonts require downloading through Font Book. Rendering may still work without them, but fallback to PingFang changes the appearance. Automatic transcription optionally uses whisper-cpp. Without it, supply a transcript and check the estimated subtitle timing.

Installation and workflow details were checked against the README, SKILL.md and script documentation; we did not install the dependencies or render a video for this tutorial. The author’s bundled voice recording is only for trying the skill and cannot be reused in your own work.

Prepare your recording and choose a style

Put your audio and matching transcript in your project. The transcript should match what was actually said. Editing the text without updating the recording makes accurate captions and animation timing difficult. This skill works from existing audio; it does not generate your voice from a script.

Choose the flat flowchart style for this exercise because the content compares operations and explains their consequences. The seven built-in styles are 3D-style cartoon, dark tech, surreal collage, retro paper cut-out, vintage newspaper, flat flowchart and hand-drawn notebook. A separate reference covers 27 styles as guidance for developing new directions, rather than 27 ready-made templates.

Send the following request to Claude Code. These example requests were written for this tutorial. We have not used them to generate a video.

Use dashi-animationstyle to turn my Chinese narration into a flat flowchart explainer.
Audio: [path]. Transcript: [path].
Topic: why disabling notifications does not cancel a subscription.
Use a fictional app rather than copying a real product interface.
First compare stopping reminders with ending automatic renewal.
Then show opening subscription management, cancelling and checking the resulting status.
Keep the recording’s meaning. Do not invent unapproved product instructions.
Show the storyboard, then three key frames. Wait for approval at each stage before rendering.
Burn captions into the film, and retain the SRT and editable project.

Keep the work in your own project, such as animations/subscription_flat-flowchart/, outside the skill installation directory. Retain its recording, captions, storyboard, timeline, web page and video together for later changes.

Review the storyboard, then three key frames

Does the storyboard distinguish the two concepts? Turning off notifications should remove reminders while leaving the subscription active. Only the cancellation sequence should change its renewal status. Those consequences are what viewers need to understand.

If the storyboard only lists title cards, ask:

Do not use only a title saying that notifications and subscriptions are different.
Show two parallel areas: reminders stop on one side, while the subscription remains active on the other.
Then enter subscription management and show the changed status after cancellation.
Update the storyboard before rendering.

After approving the storyboard, review frames from the beginning, middle and end. Can viewers read the text at phone size? Are the two operations visually distinct? Is the final status clear? For handwriting or letter-by-letter reveals, also inspect a moment after the lettering has finished.

Play the first version with sound

Still frames check composition, not timing. Play the whole first version with sound, especially where the narration says “disable notifications” and “cancel the subscription.” The matching action should begin with the relevant words.

Make a first version from the approved storyboard and frames.
Check actions against spoken keywords and captions against the recording.
Check each transition for blank frames or captions changing too early.
Leave time to read the final status. Deliver the MP4, 字幕.srt and project directory.

Chrome draws the frames and the pipeline produces a 1920×1080, 30fps MP4 with narration. Add music, extra sound effects and live-action footage in CapCut. The author reports about half an hour for one 23-second project; content and revision needs affect that time. Rendering a bundled example in seconds does not mean an original production takes seconds.

For captions added later in CapCut, request a second version without burned-in subtitles. The upstream renderer’s --no-subtitle option removes both captions and their background strip, saving a separate _无字幕.mp4. Keep 字幕.srt for import into the editor.

Request a specific revision, then use your own subject

Suppose the film moves into cancellation around eight seconds while the narration is still explaining notifications:

Change the transition around eight seconds.
Keep the notification-versus-subscription comparison until the phrase about stopping reminders ends.
Start the next shot when the narration mentions subscription management.
Keep the approved style and copy. Show this section before rebuilding the whole film.

If you change the recording, recheck captions, timeline and affected visuals. Changing a hard-coded timestamp in the page can leave later shots out of sync.

For your own topic, fill in the following:

Recording and matching transcript: [paths, 15–60 seconds]
Audience: [who they are and what they may misunderstand]
What the picture should explain: [one concept, comparison or process]
Style: [built-in style, or reference and description]
Must remain accurate: [product facts, terminology, numbers and limits]
Materials: [your logo, colours and interface information]
Captions: [burned in, or added later in CapCut]
Approve the storyboard and three frames before the first version. Keep the project and SRT.

For a longer video, produce the passages that need visual explanation as separate clips. When developing a style from a reference image, approve a few style previews before producing the full sequence. Reference materials retain their own rights. Code and documentation use MIT licensing; the author’s example recording is excluded.