Hand-drawn storybook animation — скилл

---
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. 风格配方