# story-to-handdrawn-video

[中文](#中文) | [English](#english)

[](LICENSE)

---

## 中文

把中文故事文案或一组有序的手绘图片,转换成 3:4 竖屏**手绘故事动画**。内置 20 种可切换风格,包含彩铅日记、儿童蜡笔、极简线条、水墨、水彩、水粉绘本、Zine 拼贴、白板讲解与木刻社论等视觉家族;未指定时继续使用已确认并锁定的「彩铅日记漫画」默认风格。支持手写体字幕、从左到右的「文字 → 黑白画稿 → 彩色插画」揭示、可选右下角卷页翻书转场和安全不裁剪构图。基于 [Remotion](https://www.remotion.dev/),默认输出无配音、无音乐的 H.264 画面轨,方便后期配音。

本仓库包含两部分:

- **渲染器项目**(根目录):Remotion 工程,负责实际的分镜、动效和渲染。 - **Codex / Agent Skill**(`skill-package/`):可分发的 Skill,装进 Codex 等 Agent 后用自然语言驱动渲染器,无需手动跑脚本。

### 功能特性

- 中文故事自动分句和动态分镜,保留原文措辞 - 上传漫画页或完整图片,保持原顺序和构图 - 自动拆分上方文字区与下方插画区 - 本地生成与彩色插画对齐的黑白层 - `文字 → 黑白画稿 → 彩色插画` 从左到右揭示 - 可选右下角卷页翻书转场(纸背保留淡化的原页纹理) - 1080×1440 正式渲染和 720×960 快速预览 - Codex Image2 工作流,以及显式选择的 OpenAI API 工作流 - 20 种内置手绘风格,支持编号、英文 id、中文名和别名选择 - 每种风格附带固定示例图,并提供统一场景的风格总览

### 环境要求

- Node.js 20 或更高版本 - Python 3.10 或更高版本 - FFmpeg,且 `ffmpeg`、`ffprobe` 可从终端调用 - npm - Google Chrome,或由 Remotion 管理的兼容浏览器 - 支持 Skill 的 Agent 运行时(Codex、Claude Code、Kimi Code 等)

### 安装

1. 准备渲染器项目:

```bash git clone https://github.com/gnipbao/story-to-handdrawn-video.git cd story-to-handdrawn-video npm ci npm run check # TypeScript 检查 + 分镜结构校验,不访问网络 ```

2. 把 Skill 装进 Agent 的 skills 目录:

```bash # Codex cp -R skill-package/story-to-handdrawn-video ~/.codex/skills/

# Claude Code / 通用 Agent cp -R skill-package/story-to-handdrawn-video ~/.claude/skills/

# Kimi Code cp -R skill-package/story-to-handdrawn-video ~/.agents/skills/ ```

3. 告诉 Skill 渲染器项目在哪里(在渲染器项目目录内运行 Agent 时可省略):

```bash export STORY_VIDEO_PROJECT=/absolute/path/to/story-to-handdrawn-video ```

### 使用方法(Codex Skill 示例)

装好 Skill 后,全部通过自然语言驱动,分句、分镜、图片生成、导入、渲染由 Agent 按 Skill 约定自动完成。

**故事文本 → 手绘动画**(Skill 的默认提示词):

```text 使用 $story-to-handdrawn-video 把这段故事生成可后期配音的手绘动画。

<在这里粘贴故事文本> ```

也可以把故事放在 UTF-8 文本文件里:

```text 使用 $story-to-handdrawn-video 把 /absolute/story.txt 生成手绘动画,标题叫「纸上的夏天」。 ```

**上传图片 → 手绘动画**(图片按播放顺序给出):

```text 使用 $story-to-handdrawn-video 把这几张图片按顺序生成