像素短片 (Remotion + three.js + 像素精灵)
流畅的 3D 世界，像素风格的人物。所有内容（人物、建筑、纹理、音乐、音效）均由代码绘制或合成，因此作品完全原创，无需任何素材或许可。该模板是一个完整可用的入门项目；本文件包含了你需要的一切。
开始
新项目（复制 template/，安装依赖，生成音乐和音效，类型检查）：
~/.claude/skills/pixel-film/bin/new-film.sh <文件夹>
cd <文件夹> && npm run studio # 合成: Film (36 秒入门版) 和 CharSheet (每个角色及其姿势)
如果在已有的 Remotion 项目中使用：复制 template/src/film/、template/src/components/ui.tsx、template/src/theme.ts、template/scripts/ 和 template/public/fonts/，并从 template/package.json 中添加依赖（three、@remotion/three、@react-three/fiber、@types/three、@remotion/bundler、@remotion/renderer；所有 Remotion 包版本必须完全一致）。
构建前需要达成一致
只询问需要修改的方面；否则请自行选择并说明你的选择。
- 格式。 16:9 (1920×1080) 适合街道、跟拍镜头、YouTube 和 Facebook 信息流。9:16 (1080×1920) 适合 Reels/TikTok/Shorts，但画面较窄（水平视野约减半），因此宽镜头和过肩镜头需要重新构思。不确定时请提问——因为这会影响到每一个镜头。
- 故事和时长。 以场景表格形式编写，起始时间以 2 秒间隔为准（30 fps 下为 60 帧）：描述发生了什么、谁说了什么、一天中的时间以及相机设置。45–80 秒适合广告或短片。
- 语言。 标题卡和字幕使用观众的语言。
- 展示重点（针对产品或应用）：为功能设计一个清晰的瞬间，放在音乐的高潮部分，使用真实的产品（参见“展示真实应用”）。
构建模块 (template/src)
| 文件 | 说明 | 自定义 |
|---|---|---|
film/people.ts | 像素人物，64×112，使用 Canvas 形状绘制后转换为像素艺术（颜色吸附到调色板，背光面呈现 cel 着色效果，部件间使用深色线条，带轮廓）。视角：正面、侧面（行走循环 walk0–3）、背面。姿势：idle blink talk happy wave think worried phone pay、sideIdle sideTalk、back backPhone、sitPhone sitHappy。示例角色：owner kid uncle woman grandma man。 | PEOPLE：肤色、发色和 hairStyle（丸子头、短发、马尾、秃头、帽子）、上衣/下装/鞋子颜色、topDots、dress、apron、sleeveless、glasses、mustache、belly、kid、iris。可在 CharSheet 中查看。新服装、道具或发型需在 drawPerson、face、hairFront 中添加。 |
film/Street3D.tsx | 场景。中间是一家商店：内部（货架、柜台、灯泡、冰柜、凳子），正面（柜台上方宽大的开口，可选铁格栅和塑料门帘、招牌、柜台板、遮阳篷）。邻居（玻璃门面店、带条纹遮阳篷的关张店铺、房屋），二楼带阳台和百叶窗（夜晚亮灯），人行道，道路，带灯具和可选下垂电线的灯柱，一棵树，植物，一张桌子和椅子。灯光由 time 控制（0 早晨，1 中午，2 黄金时段，3 黄昏，4 夜晚；分数值可混合），包含阴影、天空、星星、雾和灯光光晕。人物是带阴影的发光广告牌。可选的 items（柜台上的商品）、cat、fx.beam / fx.scanX（扫描柜台的手机）。 | 顶部的 SET：招牌文字和颜色、墙壁颜色、柜台板、铁格栅、塑料门帘、商品（public/products/<name>.png）、邻居名称和颜色、上层楼、电线。坐标：店面在 z = 1.2（开口 x −2..2，y 1..2.3，柜台顶部 y = 1.0），柜台后的人位于 [0, 0, 0.25]，店门口的顾客位于 [0.7, 0.12, 1.95]；人行道顶部 y = 0.12，从 z 1.2 到 3.6，之后是道路；建筑沿 x 轴从 −19 到 19。若要更换场所类型（咖啡馆、办公室、市场），请在 JSX 中修改商店的部件：它由简单的盒子、平面和 Canvas 纹理构成。 |
film/kit.tsx | camMove（缓动相机关键帧 + 手持抖动）、who（沿路径移动的人物：行走时侧向面对行进方向，否则按预定姿势站立；空闲时会眨眼）、headAt（人物头顶的屏幕坐标）、Line（带说话者颜色的字幕）、Card（大标题或时间卡）、Sfx、steps（脚步声）、PhoneIn（带应用界面的手机）、Dim、Fade、num。 | SPEAKER_COLORS；HEAD 用于儿童头部高度。 |
film/Look.tsx | FilmLook：从太阳一侧射来的阳光，按时间变化的色彩分级，暗角，颗粒感，宽银幕遮幅。 | 将其置于每个 3D 场景之上，并使用相同的 time 值。 |
film/overlay.tsx、film/pixel.ts | 头顶的像素图标（bulb sweat heart question coin wifiOff clock zzz）和 FoundBox（找到物品周围的方框，带进度百分比标签）。 | 图标是 pixel.ts 中的小型字母网格。 |
components/ui.tsx | Phone：展示 1080×1920 截图的手机框架，支持缩放关键帧（cams）、点击和划屏切换。 | — |
film/Film.tsx | 入门版：早晨，标题下摇镜头和跟踪行走；黄金时段的双人对话；夜晚，所有人挥手，镜头后退并升起，结束卡。 | 替换为你的故事。 |
scripts/make-music.mjs + music-plan.json | 原创 upbeat 曲目（120 BPM，C–G–Am–F；马林巴、铺底、贝斯、主旋律 hook、risers、最终强音），按照计划编排，外加电影音效（whoosh、pop、tap、tick、beep、chaching、chime、shutter、scan、detect、check、sparkle、impact、printer、stamp、page、womp）。 | 计划，以秒为单位：sections（intro / main / break / end），lead 和 up 范围，hits（高潮点），final（结束前 4 秒）。 |
scripts/make-sfx.mjs | public/audio/8bit/ 中的 8 位音效（talk、coin、idea、cash、step、jump、select、done、scan、detect、womp、pop、tap、whoosh）和可选的 chiptune 曲目。 | — |
scripts/capture-screens.mjs | 将 Web 应用的真实界面截取为手机截图（见下文）。 | scripts/shots.json |
scripts/stills.mjs、scripts/audio-check.mjs | 在长时间渲染前检查帧和音乐。 | — |
镜头语法（如何营造电影感）
- 开场：使用升降镜头：从街道上方高处视野宽广，下降至街面高度（
[-5, 7.5, 21] → [-1.5, 2.6, 13.5]，fov 34）。 - 跟拍：从道路一侧跟随行走的人物：相机 x 坐标 = 人物 x + 0.9，z ≈ 7.4，y ≈ 1.35，朝向人物，fov 30。
- 双人镜头：从顾客一侧拍摄店面，而非从顾客身后（顾客站在 x 0.7 时，相机 x ≈ −0.9），否则顾客的精灵会遮挡另一个人。
- 特写：缓慢推近（fov 24–28），相机高于柜台高度（y ≈ 2.1，朝向 y ≈ 1.36），这样柜台上的物品不会遮挡面部。
- 过肩镜头：从店内，位于
backPhone姿势的人物身后拍摄：该人物低处取景，柜台和店外的顾客可见。 - 一排人物：横向平移跟拍。
- 结尾：所有人物靠近镜头挥手，然后镜头后退并升起，俯视整条街道（
[0, 1.6, 7.6] → [0, 10.5, 27]，向上看向[0, 3.6, 0]），结束卡置于其上，最后渐变为黑色。 - 时间卡（早晨、中午、金色时刻、夜晚……）在光线变化时置于顶部；对话字幕在底部（在电影尺寸下，字幕比对话框更易读）。
- 场景起始点应落在节拍线上（60 帧的倍数），并设置音乐计划，使高潮点落在关键瞬间，最终强音落在结束卡上。
展示真实应用
展示真实产品，而非模拟图。对于 Web 应用（或移动应用的 Web 版本）：使用虚构数据填充，然后执行 node scripts/capture-screens.mjs scripts/shots.json（需要 npm i -D playwright && npx playwright install chromium）。它会将 1080×1920 的手机截图存入 public/shots/。为 "camera" 提供一张 JPEG 图片，应用的摄像头会看到该图片，从而实现扫码或识别功能；使用虚构商品绘制该场景（使用 sharp 或 Canvas 将 SVG 转为 JPEG），不要使用真实品牌。将这些截图放在 PhoneIn / Phone 上，并配合 tap/select 音效计时。影片中显示的任何数字（价格、匹配百分比）应为应用实际产生的结果。
检查，然后渲染
npm run stills -- 100 400 900 …→out/stills/*.jpeg（半尺寸）。检查每个场景的帧：人物互相遮挡、面部被遮、文字覆盖招牌、夜晚像白天、字幕覆盖繁忙区域。渲染前修复；完整渲染很慢。node scripts/audio-check.mjs：250 Hz 以下低于约 65%，250–2000 Hz 不低于 30%，否则音乐在手机和笔记本电脑扬声器上听起来几乎无声。npm run render（--gl=swangle：在 CPU 上使用 WebGL）。启用阴影的 1080p 渲染预计每帧需数秒（80 秒影片在小服务器上约需 2 小时）；可在后台运行。或者用户在使用 GPU 的浏览器中从 studio 渲染。
常见陷阱
- 竖屏视野狭窄：距相机轴 1 米远的人若距离 2 米，则会超出画面。在 9:16 格式中，应垂直分离主体（相机较高，近处人物置于画面底部）。
- 精灵遮挡相机：位于相机与主体之间的人物会填满画面（它们是大而平的平面）。应移动相机，而不仅仅是移动人物。
- 低音过重的音乐在小扬声器上听起来像静音：为低音添加泛音，保持和弦与旋律在中频段，避免强低通滤波。
- 夜晚过亮：降低环境光和天空光，让灯具、招牌和亮灯窗户照亮场景（预设已如此设置）。
- 纹理：在
delayRender/continueRender中包裹异步加载，切勿请求不存在的文件（会导致渲染挂起）。 - 确定性：在帧或生成音频中不要使用
Math.random（使用种子随机数或 Remotion 的random(seed)），以确保重渲染时结果一致。 - 字体 随
public/fonts提供（Poppins、Caveat、Press Start 2P；SIL 开源字体许可证），因此渲染无需联网。 - Remotion 自带的 ffmpeg（
node_modules/@remotion/compositor-*/ffmpeg）滤镜较少：解码为 PCM WAV 用于分析，使用 libmp3lame 编码 MP3，使用-ss抓取帧。
规则
- 仅使用原创角色、场所和产品：不得使用真实品牌、标识或人物，也不得复刻已有的特定游戏、电影或节目（包括其角色、艺术风格或外观），即使重新命名也不行。
- 广告中的声明必须与产品实际相符。指出用户发布前必须确认的任何内容（例如“在应用商店免费”仅在产品公开后可用）。