hand-drawn-cartoon

用途

Hand-drawn Cartoon 用于制作手绘故事书风格的卡通短视频：一个小角色在纸质舞台上表演一个想法或一个笑话，线条像墨水手绘、带轻微“呼吸”抖动，整体呈现温暖、幽默、像会动的绘本页面的质感。

主要能力

• 风格规范：所有线条使用深暖墨色（约 #2b1d16），1080 宽下 5–8 px，圆角连接，不用纯黑；整层墨线在 3 个略有差异的位移滤镜间每 2 帧（12 fps）切换一次，形成线条“boil”抖动。
• 纸张质感：始终保留暖白纸底、细微颗粒叠加与柔和暗角；阴影只用蜡笔排线或一层平涂深色，角色上不用渐变。
• 角色设定：圆润简单的大头或大身体、点状或椭圆眼睛带白色高光、小嘴与短肢，全身参与表演；角色应占画面高度的 25–45%。
• 动作纪律：动作要有因果，角色待机时会呼吸、眨眼、换重心；避免左右手臂镜像同步（twinning），各部件错开 2–4 帧；角色做预备、动作、接触挤压与回弹，镜头和文字用平滑缓出；每个场景保持一个主要运动方向，通过角色或道具跨场景延续而非交叉淡化；在 payoff 前加入 0.3–0.75 秒的定格姿势。
• 可调参数：format（竖屏 1080×1920、横屏 1920×1080、方形 1080×1080）、duration（默认 15 秒，10–45 秒较佳）、tone（calm 长停顿轻缓动、playful 默认、slapstick 更大挤压更快节奏更多剪辑）、character（默认简单圆角色，或匹配用户角色的轮廓与颜色），以及 characterColor、accent、paper、title、endLine、beats 等。用户可用自然语言指定，例如“竖屏、20 秒、slapstick”。

使用方式

1. 先写简报：用一句话说明核心想法或笑话；角色是谁、想要什么；先出什么错、转折或回报是什么；第一秒画面（钩子）是什么；结尾字幕或标题是什么。
2. 写节拍表：按时间列出画面、角色动作、文字与声音，时长累加等于目标时长；默认结构为钩子（1.5 秒）、尝试与失败、想法、再尝试、回报、片尾卡。
3. 写可读性表：每个节拍写明观众必须理解的一件事及其可读时长；一次只读一条信息；标签至少停留 0.8 秒，句子完全显示后约每词 0.3 秒；时间不够就删字而不是加速。
4. 环境准备：确认 node -v && ffmpeg -version；用 npx hyperframes init my-video --non-interactive --resolution portrait 初始化（横屏用 landscape），在已有空文件夹可用 npx hyperframes init . --non-interactive --resolution portrait，再把 index.html 替换为你的合成。
5. 选择实现路线：默认 SVG + GSAP，适合带 boil 的墨线描边、可复用的命名角色部件与无需 GPU 的快速渲染；需要真实水彩晕染与干笔纹理时用 p5.js + p5.brush，但需每帧从时间 t 重绘且随机性必须固定种子，渲染较慢。
6. 搭建画面：SVG 中提供 boil0/boil1/boil2 三个位移滤镜、grain 颗粒滤镜与 hatch 排线图案；角色按身体、眼睛、嘴、手臂、触角等拆分为独立组；尺寸放在内层 <g transform="scale(1.7)">，挤压拉伸以脚点为 svgOrigin（如 "0 6"）并保持体积（高 10% 则窄约 5%）。
7. 编排时间线：用 GSAP 时间线逐个节拍搭建；示例中含预备挤压 0.1–0.12 秒、起跳 0.4–0.5 秒 power2.out、顶部停留 0.3–0.5 秒、下落 0.25 秒 power3.in、落地挤压 0.08 秒后弹性回稳 0.5 秒、眨眼 0.12 秒每 2–4 秒不规则一次、头部倾斜 0.3 秒 8–12°。
8. 增强观感：第一帧就是完整画面（舞台、角色、天空与手绘卡片标题）；每个节拍都有东西在动（鸟、缓慢转动的太阳、飘云、触角摆动、眨眼）；一个大时刻用镜头跟随与视差；关键道具与标题关键词只用一种强调色；最后帧与第一帧一致以形成循环。
9. 校验与渲染：运行 npx hyperframes check、npx hyperframes snapshot --at <每个节拍一个时间点，加一个转场中间点>、npx hyperframes render -o renders/<name>.mp4；查看每张快照与 contact-sheet.jpg，确认相隔 1/6 秒的两张快照中线条明显不同（boil 生效）、角色站在舞台上不下沉、手机尺寸下可读、文字在安全区内、末帧与首帧一致。
10. 自评：按钩子、手机宽度可读性、动作质量、构图、准确度以及“静音测试”（无声音能否一句话概括）打 1–10 分，只修 7 分及以下项，重复快照直到全部 8 分以上；如条件允许交由独立的只读评审打分。
11. 交付：用 ffmpeg 抽取最强的稳定帧作海报并烘焙为第 0 帧，例如 ffmpeg -ss <t> -i renders/<name>.mp4 -frames:v 1 poster.jpg，再 ffmpeg -i renders/<name>.mp4 -i poster.jpg -filter_complex "[0:v][1:v]overlay=enable='eq(n,0)'" -c:a copy renders/<name>-final.mp4；附 1–2 句点明创意的说明文字，并告知每个节拍内容与可改参数。

适用场景

适合制作一语一梗的短动画、绘本式分镜视频、社交媒体竖屏或方形动效短片，以及需要手绘纸张与蜡笔质感的创意表达。

限制与注意

• 避免完美几何形状和未做 boil 的干净线条，否则会像扁平矢量；避免角色上使用渐变、发光与投影。
• 不要让角色过小淹没在空白中；文字不要压在角色脸上，也不要放在 9:16 画面底部 670 px 或顶部 270 px 区域内。
• 不得用 Math.random() 或依赖时段的逻辑，boil 与特效必须来自时间线。
• 已知失败模式包括：无 boil 与完美形状导致像矢量图；在移动组上缩放导致角色漂移或下沉；特效未在 0 时设置起始位置而从角落开始；中间调过多导致发灰低对比；缺少预备与回弹导致动作僵硬；手写字体行框相碰导致标题重叠（行间加 10–20 px 并在快照上确认）。
• 不要在两个复杂布局间交叉淡化，不要同时让多件事移动，不要用漂浮或摆动填补停顿，不要用粒子、彩虹渐变或 3D 翻转制造“活力”，不要为赶时间压缩文字。

依赖与参考

页面给出 HyperFrames 初始化与校验渲染命令；示例引入 GSAP 3.14.2（https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js）与 Google Fonts 的 Caveat Brush、Patrick Hand。配色为纸色 #efe6d2、浅纸 #fbf6ea、墨色 #2b1d16、强调色 #b8402f、天空 #b9d8e8、太阳或想法黄 #f5c842、角色色 #7fb6c9；9:16 下标题 80–110 px。文中引用若干公开作品作为学习案例。是否收费、价格与具体平台支持情况暂未提供。