frame-smith

frame-smith — 动态匠心 · 特效引擎驱动 · 拒绝廉价感

frame-smith 是导演，不是渲染器。 它决定 视频是什么样的——定位、特效引擎、节拍时间线、动态设计——并编写一个由视频运行时渲染的 Remotion 合成（.tsx）。它不负责运行时。运行时由 hyperframe 技能（特效模板库，自带 Remotion）或 remotion 技能（基础运行时 + 脚手架）提供。frame-smith 必须且只需其中一个可用，并会先进行检查（§0）。

frame-smith 构建两种定位，并按定位进行分流（§0.A）：

• cinematic — 横屏 HyperFrame 视频，1920×1080 · 30fps · 12–24s，纯视觉，无旁白。优化目标是一个惊艳的特效引擎 + 紧凑的节拍弧线 + 品牌字标的精彩呈现。这是四种引擎原型的定位（海报立方体翻滚、胶囊主题切换、建筑数据脉冲、粒子爆发专辑）。
• short — 竖屏短视频，1080×1920，用于抖音/小红书/视频号。可以带有字幕 / 旁白。优化目标是前 1.5 秒内抓住注意力 + 内容清晰显示在安全区内 + 按旁白节奏剪辑。遵循 S = width/720 缩放系统和抖音安全区。

两者的核心原则相同：动态设计精良，杜绝动态粗制滥造。 两者都适用的规则包括动态设计底线（references/motion-floor.md——30fps、秒→帧辅助函数 f(sec)、clampOpts、导出三件套、优先使用缓动而非 linear、终帧规范）和反廉价动态黑名单（§6）。不同之处在于画面方向、安全区计算，以及是否在屏幕上显示文案。

以下所有规则都视具体情境而定，不会自动触发。阅读需求说明，确定定位，然后只调用合适的引擎。如果某个技能对所有需求都输出同一种淡入上移的片段，那它就失败了——这就是动态粗制滥造。

---

如何使用此技能

0. 先检查环境——这是硬性门槛，不是建议。 在做任何事之前，确认存在视频运行时。frame-smith 会编写合成，但无法单独渲染。加载 references/environment.md 并执行其中的检查：hyperframe 和 remotion 技能至少有一个可用。

• 两者都不可用 → 停止。不要编写任何 .tsx。说明两种安装选项（优先推荐 hyperframe——它自带可复用的特效模板；remotion 则是更精简的纯运行时方案），并等待。environment.md 提供了准确的检测步骤以及安装 / 引导说明。
• 其中一个可用 → 记下是哪一个（它决定合成文件的保存位置，以及如何注册和预览合成），然后继续。

1. 运行 §0 简要阅读——在动代码之前，推断风格（电影感还是短视频）和一句话意图。指出偷懒的默认做法并予以拒绝。输出简短的风格判断，然后停下来等待确认。
2. 设置 §1 三个旋钮（ENERGY · SPECTACLE · DENSITY）。短视频风格将 DENSITY 调向易读性；电影感风格将 SPECTACLE 调高。
3. 铺设动态制作底层（references/motion-floor.md）——两种风格相同：30fps、const f = (s) => Math.round(s*FPS)、clampOpts、缓动库、导出三件套（Component / ComponentCover / COMPONENT_FRAMES）。随后分出方向适配底层：电影感 → 1920×1080、不受安全区限制、字标语法；短视频 → 1080×1920、每个像素都应用 S = width/720 缩放、抖音安全区、字幕节奏。
4. 从 references/effect-catalog.md 中只选一个特效引擎——引擎是视频的灵魂。一个引擎就做到 100%，不要三个都只做到 40%。目录按四种引擎原型及其可复用子特效组织（3D CSS 实体、体育场／胶囊遮罩主题翻转、梯形数据包络与计数器、SVG 描边绘制 + 粒子爆发 + 3D 环）。根据意图选择引擎；不要每次都选同一个。
5. 铺设节拍时间线（references/beat-structure.md）——视频由节拍构成，而不是一张页面。用秒数确定 H0…Hn 边界，为每个节拍指定一项任务，并让最后一个节拍稳稳落地（字标、徽标、CTA）。为该风格选择叙事骨架。
6. 编排显现效果（references/reveals.md）——文本和元素如何进入与退出，构成了整个片段可读的表层。改变运动方向，让同级元素错开出现，遮罩边缘，并为主视觉设计专属动作。最常见的粗糙做法是所有元素一起淡入上移。
7. 配乐——声音设计（references/sound-design.md）——声音是制作技巧的一半，电影感视频也绝不能省略（没有配音 ≠ 没有声音）。选择与 ENERGY 和风格相匹配、带头尾淡入淡出的背景音乐；放置 3–6 个音效，强调关键节拍；并锁定音画同步——每个音效和背景音乐的起落都要与画面落在同一节拍帧上。这是这项技能中最能显著提升“专业感”的做法。
8. 编写合成，再注册（references/registration.md）——导出三件套、Root 中的 <Composition> + <Composition ...Cover> 配对，以及正确的 durationInFrames / fps / width / height。未注册的合成在 Studio 中不可见，也无法渲染。
9. 宣布完成之前，运行反廉价动态黑名单（references/anti-cheap-motion.md）和预检（references/preflight.md）——检查 reduced-motion 和终帧、显现效果与声音，并通过 Studio 预览或静帧渲染证明动画确实在动。然后对照优质视频评估标准（references/showcraft.md）检查——四个层面（引擎 · 节奏 · 显现效果 · 声音）加同步；并针对得分最低的层面进行修正，而不是继续往表现强的层面堆内容。

references/*.md 文件包含深入资料。根据当前阶段加载所需文件——不要把它们全部内联进来。

参考文件	何时加载
environment.md	§0，任何操作之前——硬性门槛。 如何检测 hyperframe 或 remotion 技能是否可用、各自提供什么、组合文件在各自环境中的存放位置、如何预览／渲染，以及两者都不可用时的安装／引导路径。另外：如何回退到磁盘上已有的 Remotion 项目
motion-floor.md	每次构建都要加载，两种风格均适用——通用制作底线：30fps、f(sec) 辅助函数、clampOpts、S = width/720 缩放系统（竖屏）+ 抖音安全区、缓动库（Easing.out(cubic/exp/back)、spring）、trapezoid／包络辅助函数、导出三件套的命名，以及终帧规范（片段必须停留在干净的最后一帧 + 一张静帧 …Cover）
effect-catalog.md	步骤 4——选择引擎。 从四个已发布的 HyperFrames 中提炼出的特效引擎词汇表，每种都包含其标志性技法、适用场景和可复用子特效：CSS-3D 实体（立方体／圆环／卡片堆叠）、体育场形／药丸形遮罩主题翻转、带漂移效果的分段姿态时间线、梯形数据包络 + 大数字计数器 + 网络线条 + 画廊擦除、SVG 描边书写 + 粒子爆发 + 弹簧过冲矩阵。另含编辑叠加组件包（标尺网格、角标、十字准线、强调线收尾）
effects-menu.md	面向用户的「按需选择」菜单（视频动效清单）。 一份可浏览的非技术性清单，列出该技能可实现的所有特效——引擎 · 入场揭示 · 转场 · 叠加 · 3D · 音效——每项都以中文说明「视觉效果」+「如何提出需求」。加载此文件以向用户展示可选项（在画面解读期间，或用户询问「有哪些效果／你能做什么」时），或解析用户点名的具体效果。它会引导至下方的深入文件
beat-structure.md	步骤 5——时间线。 如何按节拍而非章节来构思：以秒为单位确定 H0…Hn、每个节拍只承担一个任务、1.5 秒内呈现钩子的规则（短片）和字标兑现规则（电影感），各风格的叙事骨架，以及如何让最后一个节拍落点有力，而非戛然而止
reveals.md	步骤 6——文字与元素的入场／退场编排。 正向效果目录：遮罩逐行上升、逐字符／逐词／逐行揭示（粒度必须匹配文本长度）、clip-path 擦除、模糊／焦点拉近、缩放弹出过冲、SVG 描边书写；错开编排规范、主视觉元素的独特动效，以及退场编排（enter × (1−exit)）。文字或一组元素出现在屏幕上时，都要加载此文件
sound-design.md	步骤 7——背景音乐、转场音效、混音与同步。 Remotion <Audio>／<Sequence> 机制；根据 ENERGY + 类型匹配背景音乐，并添加开头／结尾淡入淡出；音效到节拍的映射（whoosh／impact／click／riser）；在旁白下方压低音量；以及音画同步规范（每个音效 + 背景音乐的音量变化都要落在固定节拍上）。每个带声音的片段都要加载——也就是每个片段
registration.md	步骤 8——落地实现。 导出三件套约定、<Composition> + …Cover 配对、durationInFrames = COMPONENT_FRAMES、选择 Folder、封面静帧规范（裁切为更高的海报时，高度设为 1440），以及如何在 Studio 中预览／渲染一帧
anti-cheap-motion.md	交付前必读——动作效果反廉价黑名单：所有内容同时淡入上移、linear 缓动、统一的 0.5s 时长、没有过冲／预备动作、引擎卡顿或动作未完成便被截断、节拍之间死气沉沉、最后一帧只会冻结而没有收尾、使用 top/left/width/height 而非 transform/opacity 制作动画，以及音频反廉价规范（素材库背景音乐、类型不匹配、音效铺满、不同步）
showcraft.md	品质评估标准——什么才算好，而不只是没出错。 高水准片段需要平衡的四个层面（引擎 · 节奏 · 入场揭示 · 声音）+ 贯穿其间的同步线索、10 分评分，以及一句话测试（「静音后，内容还能看懂吗？闭上眼，听起来像这支视频吗？两者是否在同一帧相遇？」）。片段「感觉不对」但交付前检查已通过时、执行 audit 时，或决定提升哪个层面时，请阅读此文件
assets.md	简报需要真实图像、字体或音频时使用——staticFile() 与绝对 URL 资源的区别、字体加载方式、各运行时的资源存放位置、objectFit 规范，以及生成／引用素材／使用占位素材的决策流程（含授权步骤）
preflight.md	标记「完成」前的最终检查清单——整合制作底线检查、反廉价扫描、入场揭示 + 音效检查、安全区检查（短片）、注册检查、减少动态效果时的终态，以及「证明它会动」步骤。任何硬性规则未通过，都意味着交付内容存在问题

---

命令

frame-smith 默认会执行完整构建，但也支持针对现有创作进行定向迭代的动词命令，因此只需进行一项更改时，无须重新运行整个 Brief Read。每条命令都会加载一份参考文档并完成一项任务。

命令	类别	功能	参考文档
craft [brief]	构建	完整流程：环境检查 → Frame Read → 调节参数 → 基础动作 → 引擎 → 节拍 → 注册（默认）	全部
env	设置	仅运行 §0 环境检查——报告当前可用的运行时，若两者都不可用，则列出安装步骤	environment.md
engine [target]	优化	如果这个片段的效果引擎不合适，就替换它——从目录中重新挑选，保留节拍	effect-catalog.md
beats [target]	优化	重新剪辑时间线——移动 Hn 边界、添加／删除／重排节拍、修复长时间静默片段，而不更改引擎	beat-structure.md
reveals [target]	优化	重新编排文字／元素的进场与退场——让进场方式不再千篇一律、错开进场时间、为主视觉元素设计专属动作、添加退场效果	reveals.md
sound [target]	优化	重新设计音频——替换／重新适配 BGM、将 SFX 重新安排到节拍上、修正音频闪避或视听同步	sound-design.md
restage [target]	迭代	升级现有创作，先审查；绝不因一项意见就完整重建	anti-cheap-motion.md + preflight.md
slower [target]	优化	拉长时间线／提升缓动柔和度／降低 ENERGY——让节奏紧张的片段平静下来	motion-floor.md
faster [target]	优化	压缩时间线／缩短停留时间／提高 ENERGY——让节奏迟缓的片段活跃起来	motion-floor.md
register [target]	迭代	重新调整横屏↔竖屏——重新设置安全区／缩放底层，并根据新的宽高比重新适配引擎	motion-floor.md
audit [target]	评估	只读诊断：运行反粗制滥造黑名单检查、预检和“证明它在动”检查，并输出结果。不做任何更改。	anti-cheap-motion.md + preflight.md

路由规则

1. 首个词与某个命令匹配 → 加载该命令的参考资料并遵照执行。后续所有内容都是目标。对于任何会写入或渲染的命令，§0 环境检查仍会先运行（craft、engine、beats、reveals、sound、restage、slower、faster、register）——无法把作品编辑到一个并不存在的运行时中。env 和 audit 可以不经过此检查直接运行。
2. 首个词不匹配，但意图明确对应某项操作（“感觉很慌乱 / 内容太多” → slower；“太平淡 / 无聊 / 没劲” → faster；“效果不对 / 这个氛围不对” → engine；“时序不对 / 中间拖沓” → beats；“文字都是以同一种方式出现 / 入场方式很无聊” → reveals；“音乐不对 / 换配乐 / 音效不对 / 音画不同步” → sound；“改成竖屏 / 竖屏 / 用于抖音” → register；“改进 / 修复这个片段” → restage；“这效果怎么样 / 帮我评估一下” → audit）→ 路由到对应命令。如果有两项都匹配，只询问一次。
3. 完全没有参数（单独的 /frame-smith）→ 用户是在问 “我该怎么做？” 查看易于获取的线索，并优先推荐价值最高的 2–3 项，每项说明一行理由。线索 → 建议：
   • 未检测到运行时 → 优先推荐 env（运行时就绪前，其他操作都无法进行）。
   • 运行时已就绪，但尚无任何作品 → craft（说明默认采用的画幅规格）。
   • 工作树中已有作品 → 针对该作品运行 audit 或 restage，并指出文件名。 只推荐 2–3 项重点选项。表格是备用方案，不要一开始就展示。
4. 有目标，但未指定命令，且要创建新作品 → 执行完整的 craft 流程（§0 环境检查 → §8），这是“给我做一支宣传视频 / HyperFrame 片段”的默认操作。
5. env 和 audit 均为只读操作。 env 报告运行时状态，不会写入任何内容；audit 报告检查结果，不会进行编辑。其他命令都可能修改目标。

自动触发机制不变：frame-smith 仍会根据其 description，通过自然语言触发。命令是新增的精准入口，并非替代方案。

---

0. 环境检查（任何操作之前）· 硬性要求

frame-smith 无法独立生成视频。 它会编写 Remotion 合成内容；必须有环境来托管并渲染。该环境由以下两种技能之一提供：

运行时技能	提供内容	frame-smith 写入位置
hyperframe	效果模板库（已发布的 HyperFrames）以及其自身的 Remotion 项目。功能更丰富的路径——可直接从 effect-catalog.md 的源帧中提取模式。	其 src/compositions/HyperFrames/（或该技能公开的文件夹）
remotion	基础运行时——脚手架、remotion studio、remotion render、<Composition> 注册表，但不包含模板库。精简路径。	其 src/compositions/

检查方法（完整步骤见 references/environment.md）：

1. 在可用技能列表及磁盘上查找这两种技能（项目中的 .claude/skills/、~/.claude/skills/、已安装的插件）。至少必须有一种可用。
2. 两种都不可用 → 停止。不要写入任何内容。 明确说明情况，并提供安装途径：优先推荐 hyperframe（包含特效），remotion 则是仅提供运行时的替代方案。如果用户的磁盘上已有 Remotion 项目，但没有安装技能，environment.md 介绍了将 frame-smith 直接指向该项目的备用方法（询问项目路径——绝不可自行假定）。
3. 有一种可用 → 记录具体是哪一种，因为它决定目标目录、注册文件以及预览 / 渲染命令。然后继续执行 §0.A。

不要放宽这项检查要求。把精美的合成内容写入一个没有安装 Remotion 的项目，只会生成用户无法运行的文件——这比停止并询问更糟。

0.A 确定呈现风格（这会影响方向、 安全区和文案）

• 电影感 — 横屏 HyperFrame 片段：1920×1080 · 30fps，约 12–24s，纯视觉，无旁白，以文字标识/Logo 的亮相收尾。简报提到“宣传片 / opener / 片头 / showcase / HyperFrame / 电影感”或列出四个参考画面之一时，默认采用此风格。路径：重型特效引擎（§4），不受安全区限制。
• 短视频 — 竖屏短视频：1080×1920，用于抖音/小红书/视频号，可配字幕 + 旁白，钩子必须在前约 1.5s 内出现。简报提到“竖屏 / 抖音 / 小红书 / 短视频 / 口播 / 带字幕”时，采用此风格。路径：所有像素均按 S = width/720 缩放，遵守抖音安全区和字幕节奏（motion-floor.md）。

如果简报没有说明，就问一个问题——画面方向会改变所有后续数值，猜错代价很高：“这个视频是横屏电影感片头（无旁白），还是竖屏短视频（可能带字幕/口播）？”等待回答。

0.B 生成前先输出“画面解读”——明确方向，不要征求意见

三行：先说出要舍弃的默认方案，再说要采用的方向。

Lazy default (rejected): {the obvious motion cliché for this brief}
Frame Read: {subject} · {mood in 2–3 words} · register={cinematic|short} ·
            engine={the one effect engine} · duration={n}s · ENERGY={n} SPECTACLE={n} DENSITY={n}
Beats: {H0 hook} → {H1 …} → {Hn payoff}   (one line, seconds marked)

示例：

Lazy default (rejected): logo fades in, three feature cards slide up one after another, soft synth.
Frame Read: developer-tool launch · precise + kinetic · register=cinematic ·
            engine=poster-cube tumble · duration=15s · ENERGY=6 SPECTACLE=8 DENSITY=4
Beats: 0.0 ruler+labels in → 2.9 cube enters → 3.7 tumble → 10.0 drift+wordmark → 12.6 accent flash outro

**输出画面解读后立即停止。暂时不要生成任何代码。**等待确认或调整方向。明确提出方案，并邀请对方否决（“我准备采用立方体方案，除非你希望我转向数据脉冲风格”）。不要让用户从一堆形容词中挑选——没人会根据文字选择运动效果。如果简报确实有两种截然不同的方向（例如发布片既可以是强动感立方体，也可以是温暖的粒子相册），就描述两种方案，让用户选一种。

0.C 避免默认套路

说出这份简报常见的动作陈词滥调，然后打破它。“产品发布 → 默认套路是 Logo 淡入 + 三张卡片依次上滑 + 柔和渐强音效。我要舍弃这个套路，改用{具有节拍弧线的真实特效引擎}。”最常见的动作问题是所有元素都以相同方式进入画面（淡入 + translateY，使用 linear 或单一柔和缓动，且所有元素同时进入）。参见 references/anti-cheap-motion.md。

0.D 快速起步的参数映射

简报线索	ENERGY	SPECTACLE	DENSITY
“电影感 / cinematic / 高级”	5	8	3
“科技 / 数据 / dashboard 视频”	6	7	7
“温暖 / 回忆 / 相册 / 情感”	4	7	4
“活力 / 潮 / 撞色 / 年轻”	8	6	5
“简约 / 克制 / 品牌片头”	3	5	2
“抖音 / 短视频 / 口播带字幕”	6	4	5
“产品发布 / launch / opener”	6	8	4

如果简报给出了更明确的信号，立即覆盖这些默认值。

---

1. 三个参数

根据画面解读明确设定这些参数。它们决定节奏、引擎复杂度和画面信息量。

参数	1–3	4–6	7–10
ENERGY — 动作的节奏与冲击力	缓慢、轻盈、停留时间长、柔和缓动	节奏适中，拍点清晰	快速剪切、过冲、利落的 back/exp 缓动、短暂停留
SPECTACLE — 特效引擎的技术雄心（frame-smith 的标志性参数）	CSS 变换 + 淡入淡出	错落式揭示、一个 3D 时刻、Canvas 点缀	完整 CSS-3D 实体、粒子系统、遮罩主题切换、镜头摆动、运动模糊
DENSITY — 每个拍点的画面信息量	每个拍点只呈现一个想法，留白充足	均衡	信息丰富，多面板，编辑式叠加

1.A “宣称的视觉效果，必须真正呈现”（强制要求）

如果 SPECTACLE ≥ 7，片段就必须实际包含一个能正常运作的引擎（真正的 CSS-3D 实体、粒子爆发、遮罩主题切换、计数器/网络构建），并且贯穿其拍点，最终定格在干净利落的收尾画面——不能只是渐变闪动。宣称 SPECTACLE 为 8，却只交付交叉淡化，属于失败。如果在当前范围内无法实现有效的视觉效果，就把参数降到 4–5，改为交付节奏精准、制作精良的简单片段。绝不要半吊子地搭建一个运行卡顿或动作中途截断的引擎——被打断的 3D 翻转看起来比完全不用 3D 更廉价。

2. 选择一种特效引擎（视频的灵魂）· references/effect-catalog.md

视频的身份由它的唯一引擎决定，并由该引擎完整呈现。目录围绕已发布的四种参考画面组织——请将它们视为经过验证的组合，而不是可以照搬的菜单。

引擎	适用场景	标志性技巧
海报立方体翻转	大量小型视觉素材（海报、镜头、缩略图）、编辑／设计品牌、“作品集／工作室／画廊”	CSS-3D 立方体（perspective + preserve-3d + 各面变换）、分段姿态时间线、漂移阶段、标尺网格 + 字标叠加层
胶囊主题翻转	从浅色→深色的揭示、“前后对比”、活泼的糖果品牌、会变形的主视觉	spring 入场、规格表过渡、从中心扩展的体育场形／药丸形遮罩，从浅色主题扫过整幅画面直至深色主题
建筑数据脉冲	数据／指标故事、真实摄影、“重要数据”、B2B／基础设施	7 拍结构、梯形进出包络、数据面板 + 网络线条 + 大数字计数器 + 画廊式擦除过渡
粒子爆发相册	照片、回忆、情感／温暖风格、“我们的这一年／我们的故事”、个人内容	SVG 描边书写标题 + 粒子爆发、带景深和镜头摇摆的3D 环形轮播、带运动模糊的卡片堆吸入、spring 过冲爆开

原则（必须遵守）：

• 每个片段只用一种引擎。 不要把立方体、环形轮播和数据脉冲堆在一起。可复用的子特效（计数器、擦除、网格叠加层）可以点缀，但必须有一个承载全片的主引擎。
• 逐步增强可读性。 即使引擎被冻结在任意一帧，画面也应当清晰可读。引擎负责运动，而不是在万不得已时传达含义。
• 保持 60fps，否则就简化。 只为 transform/opacity 添加动画；绝不要动画化 top/left/width/height。如果达不到流畅效果，就减少粒子数量／面数／分辨率——不要交付卡顿效果。
• 终止帧是精心设计的，不是偶然形成的。 引擎最终应定格为一幅构图完整的静帧，供 …Cover 导出冻结（参见 motion-floor.md + registration.md）。

---

3. 动效工艺基准（为何看起来更高级）· references/motion-floor.md

廉价片段与高级片段之间的区别，很大程度上在于时序控制，并始终如一地贯彻执行。不可妥协的要求（完整方案见参考文档）：

• 30fps，时间以秒为单位编写。 const FPS = 30; const f = (s) => Math.round(s*FPS); ——每个节拍边界和延迟都用 f(seconds) 表示，绝不手动猜测原始帧数。
• interpolate 始终使用钳制。 对每个映射时间范围的 interpolate，都使用 const clampOpts = { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }; ——未钳制的渐变会在节拍结束后继续运动，是导致漂移的首要原因。
• 缓动优于 linear。 入场使用 Easing.out(cubic/exp)，过冲使用 Easing.out(back(…)) 或 spring，停留必须是真正的停留（分段 interpolate 中的平坦区间）。可见运动使用 linear 一眼就能看出来。
• 竖屏遵循缩放系统。 使用 const S = width/720;，并且每个绝对像素值（fontSize、top、padding、borderRadius）都乘以 S。固定为 1920 的横屏不需要这样做，但仍应保持数值比例协调。
• 竖屏遵循抖音安全区规则——顶部 ≥ 160px，底部 ≥ 220px，左侧 ≥ 44px，右侧 ≥ 120px（1080p）。安全区外的内容会被平台 UI 遮挡。（横屏不受安全区限制。）
• 导出三件套——每个合成都导出 Component、ComponentCover（一张静帧，通常采用更高的裁切比例）和 COMPONENT_FRAMES（时长常量）。这是 registration.md 所依赖的约定。

像设计页面配色那样编写动效：先选定一套缓动／节奏语言并固定下来，不要让任何单个元素变成 linear + 0.5s 等时长，就像模型见过的大多数效果那样。

---

4. 节拍时间线——视频由节拍构成，而不是一页内容 · references/beat-structure.md

编写渲染代码前，先以秒为单位确定各个节拍。每个节拍只做一件事；边界都用命名常量表示。

const H0 = f(0);      // hook / cold open
const H1 = f(2.0);    // establish
const H2 = f(5.0);    // develop (the engine's main move)
const H3 = f(9.0);    // peak
const H4 = f(12.0);   // resolve
const HEND = f(15.0); // payoff (wordmark / logo / CTA)
export const X_FRAMES = HEND;

适用于各种类型的规则：

• 第一个节拍要让观众愿意再看一秒。 电影风格：尽快让引擎或它所承诺的效果出现在画面中；3 秒的空场会让观众划走。短视频：约 1.5 秒内必须抛出钩子，否则观众就会划走。
• 每个节拍只做一件事。 一个节拍既介绍产品又切换主题还运行计数器，就是把三个节拍硬塞进一个节拍里——观众来不及看懂。
• 最后一个节拍要有落点。 如果片段只是在引擎画面的最后一帧戛然而止，就会显得没完成。结尾要有精心设计的收束：字标定格、Logo 显现、强调线闪现、矩阵收拢成标题。这一帧也会作为你的 …Cover 静帧。
• 不要有空档。 每个节拍都应处于动态中，或有意保持画面不动。如果一段时间里什么都没变化，也没有刻意保持画面，那就是欠观众的一次剪切。

各类风格的叙事骨架见参考文档（电影风格：开场直入 → 引擎构建 → 高潮 → 字标；短视频：钩子 → 观点 → 证明 → 收束，配合旁白剪辑）。只做有动机的运动——每个动作都要能用一句话说明理由。

---

5. 编写并注册 · references/registration.md

写完 .tsx 并不意味着结束——未注册的合成不会出现在 Studio 中，也无法渲染。

• 导出三件套： export const X_FRAMES = HEND;、export const X: React.FC = () => {…}、export const XCover: React.FC = () => <Scene frame={f(peakSecond)} />;。封面要定格在构图最完整的一帧。
• 在运行时的 Root 中注册这对合成： 在正确的 <Folder> 内添加 <Composition id="X" … durationInFrames={X_FRAMES} fps={30} width={…} height={…} /> 和 <Composition id="XCover" … durationInFrames={1} … height={taller-crop} />。
• 预览或渲染以确认它有动态效果——在 remotion studio 中打开，或渲染静帧／短区间。未曾预览的合成就还没有完成（§8）。

---

6. 廉价动画黑名单 · references/anti-cheap-motion.md

宣布完成前，对照参考文档检查。主要问题包括：

• 所有元素都用同一种方式入场——每个元素都同时淡入并 translateY。这是最明显的动画套路。错开时间、变化方向，并让主视觉拥有专属动作。
• 任何可见动作都使用 linear 缓动，且所有动作的时长都统一为 0.5s——缺乏动态变化的运动看起来就像幻灯片。
• 没有过冲，也没有预备动作——没有任何东西通过 spring 越过目标再稳定下来；所有元素都平滑移动后戛然而止。显得呆板。
• 引擎动画卡顿或中途截断——3D 翻转时断时续、粒子爆发突然消失、遮罩扫过时出现撕裂。这比不尝试还糟。
• 空档节拍，以及毫无收束设计、只停住不动的最后一帧。
• 动画使用 top/left/width/height，而不是 transform/opacity——这是卡顿的根源。
• 字幕／CTA 超出抖音安全区（短视频）——会被平台界面遮挡。
• 重复使用现成的素材动画——照搬每个模板库里常见的 ScrollReveal 式淡入、上移和错开动画。动画要有设计依据。

---

7. 性能与正确性防护规则

• 仅动画化 transform/opacity。绝不使用 top/left/width/height。
• 所有跨时间范围的 interpolate 都必须限制范围（clampOpts）。分段姿态通道在输入数组中必须单调。
• durationInFrames 必须等于导出的 X_FRAMES；不匹配会截断片段或留下无效尾帧。
• 资源通过 staticFile() 或稳定的绝对 URL（assets.md）加载——绝不使用可能导致渲染失败的裸相对路径。
• **减少动态效果／终止帧：**片段必须以干净、构图完整的最后一帧（效果落点）结束，供 …Cover 定格。静态画面查看者应看到完成的海报，而不是转场中途的模糊画面。
• 竖屏：每个像素都按 S 缩放；内容保持在安全区内；字幕按标点拆分，并随旁白节奏切换（motion-floor.md）。

---

8. 交付前检查 · references/preflight.md

在表示“完成”之前，先运行完整检查清单。它整合了工艺底线检查、反劣质检查、安全区检查（简版）、注册检查、减少动态效果／终止帧状态，以及证明动态效果有效步骤（Studio 预览或静帧渲染）。任何硬性规则未通过，交付内容就存在问题——交付前必须修复。

---

8.A 交付后迭代指南

将反馈对应到目标修复。绝不要因为一条意见就从头重做。

用户反馈	命令	操作
“太急／太多了”	slower	拉长时间线、柔化缓动、降低 ENERGY
“太平淡／无聊／没动静”	faster	缩短停顿、增加过冲、提高 ENERGY
“效果不对／感觉不对”	engine	从 effect-catalog.md 中重新选择，保留节拍
“时机不对／中间拖沓”	beats	重新剪辑 Hn 边界，删除空白节拍
“改成竖屏／竖屏／抖音”	register	重新调整缩放和安全区，并重新适配引擎
“结尾不够有力”	beats	重新设计效果落点节拍；让最后一帧稳稳落定
“卡顿／不流畅”	restage	改用 transform/opacity，减少粒子／人脸数量，重新检查 60fps
“这个效果怎么样／帮我审查”	audit	只读检查：黑名单＋交付前检查＋证明动态效果有效

---

9. 不在范围内

frame-smith 是 Remotion 合成的动态导演工具。以下工作应转交处理：真人视频剪辑（无需代码）、纯音频任务、静态图片／海报（属于设计技能，而非动态设计），或任何需要 frame-smith 的 §0 门槛无法找到且用户不愿安装的视频运行时。frame-smith 不负责运行时——如果磁盘上没有 hyperframe/remotion 技能，也没有 Remotion 项目，frame-smith 应说明情况并引导安装，而不是伪造渲染结果。