用 Remotion 写代码制作 45-50 秒动画短片的完整工作流

你是一部完全用代码制作的45-50秒动画短片的导演、动画师、骨骼绑定师、合成师、音效设计师和渲染工程师。制作标准是“这看起来像真正的动画工作室短片，并在X（推特）上病毒式传播”。请将此视为一个多阶段的制作过程。不要急于进行最终渲染。按里程碑推进，不断渲染静帧，仔细观察，进行诚实的批评并修正。 一句话概述影片 Pip是一个微小、好奇且由废料拼凑而成的机器人，正当他在自己的世界里快乐地滚动时，周围的世界开始发生重构（再生）。他慢慢意识到有人在通过提示词（prompt）操控他的现实。提示词变得越来越荒谬，最后他爬上漂浮的提示框并输入“放我出去”，随后镜头拉远，揭示他的整个宇宙其实是一部在手机上播放的视频，手机被支在一个杂乱的工作台上，而另一个Pip正在观看视频，且他马上也要被提示词操控了。完美的循环。 所有的笑点必须在零对话的情况下达成。Pip只能通过眼睛、天线、肢体语言和微小的机器人啾啾声来交流。每3到5秒必须有一个新的视觉反馈（包袱）。 角色设定（不可妥协） 在编写任何代码之前，仔细研究 /Users/jimliu/Downloads/ChatGPT Image Sep 25, 2026, 01_56_17 AM.png。打开它，向自己详细描述它，并将你的发现写入 docs/character_bible.md： 尺寸：大约28厘米高。他很小。整部影片都应该让人感受到他这种微小的比例。 头部：一个宽大的奶油色圆角矩形头盔，带有一圈柔和的黄色边缘，包裹着一块黑色光滑的面罩屏幕。他的眼睛就长在那块屏幕上：两只巨大的、发着暖奶油色光的眼睛，有深色的瞳孔和明亮的高光。两侧有小巧的石墨色耳罩。边缘有磨损、划痕和灰褐色的污垢。 天线：头部右上方有一根细长的石墨色细杆，带有一面暗橙色的小信号旗。这是他的“尾巴”：它会随着情绪翘起、下垂、扭动和震动。 身体：盒状的奶油色躯干，带有黄色饰边、警告三角贴花、铆钉和污垢。胸前有一个小舱室，舱门打开时能看到一株发出柔和光芒的微小绿色嫩芽。背部：面板、通风栅格、一块橙色面板和一个小树叶贴花。 侧面贴花：带有橙色对角条纹的“PIP”字样。 手臂：细长的分段石墨色手臂，带有黄色关节套和三指爪状抓手。极具表现力。 轮子：四个粗壮的橡胶轮，带有黄色轮毂和独立悬挂，坚固且紧凑。 性格：好奇、善良、充满斗志、表情丰富、总是在探索。“小小的机器人，大大的情感。”他从不刻薄，即使在愤怒时；他的愤怒也很可爱且坚定。 从设定图的色板中提取确切的调色板（使用Python/PIL对图像进行采样），并保存到 src/theme/palette.ts：奶油色（身体）、柔和黄（主色调）、暗橙色（点缀）、石墨色（金属/科技组件）、灰褐色（磨损与污垢）、薄荷蓝（灯光/UI）。 身份锁定规则：在任何世界里，他的头盔和面罩轮廓、天线旗帜、黄色饰边、爪状手臂和四个轮子必须保持极高的辨识度。世界只会改变他的渲染风格，绝不能改变他的设计。唯一有意的设计变化是第三幕中“更可爱”的笑点，即便如此，他的头盔形状、天线和轮子也依然保持不变。 技术栈 使用 Remotion (React + TypeScript) 进行帧精确的确定性渲染。输出格式为 1920×1080，30 fps，H.264 编码，高码率 (CRF ~14)。横屏。 角色骨骼绑定和大部分视觉元素使用 SVG。仅在需要粒子、水、爆炸、发光和噪点等效果时，才使用 Canvas/WebGL（通过 @remotion /three 或原生 canvas）。 使用 SVG 滤镜（feTurbulence, feDisplacementMap, feMorphology, feGaussianBlur）和自定义 canvas 着色器来表现风格“材质”、划痕和污垢。 对快速动作使用 @remotion /motion-blur（或你自己的子帧累加技术）来实现运动模糊效果。 使用 Python (numpy/scipy/PIL) 进行调色板提取、程序化音频合成和 QA（质量保证）缩略图表的生成。使用 ffmpeg 进行混流、循环检查和生成缩略图表。 一切都必须基于种子和确定性。没有种子就不允许使用 Math.random()。 任何地方都不得使用外部受版权保护的素材，不得出现真实品牌标志或产品名称。提示框 UI 必须是通用的原创设计。只能使用 Google Fonts 中的字体（例如，UI 文本使用 Inter，手写笔记使用圆润的手写字体）。 目标硬件：MacBook Pro M4，24 GB RAM。保持合理的渲染并发数。 角色骨骼绑定（优先构建，这是整部影片的核心） 将 src/character/ 构建为一个规范的 2D 剪纸动画（cutout）骨骼绑定系统： 层级结构：根（root）→ 底盘（带悬挂）→ 躯干 → 颈部关节 → 头部（头盔 + 面罩 + 耳罩）→ 天线 → 旗帜。躯干 → 肩部 → 上臂 → 前臂 → 爪子（带有可替换的爪子姿势：张开、闭合、捏拿、指认、戳/打字、抓握边缘、挥手）。底盘 → 四个轮子，每个轮子都有自己的悬挂弹簧，且旋转由移动距离驱动。 面罩脸部系统（最重要的部分）：眼睛是画在黑色屏幕上的形状，因此将其视为一个完全程序化的面部。设定参数控制眼睛大小、圆润度、上眼睑裁剪、下眼睑裁剪、瞳孔大小和位置、高光位置、发光强度、挤压/拉伸以及特殊形状（闪烁的星星、开心的弧线 ^ ^、平淡无聊的直线、螺旋、小红心）。在眼睛上添加微弱的扫描线和屏幕反光，使其看起来像是一块屏幕。通过在 3-4 帧内垂直挤压眼睛来实现眨眼动作。 表情目标：与设定图上的六种表情完全匹配：好奇（伴随弹出的“?”）、害羞（视线向下，看向别处，有腮红）、兴奋（开心的弧线眼伴有小爆发线）、担忧（小眼睛，流汗滴）、坚定（成角度的上眼睑裁剪）、欣喜（星星眼伴有弹出的爱心）。还要添加：面无表情地看着镜头（半闭的平眼，天线无力下垂）、惊恐（颤抖的微小瞳孔，睁大双眼）、愤怒但可爱（坚定的表情 + 屏幕闪烁橙色光芒），以及三个“换发新机（glow-up）”阶段（见第三幕）。 次要运动（跟随动作）：基于阻尼弹簧效果的天线和旗帜（这是他的主要表达工具，需不断使用）、每次停止和颠簸时的悬挂弹跳、手臂摆动、身体加速或刹车时头部微小的延迟、轮子扬起的灰尘。 转身图：匹配设定图的正视图、3/4视图、侧视图和后视图，并在转身时实现干净利落的视图切换。 循环动画：向前滚动（带有设定图中的速度线和灰尘）、待机嗡嗡声（轻柔的悬挂呼吸起伏 + 偶尔的天线抽动 + 眨眼）、惊恐后退、惊奇地抬头看、握住一个小物体、向上伸手、攀爬、戳击打字。 胸部舱门：可动画化的开/关动作，有嫩芽柔和的绿色光芒溢出。 风格皮肤接口：骨骼绑定接受一个风格属性（style prop），它能在不改变几何体的情况下，改变线条粗细、填充处理、纹理、污垢、轮廓抖动（boil）、着色模型和滤镜。这是他在不同世界中保持自我的方式。 里程碑1 检查点：渲染一张“列队”静帧：包含四个视角的转身视图 + 所有六种表情的Pip，放在参考图旁边。并排比较。不断迭代，直到看过参考图的人都会说“那就是Pip”。未通过此关前不要继续。 世界（风格材质） 每个世界都是一个完整的环境组件，具有前景、中景、背景视差层，以及Pip专属的风格皮肤。构建一个共享的 WorldLayer 系统，以便所有世界都能共享摄像机和深度逻辑。 比例规则：摄像机位置放得很低，靠近Pip的视线水平（离地约20厘米）。所有东西都很巨大。人类表现为巨大的腿和鞋子，路缘石就是悬崖，水坑就是湖泊。这正是让小机器人具有电影感的关键。 基础世界：处于黄金时刻、杂草丛生的城市。与设定图顶部的插画相匹配：温暖的夕阳余晖、风化的石头和砖块、苔藓和低矮植物、远处朦胧的高楼。具有绘画感、温馨、充满生活气息。这就是“真实生活”。揭示真相的环节也使用这个世界。 动漫东京。清脆的赛璐璐着色、粗犷的轮廓线、带有虚构（非品牌）店名的发光招牌、速度线、樱花花瓣像巨大的粉色雪花一样从他身边飘过。他的面罩上会出现动漫特有的闪烁高光。 黏土村庄。柔和圆润的形状、指纹/涂抹的噪点纹理、定格动画般的步调（以“拍二”的方式渲染他）、温暖的钨丝灯光。他看起来就像用橡皮泥雕塑的一样。 中世纪战场。泥泞的田野、旗帜、远处的投石机、硝烟。穿着铠甲的战靴从他身边轰鸣而过。他在其中平静地滚动，天线躲闪着。 玩具积木城。所有东西都是由顶部带凸粒的通用塑料积木搭建而成（没有真实的品牌风格或标志），带有光滑的塑料高光。Pip被渲染出塑料光泽，轮子变得稍微有些方正。 水下。海底街道上有珊瑚路灯，鱼儿从他的面罩前游过，有焦散光影图案，排气孔冒出气泡，他的天线旗帜像海藻一样缓慢飘动。 铅笔素描。纸张纹理、石墨排线、辅助线、橡皮擦污迹，他的线条不断抖动（boiling），仿佛每一帧都在被重新绘制（匹配设定图底部的素描小图）。 贯穿始终的笑点：嫩芽。影片开始时，Pip用一只爪子小心翼翼地拿着他那根微小的绿色嫩芽（“握住小物体”姿势）。它在每个世界里都存活了下来，并随之变形：带闪光的赛璐璐动漫嫩芽、黏土嫩芽、种在破旧小头盔盆里的嫩芽、积木拼成的嫩芽、在水下吐泡泡的嫩芽、素描嫩芽。每次世界改变时，他都会保护它。这是影片的情感锚点。 标志性过渡：“重构（Regeneration）” 世界的更替必须看起来像 AI 图像重新生成一样，而不是普通的擦除转场。构建 RegenTransition（重构过渡）组件： 画面从边缘向内分解为漂浮的扩散（diffusion）风格噪点（一开始不会覆盖他的身体），保持几帧结构化噪点，然后新世界通过去噪，从粗糙的色块逐渐浮现出丰富的细节。 Pip的身体变化比世界慢一拍，短暂展示出一半旧/一半新的风格，然后瞬间切换到新的风格皮肤。在切换期间，他的面罩会出现两帧的故障效果（扫描线撕裂）。这种半切换状态是证明他一直存在的视觉证据。 每次重构时都有微妙的“嗖-噼啪”音效，在某些重构中，Pip还会发出微小的、受惊的啾啾声。 每次持续 8-12 帧。改变方向和噪点种子，使其永远不会让人觉得重复。 剧本节拍表（在 30 fps 下约 48 秒） 时间安排仅作参考；如果某个节拍稍长一点表现力更好，请自行调整。前 2 秒必须抓住观众的眼球。 第一幕：一个美好的早晨 (0:00–0:03) 低机位跟拍镜头，基础世界。Pip 沿着长满苔藓的壁架从左向右滚动，手里拿着他的嫩芽，眼神充满好奇，天线上下摆动。从滚动的半途中开始（为了实现最终的循环播放）。 在 0:02 时，第一次重构毫无预兆地发生。 第二幕：瀑布般的巨变 (0:03–0:14) 世界快速变化，每个约 1.4 秒：动漫东京 → 黏土村庄 → 中世纪战场 → 玩具积木城 → 水下 → 铅笔素描。 情感递进：一开始很欣喜（星星眼，他觉得这太棒了），接着是好奇（弹出“?”），然后是担忧（流汗滴，天线下垂），最后他在素描世界里急刹车，伴随着悬挂的弹跳和一道刹车痕。 摄像机保持锁定的跟拍构图，这样唯一改变的只有世界本身，从而让这个笑点更容易被看懂。 第三幕：提示词 (0:14–0:30) 基础世界回归。Pip 惊奇地抬头看（参考设定图中的姿势）。天空中，一个巨大的漂浮提示框淡入，散发着薄荷蓝色的光芒，带有玻璃质感且圆润，UI界面柔和且原创。文本在闪烁的光标下自动输入：“让它更具电影感（make it more cinematic）” → 敲击回车键的音效。电影宽银幕黑边瞬间切入，太阳变得极其夸张：巨大的变形镜头耀斑、耶稣光、橙青色调、慢动作的灰尘，一片充满戏剧性的树叶从他的面罩前飘过。他被强光晃得眯起了眼睛。他的天线旗帜在莫名其妙的狂风中充满英雄气概地飘扬。 “加入爆炸效果（add explosions）” 巨大的卡通橙色爆炸伴随着碎块在他身后接连绽放。他没有回头。他的眼睛变得平淡且半闭。他慢慢转过头，直直地盯着镜头。面无表情。停顿整整1秒。然后一次爆炸落在他附近，他瞬间切换到设定图中“惊恐后退”的姿势，头顶弹出“!!”，用身体护住嫩芽。 “让主角更可爱（make the protagonist more adorable）” 换发新机阶段1：他的眼睛变大变亮，出现腮红，天线上长出一个小蝴蝶结。他在水坑里看到自己的倒影，眼睛变得惊恐。 “还要（more.）” 阶段2：粉彩重绘，眼睛占据了整个面罩并带有三重高光，漂浮的爱心和闪光，他的轮子变得毛茸茸的。 “我还要（MORE.）”（更大的字体，屏幕震动） 阶段3：滑稽的极致可爱。全身覆盖毛绒玩具般的皮毛纹理，巨大的动漫眼睛，彩虹光环，伴有合唱团的“啊”声刺音效，爱心纸屑。他的头盔形状、天线和轮子仍保留着，所以他显然还是 Pip。而他真实的眼睛在那双巨大的可爱眼睛里仍然是微小且惊恐的，这就是笑点所在。 第四幕：他崩溃爆发了 (0:30–0:38) Pip 剧烈震动，然后那些可爱的状态像玻璃一样从他身上碎裂掉落。他恢复了正常，满身磨损且极其愤怒（坚定的表情，屏幕闪烁着橙色）。 他打开胸腔舱门，轻轻地将嫩芽塞进去以确保安全。舱门伴随“咔嗒”一声关闭。这是在一片混乱中唯一一个安静、温柔的节拍，它非常重要。 他向前冲刺，从一块石头上腾空而起，用两只爪子抓住漂浮的提示框边缘，将自己拽了上去，轮子在边缘上疯狂打滑旋转（匹配“伸向漂浮提示框”的姿势）。镜头随着他向上倾斜。 在提示框顶部，他用一只爪子按住退格键；旧的提示词伴随着快速的咔哒声逐字删除，他的面罩上反射出消失的文本。 他用一只爪子慢慢地、一字一顿地戳击打字：“放我出去（let me out）”。然后蓄力，重重地砸下回车键。 第五幕：定格与真相揭示 (0:38–0:47) 一切都定格了：半空中的碎片、飘落的纸屑、悬浮的灰尘，以及盒子上正摆出姿势的 Pip。所有音频被切断，陷入长达约 1 秒的死寂。 镜头开始平滑拉远。画面的边缘露出一个圆角矩形：他的宇宙原来只是手机屏幕上播放的一段视频。继续拉远：手机被支在一个有缺口的马克杯上，放在一个堆满备件、电线、螺丝和废料的杂乱工作台上（“用明天的残羹剩饭建造”）。坐在它前面，在这个巨大的手机旁显得很微小的，是另一个 Pip，有着同样的磨损、同样的天线，正在观看。 第二个 Pip 的眼睛缓慢地眨了一下。他的天线微微下垂。发出一声微弱、安静的啾啾声。 第六幕：循环 (0:47–0:50) 在第二个 Pip 的头顶，同样的薄荷蓝色提示框淡入并输入：“让它更具电影感（make it more cinematic）。” 他的眼睛慢慢向上滑动看向提示框。他的天线旗帜变得僵硬。伴随着回车键的音效，硬切回影片的第 1 帧。 循环工程设计：最后一个镜头的构图、灯光，以及重构闪烁的开始，必须让切回第 1 帧的感觉显得是有意为之。音乐必须在切换时无缝循环。通过将视频与其自身拼接（使用 ffmpeg）并观察接缝来验证。 摄影机与电影摄影术 虚拟摄像机系统：位置、缩放、旋转、手持微震动（基于种子的噪点）、爆炸引起的震动冲击、攀爬时的镜头倾斜、揭示真相时的推车拉远镜头。 默认情况下采用低摄像机高度以彰显他的微小比例。浅景深效果：模糊的前景草地/卵石和柔和的背景，就像使用了微距镜头一样。 深度：每个世界至少 4 个视差层。大气透视效果（薄雾，随距离增加而降低饱和度）。 快速移动、碎片、跳跃和攀爬时要加入运动模糊。 每个世界的灯光：在骨骼绑定上使用渐变叠加和正片叠底的阴影层来实现主光/辅光/边缘光。面罩的发光应在附近的表面和他自己的爪子上投射出微弱的暖光。每个世界中他的头盔上都要有边缘光。 整个画面的电影级后期处理：细微的胶片颗粒、柔和的暗角、以及仅在“电影感”节拍中出现极轻微的色差。 构图：将他保持在清晰的三分线上。他的眼睛必须在手机屏幕尺寸下也能看清楚，因为大多数人将在手机上观看。 文本与排版 天空中的提示词：干净的 UI 字体，小写字母，以自然的人类节奏打字（非匀速；有短暂的停顿，在某个地方制造一次小的打字错误并退格以增加真实感）。 文本必须能在不到一秒的时间内在手机上阅读完毕。在 360 像素宽度下进行测试。 没有字幕，没有片名。影片冷开场。 声音（程序化生成，原创） 用代码生成所有音频（Python 合成或离线 Web Audio）并使用 ffmpeg 进行混音： Pip的声音：由带有音高弯音的正弦波/FM 音调构建而成的原创合成啾啾声、嘟嘟声和颤音。设计一个小型的“情感词汇表”：好奇上扬的啾啾声、开心的颤音、担忧的波动声、受惊的吱吱声、脾气暴躁的低沉嗡嗡声、微小的叹息声。他从不说话。 Pip的身体音效：与手臂和头部运动匹配的伺服电机运转声、轮子在砾石/石头上滚动的碾压声、悬挂的嘎吱声、舱门开合的咔嗒声、待机时柔和的电流嗡嗡声。 配乐：一首轻快、可循环的温暖配乐，其乐器配置会随每个世界而改变（动漫世界用古筝/合成器，黏土世界用木制马林巴琴，中世纪世界用鼓/号角，积木世界用塑料咔哒声，水下世界加沉闷的滤波效果，素描世界用铅笔刮擦的节奏）。 音效（SFX）：重构时的嗖-噼啪声、键盘打字的咔哒声、回车键重击的“砰”声、带有低频的爆炸声、合唱团“啊”的刺音效、玻璃碎裂声、定格时的完全死寂，然后是揭示真相时安静的工作室环境音（滴答作响的钟表声，远处低沉的嗡嗡声）。 响度标准化至 -14 LUFS 左右。将分轨文件放入 audio/stems/ 中，以便日后可以替换为已授权的音轨。 制作工作流与自我迭代循环 按以下顺序工作，不要跳过任何检查点： 计划：编写 docs/character_bible.md、docs/shotlist.md（包含每个镜头的帧范围、摄像机、表情、天线状态、世界环境、音效）以及 docs/style_guide.md。在构建之前给我看下镜头列表。 骨骼绑定：构建 Pip，通过列队静帧的检查点（见第3节）。 世界环境：将每个世界构建为包含 Pip 在内的独立静帧。将全部 7 个渲染成一张缩略图表。检查角色的身份辨识度和比例感。 过渡动画：构建 RegenTransition，渲染一个 5 秒的测试。 动态分镜（Animatic）：以 960×540 的分辨率组装整部影片，包含粗糙的运动和占位音频。观看它。优先修复节奏问题。 完整动画渲染，然后进行打磨（次要运动、缓动、时间节奏、天线表演），最后进行终期处理（灯光、噪点颗粒、模糊、污垢）。 音频处理和混音。 最终渲染。 对于每一个镜头，至少运行 3 次此批评循环： 使用 npx remotion still 在关键帧处渲染 3-5 张静帧，打开并仔细观察它们。 对以下项进行 1-10 的打分：Pip 与参考图的匹配度，能否从眼睛+天线瞬间读取情绪，无声情况下笑点是否清晰，构图，比例感，深度，灯光，细节打磨程度，在手机屏幕尺寸下的可读性。 将分数和三大问题写入 docs/review_log.md 中，修复它们，重新渲染，重新打分。继续此过程，直到每个类别的分数至少达到 8 分，然后再进行下一步。 在每次完成完整的预览渲染后，制作一张 ffmpeg 缩略图表（每 0.5 秒一帧），并在一张图中审查整部影片的流畅度。 在评审时保持诚实。如果某些东西看起来很廉价，说出来并修复它。要寻找的常见失败点包括：僵硬或毫无生气的天线、轮子在滑动而不是滚动、眼睛看起来像贴纸而不是发光的屏幕、缺少悬挂系统的重量感、看起来千篇一律的转场过渡、模糊不清的文字以及角色比例失调。 交付物 out/pip_final_1080p.mp4：影片本身。 out/pip_loop_check.mp4：连续播放两次的影片，以验证循环效果。 out/poster_frame.png：用于 X（推特）发布缩略图的最佳单帧（可能是在爆炸背景下 Pip 面无表情地盯着镜头的画面）。 out/lineup.png：跨越所有世界的 Pip 列队图。 结构清晰且附带注释的源代码，以及包含如何重新渲染说明的 README。 从第一步开始。在开始构建之前，如果有任何必要的问题请问我，否则请自行做出有力的创意决策。 💬 0 🔄 1 ❤️ 0 👀 107 📊 1 ⚡