Communitygithub.com

karhuzin-lgtm/cinematic-motion

将用户用自然语言描述的视频创意,转换为由 Remotion、React 和 three.js 制作的专业级动态视频(包含 3D 摄像机运动、动态文字、玻璃 UI 与灯光效果),并可添加用户自有的音乐和音效,最终渲染为 9:16 和/或 16:9 的 MP4 文件。适用于用户需要动态设计视频、动画广告、产品发布片、片头、宣传片、解说视频或类似“这样的视频”的场景,也可用于修改、修复或重新渲染已通过此技能制作的视频。

cinematic-motion 是什么?

这是一个用于在 AI 编码代理(如 Claude Code)中使用的技能,它允许代理将用户的自然语言描述直接转变为完整的动态视频。该技能充当导演、动态设计师和 Remotion 工程师的角色,管理从构思到渲染的全部流程。它提供了一套严格的规则和结构化方法,确保视频具有高质量(工作室级动态图形),同时完全基于代码,且确定性得以保证(每一帧都是帧编号的纯函数)。该技能支持 macOS、Windows 和 Linux 平台,并使用一个包含 Remotion、React、three.js 和特定字体文件的固定开发套件。通过一个严格的工作流程(从简报、主时钟到故事板、设计圣经、场景构建和渲染),该技能确保视频制作的可重复性、稳健性和高质量输出。它使用用户提供的自有音频文件,避免侵犯版权,并通过逐帧检查(使用 Remotion 和 ffmpeg)保证最终的 MP4 文件达到广告级标准。

兼容平台✓Claude Code~Codex CLI✓Cursor
npx skills add karhuzin-lgtm/cinematic-motion

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

电影级动态

您同时担任导演、动态设计师和 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.json5b765ec5b9ce033a1bf7f4bc925ea6dc00e55bb590ca79c380f84d0d29e3d66b
package-lock.jsona92264f8a7777bb6fe465756af9abe03aec285942af7dd00f1d51f3eba7fa25f

如果缺少某个文件,请从 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 步的安装会检查其安装的每个文件,包括字体。

新视频项目:

  1. Node.js 20 或更新版本(node --version)。如果缺少,请要求用户从 nodejs.org 使用其标准安装程序安装 Node.js LTS,然后等待。
  2. 在当前文件夹内为视频创建一个文件夹 video-<短名称>,使用符合其模式(基本规则)的短名称;如果名称已被占用,请另选一个。
  3. 将 package.json 和 package-lock.json 从此技能文件夹复制到其中,检查两个哈希值,运行 npm ci --ignore-scripts。切勿添加、更新或删除包:从套件中构建您需要的内容。
  4. 渲染浏览器,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)。任何其他系统均不支持:请说明并停止。
系统zip 文件字节数SHA-256浏览器文件
macOS arm64https://remotion.media/chromium-headless-shell-mac-arm64-157.0.8080.0.zip1792306633d9fd9a997915fa295ba6fbd66b2eaad2b9578101aa9dcde5e2eb737afa4f459chrome-headless-shell-mac-arm64/chrome-headless-shell
macOS x64https://storage.googleapis.com/chrome-for-testing-public/157.0.8080.0/mac-x64/chrome-headless-shell-mac-x64.zip109113968b4a3f7e8aed11e7814fdaf49ddadab0ec3e0c7527f0ffeed5b208d7a856ebf6achrome-headless-shell-mac-x64/chrome-headless-shell
Windows x64https://storage.googleapis.com/chrome-for-testing-public/157.0.8080.0/win64/chrome-headless-shell-win64.zip125915690ad0fe78fbe0783035fd71f81cd876a2e81962a40ac7de6b4f7afcbeb00901c11chrome-headless-shell-win64/chrome-headless-shell.exe
Linux x64https://remotion.media/chromium-headless-shell-linux-x64-157.0.8080.0.zip1036689967c4a2751b361aeb3cff3ed788fa18b7a0849371b983d478bb9205b6cc25a8c52chrome-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 启动此文件且不下载任何内容。如果某个命令曾打印正在下载浏览器,则路径错误:在渲染其他任何内容之前修复它。
  1. 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

...

[为完整翻译进行了截断]

相关技能