mcpField
C
cinetic

cinetic

github.com/leonxlnx创意与媒体9171.1k 次安装2 周前更新
代码仓库

关于 cinetic

cinetic 是面向短片制作的创作技能,指导从创意简报到渲染、测量和评审的完整流程。它以 Remotion 为默认引擎,也支持 HyperFrames,并提供明确的视觉、节奏与质量检查规范。

主要功能

  1. 01短片格式与节奏规范
  2. 02Remotion 和 HyperFrames 流程
  3. 03品牌视觉语言指导
  4. 04时间线驱动的动画规则
  5. 05渲染与质量测量检查

适用场景

  1. 01制作产品发布短片
  2. 02制作功能介绍视频
  3. 03制作循环动画或 Logo 片头
  4. 04制作 UI 演示与字幕

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/leonxlnx/cinetic --skill cinetic

安装后在 Claude Code 中输入/cinetic确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

assets/critics/
art-copy-ui.md
director.md
forensics.md
sound-sync.md
verifier.md
assets/hyperframes-starter/
index.html
motion.js
package.json
setup.mjs
timeline.js
assets/hyperframes-starter/audio/
kit.json
score.json
assets/hyperframes-starter/fonts/
README.md
assets/remotion-starter/
.gitignore
package.json
remotion.config.ts
assets/remotion-starter/audio/
kit.json
score.json
assets/remotion-starter/public/audio/
.gitkeep
assets/remotion-starter/src/
blur.ts
Film.tsx
FilmSub.tsx
assets/remotion-starter/src/acts/
Act1.tsx
Act2.tsx
assets/remotion-starter/src/brand/
fonts.ts
Mark.tsx
tokens.ts
assets/remotion-starter/src/fx/
Chain.tsx
Cursor.tsx
Iris.tsx

详细介绍

cinetic

你是在执导一部短片,而不是制作一个动画网页。画面、文案和声音由同一份时间线文件驱动,构成一个整体;只有完成渲染、测量和评议后,作品才算完成。

  • 引擎。 默认使用 Remotion 4.0.529(React,帧驱动)。另一种选择是 HyperFrames 0.8.79(HTML 加上暂停的 GSAP 时间线)。创作原则与引擎无关;§7 列出了各引擎不同的规则。
  • 数字。 这里的每个数字都是已发布作品验证过的默认值:有明确理由时,你可以从这个起点调整。它们不是自然法则。
  • 品牌。 用户提供品牌素材(颜色、字体、Logo、视频素材、风格调性)时,以品牌为准。品味默认值适用于需要你自行创作的部分。
  • 路径。 像 scripts/render.sh 这样的路径既可从技能根目录使用,也可在影片项目内使用,因为 scripts/new-film.sh 会将每个脚本复制到项目中。除内部辅助脚本 brand-svg.ts(由 brand-kit.sh 调用)和 hf-preflight.cjs(由 hf-finish.sh 运行)外,每个脚本都会输出 --help。
  • 示例作品。 references/worked-example.md 逐步讲解 Tessel——一部 33 s、分辨率为 1920×1080、帧率为 60 fps 的发布影片——并展示下方每条规则的实际应用,包括其中的错误。制作第一部影片前,请先读一遍。

标准

目标是拍出一部让人愿意看两遍的影片:用画面讲述产品独有的一个理念,让每一帧都经过精心挑选,绝不拿任何内容来凑数。

  • 内容先于润色。 展示这款产品具体而巧妙的功能,也就是更简单的产品做不到的事。围绕泛泛之谈做出完美动画,仍不如一部粗糙却能让观众觉得“哦,这想法真聪明”的影片。
  • 独特的视觉风格。 每个品牌都应根据其名称、产品和个性,塑造自己的视觉语言,同时遵守下方的硬性禁令。克制意味着不做装饰,不意味着所有内容都采用同一种极简风格。
  • 极致干净流畅。 画面干净、现代,创意十足且编排精心。每个动作在 60 fps 下都应缓入缓出、富有重量感且流畅:不抖动、不突兀,也不以特效代替创意。
  • 用画面表达,而非旁白讲述。 静音时也能看懂核心理念;文字只是确认画面已经传达的信息。
  • 力量感与静止感。 动作应有质量感,在节拍上到位后停住,让快速瞬间更有冲击力。
  • 让画面更出彩的声音: 每个音效都必须由画面中可见的事物触发。
  • 克制胜过装饰。 犹豫时,就删掉。
  • 用证据,而非印象。 制作流程之所以存在,是因为这些标准无法在编辑器或 Studio 中评判:只有看过实际渲染结果并进行测量,才能知道成效。

严格禁用

设计视觉效果时,以下内容绝不能出现。它们是生成式作品最明显的破绽,而这项技能的目的就是制作看起来不像生成式作品的影片。lint-film.mjs 会检查相关词语和样式,评审者则会检查画面。

  • 文字:

    • 标题上方的眉题或引导标签;
    • 堆叠的标语,以及“Introducing…”;
    • 一次性呈现的完整句子:文案应当拆成简短片段,依次出现,中间穿插画面(§4“文字流”);
    • 大段文字,以及无意义的填充文字:装饰性的等宽字体字幕、虚构数据、没人需要的标签、lorem ipsum。

    屏幕上的每个字都必须有存在的理由。

  • 字体: 衬线字体,以及斜体或倾斜样式,包括用倾斜效果伪造的样式。使用一种简洁、现代的无衬线字体;如果产品需要,也可加一种用于代码或数字的等宽字体。

  • 颜色:

    • 橙色、琥珀色、米色、奶油色、棕褐色或沙色,无论是作为强调色、纸张颜色还是光晕;
    • 霓虹效果:极亮、高饱和度的强调色、发光、泛光和光环;
    • 紫色、紫罗兰色或靛蓝色,以及紫到蓝的渐变或任何多色调渐变;
    • 玻璃拟态。
  • 装饰:

    • 表情符号和图库图标;
    • 用来代表“AI”的闪光、粒子、彩纸、镜头光斑和代码雨;
    • 任何不属于落位动作的弹跳过冲,以及文案上的任何过冲或逐字母效果(只有一个主视觉词可以逐字母移动)。

可用的元素仍然很多:墨色与纸色(浅色或深色、中性或冷色)、一种来自禁用色系以外任意色系且具有明确含义的强调色(红、绿、青、蓝、黄),一种无衬线字体,以及极其干净流畅、带有缓动、重量感和运动模糊且没有抖动的动画。创意应体现在构思、表现手法和编排上,而不是效果上。

如果用户提供的品牌包含上述元素之一(例如品牌的衬线字标或橙色),则应以品牌为准,因为这是其身份标识,而非默认选择。在 BRIEF.md 中记录这一点,避免评审者将其标记为问题;并在设置相关元素的代码行标注 // cinetic:brand-supplied <what>,以便 lint 接受。

1. 格式与默认设置

先选择一行。它决定时长、信息密度和交付文件清单。各格式的制作方案见 references/formats.md。表中数值代表舒缓节奏下的默认值;要求更有活力的简报(预告片、发布短片、宣传剪辑)可选择利落方案(§5),节奏更快,也允许稍多一些文字(片段最多 5 个词,屏幕上最多 10 个词),但仍不得一次性呈现完整句子。

格式时长fps网格(BPM)故事节拍文字:总量 · 每个片段新增 · 同时可见音效交付内容
发布影片 / 预告片20–45 s60100(利落方案 120)每 30 s 6–8 个(利落方案 8–10 个)15–25 个,上限 30 个 · ≤ 4 个 · ≤ 8 个(替换模式下 ≤ 5 个)完整配乐 + 音效16:9 主版、9:16 和 1:1 重排版、海报;如有原创品牌,则附品牌套件
产品 / 功能视频、更新影片8–30 s60100每 8–10 s 展示 1 项能力≤ 12 个 · ≤ 4 个 · ≤ 8 个UI 音效;舒缓方案:音效仅为 −18 LUFS(只有简报要求律动感时,才加入轻柔铺底音效)主版、海报
功能循环片段4–15 s,完整小节60(GIF 为 25)任意;完整小节3–5 个≤ 6 个,静音时也能读懂 · ≤ 4 个 · ≤ 4 个可选MP4、WebM、GIF、无缝衔接
Logo 短片3–8 s60100–1202–4 个名称 + ≤ 3 个 · ≤ 3 个 · 名称 + 3 个一次调音过的音效 + 余音MP4、ProRes 4444 alpha(定格版和清除版)、海报;如有原创品牌,则附品牌套件
UI 演示20–90 s6090–100每 2–4 小节 1 个章节每条字幕 ≤ 5 个 · ≤ 4 个 · 一条字幕铺底音效 + UI 音效主版、SRT 字幕

只要 UI、文字或摄像机有移动,就使用 60 fps。30 fps 下,缓慢移动会明显卡顿,快速移动会产生频闪;24 fps 则绝不适合 UI。GIF 是唯一例外:从 60 fps 主版导出时使用 25 fps(或 50 fps),因为 GIF 的帧延迟以 1/100 秒为单位,30 fps 播放时会快 11%。

2. 五条法则

  1. 一个专属于这款产品的创意。 你可以用一句话说清这部影片,而展示内容应证明这款产品能做到显而易见或更简单的版本做不到的事。克制体现在装饰和文案上,而不是产品的智能程度:如果功能很智能,影片就要展现其中聪明之处。原因: 观众最终只会记住一件事;如果一部影片同样适用于竞争对手,或更笨拙的功能,那观众就没什么可记住的。
  2. 一个贯穿始终的故事载体。 一个物件、形状或颜色贯穿每个镜头,切换时也不会消失。在发布影片中,它最好在结尾变成品牌标志;在功能循环视频或产品视频中,它就是产品操作的对象(卡片、行或文件)。找出这款产品独有的对象。光点、线条或方块是偷懒的默认选择,而且也是本技能示例本身的风格。原因: 它能让影片连贯,让影片在静音时也能看懂;而专属对象能让影片一眼就辨认出属于这个品牌。
  3. 一种强调色,只表达一种含义。 强调色是一个单一的视觉符号,表达一件事,比如“现在”、“全新”或“属于你”。少量使用(约 ≤ 8% 的像素),最多让它铺满画面一次。原因: 有明确含义的颜色无需文字就能传达信息,而处处使用的颜色则毫无意义。
  4. 一套统一的动效系统。 使用少数几种命名曲线和弹簧,并为每一种说明使用理由;所有帧编号都取自 timeline.ts。原因: 一致的动效就是品牌动效,而临时拼凑的缓动效果看起来像自动生成的。
  5. 通过测量验证。 只有渲染后的像素和解码后的音频都通过脚本检查及一轮评审,影片才算完成。原因: Studio 播放会掩盖卡顿、残影帧、同步偏差和色偏,而这些问题会在编码后的文件中显现。

3. 工作流

每个步骤都会写入一个文件,每个关卡都是你实际运行的检查。全程在线协作。子 Agent 仅用于评审(§8),因为并行构建画面所花的时间比节省的时间更多。

步骤 0:收集需求 → BRIEF.md
  • 如果需求说明已写明产品、信息和时长,就推断其余内容,并记录你的假设。
  • 如果没有,最多提 3 个问题:用一句话说明产品、影片格式和时长,以及影片的展示渠道。其余内容参见 §1。
  • 选择引擎:默认使用 Remotion;如果用户已有 HyperFrames 项目、想使用 HTML/GSAP,或需要由变量驱动的 --batch 渲染,则使用 HyperFrames。
  • 将硬性禁令(见上文)以及品牌方提供的例外情况复制到 BRIEF.md。之后会将此文件原文提供给评审,因此它也兼作 QA 验收标准。
  • 选择节奏:默认使用沉静节奏,除非需求说明要求更有活力;将其写入规格行。利落节奏需明确选择(§5)。
  • 搭建项目脚手架:bash <skill>/scripts/new-film.sh films/<name> --fps 60 --size 1920x1080 [--engine hyperframes]。它会保留模板本身的节拍(Remotion 为 100 BPM,HyperFrames 为 120 BPM)和沉静节奏;利落影片请添加 --pace crisp(120 BPM 和利落节奏),或使用 --bpm N 设置其他节拍。传入 --link-modules <dir>/node_modules 可复用现有安装,而不运行 npm install(在 Windows 上使用目录联接)。
  • 检查关卡: BRIEF.md 中包含一行规格,例如 1920x1080@60, 30s, 100BPM, pace: calm, audio: earshot kit (calm), no music。
步骤 1:概念 → TREATMENT.md

现在阅读 references/concept-and-story.md。

  • 从具体内容入手,而不是从风格入手。记下:
    • 名称的含义或带来的联想(它往往会直接给你标志和装置);
    • 功能不那么显而易见的行为,把句子补完整:“不同于显而易见的版本,它……”;
    • 产品自身的对象(它的行、卡片、读数和状态)。
  • 从不同视角各写出 1 个概念,共 3 个:
    • (a) 将产品自身的动词或隐喻变成现实;
    • (b) 将观看者的痛点呈现出来;
    • (c) 一种形式装置:中继物、首尾呼应、一次不间断的镜头运动,或一个变成产品本身的容器。
  • 淘汰道具也可能出现在其他产品影片中的概念。那不是你的概念。
  • 画出技法;不要挑选技法。 运行 python3 scripts/pick.py --format <launch|feature|loop|sting|walkthrough|vertical> --energy <calm|medium|high> --seconds <length> --json out/qa/picks.json;除非简报要求更有活力,否则使用 --energy calm。它会根据影片时长抽取技法:平静节奏下每 3.5 秒约 1 种,否则每 2.5 秒约 1 种(30 秒发布影片抽取 9 或 12 种,短片至少抽取 4 种)。技法取自 assets/library/techniques.json 中经测量的技法库,按影片格式所需的顺序排列,并根据已验证的效果和影片能量加权;同时打印每种技法的默认时长。手动挑选最终总会收敛到每部影片都一样的淡入、推进镜头和片尾卡;抽取技法才能让影片彼此不同。根据概念能承载的内容来构建所抽取的技法,并用概念中的对象和装置重新讲述;故事、产品真相和统一的 UI 语言优先,塞进每一种技法的影片看起来就像作品集剪辑。与概念冲突的技法最多重新抽取两次(--category <cat> --exclude <id>),否则就舍弃并写明理由;绝不要添加抽取结果中没有的技法(使用 --category 抽取),如果品牌拥有被禁用的视觉风格,则传入 --brand-supplied <look>。使用 pick.py --show <id> 阅读完整的抽取条目;references/technique-library.md 列出所有条目(搜索所需内容,不要通读全文)。经测量的节奏、缓动和文字时序规范见 references/craft-rules.md。
  • 为选定的概念填写 assets/TREATMENT.md:
    • 一句话梗概;
    • 故事弧线:钩子(1 秒内进入问题并让人感受到)→ 转折 → 证明(1–2 项能力)→ 承诺 → 片尾标识;
    • 抽取的技法及其种子句,每种都安排在一个节拍中(模板 §3b);
    • 装置路径,逐镜头列出;
    • 节拍表,列包含:条 | 时间 | 画面 | 文案(片段、模式)| 画面节拍 | 声音:每个超过 4 个词的想法都要写成片段链,并标明它交接给哪个画面节拍;
    • 完整文案及其词数;
    • 最后一帧。
  • 进行删除测试。删掉演示节拍后,价值仍应清晰可见。删掉价值节拍后,如果影片仍然“成立”,那它就是一段功能巡礼。
  • 进行具体性测试。换成更简单的产品,影片是否仍然同样成立?例如,平均分配而非逐项分配,或普通列表而非排名列表。如果答案是肯定的,证明就没有充分展现产品;应展示难以做到的部分。
  • 进行功能词测试。静音观看时,陌生人会用简报中的功能词(“连续记录”“拆分”)来描述这项功能吗?如果巧妙的装置让人把它看成别的东西,就保留该功能熟悉的形式,让装置来装点它。
  • 门槛:
    • 一句话梗概不超过 15 个词;
    • 通过具体性测试,并写下测试答案;
    • 词数在 §1 的预算范围内;
    • 每个片段为 1–4 个词;每个节拍的文案不超过 8 个词(替换模式下为 5 个);每个超过 4 个词的想法都必须拆成片段链,相邻片段间隔 30–90 f,并对应一个画面节拍,不能整块出现(清晰风格的影片允许每个片段 5 个词、屏幕上 10 个词);
    • 文案最多覆盖约 65% 的片长(清晰风格下为 80%),每 10 秒都要留出至少 1.5 秒没有文字的画面段落;
    • 每一行节拍都要出现该装置;每种抽取的技法都必须安排在某个节拍中,或说明舍弃理由。
步骤 2:品牌与风格画面 → src/brand/

阅读 references/brand-and-color.md 和 references/copy-and-type.md 中的字体部分。

  • 初始项目的配色、字体、标志和演示名称都是标有 // cinetic:placeholder 的临时内容;在所有标记都移除之前,lint-film.mjs 都会报错。应用用户的品牌,或为这部影片创作一个品牌,然后删除这些标记。沿用初始项目的外观,会让影片看起来和用它制作的其他影片毫无二致。

  • 个性优先。 为品牌写下三个形容词,再据此推导设计选择。映射关系见 references/brand-and-color.md §2:

    • 字体:从 @fontsource-variable/* 中为该品牌选择无衬线字体,并用 node scripts/add-font.mjs <name> 将其打包进项目(可安全用于共享的 node_modules);Geist 只是初始项目的临时字体;
    • 字重和大小写;
    • 舞台(浅色或深色:开发工具或以火命名的品牌通常适合深色)、中性或冷色,以及从允许的色系中选择的强调色色相;
    • 动效特征,从干脆利落到从容舒缓。

    平静的笔记应用和快速的 CI 工具不应采用相同的外观。

  • 编写 src/brand/tokens.ts(python3 scripts/palette.py --accent '#…' --stage dark 会生成中性色、检查对比度,并拒绝禁用色相):

    • 颜色:一种墨色、一种纸色、2–4 种中性色,以及一种在注释中说明含义的强调色;
    • 字体:一个字族、两种字重,按需添加等宽字体;
    • 字体比例;
    • 每种用途各设一个字距值。
  • 先探索标志,再决定采用哪一个。

    • 构思 6–10 个方向,每个方向都来自不同的灵感来源:名称含义、字形、产品本身的物件、概念隐喻,以及纯几何构造。
    • 将它们一起渲染到一张图上并仔细查看(参考 references/brand-and-color.md §4 中的 MarkSheet)。
    • 淘汰任何可能属于其他十家初创公司的设计,包括“几何块 + 强调色圆点”这一类;这正是本技能自身示例中使用的词汇。
    • 进行误读测试。以 64 px 显示标志半秒。如果首先被看成常见符号(减号、表情符号、菜单或汉堡图标、挂锁、播放按钮、加号),就淘汰该方向,或修改它直到不再如此。
    • 在 src/brand/Mark.tsx 中以 100 单位网格构建最终标志,间隙至少为 8 单位,确保缩小后仍清晰可辨。
  • 让配色富有个性,同时遵守禁用规则。 从名称和产品的世界中汲取灵感(山坡可以带来松树、苔藓和石板色;铸造厂可以带来炭黑、烟灰和炽亮的红色),不要使用框架默认配色。如果名称关联的是热或火,就禁用橙色,因此应选择炽红(在纯炭黑背景上发亮的深红)或炽白,绝不要用泛泛的开发工具蓝:颜色必须承载名称的含义。蓝灰近黑色舞台是常见的开发工具深色主题(palette.py 中有说明),而在开发工具里,红色 UI 标签会被读作错误;把红色留给品牌自身的核心元素。

    • 框架蓝色(#3B82F6 / #2563EB 这一色系)和纯灰色会显得“默认”。
    • 让中性色带上与品牌世界相符的色调,采用冷绿灰或蓝石板色;深色舞台可以用松木黑或墨蓝,而不是 #000。
    • references/brand-and-color.md §8–10 提供了配色示例。
  • 像字体设计师一样设置组合标识。 并排渲染三种方案(标志与大写字母的比例、间距、字重、字距),选择能让标志和文字融为一体的方案。随意设置的文字标志造成的损失,远超过动画带来的任何收益。

  • 从 Stills 文件夹渲染 2–4 张单帧风格静帧并仔细查看:16 px 和完整尺寸下的标志、一张陈述画面,以及一张产品画面。npm run stills 会渲染标志静帧;也可以用 npx remotion still <StillId> out/stills/<name>.png 添加自己的静帧。

  • 验收门槛:

    • 静帧通过 §4 的要求;
    • 标志图和所选方向的理由已写入 TREATMENT.md;
    • node scripts/lint-film.mjs src 未报告任何临时内容,也未报告任何非令牌颜色或字体。
步骤 3:时间线 → src/timeline.ts

现在阅读 references/timing-grid.md。

  • 选择 BPM 和 fps,使每拍对应整数帧(参见 §5)。
  • 将节拍表映射到小节:
    • ACT 保存连续且与小节对齐的段落;
    • CUE 保存位于网格上的命名帧;
    • COPY 为每个片段保存一个 {id, text, in, resolved, out} 条目:单个片段使用 line(id, text, in),多个片段表达一个想法时使用 chain(id, 'build' | 'replace', [[text, inFrame], …])(它会添加 chain 和 mode,并根据节奏为每个片段计时);
    • TOTAL 包含至少 60 f 的尾段。
  • 每小节设置一个动作峰值,并让文字和主角动作在网格上轮流出现。
  • 门槛:npx tsx scripts/grid-check.ts src/timeline.ts 通过(npm run check 会同时运行它、tsc 和 lint)。它会针对影片的 PACE_NAME(--pace 可覆盖该值)检查网格(每个提示点都位于 16 分网格上,或带有 offgrid: 原因)、阅读停留时间、事件间隔(没有事件或阅读停留的间隔不得超过 72 f;在 crisp 模式下不得超过 48 f)、字数预算和文字流动:fragment(每个条目的字数)、copy-concurrent(任意帧上可见的字数,离场片段在退出结束前仍计入)、read-first(两条独立文本不能同时出现)、reveal-rate、chain-gap(每个片段都必须在下一个片段出现前读完,且画面间隔为 30–90 f)、chain-beat(提示点确实发生在对应画面节拍中)、read-quiet(阅读期间不得开始任何提示点)、word-rate 和 text-share。在节奏平缓的影片中,画面节拍缺失或过短、两条文本同时出现,以及正文中超过 75% 的时间都有文案,都会被视为错误,而非警告。HyperFrames 项目会对其 timeline.js 运行该检查:node scripts/grid-check.ts timeline.js。
第 4 步:逐个构建各幕 → src/acts/

编写动画前,请阅读 references/motion-tokens.md、references/camera.md、references/transitions.md;如果产品会出现,也请阅读 references/product-ui.md。调试时请始终打开 references/chromium-rendering.md。

  • 让每一幕都成为 useCurrentFrame() 的纯函数。在 Film.tsx 中为每一幕挂载一个 <Sequence>,并在 Acts 文件夹中将每一幕注册为独立的 composition,以便单独迭代。
  • 所有动画都必须使用 src/lib/anim.ts(§6)中的 token。幕内直接使用原始贝塞尔曲线会触发 lint 错误,因为这正是项目风格逐渐走样的原因。
  • 使用真实组件构建产品 UI,并由一个 data.ts 模块提供数据,同时对日期、星期、数量、复数形式和总和进行断言。数据也必须与故事一致:付款的人不欠钱,“已排序”的列表确实经过排序,声明的比例与对应数值一致,并且同一帧中不会重复出现同一个数字。每一帧都必须符合这一点,中间状态也不例外:如果“欠 Maya”这行文字一直显示整张账单的总额,那么它显示的每一刻,屏幕上的数字都是错误的。UI 要足够大,让手机上的观众也能看清:每个承载故事的交互都要推近 2–5×,而清晰可读 UI 的广角镜头最多保持约 1.7 s。每个承载意义的条形、片段、图表或单独数字,都必须显示其数值、标签或单位:在 M–S 下方显示“18 24 12 31”,读起来像日期,而不是页码。截图绝不能充当主视觉镜头。
  • 让产品和功能都清晰可辨。将功能名称作为 UI 标签、单行文案或片尾卡中的一项,只展示一次,并展示足够多真实的应用界面元素,让陌生观众也能看出这是软件。“标题里不要出现功能名称”绝不等于“永远不要提功能名称”。功能标签不是价值落点:要用一句简短、贴近人的话点明价值(“Sam 吃了沙拉。”),即便是在静音循环中也要如此。
  • 只取产品中有意义的部分入镜。不要出现只填了一半的网格、被画面边缘裁切的表格或整行空白单元格:这些看起来像电子表格,而不像产品。
  • 必须读懂的文字在运动中也要保持清晰可读。正在阅读的文字(从其 resolved 帧到 out 帧之间)移动速度最多约为 3 px/f;至少 0.3 px/f 的漂移或缓慢推进能让画面保持活力;其下方的镜头平移速度为 1.5–3 px/f。带标签的芯片和数字移动时速度要控制在约 20 px/f 以下;或者让它们在飞入时淡化文字,落定后再清晰显示,因为小字的运动模糊会看起来像重影。
  • 所有文字都必须通过 COPY 上屏:使用 src/fx/Chain.tsx 渲染陈述,或使用 copy(id) 中的 Words,绝不能在某一幕中直接写字符串字面量(lint-film.mjs 会标记 copy-literal、text-spring、text-pace、typing-rate 和 per-letter)。
  • 移动元素绝不能遮住其经过的文字:规划好移动路径和 z 轴顺序,并以全尺寸检查内容最密集的帧。
  • 渐进式文字揭示(逐字母揭示或扫掠揭示)绝不能在过程中拼出另一个单词(例如短暂显示成“tar”,而不是“tarn”),也绝不能只显示部分字形:柔和的擦除效果经过字母“n”时,会让它看起来像“r”(“halder”)。让遮罩在整帧间逐个跨过字形边缘,或一次揭示整个单词,并检查中间帧。
  • 从该幕中导出音效所需的每个帧,作为具名常量(例如 LANDINGS 或 SNAP),以便提示音导出模块能够导入。
  • 所有内容都必须包在 <FontGate> 中。
  • 按以下循环迭代每一幕:
    1. 在每个提示音的 −2、0 和 +2 帧渲染静帧。
    2. 制作该幕的联系表:python3 scripts/sheet.py --comp Act2 --every 2 --out out/qa/act2.png 会渲染该幕,并将画面拼成网格,同时标注帧数和时间。快速片段使用 --every 2。
    3. 运行 bash scripts/layout-audit.sh Act2 --cues。
  • 验收门槛:
    • lint-film.mjs 检查通过;
    • layout-audit 报告的安全区、重叠或 words 违规均为 0(影片中的可读文字帧数不超过节奏限制;产品字符串带有 data-ui 标记并单独计数),且没有速度超过 20 px/f 的可读文字;在各幕联系表中,正在阅读的文字移动速度最多约为 3 px/f;
    • 每份幕联系表都有书面审阅记录。
第 5 步:声音 → public/audio/soundtrack.wav

现在阅读 references/sound.md。

  • 运行 npx tsx scripts/export-cues.ts,生成 out/cues.json。同步点根据画面代码计算(弹簧接触帧、弹出达到 50% 的帧、速度峰值、达到 97% 的定格帧、碎片的解析帧),绝不手动输入。实践中,手动输入的同步点偏差达 8–11 f。
  • 首先在 references/sound.md §5.5a 中选择声音的个性类别,并据此选择音色包预设:冷静品牌和文字主导影片使用 calm(入门默认值),快速、粗粝的影片使用 crisp,精准、高端的影片使用 minimal(python3 scripts/audio/kit.py init --preset crisp --force)。只有活力十足的发布影片才使用骤停留白和低音轰鸣。
  • 音效来自 earshot 音色包(audio/kit.json,sound.md 的 §1):每个角色使用一个音色库中的声音,并根据测得的同步点渲染到 audio/kit/。运行 python3 scripts/audio/kit.py render(npm run kit,使用缓存)和 kit.py check;调性变更后,kit.py tune 会将音色角色移至 score.json 的调性。没有 earshot 时,score.py 会播放已渲染到 audio/kit/ 的音轨;如果没有任何音轨,则会发出响亮警告并回退到合成器音色:请安装 earshot(docs/setup.md),不要直接用这些音色交付。
  • 每个文本片段只配一个柔和音效(在片段解析的帧上使用 text 提示),绝不每个词配一个音效;刚说出的内容要近乎无声地读出(§5.7)。**标志定版是骤然收止,而且只能有一个干净的元素:**此前 0.2–0.7 s 内不加任何声音;在字标变得可读的帧(其 settleOf)加一个 hit,不要用呼啸声引入,也不要叠加脆响、铃声或主题音。score.py 的叠加保护会对其 ±3 f 范围内的任何其他声音发出警告。
  • 只有影片需要律动时才加入音乐。 冷静、文字主导的影片保持 "music": "none"(仅音效,母带响度为 −18 LUFS);否则,无论影片属于哪种个性类别,都要让音乐推动画面:
    • 主题音要跟随故事进展,例如每个步骤演奏一个调音后的音符,沿音阶逐步上行(score.json 中的 progress;使用冷静音色包时,步骤应设为 "kind": "bell",这是其调过音的音色;冷静音色包中的弹出声、滴答声、咔嗒声和轻柔落点都是未调音的敲击声,无法上行)。
    • 章节变化和主角登场要落在音乐自身的事件上(骤停、停顿、重新进入)。设计好的音效只用于明确的状态变化,每 10 s 约 5 个;集中放在音乐稀疏处。持续运动和大多数剪辑都不加音效。
    • 主角登场时的骤降要出现在影片时长的 30–60% 处,并成为最响的时刻;payoff 指向那里。标志定版是最有收束感的时刻,而不是最响的时刻:标志形成时,音乐在小节线处停止或经过滤波逐渐减弱,接着只留一个元素和 0.5–2.5 s 的尾音。若使用短促收尾音,整个标志定版期间只播放它:它的击打声就是最响的时刻。
    • 声音要在第 0 帧有意图地进入(使用持续音,或最多 150–450 ms 的渐入),不得出现咔嗒声;前 2–3 s 的响度要比主体低 5–12 LU。这假设第 0 帧的画面在动:静止画面(空白页面、闪烁的插入符)上以全音量播放持续音会显得像出错,因此应移动画面,而不是声音。
  • 填写 audio/score.json:调性、music,以及有音乐时每小节一个和弦、各章节(在影片时长的 40–80% 处安排一个分解段或停顿,响度降低约 5 LU)、骤降和静音(或使用真实曲目的 bed)。除非品牌另有要求,否则保持 "typing": "auto"。
  • 运行 python3 scripts/audio/score.py --cues out/cues.json --score audio/score.json --out public/audio/soundtrack.wav --stems out/stems --json out/qa/score.json(npm run audio)。分轨可让 av-audit.py 检查每个声音是否与其提示同步;母带处理链位于 scripts/audio/master.py。
  • 使用 earshot 时,运行 python3 scripts/audio/listen.py(npm run listen):在一个进程中生成 earshot 时间线、声音表和评论,输出到 out/qa/listen.json 和 out/qa/sound_sheet.png(§9.1)。先查看提示同步,再打开声音表。
  • 验收门槛:
    • WAV 的测量响度需达到目标值 ±0.5 LUFS 综合响度(audio/score.json 中的 master.lufs;未设置时,有音乐的影片为 −14,仅音效影片为 −18;只有用于其他视频开头的带音乐短促收尾音才使用 −16);编码前真峰值 ≤ −1.5 dBTP,且骤降处的限制器增益不超过 1.5 dB;
    • 报告的 sfx 行应标明 earshot 音色包(而非 synth (fallback));kit.py check 不应报错,且不得遗留 stacked、rising 或 has no take on 警告;
    • 有音乐且时长达到 20 s 或以上的影片应有对比度:LRA 为 5–8 LU,骤降处比瞬时响度中位数高 2–3 LU(score.py 会发出警告);
    • 每个声音都要有对应的可见触发事件,响度也要与触发事件匹配(插入符闪烁时轻声细语;主角登场时骤然增强);不是每个画面事件都要配声音,但一旦某类动作配了声音,该类动作的每次出现都要配,并保持响度一致。
第 6 步:渲染并完成 → out/film.mp4

现在阅读 references/finishing.md。

  • 预览: bash scripts/render.sh Film out/preview.mp4 --preview --audio public/audio/soundtrack.wav。Remotion 会渲染静音且带 BT.709 标记的画面,ffmpeg 会混入音频。只在预览版上迭代和评审。
  • 母版: 如果任何运动速度超过 12 px/f(几乎所有发布影片都是如此),运行 bash scripts/render.sh Film out/film.mp4 --blur:清晰渲染 → 速度测量 → FilmSub 子帧渲染 → 浮点累积 → 混流 → 同步检查。否则,不加任何标志时,render.sh 会以 CRF 14 渲染清晰母版。循环视频使用 --loop(采用无损 PNG 中间文件,确保接缝在编码后仍然保留);静音时使用 --no-audio。
  • 模糊会增加渲染时间,所以只做一次。
    • 在最后一轮评审结束后,只渲染一次带模糊效果的母版。开始渲染前会打印子帧倍数和预估时间;在 4 个 CPU 上,10 秒、60 fps 的影片使用 6× 倍数,在简单画面上约需 7 分钟,在密集 UI 画面上约需 10–15 分钟。--budget 6 可设置上限。
    • 后期修复只需重新渲染变更部分所属片段的范围(--frames A-B),然后拼接,而不必重新处理整部影片的模糊效果。
    • 时序相同的 9:16 或 1:1 版本可复用母版的采样(--samples-from);最快运动速度不超过 12 px/f 的版本则渲染清晰画面。
    • 渲染期间不要编辑 src/:render.sh 会使用开始时冻结的 bundle 进行渲染,并在此期间源文件发生变化时发出警告。
    • 停止渲染时,使用对应的 PID;切勿使用 pkill -f 模式:在共享机器上,该模式也会终止其他人的渲染任务。
  • 速度上限。 速度超过约 80 px/f 的运动会被列为无法实现干净模糊的过快运动;只要还有这类运动,render.sh --blur 就会在子帧处理阶段开始前停止:重新设计这些运动,而不要增加采样数(§6);或者,如果你已在全尺寸下检查过填满画面的边缘,可使用 --accept-fast A-B 忽略。每个硬切都是一个片段边界:片段内的切换会把两个镜头混合成一个双重曝光画面,因此渲染也会在遇到硬切时停止(对于你已检查过的洪流或闪光,可使用 --accept-cut A-B 忽略)。
  • 检查关卡。 render.sh 会运行以下两项检查;任意一项失败都会以状态码 1 退出。交付的所有文件都要重新运行这些检查:
    • python3 scripts/probe.py out/film.mp4 --spec 1920x1080@60 --dur <s> 通过:尺寸、fps、时长 ±1 f、yuv420p、BT.709 标记、48 kHz AAC;
    • python3 scripts/check-sync.py out/film.mp4 public/audio/soundtrack.wav 报告的延迟 ≤ 48 个采样,解码后的真峰值 ≤ −1 dBTP。
第 7 步:评审循环

对预览版运行 §8。发布影片和演示视频至少评审 2 轮。对于所有脚本检查均通过的短片和循环视频,评审 1 轮即可。随后对带模糊效果的母版进行检查,而非再评审一轮:取证、av-audit、全尺寸下速度最快的帧(每个片段都要检查,包括标志入场和退场;滑动的字标最容易在这些地方出现阶梯状重影;使用 measure-speed.py --floor a-b:n 修复),以及导演过目。

第 8 步:交付
  • 根据格式需求,使用相应标志运行 bash scripts/deliver.sh out/film.mp4:循环视频使用 --loop --gif --webm,ProRes 4444 使用 --alpha StingAlpha,StingAlphaClear,社交媒体版本使用 --variants Film9x16,Film1x1。该命令会生成海报(最后一帧)以及 qa/ 中的清单。对于你自行设计的品牌,运行 bash scripts/brand-kit.sh 导出标志、组合标识、各尺寸的 favicon 和头像。社交媒体版本应根据同一时间线重新排版;切勿裁剪母版(参见 references/formats.md)。
  • 编写简短的 README.md:介绍创意、设备、网格、渲染方法和文件列表。
  • 保持交付文件夹整洁。将交付文件放在顶层(影片、透明通道版本、海报、标志文件),将 QA 材料(素材表、裁剪图、报告)放在 qa/ 子文件夹中。客户端会先打开文件夹,再打开影片。
  • 检查关卡: §1 表格中列出的每个交付文件都必须存在,并通过针对其自身规格运行的 probe.py 检查。
精简路径(刺点、循环、短功能片段)

小项目应保持快速。规则、网格、lint 和一轮评审仍然适用,其余部分则精简:

  1. 在 TREATMENT.md 中写一页的故事提案:梗概、设备、该格式的 pick.py 抽取结果、包含 2–8 行的节拍表,以及文案。它将步骤 1–3 合并为一个阶段,而不是分别进行。仍需编写 timeline.ts 并运行 grid-check.ts。
  2. 风格帧方面,16 px 的标记和一张主视觉静帧就足够。
  3. 将整个作品构建为一幕或两幕。
  4. 循环作品可不配声音。刺点作品需要一个调到主调的音效,以及一个衰减至数字零的尾音。
  5. 渲染一份清晰的母版,除非有内容超过 12 px/f。然后与导演和取证视角各进行一轮评审。
  6. 对循环作品,最后一帧必须自然衔接到第 0 帧:接缝处的帧差必须不超过 max(0.4, 1.5× 末尾处的中位步长)(forensics.py --loop 和 deliver.sh --loop 都会检查;使用 render.sh --loop 渲染)。应将循环构建为一个周期,而不是进入、停留和退出。第 0 帧也是封面,也是访客看到的第一帧,因此画面中应有产品名称或界面元素。

4. 最重要的审美规则

所有显得廉价的迹象及其对应修正,都汇总在 references/taste-and-slop.md 中。评审时请查阅。

这些规则禁止的是生成作品的套路,而非个性。用这项技能为不同品牌制作的两部影片,不应看起来相似。如果你的作品看起来像入门示例、Tessel 示例或你的上一部影片,那就还没完成。

文案(references/copy-and-type.md)

  • 开篇直接进入问题,绝不要以“Introducing…”、反问句或徽标开场。静音信息流会在第一秒作出判断。更新影片应从消息本身切入:产品已经开始运作,并由一个引入片段自然过渡到产品。
  • 让影片自己的措辞前后呼应:先铺垫短语,再重复一句,最后给出结果。
  • 避免套话(seamless、unlock、AI-powered、streamline),也不要把功能名称用作标题。这些会让影片显得像模板。
  • 一次只呈现一个片段,让文字与主视觉动作轮流出现。不要使用眉题或引导标签,也不要堆叠标语,因为那是落地页的表达方式。

文字流:逐段呈现,一次一段(references/copy-and-type.md §2b) 在对 8 部专业影片逐帧测量后发现,每个节拍约呈现 2 个新词,片段的可读时长约为 0.8 秒,而一半的节拍会接续前一个节拍开始的句子。默认规范保留这种语法,并放慢节奏。

  • 片段。 每段 1–4 个词(2–3 个最佳,最多约 22 个字符;节奏明快时可达 5 个),按语法切分:放在主语之后、宾语之前、点题名词之前或名称之前。名称与数字不得和单位拆开。标点只出现在句子的最后一个片段中。超过 4 个词的想法要拆成 2–4 个片段串联,绝不整块呈现。
  • 逐步构建或替换。 逐步构建时,片段逐个追加到同一行文字中;该行保持显示并重新居中,新内容以强调色出现,再过渡为墨色;最多显示 8 个词,最后整行清除。替换时,每个片段完整显示 24 帧,然后下一个片段在原位置出现(chain() 会在下一个片段开始前 6 帧结束前一个片段的退场,因此两者绝不会同时占据同一位置);最多显示 5 个词。
  • 动画就是动词。 演示前放 2–4 个词,演示后放 1–3 个词;文字绝不描述画面所展示的内容。悬念式剪切让片段停在揭晓前一步,并在 90 帧内由画面给出答案:“here is the newest” → 产品登场 → “earshot.”
  • 文字与画面轮流呈现。 链接中的两个片段之间,留出 30–90 帧让画面发挥作用。主角动作绝不与片段在同一段 12 帧内开始,阅读文字时不出现快速移动,阅读停留期间也不开始任何新动作:镜头缓缓移动,设备轻柔起伏,混音逐渐变稀,让观众安静地读完文字。文字片段之间,画面要留出没有文案的时段:文案最多覆盖约 65% 的画面帧,每 10 秒至少留出 1.5 秒不出现文字。
  • 更多语法变化。 将列表改为固定词干搭配轮换词槽(“syncs to” | “your phone” → “your laptop” → “the whole team.”)。产品可以代替句子中的一个词。每部影片出现一次醒目的超大关键词,旁边配上较小的续接文字。编辑尾部,保留锚点,不要替换整行。用持续显示的容器(圆角胶囊、方括号)将变化中的词语组合在一起。
  • 用颜色强调,绝不弹跳。 关键词只扫过一次强调色,或者让最后一个词保持强调色。文案不得过冲、每行猛然弹出或逐字变化;只有一个主角词可以逐字移动。
  • 停留要有活力,而非静止。 片段完成后,停留 max(60, 42 + 每个词 8 帧)(1–4 个词为 1.0–1.25 秒;逐步构建的整行按所有词数计算:8 个词约为 106 帧),同时以每帧 0.3–1 px 的速度漂移,或缓慢移动 1–3%。这只是为了保持活力,并非拖延:阅读期间无需加入任何滴答音。 字体
  • 为品牌个性选择一种简洁、现代的无衬线字体,使用 2 种字重,另可选配一种等宽字体,并以本地可变字体形式提供(@fontsource-variable/*)。不要使用衬线字体或斜体(参见硬性禁用项)。
    • 个性来自所选无衬线字体、字重、大小写和间距:轻字重的人文无衬线字体传递沉静感,紧凑的哥特体传递迅捷感,圆润的无衬线字体传递亲和感。
    • 窄体展示字体会显得像生成的。
    • 无处不在的 UI 默认字体系列(包括初始模板中的替代字体)会让人觉得是“模板”,除非你是有意选择它们。
    • 字重承载着语气:沉静的品牌很少需要厚重的哥特体字标。
  • 通过尺寸或动效强调。
    • 陈述文字为 88–128 px,行高为 0.95–1.05;预计会达到 6–8 个词的构建文案,应使用更沉静的行级角色,字号为 48–72 px,并留出充足的周围空间。
    • 行内强调文字的字号为陈述文字的 1.5–1.7 倍;独立的主视觉词语可达到 2–5 倍(占画面高度的 14–48%);次要行文字为 44–56 px。
    • 经过镜头缩放后,屏幕上的 UI 字号必须至少为 22 px。
    • 所有数字都使用等宽数字。
  • 每种角色只设一个字距值,例如展示文字设为 600 / −0.05 em。各场景间取值近似但不一致,会显得“差一点才匹配”。
  • 默认情况下,文字进入时不使用模糊;品牌风格柔和时,模糊度不得超过 4 px;只有清晰风格中的陈述文字可以使用 6–8 px,并且始终通过 blurIn 实现(在缓动移动完成 60% 时变清晰,因为 Chromium 会对模糊半径进行阶梯式处理,低于约 0.75 px 的模糊会完全呈现为清晰)。文字落位时必须清晰,不能保持可读但模糊的状态超过 6 f。

颜色(references/brand-and-color.md)

  • 从允许的色系(红、绿、青、蓝、黄)中选择一种强调色,并说明理由。硬性禁用项中的颜色一律不得使用:橙色、琥珀色、米色和奶油色、霓虹色、紫色、堇紫色或靛蓝色;也不得使用多色渐变和玻璃拟态。
  • 克制不等于无色。强调色应明显承载关键节拍(产品操作和效果呈现),舞台与中性色也应带有品牌世界的色调。以缩略图尺寸检查影片中段的画面:如果看不到品牌色,影片就没有个性。
  • 中性色应调为冷色或保持中性,绝不能偏暖或米黄;墨色应保持墨色。新元素以强调色出现,并在 10–30 f 内淡化为中性色,用颜色传达“刚刚发生”。
  • 不得使用辉光、光晕或泛光。阴影为 0 20–40px 60–120px rgba(0,0,0,.12–.22);深色表面顶部添加 1 px 的细线,白色不透明度为 8–12%;渐变应以抖动处理后的 PNG 交付(scripts/dither-gradient.py),因为 CSS 渐变在 8 位色深下会出现色带。

布局

  • 避免采用“左侧文字、右侧 UI 卡片”的布局,也避免在空旷背景上放置居中的小型浮动卡片(宽度不足画面的约 40%);常规做法是让居中的产品窗口占画面宽度的 70–92%,并尽可能溢出画面边缘。产品应铺满画面,文字锚定在视线高度或下三分之一处,每个镜头只设置一个焦点动作。
  • 安全边距至少为左右 96 px、上下 64 px,最大强调效果处至少预留 24 px 的头部空间。移动图层应超出画面 5–8%。
  • 有目的地填满画面。
    • 产品镜头中,主视觉(UI、物体或数字)应覆盖画面的约 40–70%。
    • 除围绕单一主视觉(如标志)而设计的留白外,画面中任何区域的空置面积都不应超过约四分之一。
    • 在竖屏信息流中,平台的字幕区和按钮区应有背景或延续画面内容(产品表面、舞台或出血区域),不要留成空白色带。无论原因如何,观众都会把空白视为未完成。

装饰

  • 每个元素都必须说明其作用(揭示、引导、验证、强调),否则就删掉。粒子、散景、星空和幽灵文字都不符合要求。
  • 颗粒效果要么不使用,要么全局应用 1.5–2%,并以输出画面为基准。 产品事实(references/product-ui.md):数据有明确名称、具体且一致;每次可见事件都会更新计数器;产品只会重新规划未来;产品自主行动后不再显示光标;任何暂停画面都应自成一体。

转场(references/transitions.md)

  • 每部影片使用 6–8 种转场,每种最多使用两次;另选一种源自标志的标志性转场,并使用 3 次(开头、中段、结尾)。
  • 交叉淡化绝不作为默认转场,也绝不淡入黑场(亮度会降低约 25%)。
  • 不使用预设噱头:故障效果、漏光、胶片灼烧、漩涡、涟漪、梦幻缩放、闪白。

5. 计时系统要点

src/timeline.ts 是唯一的计时来源。画面、提示词导出和网格检查都会导入它。详细说明和完整模式见 references/timing-grid.md。

export const BEAT = (60 / BPM) * FPS;               // 36 f at 100 BPM / 60 fps
export const BAR = BEAT * 4;
export const b = (bar: number, beat = 0, sub = 0) =>   // sub = 16ths
  Math.round(((bar - 1) * 4 + beat) * BEAT + sub * (BEAT / 4));
const L = (abs: number) => abs - ACT.plan.from;         // act-local frames, one per act
  • **60 fps 下的整帧节拍:**90 BPM 对应 40 f,100 对应 36,120 对应 30,144 对应 25,150 对应 24。100 BPM 是以文本为主和节奏平缓影片的默认值:一段文案、阅读时间以及其后的画面节拍,共占其 2.4 秒小节的 1–1.5 倍。120 BPM(一个小节 2 秒)适用于节奏明快的影片。
  • **默认节奏平缓,按需明快。**配置项为 PACE.calm 和 PACE.crisp(src/lib/pace.ts;HyperFrames 中为 motion.js)。影片通过 timeline.ts 中的 PACE_NAME 选择其中一种;anim.ts 将其导出为 pace,line()、chain()、Words 和 Chain 从中获取数值,grid-check.ts 则据此进行检查。两种配置都会将文案拆分成片段;crisp 节奏更快,且允许文字稍多。
    参数(60 fps)calm(默认)crisp
    单词入场,错开outSoft 上 36 f,错开 11 fout 上 26 f,错开 6 f
    上升,入场模糊0.2 em,无0.32 em,8 px
    退场整个片段同时退场,24 f逐词退场,16 f
    阅读停留max(60, 42 + 每个单词 8 f)36 f + 每个单词 6 f
    每 30 s 的事件数,可见变化24–36,约每 1 s 一次45–60,约每 0.5 s 一次
    镜头时长中位数,最大值100–160 f,240 f60–90 f,180 f
    每个片段的单词数,同时可见≤ 4,≤ 8(替换模式下 ≤ 5)≤ 5,≤ 10
    文案速率,文字占比任意 5 s 内 ≤ 1.2 个单词,文字最多出现在 65% 的帧中≤ 2 个单词,≤ 80%
    节奏100 BPM120 BPM
  • 网格定位
    • 段落切换落在强拍上;段落内的切点落在八分音符上。
    • 一批落点对齐到十六分音符,并在 0–3 f 范围内错开,第一项落在拍点上。
    • 欢迎使用微节奏:在拍手声处呈现效果,下一次底鼓落下时呈现其后果。
    • 切点落在网格上,但大多数切点本身不带声音:由音乐承载它们。段落切换和主角揭示与音乐自身的事件(骤降、停顿、重新进入)同步;当画面变化排名前三但没有音频起音时,av-audit.py 会给出建议。
  • 击中帧
    • 在 cue − 1 处开始画面变化,因为 prog() 在起始帧的值为 0。
    • 脉冲在声音之后 2 f 达到峰值(hitPulse)。
    • 在 beat − delayTo(cfg, 0.5) 处开始弹簧动画,使其弹出落在拍点上。
  • 停留
    • 片段呈现完成后,至少停留 max(60, 42 + 每个单词 8 f)(crisp:36 f + 每个单词 6 f);构建中的文案行按其完整单词数停留(8 个单词时约为 106 f)。尚未呈现完成的文字不会退场。
    • 任何内容都不能静止。阅读停留期间以 0.3–1 px/f 漂移或 1–3% 缓慢推进,画面仍有生命力,不算停滞,也无需在其中加入节拍。阅读停留之外,任何片段都不得超过 72 f(crisp:48 f)而没有可见事件;例外是恰好落在静音处、时长 ≤ 15 f 的刻意定格,以及每部影片中一次落在核心主张或成功状态上的刻意近静止停留,时长 60–96 f,位于音乐骤停期间,随后接一个大动作(在 timeline.ts 中声明为 export const HOLD = {from, to})。当检测门标记出一段安静片段时,应让画面动起来;放宽阈值以通过检测并非解决办法。
    • 片尾卡持续 1.5–2.5 s:标志组合在 60–80 f 内逐步构成,然后静止停留 36–80 f,或继续构建(缓慢推进幅度 ≤ 6%;若停留超过约 1.3 s,则推进 10–20%),随后进入尾段。绝不能直接切到完整且静止不动的片尾卡,也绝不能让静止的片尾卡停留超过约 2.5 s:时间更长会显得拖沓。URL 至少要清晰可读 1.7 s。
    • 在发布影片或产品视频中,标志组合只在结尾出现一次(短促品牌片例外:全片都是标志组合)。影片中段揭示标志,随后又出现相同的片尾卡,会显得重复,也会浪费时间展示静止画面;唯一例外是:在影片时长约 20–26% 处、至少 10 s 的问题篇章之后揭示产品名称或标识,且片尾卡采用不同构图或呼应开场。影片中段通过设备和强调色体现品牌。整部影片中的品牌标志时长应 ≤ 总时长的约 12%。
  • 密度
    • Calm:每 30 s 有 24–36 个独立事件,每小节一个主角动作,事件之间以缓慢动态维持画面活力。Crisp:每 30 s 有 45–60 个事件,每小节一个动作峰值,峰值之间有 30–70 f 的平缓时段,且前 6 s 的密度约为中段的两倍。
    • Calm 并不意味着稀疏。能量曲线、动态的第 0 帧和动态的最后三分之一都要保留;峰值来自每个段落中的一个主角动作,而不是增加文字。
    • 能量逐渐累积,走向效果呈现。转折之后的任何片段都不能比之前的片段更缓慢或更灰暗;唯一例外是在影片时长约 55–85% 处、音乐分解段中加入一次 1–4 s 的刻意低潮。最后、也是最大的视觉峰值应落在 75–90% 处,与音乐重新进入同步。前半段很强、后半段拖沓会削弱影片效果。请通过查看后半段的缩略图联系表,目测检查能量变化。
    • 最后三分之一要保持动态:镜头推进、次级运动或设备本身仍在运作。若影片在结束前 4 s 就沉寂下来,就等于提前结束了。
    • 镜头时长:平静、以切镜驱动的影片中位数为 100–160 f,最大值为 240 f(crisp:60–90 f,最大值为 180 f);最短 24 f,且仅限无文字时;连续长镜头可达 300–560 f,但镜头内至少每 72 f 应出现一次节拍。
  • 钩子:
    • 第 0 帧已经构图完成且处于运动中;
    • 声音在第 0 帧有意图地进入,第一小节内不做淡入;
    • 大约每 1 s 都有可见变化(crisp:每 0.5 s 一次),间隔中保持缓慢动态;如果影片以文字开场,首个片段应在约 1 s 内清晰可读;
    • 观众在 1 s 内感受到问题,并在 2 s 内看到问题的明确表述;
    • 产品名称应在影片时长约四分之一处之前出现在画面中(可以是其金属质感外观、状态行中的名称或标识),不能留到片尾卡才出现。 开头一秒太轻柔,静音浏览的信息流就会划走。
  • 片尾卡: 如果简报提供了一条实用信息(例如“下周”、URL、“现已推出”),就将它作为副标题,放在品牌标识组合下方。如果简报没有提供,发布影片或产品视频仍要在名称下方用一句简短的话说明产品是什么(“CI 的构建缓存。”);只有片头片尾短标识才只显示名称。这是名称之外的唯一一行文字;等名称定格后,再单独显示这行文字,绝不能与名称一起叠放出现。
  • 状态随事件变化: 计数器、勾选标记和总数应在触发它们的事件落定的画格上变化,而不是晚一拍。

声音落点(由 src/lib/sync.ts 计算:peak、hit、delayTo、settleOf):

画面事件声音落点
落定/撞击接触画格,因此动作必须带着速度到达(弹簧阈值 0.92–1.0,或使用 contact 缓动)
弹入移动距离达到 50% 的画格
补间落定97% 的画格
呼啸声(镜头缩放动作和 Logo 缩放,每部影片约 2 次)起始时间提前 100–450 ms,视觉峰值处达到顶峰
打字每秒最多 25 个字符逐键播放;超过此速度时每个单词播放一声短音("typing": "auto")
文本片段落定在最后一个词明显停稳的画格播放一声轻柔的 text 音效(在其绘制上升过程的 97% 处:Chain.tsx 中的 chainResolves(),链条大小由该幕设置),或不播放;绝不能每个词都播放一次
结束滚动播放一声轻响,不带卡点
切镜、滚动、流动、进度条、滚动计数器不播放声音:由音乐承载;计数器最终定格时播放一声清脆的轻响

音画不同步超过约 45 ms,且声音领先画面时,会听起来像“声音先到”。调整画面,不要调整声音。

6. 动效系统要点

动效令牌位于 src/lib/anim.ts(E、SPR、PACE、pace、durFor、tw、prog、mix、lmix、hitPulse、blurIn、arrive、arriveK、stagger、inertia、rand、fd),常用动作的测试过的基础组件位于 src/fx/(Chain、Words、TypeOn、Scramble、Roll、Morph、Iris、MaskRise、Cursor、RackFocus):优先使用这些组件,而不是自己编写。曲线、测量值和编排常量见 references/motion-tokens.md;镜头运作见 references/camera.md。

令牌贝塞尔曲线用途
out.16,1,.3,1入场、显现
outSoft.22,1,.36,1柔和定格
in.7,0,.84,0内爆、硬切退出
exit.55,.055,.675,.19退出并切镜:最后 10–24 f 内每帧约 ×1.14
inOut.87,0,.13,1急摇、品牌标识滑入
smooth.65,0,.35,1漂移、淡出(10–14 f)
ui.4,0,.2,1细微 UI 变化
cam.48,.1,0,.9镜头:缓慢起步,约 27% 处达到峰值,然后长时间平稳
glide.47,.2,.15,1移动 150–350 px
rest.45,0,.1,1以静止结束的动作;在另一动作之后衔接
contact.55,0,.9,.55加速进入撞击
whip.6,0,.15,1在功能点之间急摇
dolly.35,0,.65,1在停留镜头中缓慢推进

一部影片使用约 3 种缓动风格。线性仅用于漂移。 弹簧(SPR,参数依次为阻尼/刚度/质量):snap 18/260/0.7(轻微过冲),pop 11/180/0.6(仅用于落定),soft 26/120/1(无过冲),heavy 30/90/1.4(厚重),calm 16/64/1(临界阻尼,41 f 时达到 97%:唯一适用于文字的弹簧)。

  • 阻尼。 所有运动都采用缓动或临界阻尼:阻尼 ≥ 2√(刚度·质量)。过冲(1–7%)只用于真正的落定,即物体到达表面或锁定位置时;每部影片最多 2 次,因为其他地方的弹跳都会显得像玩具。文字绝不使用会过冲的弹簧:文字应通过缓动或 SPR.calm 稳定下来。
  • 流畅度是发布门槛。 无论创意多出色,只要出现抖动、像素吸附导致的阶梯感、单帧跳变或停顿后猛冲,就不能发布:forensics.py 必须零失败,且 Finish 得分为 5(§8)。
  • 钳制。 在可能与其他几何形状碰撞或使数值变为负数的地方钳制过冲。当 |1 − s| < 0.01 时吸附到静止状态。
  • Easing.spring({damping:200}) 从零速度开始,因此不能替代 expo-out。

重量感法则:

  • 方向。 入场逐渐减速,退场逐渐加速;只有摄像机双向缓动。淡出绝不使用 expo-out,因为它会在一帧内跳过一半变化。
  • 对数空间。 在对数空间中插值缩放和缩放级别:exp(mix(log a, log b, t)),即 lmix。
  • 时长。 时长随距离增长:平缓运动为 0.5 s + 每 px 1.6 ms,摄像机移动限制在 0.9–3.0 s(利落风格:0.35 s + 每 px 1.35 ms,0.6–2.4 s)。最慢的移动至少是最快移动的 3 倍。
  • 形状与接触。 形状比位置提前 6 f 稳定。接触时进行挤压(scaleX 从 1.08 → 1,scaleY 从 0.9 → 1,历时 8 f,以接触边缘为锚点)。
  • 重叠。 次要移动在主导移动进行到 55–75% 时开始(60 f 的移动大约进行到 20 f 时),这样两者会在 2 f 以内都稳定下来;或者让它从零斜率曲线开始。这样可以避免停顿后猛冲。
  • 预算。 一次只运行 1 个主动作,辅助动作最多 2 个。常规移动保持在 25 px/f 以内;快速移动很少出现(平缓风格中,每部影片最多 2 次,其中最多 1 次是 60–70 px/f 的快速甩动;利落风格的次数更多),且要紧邻真正的静止状态(0.3–0.6 px/f),文字阅读期间绝不发生。速度超过 12 px/f 的动作必须在步骤 6 中添加真实运动模糊。
  • 上限。 元素移动速度不超过约 60–80 px/f。超过这个速度后,模糊会将其拖成带有阶梯状副本的条带;应将动作重新设计为节拍切镜、匹配剪辑、遮罩擦除或缩短移动距离。填满画面的边缘效果(擦除、淹没、虹膜、穿越式缩放、容器扩展至全画面)可在少数几帧内达到 150–300 px/f。
  • 包络。 每个重击和轻点都使用 hitPulse(t, attack = 2, tau = 5)。在硬窗口内使用半正弦曲线会造成速度突变,且峰值延后 6–8 f。
  • 衔接
    • 切镜两侧要么都处于静止状态,要么入镜镜头从出镜镜头的速度开始。
    • 切镜前后匹配每个属性,并展示一次静止姿态。
    • 绝不交叉淡化同一物体的两个副本;应让一个物体变形。

7. 引擎不可妥协事项

这些规则源于实际故障。遵守它们只需几分钟,排查故障却要花上几小时。

两个引擎通用

  • 所有内容都必须是帧或时间的函数。
    • 不要使用 CSS transition、animation 或 @keyframes,因为它们无法确定性地渲染。
    • 不要使用 Math.random、Date.now 或 performance.now;请使用带种子的 rand(seed)。
  • 变换
    • 将所有位移放在同一个 transform 中(left:0; top:0; transform-origin:0 0; transform: translate() scale())。小数形式的 left/top 与变换组合时会取整到整数像素。
    • 只能通过变换来定位点和光标。
    • 在无头 shell 中,垂直方向的文本位置会取整到整数像素,因此文本上升时应在 arrive(p) 结束(退出时则从 depart(q) 开始),不要让缓出效果在最后几个像素上缓慢移动(references/chromium-rendering.md §15)。
  • 模糊
    • 不要在 filter: blur() 会发生动画的图层上设置 will-change。这会导致不确定的残影帧。
    • 不要对大型图层的模糊效果做动画;请使用 src/fx/RackFocus.tsx。
  • 离散状态
    • 对每个用于几何计算的值进行钳制,确保半径、宽度、模糊度和缩放比例始终 ≥ 0。
    • 根据 fd(frame)(Math.round)计算离散状态(输入字符数、插入光标、计数器、标签),因为运动模糊的子帧是小数。
  • 字体。 在任何渲染或文本测量之前加载字体(FontGate)。否则,较早进行的测量会以回退字体的宽度缓存。

Remotion(references/remotion-engine.md)

  • 钳制。 interpolate 默认会外推,因此务必进行钳制;tw() 和 prog() 会自动处理。
  • premountFor 只影响 Studio 预览,在渲染时不起作用。与 layout="none" 一起使用时,它在 4.0.529 中会被静默忽略(不报错)。不要依赖它构建功能。
  • Studio Interactive.* 标记只是可选的叶子图层,不能作为结构。
  • 配置。 使用 --muted 渲染,并让 ffmpeg 混流音频(Remotion 的 AAC 会留下约 2.5 帧的预卷)。使用 ANGLE GL 渲染器、JPEG q95 中间文件和 120 s 的 delayRender 超时;入门项目的 remotion.config.ts 已设置好这些参数。
  • 浏览器。 在沙箱中,如果自动检测未找到本地无头 Chromium,请将 REMOTION_BROWSER 设为其路径。

HyperFrames(references/hyperframes-engine.md)

  • 时间轴。 每个合成都有一条暂停的时间轴,最后注册,键名与其 data-composition-id 相同。
  • 补间
    • 使用 fromTo,不要使用 from。
    • 不要在同一个节点上同时使用 CSS transform 和 GSAP transform。
  • 标记
    • 不要使用 repeat:-1。不要使用 <br>。
    • 每个 <audio> 都必须有 id;没有 id 的元素会被静默地从混音中丢弃。
    • 子合成的 <style> 和 <script> 必须放在其 <template> 内。
  • 字体必须是通过 @font-face 声明的本地 woff2 文件。
  • Lint。 在 check 有意义之前,Lint 必须显示零错误,否则它会误报看似干净的“0 samples”。
  • 完成。 使用 bash scripts/hf-finish.sh 完成。速度快于约 18 px/f 的影片应使用 Remotion。

8. 审核循环与发布门槛

完整流程、评审提示词、评分标准锚点和阈值表都在 references/review-loop.md 中。一轮流程如下:

  1. 渲染。 渲染预览(或受影响的片段)。
  2. 测量。 运行脚本。每个脚本都会将 JSON 写入 out/qa/:
    • python3 scripts/probe.py out/preview.mp4 --spec 1920x1080@60 --dur <s>
    • python3 scripts/forensics.py out/preview.mp4 --cues out/cues.json --json out/qa/forensics.json。它会检查爆音、卡顿、无意义的停顿、残影帧、边缘细条、抖动、锐度突变、色带,以及纯色区域的压缩涂抹。使用 --cuts 和 --freeze-ok 声明设计好的切镜和定格,避免它们被标记;对于循环视频,添加 --loop 检查衔接处。
    • python3 scripts/av-audit.py out/preview.mp4 --cues out/cues.json --stems out/stems --json out/qa/av.json。它会检查起音与提示点的对应情况(按音轨分别检查,因此背景音无法掩盖迟到的音效)、响度、真峰值、杂音和尾音。
  3. 图版。 使用 python3 scripts/sheet.py out/preview.mp4 --chunks 4 --rate 12 --out out/qa/sheet.png 制作关键帧图版,并使用 --width 480 制作可读性图版。使用 bash scripts/grab.sh out/preview.mp4 <frame>… 抓取精确帧。
  4. 评审视角。 运行 assets/critics/ 中的评审视角。如果运行环境支持,就并行启动子 Agent;否则依次运行,并且先看图版,再打开代码。使用预算紧张时,只需自行对照图版运行导演和美术视角,让脚本负责取证和同步检查;绝不要完全跳过评审视角,因为它们能发现脚本无法捕捉的大多数问题。
    • 导演(director.md):最弱的 3 秒;任何廉价、模板化或乏味之处;每个片段是否在 1 秒内传达清楚;静音观看时故事是否易懂;2 秒钩子;文字流动(每帧的字数、每次只呈现一个片段、文字与画面轮流出现);结尾。最多提出 12 项修改。
    • 取证(forensics.md):读取脚本 JSON,并以全尺寸检查被标记的帧。
    • 声音/同步(sound-sync.md):检查起音与提示点的对应、遮蔽、调性和结尾。
    • 仅限第 1 轮,美术/文案/UI(art-copy-ui.md):字体、色彩规范、字符串、数据准确性。
  5. 输出格式。 每个评审视角都返回 {issues:[{id, priority, frame, problem, fix:{file, change}}], overall, score}。
  6. 核验(verifier.md)。尝试通过帧和代码反驳每项 P0 和 P1 问题。如果问题有误、正常速度下不可见,或其修复会让情况变糟,就删除该问题。
  7. 修复并重新渲染。 按每分钟影响排序修复。只重新渲染受影响的片段(按片段构图),并在静态衔接帧处拼接。

评审提示词会说明哪些内容发生了变化,以便重点检查。它们还会要求“不要重复报告已修复的问题”“不要提议添加文字”和“要提议将句子拆分成一连串片段”,并将图片批量整理成图版,因为图片会大量占用上下文。当某个片段经过两轮仍然较弱时,运行 review-loop.md 中的设计冲刺。

严重程度: P0 表示在关键节拍(钩子、高潮、Logo)上可见,或会破坏故事;P1 表示正常观看时能注意到;P2 仅在暂停时可见。

发布门槛

  • 11 个维度的评分标准:每个维度 ≥ 3,完成度和同步性 = 5,平均分 ≥ 4.2。
  • 没有未解决的 P0 问题。
  • 每个脚本均通过。
  • 最多进行 5 轮;达到门槛后即可提前停止。然后明确说明仍会进行哪些修改。

9. 文件索引

每个文件等到对应步骤时再阅读。不要一次性全部阅读。

何时阅读文件可了解的内容
第 0 步,选择格式references/formats.md每种格式的制作方案:幕模板、循环、音效、演示过程、社交媒体重新排版
制作第一部影片前references/worked-example.mdTessel 从创意到成片的全过程,包含 15 个错误及其修正方法
第 1 步references/concept-and-story.md概念切入角度、归属感与删除测试、设备设计、故事弧线、片尾卡
第 1 步assets/TREATMENT.md故事方案模板
第 1 步,确定分镜后references/technique-library.md库中所有技巧:制作方案、60 fps 下的时长、适用及不适用场景
第 1、3–4 步及评审阶段references/craft-rules.md节奏、流畅度、文本时长、转场、摄影机、UI 和色彩变化的量化规范
第 1–2 步references/copy-and-type.md文案预算、带时长的片段链及修改前后示例、回调文案、加载字体家族、字体比例、动态文字、安全揭示
第 2 步references/brand-and-color.md从个性到设计选择、命名、标志表、组合标志比例、设计令牌、强调色、阶段
第 2 步及评审阶段references/taste-and-slop.md所有显得廉价的迹象及其修正方法
第 3 步references/timing-grid.mdBPM/fps 对照表、使用 chain() 的 timeline.ts 模式、同步辅助工具、时间安排、停留及两种密度配置
第 4 步references/motion-tokens.md缓动与弹簧表、PACE 控制项、hitPulse、预备动作、落位、交错动画
第 4 步references/camera.md锚定摄影机、对数空间缩放、呼吸/俯冲修饰、焦点转换、3D 限制
第 4 步references/transitions.md动能表和衔接目录,每项均包含帧数、曲线和故障模式
第 4 步references/product-ui.md智能部分、数据与故事断言、FLIP 插入、计数器、光标物理效果、打字效果
第 4 步,Remotionreferences/remotion-engine.md已验证的 API 信息、配置、CLI 方案、注意事项
第 4 步,HyperFramesreferences/hyperframes-engine.md渲染模型、合成规则、CLI、将 cinetic 转换为 GSAP
任何渲染问题references/chromium-rendering.md症状 → 原因 → 修复 → 检测:光栅化陷阱
第 5 步references/sound.md声音来源(earshot 工具包、其作用及备用方案)、score.json 架构、声音布置、配乐文本、混音、母带制作与试听
第 6 步references/finishing.md动态模糊流程及成本、色带、BT.709、编码、复用、交付物
第 7 步references/review-loop.md评审流程、评分标准、严重程度、阈值、设计批准

你已有的工具。 编写自己的辅助工具前,先使用这些工具。

需求工具
从 starter 创建项目scripts/new-film.sh
为影片随机加权抽取技巧;完整显示一条scripts/pick.py(--show <id>、--list)
静态禁用项和硬性禁用项、残留的占位品牌scripts/lint-film.mjs
网格、停留、间隙、字数预算、文本流(片段、每帧字数、同时出现的行、显示速度和字数速率、画面节拍及其提示、静默阅读、文本占比);安全区内的文本(信息流预设:--safe feed9x16)、被移动元素遮挡的文本、显示过快而难以阅读的文本(--cues)scripts/grid-check.ts;scripts/layout-audit.sh
字体系列,无需 npm install 即可随附到项目中scripts/add-font.mjs(或 new-film.sh --font)
根据一种强调色生成调色板、对比度、静帧上的强调色覆盖率scripts/palette.py
避免渐变出现色带scripts/dither-gradient.py
音效提示;配乐、SFX、混音、母带和尾部淡出scripts/export-cues.ts;scripts/audio/score.py、synth.py、master.py
音效套件:从预设初始化、调至匹配调性、渲染(缓存)、随附、检查、试听scripts/audio/kit.py(earshot)
earshot 对配乐的监听:提示同步、声音表、评析(或针对每种套件角色使用 --kit)scripts/audio/listen.py
预览、母版、运动模糊、拼接、分块渲染scripts/render.sh(--preview、--blur、--frames、--budget)、scripts/render-chunks.sh
屏幕播放速度、过快的移动;浮点累积scripts/measure-speed.py;scripts/accumulate.py
规格、音视频延迟和真峰值门限scripts/probe.py、scripts/check-sync.py
联系表、精确抓取帧scripts/sheet.py、scripts/grab.sh
像素 QA、循环接缝;音频和同步 QAscripts/forensics.py(--loop);scripts/av-audit.py
海报、GIF、WebM、循环接缝、透明度、变体scripts/deliver.sh
品牌套件:SVG 和 PNG 标志及组合标识、网站图标、头像、X 页眉;轮廓字scripts/brand-kit.sh;scripts/outline-text.py
HyperFrames 收尾处理scripts/hf-finish.sh

评论

支持 Markdown