Turn Your Story into a Hand-Drawn Animation hand-drawn-storybook-animation

Turn your story into an animated picture book

A fox walks into the night as trees and distant hills appear stroke by stroke. The clip above is a short official preview from The Living Storybook. Watch how the scene emerges from the page and how the character’s movement conveys the story. This is not the full seven-minute work; the repository also has ink-wash, city-scroll, and night-time storybook previews.

hand-drawn-storybook-animation guides Claude through making storybook animations. Claude writes code that draws and animates scenes in a browser; Doubao is an optional voiceover service. The author used Claude Opus 5.5 for the examples, but using the same skill does not guarantee identical visuals or quality.

For this exercise, a timid lantern helps a lost traveler find the way home. Build one short scene before adding narration and subtitles. The requests below were written for this tutorial and have not been used to generate a finished work.

Install the skill and prepare your story

Install it in Claude Code

The installation section provides terminal commands for macOS/Linux. They copy the skill into ~/.claude/skills/ so Claude Code can read its instructions. On Windows, copy the repository’s hand-drawn-storybook-animation folder into .claude/skills/ under your user directory rather than running the cp command unchanged.

The official README also describes ZIP uploads for Claude on the web and desktop. This tutorial uses Claude Code with access to local project files.

The repository contains skill instructions and previews, not a complete animation project. It also lacks the referenced tools/tts/doubao.py script. After installation, ask Claude to build the animation project and voiceover code for your story.

Define the story and scope

Prepare an original story, character traits, and one idea viewers should remember. Start short rather than immediately targeting the author’s seven-minute duration. Open Claude Code in a new project directory and send:

Use hand-drawn-storybook-animation to plan a 45-second original story.
Audience: adults who enjoy warm, gentle stories.
Character: a round lantern with a slightly crooked handle, afraid of the dark.
Story: it initially lights only its own feet, then notices a lost traveler and decides to lead the way home.
Ending: it remains afraid, but is willing to go further to help someone.
Style: cream paper, pencil outlines, light watercolor, warm yellow light against a blue-gray night.
Draft the story, identify weak motivations or transitions, revise it, then prepare a shot plan.
Do not write animation code or call a voiceover service yet.

Check why the lantern changes its mind rather than judging the prose alone. Resolve a weak turning point before building scenes, when changes are cheaper.

Approve the shot plan and build one scene

Give each shot a purpose

Once the story is settled, continue in the same conversation:

Break the approved story into shots. List the visuals, character action, narration, and estimated duration for each.
Show the lantern's fear first, let its light reveal the lost traveler, and end with them walking toward a doorway together.
Keep its design consistent. Do not substitute a continuous camera pan for character action.
Explain the shots in text first. If image generation is available, provide a storyboard image for approval too.
Identify shots whose timing depends on narration. Do not synthesize audio yet.

Check that the sequence shows fear, discovery, choice, and action. Durations are estimates until actual voiceover is available.

Generate a short scene first

Use the opening to test the style and movement:

Implement only the first eight seconds: a night path gradually appears on cream paper, the lantern takes a tentative step, and its light trembles slightly.
Draw with code. Do not reuse the author's characters or finished footage.
Provide a runnable browser project, source-file locations, and install/start commands that match the actual project.
Include start, pause, replay, and sound controls. The story must continue without requiring plot-related clicks.
Do not build later scenes yet. Identify unfinished parts and do not label temporary browser speech as Doubao voiceover.

Start the project using the commands Claude supplies for those files. Check the drawing reveal, character movement, and whether pausing stops the animation. Once approved, ask Claude to extend the remaining shots while retaining the character and palette.

Add voiceover and check synchronization

Prepare the service and script

Doubao voiceover requires Volcengine speech-service credentials and access. Check pricing and quotas in your account. Without credentials, complete a preview without recorded narration first.

1. Enable the required speech-synthesis service in Volcengine and obtain working credentials.
2. Ask Claude to create a voiceover script and a configuration example without secrets, using the skill and current official API documentation. Ask it to list the dependencies and explain how to run the script.
3. Configure credentials locally without pasting them into chat or committing them. Review the script, then limit the first run to the sample described in the next section.

The skill’s tools/tts/doubao.py path describes a proposed script location, not a file already supplied by the repository. Ask Claude to create the script for your project, then use the actual path it provides.

Listen to a short sample first

Before running the voiceover script for the first time, send:

Generate audio for only one short scene, with one narrator line and one lantern line. Do not generate the full voiceover.
Use a gentle narrator and a slightly hesitant voice for the lantern.
Show me the lines, voice settings, and how to run the script for just this sample. Wait for approval before calling the service.

After approval, run the corresponding script locally and listen. If the voice or delivery needs work, change the settings and regenerate only this sample. Once satisfied, use the approved settings to produce the remaining voiceover.

Time the visuals to actual audio

After all voiceover has been generated, send:

Use the audio files actually generated for this project. Time subtitles and shots to each line's measured duration.
Use English dialogue with matching Chinese translations in the subtitles.
If a line runs longer, shift later shots and subtitles rather than cutting the speech.
Keep audio and visuals synchronized during pause, seeking, and replay. Retain audio, subtitle, and shot-plan files.

After synchronizing the subtitles and shots, watch the whole story to check speech, subtitles, and character actions, then test pause and replay. The skill also describes browser recording and vertical promos. Ask Claude to implement and verify export for your actual project; being able to play the animation in a browser does not mean an MP4 has been exported.

Revise a scene and adapt the method

When the middle feels slow, specify the change and what to preserve:

Change only the moment when the lantern discovers the traveler. Shorten the empty establishing shot, let the light reveal footsteps, then cut to the person.
Keep character designs, paper texture, and other scenes unchanged.
Preview this section first. If narration changes, regenerate the audio and update subtitles and later shot timings.
List changed files and anything not yet verified.

For an explainer, product story, or another original tale, rethink the audience, characters, turning point, and style. Replacing the lantern’s name with a product name will not make an unsuitable plot work. Use this template:

Audience: [viewers]. They should understand: [one idea].
Story: [character, problem, choice, and outcome].
Scope: [duration, aspect ratio, style]. Materials: [your files or reference sources].
Audio: [narrator, characters, languages, available voiceover service].
Approve the script and shots first, then build one short scene. Extend it after approval and retain source files.
Delivery: [browser page, landscape video, or vertical clip]. Explain the formats actually supported and any unfinished work.

At the time of review, the repository did not provide an explicit license. Public access is not unrestricted commercial permission. Confirm terms with the author before client delivery, and check service and source-material terms separately.