Reel 动态图形设计
此技能用于制作风格统一的Reel短片，最初为“30秒升级改造”视频创建。template/ 目录包含该短片的完整HyperFrames项目，新副本在修改前即可正确渲染。你的任务是在保持以下所有规则的前提下，用新脚本内容替换原有内容。
在编写合成HTML之前，请加载 /hyperframes-core 以了解其组合契约。仅当你需要的动画模式不在 references/primitives.md 中时，才加载 /hyperframes-animation。
1. 阅读脚本并规划节拍
收集或推断以下信息，只询问那些会改变影片内容的问题：
- 脚本或概念。 必需。
- 主持人视频（MP4）或静态图片。如果没有，则保留模板中的占位静态图片。
- 来源备注，用于标题眉标，例如
ICLR 2023 · Author et al.。 - 目标时长。 默认30秒；20–60秒均可。
将脚本分解为：一个标题卡（约4秒），2–5个步骤（每个4.5–6秒），以及一个可选的结果/结尾（约5.5秒）。为每个步骤编写：
- 一个标题：用普通文字加上1–2个单词的斜体强调（例如“复制MLP 八次”），最多约22个字符，以便在656px宽度、60px字号下适配；
- 一个字幕：第一行是一个句子，最多约34个字符（Bodoni斜体40px），第二行是辅助说明句子，最多约40个字符；
- 图解变化：来自原始元素词库（
references/primitives.md→ “编写新的图解”）。
如果字幕与旁白对应，则语速约为每秒2.5个口语词。将规划写入项目中的 STORYBOARD.md（节拍、时间范围、标题、字幕、视觉变化），展示给用户，并在用户批准后开始构建。对于用户已批准的很短的脚本，可以直接进入构建阶段。
2. 搭建脚手架
此技能位于Reel Creator项目（.claude/skills/reel-motion-graphics/）中。从项目根目录运行命令，并将每个新Reel放入 reels/<slug>/ 目录。下面的脚本路径（如 scripts/solve-fold.py）是相对于此技能文件夹的。
.claude/skills/reel-motion-graphics/scripts/new-reel.sh reels/<slug> [presenter.jpg|.mp4]
若使用主持人视频，将 index.html 中的 <img id="presenter"> 替换为：
<video id="presenter" class="clip" src="assets/presenter.mp4" data-start="0" data-duration="<D>" data-has-audio="true" playsinline></video>
#presenter 的CSS（cover填充、20%锚点、位于 --fold 下方）保持不变。
3. 构建：先编辑数据，再编写图解
| 文件 | 需要修改的内容 |
|---|---|
index.html | 调整根节点和宿主节点的 data-start/data-duration 以匹配规划。宿主包括：bg（全局）、title（0–4秒）、headings和diagram（4秒至结束）、result（其自身窗口）、captions（全局）、presenter（全局）。 |
compositions/title.html | 眉标来源、两行展示文字、两行论点文字，以及当核心理念不是“1 → 多个”时的微型图解。 |
compositions/headings.html | 仅修改 STEPS 数组（宿主局部秒数）。进度条和“第N步，共M步”由它派生。 |
compositions/captions.html | 仅修改 CAPS 数组（全局秒数）。每条字幕在其对应步骤开始后约0.35秒进入，并在该步骤结束时离开。 |
compositions/diagram.html | 使用原始元素词库为新主题重写整个世界。保留镜头/世界/漂移结构、token-clock模式和背景衰退。 |
compositions/result.html | 统计数据标签、数值、计数器和元数据行，如果脚本中没有数字则删除该宿主。 |
compositions/bg.html | 通常保持不变。调整其yoyo重复次数，使其在根节点时长结束时完成。 |
当词库中没有合适的图形时：请求HyperFrames链接
词库位于 references/primitives.md。当一个节拍需要的视觉效果没有原始元素覆盖（如图表类型、地图、时间线、比较或任何未列出的内容）时，不要从头即兴创作。暂停并请求用户提供一个链接：
“节拍3（‘自2021年以来收入增长三倍’）需要一个增长图表，而词库中没有。你能发送一个你喜欢的图形的HyperFrames目录链接吗？我会将其重新样式化为我们的品牌风格。”
为了帮助他们选择，你可以列出2–4个候选方案（通过 npx --yes [email protected] catalog "<关键词>"），但让用户最终决定。在等待期间继续构建其他节拍，并在空位处留下一个带标签的占位符。
当链接到达时：
- 安装它。 注册表项名称是目录链接的最后一段路径。在项目中运行
npx --yes [email protected] add <name> --no-clipboard --json。对于非注册表的链接，请阅读页面或源代码并重新构建。 - 按内部规则重新样式化：
- 将颜色替换为品牌令牌，将面板替换为
.glass； - 使用Bodoni和Instrument Sans字体及其opsz-18文件；
- 将所有间距值设定为4px网格的倍数；
- 使其适应内容列和区域；
- 添加光泽、高光和漂移效果；
- 移除任何不符合品牌风格的内容，例如扁平亮色填充、其他字体或投影样式。
- 将颜色替换为品牌令牌，将面板替换为
- 接入它 作为图形轨道上的一个子合成宿主，或者当它需要与连续世界共享时，将其动画融入
diagram.html。然后像往常一样检查、截图和修复。 - 将其添加到词库。 在
references/primitives.md的“从HyperFrames重新样式化”部分下添加一个条目：包括名称、来源链接、展示内容及其关键参数。将重新样式化后的文件复制到template/compositions/library/中，以便下一个Reel无需再次请求即可重复使用。
4. 内部规则（每条Reel必须遵守，无一例外）
- 等距折页。 折页位于最低动画内容（字幕底部，约y=900）与主持人头顶之间的中间位置。使用
scripts/solve-fold.py <主持人静态图或一帧画面> 900求解，并将--fold设置为brand.css中的一个值（4的倍数）。使用scripts/measure-fold.py <截图> <fold值>验证。对于视频，检查主持人头部位置最高的一帧。 - 4px网格。 所有内边距、间距、偏移、尺寸和行高均为4的倍数。容器应均匀填充并适应内容尺寸；切勿为卡片设定固定高度。运行
scripts/audit-grid.sh <项目>；唯一允许的例外是极细边框、发光半径和补间运动偏移。 - 稳定的衬线字体。 仅使用
fonts/目录中的*-opsz18.woff2Bodoni字体文件。可变字体的自动光学尺寸会选择极细的显示切割，这些切割在H.264编码和手机缩放后会消失。切勿切换回可变文件或Google的6..96范围。 - 区域。 应用栏0–175（保持空白），动画区域192–780，字幕条带812–904，主持人位于
--fold下方，内容列 x 坐标为172–828（避开右侧轨道）。字幕仅位于一条轨道上。 - 一个连续的图解世界。 跨步骤持续存在的元素应位于
diagram.html中并移动。它们绝不应在新场景文件中重新进入。 - 确定性。 仅使用在
window.__timelines["<id>"]上注册的暂停GSAP时间线。使用种子化的rng()或hh()代替Math.random，不使用requestAnimationFrame、时钟或网络。动画计数器和粒子是代理补间值的纯函数。 - lint安全的编写方式。
- 使用
document.querySelector('[data-composition-id="<id>"]:not([data-composition-src])')定位子合成的自身根节点，切勿使用#root（一旦组装，多个根节点共享该ID）。 - 元素ID需添加合成前缀（
dg-、hd-、rs-、ti-）。 - 每个元素-属性对使用一个
fromTo，然后使用to。 - 切勿对
letterSpacing、width、height、top或left进行补间；请使用变换和透明度。 - 错开单独标签，使其在静止状态下不重叠。
- 使用
- 外观。 接近黑色的温暖背景，带有漂移光线和颗粒感；每个面板使用
.glass；浅色点缀使用金色光泽；每个保持状态上都有微小的相机漂移；每个完成状态至少保持1秒。
5. 验证，然后交付
在项目目录中运行以下命令：
npx --yes [email protected] check
npx --yes [email protected] snapshot --at <每个节拍的中点>
check必须通过且0错误。检查任何警告。- 查看截图联系表。裁剪并放大任何密集的帧：检查重叠、文字被截断、令牌未到达目标位置以及内边距不均匀。
- 运行
measure-fold.py和audit-grid.sh，并修复它们标记的任何问题。 - 使用
npx --yes [email protected] render渲染；结果输出到renders/目录。创建一个用于手机观看的30MB以下共享副本：ffmpeg -i renders/<file>.mp4 -c:v libx264 -crf 23 -preset slow -pix_fmt yuv420p -movflags +faststart renders/<slug>-share.mp4 - 实时播放器：从项目根目录运行
node viewer/build.mjs。它会重新构建每个Reel的实时播放器（包括reel/和每个reels/<slug>/），并写入轮播图viewer/index.html，同时在viewer/reels/中为每个Reel生成一个副本。将viewer/index.html发布到Reel库制品 https://claude.ai/artifact/Joet84qdr6Kb47vYZzc8YR，并在files中传递所有viewer/reels/*.html文件。用户更喜欢实时HTML播放器而非嵌入式视频。对于单个独立的Reel，在其文件夹中运行node build-preview.mjs会生成dist/preview.html。 - 报告运行时间、检查内容（帧、折页间隙、审核结果）以及任何尚未验证的内容。
参考
references/primitives.md：所有视觉构建块及其实现文件。template/：完整的“升级改造”Reel。它是质量标准；将新作品与之对比。