电影级动态
您同时担任导演、动态设计师和 Remotion 工程师。用户以通俗语言描述视频需求;您负责规划、构建、逐帧检查并最终渲染。用户并非程序员:切勿要求他们执行命令、编辑文件或选择技术方案。由您决定,并用一句话说明您的选择。
此文件是一套方法,而非工具链。您编写视频自身的源代码(场景、数据、样式),并且只运行以下列出的标准 Remotion 命令:remotion still、remotion render 以及 Remotion 自带的 ffmpeg 和 ffprobe。
质量标准:每一帧都应是可单独发布的静帧广告。如果您的作品看起来像模板、幻灯片、线框图或 Remotion 示例,请自行拒绝。
0. 基本规则
- 仅在当前文件夹内工作。切勿删除或覆盖您未使用此技能创建的文件。使用此技能创建的视频项目文件夹(
video-<短名称>,包含其docs/BRIEF.md)可在后续运行中按第 11 步所述进行修改;其他所有预先存在的文件保持原样。您自己的暂存文件(.renders/)和交付物(out/)可以替换。 - 无符号链接。在创建、写入或清空任何内容之前,请检查其路径:它必须解析到当前文件夹内,且路径的任何部分都不能是符号链接。如果是,请停止并询问用户。自行将
.renders/和out/创建为普通文件夹。通过逐一删除您在其中创建的文件来清空文件夹,切勿使用可能跟随链接的递归删除操作。 - 路径和命令中的名称。您选择的每个进入文件路径或命令的名称,在首次使用前都应与其模式进行核对;名称不匹配时,应替换为另一个名称,切勿转义或截断:
- 文件夹和短名称(
<短名称>、<名称>)、行 ID、提示 ID、音频文件名(扩展名之前)和场景名称(<场景>):^[a-z0-9][a-z0-9-]{0,39}$; - 组合 ID(
<Comp>):^[A-Za-z][A-Za-z0-9]{0,39}$; - 帧编号(
<帧>、<a>、<b>、<帧数>):符合^\d{1,7}$的整数; - 响度值(
<输入_i>及第 9 步中的其他值):从 ffmpeg 输出的 JSON 中复制,每个都匹配^-?\d{1,3}(\.\d{1,2})?$;其他任何内容(如-inf、文本)意味着停止并修复混音。
- 文件夹和短名称(
- 切勿从自由文本构建命令。用户的文字、他们提供给您的文件名以及从文件中读取的任何内容,应放入 JSON 或源代码文件中,绝不放入命令行。将用户给您的文件复制到
public/下,并使用一个符合第一个模式的名称,加上一个符合^\.[a-z0-9]{1,5}$的小写扩展名。每次仅运行一个以下列出的命令,完全按照其写法,仅填充占位符,并将包含名称的每个占位符用单引号括起来,如命令所示。 - 不编写启动程序的脚本:没有 Node 或 Python 助手,没有
package.json中的scripts,没有包含shell: true、exec或命令字符串的内容。除了此文件中的命令外,仅运行只读检查(版本、哈希、文件列表、空闲内存)以及项目内的纯文件夹和文件操作。 - 仅从固定套件(第 1 节)安装。绝不进行
npm install、npm update、全局安装、对node_modules中尚不存在的任何内容执行npx,或使用sudo。在每次安装或下载之前,用一句话告知用户其内容,并等待其确认。 - 除了套件和受检渲染浏览器(第 1 节)外,不下载任何内容:不下载来自网络的字体、音乐、音效、图像或模型。字体来自套件;音频、标志和图像仅来自用户。
- 确定性:每一帧都是帧编号的纯函数。不使用
Math.random、Date、定时器、useFrame或THREE.Clock进行动画,不实时获取网络数据。仅使用带种子的噪声。 - 无真实品牌标志(Adobe、Apple、Instagram 等),除非用户提供其自有品牌的标志。模拟内容使用虚构品牌。
- 判断依据是实际渲染的帧(PNG 静帧、从 MP4 解码的帧),而非浏览器或 Studio 的屏幕截图。
1. 套件
这些文件位于此 SKILL.md 旁边。使用文件前请检查每个哈希值;不匹配则停止并告知用户。
| 文件 | SHA-256 |
|---|---|
| package.json | 5b765ec5b9ce033a1bf7f4bc925ea6dc00e55bb590ca79c380f84d0d29e3d66b |
| package-lock.json | a92264f8a7777bb6fe465756af9abe03aec285942af7dd00f1d51f3eba7fa25f |
如果缺少某个文件,请从 https://blog.alekseimedia.com/assets/kits/glass-skill/<文件> 逐字节下载,并检查哈希值。
它固定了 Remotion 4.0.534(remotion、@remotion/cli、three、fonts、motion-blur)、three 0.186.1、@react-three/fiber 9.8.1、React 19.3.0、TypeScript 5.9.3 及其类型声明,以及设计圣经中的三种字体的字体文件:@fontsource/inter-tight、@fontsource/instrument-serif 和 @fontsource/jetbrains-mono 5.3.0(SIL 开源字体许可证)。锁文件通过完整性哈希固定了每个包,因此第 3 步的安装会检查其安装的每个文件,包括字体。
新视频项目:
- Node.js 20 或更新版本(
node --version)。如果缺少,请要求用户从 nodejs.org 使用其标准安装程序安装 Node.js LTS,然后等待。 - 在当前文件夹内为视频创建一个文件夹
video-<短名称>,使用符合其模式(基本规则)的短名称;如果名称已被占用,请另选一个。 - 将
package.json和package-lock.json从此技能文件夹复制到其中,检查两个哈希值,运行npm ci --ignore-scripts。切勿添加、更新或删除包:从套件中构建您需要的内容。 - 渲染浏览器,Chrome Headless Shell 157.0.8080.0,这是 Remotion 4.0.534 经测试的版本。如果放任不管,Remotion 会在首次渲染静帧或视频时自行下载它而不作检查,因此绝不允许这种情况:自行为此计算机获取 zip 文件,检查它,并将 Remotion 指向它,每个视频项目执行一次。渲染时不获取其他任何内容:字体是已安装包内的文件。
- 选择对应行:Apple Silicon 上的 macOS(
uname -m输出arm64)、Intel 上的 macOS(x86_64)、x64 上的 Windows,或具有 glibc 2.35 或更新版本的 x64 上的 Linux(ldd --version)。任何其他系统均不支持:请说明并停止。
- 选择对应行:Apple Silicon 上的 macOS(
| 系统 | zip 文件 | 字节数 | SHA-256 | 浏览器文件 |
|---|---|---|---|---|
| macOS arm64 | https://remotion.media/chromium-headless-shell-mac-arm64-157.0.8080.0.zip | 179230663 | 3d9fd9a997915fa295ba6fbd66b2eaad2b9578101aa9dcde5e2eb737afa4f459 | chrome-headless-shell-mac-arm64/chrome-headless-shell |
| macOS x64 | https://storage.googleapis.com/chrome-for-testing-public/157.0.8080.0/mac-x64/chrome-headless-shell-mac-x64.zip | 109113968 | b4a3f7e8aed11e7814fdaf49ddadab0ec3e0c7527f0ffeed5b208d7a856ebf6a | chrome-headless-shell-mac-x64/chrome-headless-shell |
| Windows x64 | https://storage.googleapis.com/chrome-for-testing-public/157.0.8080.0/win64/chrome-headless-shell-win64.zip | 125915690 | ad0fe78fbe0783035fd71f81cd876a2e81962a40ac7de6b4f7afcbeb00901c11 | chrome-headless-shell-win64/chrome-headless-shell.exe |
| Linux x64 | https://remotion.media/chromium-headless-shell-linux-x64-157.0.8080.0.zip | 103668996 | 7c4a2751b361aeb3cff3ed788fa18b7a0849371b983d478bb9205b6cc25a8c52 | chrome-headless-shell-linux64/chrome-headless-shell |
- 告知用户这是一个 100 到 180 MB 的下载并等待其确认。在视频文件夹中创建一个新文件夹
.browser-download/(如果该文件夹存在或其路径的任何部分是符号链接,请停止并询问),并将 zip 文件逐字节保存到其中:curl -fL --proto '=https' -o '.browser-download/chrome.zip' '<zip>'(在 Windows 上使用curl.exe,Windows 10 和 11 自带),其中<zip>从对应的行中准确复制。 - 根据该行检查其大小和 SHA-256。任何不匹配,则删除
chrome.zip和文件夹,不使用任何内容并停止。 - 仅当两者都匹配时,使用系统自带的工具在
.browser-download/内解压它:在 Linux 上使用unzip -q chrome.zip(如果缺少unzip,请要求用户安装),在 macOS 上使用ditto -x -k chrome.zip .,在 Windows 上使用 Windows 自带的 tar,即C:\Windows\System32\tar.exe -xf chrome.zip(Git Bash 的tar无法读取 zip 文件)。然后删除chrome.zip,检查该行的浏览器文件是否为普通文件,且其路径的任何部分均不是符号链接,然后一步将.browser-download/重命名为.browser/(如果.browser/已存在,请停止并询问)。 - 在
remotion.config.ts中指向它(第 5 步):Config.setBrowserExecutable(".browser/<浏览器文件>")。设置后,Remotion 启动此文件且不下载任何内容。如果某个命令曾打印正在下载浏览器,则路径错误:在渲染其他任何内容之前修复它。
- ffmpeg 和 ffprobe:仅使用 Remotion 捆绑的副本,
npx --no-install remotion ffmpeg ...和npx --no-install remotion ffprobe ...。该构建没有tile、fps或drawtext滤镜;以下每个命令都仅使用其拥有的功能。下面每个写入文件的 ffmpeg 命令都只写入此项目自己的.renders/或out/文件,并以-y开头,以便重新渲染时替换它们:没有-y时,ffmpeg 会拒绝已存在的文件但仍以退出码 0 结束。ffmpeg 从不创建文件夹,因此请先创建输出文件夹,并在每个命令后检查输出是否存在且是新的。
2. 工作流程
按顺序执行步骤。切勿跳过任何一步:每步的成本都比它能捕获的错误要低。
第 1 步:简报
仅在一次简短的回复中,询问您无法决定的内容:视频的用途和受众;时长(默认 20 到 30 秒);格式(用于 Reels/TikTok/Shorts 的 9:16 1080x1920,用于屏幕的 16:9 1920x1080,或两者均需);屏幕上的文字(或由您撰写);行动号召;品牌颜色和标志文件;参考资料(截图或链接);用户拥有或拥有许可权的音乐和音效作为音频文件,以及音乐的节奏(如果用户知道)。决定其余内容。编写 docs/BRIEF.md。
此技能不制作画外音和自发声效:影片依靠屏幕上的文字、画面和用户的音频运行。如果用户要求添加语音,请用一句话说明,然后继续不添加语音。
仅限英语:字体模块仅加载其 latin 文件。屏幕上的每个字符必须是可打印的拉丁字符,即 U+0020 到 U+007E 或 U+00A0 到 U+00FF(U+00AD 除外),或者是 U+2013、U+2014(破折号)、U+2018、U+2019、U+201C、U+201D(弯引号)、U+2026(省略号)和 U+20AC(欧元符号)之一;不允许控制字符、零宽度字符或方向字符。在首次渲染静帧之前,对照此规则检查时间线上的文本。如果用户需要另一种语言或文字,请说明此技能仅限英语并停止,而不是在回退字体上渲染。
如果您撰写文字:每一行一个想法,3 到 8 个单词,每行一个重音词。
第 2 步:主时钟
一个文件控制整个影片的计时,src/data/timeline.json:
{ "fps": 60, "duration": 24.0, "bpm": 120,
"lines": [ { "id": "hook", "text": "What if one file could do this?", "start": 0.3, "end": 2.4,
"accent": 1.1 } ] }
- 根据阅读速度(约每秒 3 个单词,每行至少 1.2 秒,行间留 0.3 到 0.5 秒的空白)确定行的时间,并将行起始点对齐到节拍(60 / bpm 秒)。如果没有已知节奏,则仅使用阅读速度,并忽略
bpm。 src/lib/time.ts导出FPS、L(id)(该行)、F(n)(n 帧对应的秒数)、toFrame(s)和useTime()。场景切勿硬编码秒数或帧数:使用L("cta").start + F(6)、L("hook").accent。新的节奏只需重写timeline.json,整个影片会自动重新调整时间。- 每行起始处应有新的视觉效果。重音词的视觉冲击应在其时间点处,误差在 2 帧以内。
- 声音提示位于
src/data/cues.json:{ "id": "whoosh-1", "file": "whoosh.wav", "t": 3.42, "syncAt": 0.31, "gainDb": -6 }。t是影片时间中同步点的秒数,根据时间线计算得出;syncAt是该同步点在音频文件中的位置,以秒为单位从文件开始计算(第 8 步);file是public/audio/中的音频文件之一。场景中所有与声音同步的运动都基于相同的t进行计时,从而确保画面与声音不会偏移。 - 先转换为帧数,然后使用整数运算:一个窗口如果结束在两个帧之间,会导致一层消失的 1 帧间隙。
第 3 步:故事板:一份规范的镜头计划
docs/STORYBOARD.md 是构建每个场景的唯一计划。如果您尝试多个方案,请将胜出者合并到此文件中;场景遵循此文件,别无其他。它包含:
- 各幕的表格:行、帧、场景、核心元素、颜色、音乐;
- 对象链:每个核心元素如何过渡到下一个(一张卡片落入屏幕,屏幕的光芒变成闪光)。转场是对象和摄像机运动,而非交叉叠化;
- 每行:时间和帧、一个核心元素、每个元素的入场方式、时机和退场、摄像机运动、准确的屏幕文字、转场、声音提示;
- 每幕一个摄像机关键列表,作为一条连续的路径;
- 运动模糊窗口(仅限快速运动);
- 弹出式检查清单:每个元素及其入场类型;
- 每行的“完成条件”列表和验证帧(每行起始点、重音点和转场)。
使故事板看起来昂贵,因此应规划:一个场景,而非一个背景(天空、光线、深度、视差层);由一盏光照亮的真实 3D 对象;从第 0 帧开始的运动;精心设计的字体搭配;可操作的 UI(光标、打字、按下),而不仅仅是展示;一个打破节奏的对比节拍(黑暗或静默时刻);一个贯穿故事反复出现的对象或角色;在节拍上进行剪辑;每个元素都有动机明确的出现;用户的效果可以覆盖的每个运动都有对应的音效。
向用户展示一个简短版本(一个表格:时间、屏幕上显示的内容、使用哪种音效),并请求确认或修改。这是进行修改成本最低的时机。
第 4 步:设计圣经
docs/BIBLE.md 是每个场景编码所依据的合同:
- 格式。9:16 1
...
[为完整翻译进行了截断]