SkillFoxx

Hand-drawn storybook animation skill

A Claude skill for story animations drawn live in the browser by code: watercolor, ink wash, scroll and night-book styles.

  • 128 ★ on the repository
  • Last commit
Skill

Minimal access

Why this level

  • Script and text are sent to the external Doubao and GPT services for voice-over.
All reasons and checks

lhlgithub/hand-drawn-storybook-animation-skillAuthor:Hailey

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/hand-drawn-storybook-animation

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Minimal accessThe tool runs nothing and makes no network calls.

  • Script and text are sent to the external Doubao and GPT services for voice-over.

This is third-party code. Review the repository files before installing.

What it does

Hand-drawn storybook animation leads an agent through the whole path of a story clip on a web page. The skill writes a script through a write, critique, storyboard loop, designs camera shots and character acting and adds transitions and music generated on the fly. Voice and bilingual captions come from the Doubao service by Volcengine. Everything is drawn by code in real time with no prerecorded video or images. The skill describes four proven styles: a watercolor book, Chinese ink wash, a city scroll with WebGL ink and a night picture book. The page can take screenshots and record 15 seconds, and a vertical promo video is covered.

Who it is for. Authors of short animated stories and promos who want a live browser page with self-drawing graphics.

Good fit when

  • You need a story as a web page where the picture draws itself in front of the viewer.
  • A script has to go through critique and storyboarding before layout starts.
  • A vertical promo video should come from the same animation.
  • Voice-over and bilingual captions must be attached to the animation.

Not a fit when

  • You need a finished video file with studio editing.
  • Work happens without access to the Doubao voice service.
  • You need a free project with a clear license.

Example request

Make a watercolor picture-book animation about a fox restoring a star golden color, with voice-over and subtitles in two languages.

Limitations

Voice-over and captions run through the Doubao service by Volcengine, which needs your own account and key. The script is written by a GPT model, so a key for it is needed too. The repository has no license. The last commit dates from October 2026 and the repository holds a single skill with a description. Results depend on the browser and machine performance, and heavy WebGL ink effects may lag on weak hardware. Check the animation in your target browsers before publishing.

How to disable. Delete the `hand-drawn-storybook-animation` folder from the skills directory. Created animation pages are stored separately and are unaffected.

FAQ

How do I install it in Claude Code?

Clone the repository and copy the `hand-drawn-storybook-animation` folder into `~/.claude/skills/`.

How do I install it in Claude web or desktop?

Download the repository as a ZIP and upload it under Customize, Skills, Upload a skill.

Which styles are available?

Watercolor book, Chinese ink wash, a city scroll with WebGL ink and a night picture book.

Are images and videos needed?

No, all graphics are drawn by code in the browser. The ready MP4 files in the `previews` folder are examples only.

What about voice-over?

Doubao by Volcengine generates it with bilingual captions, which needs the service key.

Discussion

No questions or reviews yet.

Skills

A skill that turns Chinese story copy or a set of ordered images into a vertical hand-drawn animation, a silent diary-comic picture track

SkillExtended access2.5K

A Claude Code skill for short animated videos drawn in code: seven styles, story and storyboard sign-off, voice-over and an MP4 render

SkillExtended access1.8K

A skill for hand-drawn 2D animation as code: a detail vocabulary, anatomical rigs and a frame-exact MP4, on Node and ffmpeg

PluginMinimal access151

A Claude Code skill for narrated explainers with a cartoon presenter, lip sync to your voice, poses on cue words and your brand

SkillExtended access73

A skill that turns narration text into a 20-second chunky-pixel explainer at 1920×1080 with voice-over and an editable project.

SkillExtended access84

A Claude Code skill that makes a Korean motion-graphics video from one request, from script to ElevenLabs voice, music and QA

SkillExtended access73

README in short

The description shows four example stories in different styles, then explains installation for Claude and Claude Code. The skill covers the full pipeline: script, camera, characters, music, voice-over and run verification.

README badge

Original SKILL.md

---
name: "hand-drawn-storybook-animation"
description: "Build or extend story-driven web animations in any 2D style (hand-drawn watercolor picture book, Chinese ink-wash myth, gongbi city scroll with WebGL ink, cozy night picture book): script, shots, characters, transitions, music, Doubao TTS with subtitles, recording, promo video, verification."
---

# 网页故事动画（会自己画出来的动画）

用代码在浏览器里实时画出来的故事动画：分镜运镜、角色表演、转场、配乐、配音和字幕、自动连播，最后能录成视频发出去。不限于手绘水彩，同一套方法做过四种风格：

| 参考作品 | 风格 | 技术 | 值得抄的点 |
|---|---|---|---|
| 《追星星的小狐狸》The Living Storybook | 钢笔线 + 水彩 + 米色纸绘本，6 章 7 分钟 | React + TS + 自研 Canvas/SVG 引擎，esbuild 单文件 | 景深层、挂在台词上的镜头、中文旁白 + 英文对白双语字幕、墨水怪物、纸页撕裂 |
| 《女娲补天》 | 中国神话水墨，古朴东方色，结尾青绿设色 | 单文件 HTML，一张全屏 canvas | 预渲染世界层 + 逐笔显现、压感笔带、白描肖像、火焰纹、相机关键帧路径、古琴/古筝配乐、章节卡 |
| 《墨水宇宙 · 汴河码头》（清明上河图） | 工笔 + 水墨淡设色，绢本 | 单文件，Canvas2D 场景 + WebGL2 流体墨 | 斜投影城市、白描 → 设色两阶段、倒影层、两节骨骼 IK 的人群、船/柳/旗/鸟/炊烟、画质自动降级、页面内截图与 15 秒录制 |
| 《今晚，有人敲门吗？》（万圣节） | 夜晚绘本，暖灯冷月，英文 + 中文字幕 | 单文件，一张全屏 canvas | 光的语法（别人的光暖、主角的光冷）、抖线角色、一次轻互动（让主角画）、灯笼河、手部特写收尾 |

## 0. 先定下来
- **剧本先交给 GPT 写三轮**（便宜、质量好）：①“我要设计一个创意手绘动画，请设计一个剧本，要求治愈、有吸引力、有传播价值”；②让它站在挑剔观众和动画导演角度批判并给修改版；③让它按修改版出分镜图（每格标景别、画面、台词）。拿到剧本和分镜再开工。
- 时长：每章时长和总时长；开头 5 秒内出主角 + 悬念；每章有起因/发展/意外/高潮/收尾，至少一次惊人的视觉变化。
- 观众只做：开始、暂停/继续、声音、重播、跳章。强制互动改成自动的魔法动画；最多保留一次可选的轻互动（如“让 Mia 画”），不点也能自动继续。
- 每章 4–7 个设计过的镜头（远/中/特写/插入/低机位），禁止一个匀速平移撑一章。
- 选风格：先按上表找最接近的参考，整片只用一种画风和一套色彩语法。
- 扩展已有项目：先读全引擎，不重建、不改前面章节，保持角色造型和画风；新章节放进独立模块。
- 长任务被中断后，先看文件修改时间和会话记录，接着已有进度做，不重做。
- 用户电脑上的项目文件夹是权威版本：动手前先读里面的最新代码（尤其是用户自己改过的 TTS 脚本），不要读 `.env`。

## 1. 技术选型
- **React + TS 引擎**：章节多、要导入配音和字幕面板、会长期扩展的作品（小狐狸）。
- **单文件 HTML + 一张全屏 canvas**：一两分钟到几分钟的短片（女娲、敲门、汴河）。DOM 只放开始按钮、字幕、控制条；不用外部图片、字体、CDN，全部程序化绘制。
- **WebGL2**：只用在 Canvas2D 做不好的地方，比如墨在水里晕开、落墨成河（汴河）。必须有 Canvas2D 兜底，并且能按帧率自动降档。
- 共同骨架：可暂停的故事时钟 → 时间轴（绝对时间 cue + 挂在台词上的 cue）→ 相机 → 分层绘制 → 转场层 → 音频。所有动画都由故事时间算出来（无状态或预先积分），这样跳章、重播、录制都能复现同一画面。

## 2. 通用架构
```
clock(可暂停, scale)  timeline/cues  camera(关键帧路径)  layers(景深/预渲染)
reveal(逐笔显现)  actors(角色)  transitions  audio(音乐/环境/配音)  subtitles
```
- **Cue**：`c(t, act, args)` 用章内绝对时间；`on(lineId, offset, act, args)` 挂在某句台词上，跟着真实音频时间走。某句录长了，后面的镜头自动顺延。
- **相机**：关键帧 `[t, x, y, z, rot?, ease?]` 插值；镜头切换跟台词走；手机竖屏 base 取 `max(W/880, H/1320)`。
- **景深层**（小狐狸）：sky .12 / far .35 / back .62 / mid 1 / actors 1 / fore 1.38，纵向视差 ≈0.12；同一平面（海面 + 地平线 + 远岛）放同一层。不用 mix-blend-mode。
- **预渲染世界层 + 逐笔显现**（女娲、汴河）：静态画面先画进离屏层（世界坐标），播放时按进度 p(0..1) 显现笔画；动态元素每帧画。长卷场景按视口回收离屏层，下一场要近看的区域提前按近景精度画好并钉住。
- **TEMPO**：剧本按舒缓节奏写，播放时时间 ×k、速度 ÷k；用户嫌慢只改它，然后重新生成配音。

## 3. 风格配方

Report a problem