motion-graphics-promo 是做什么的？
After Effects 级运动品质，以 HTML/GSAP 合成的方式编写，并通过 HyperFrames 进行确定性渲染。您将获得可编辑的源代码、精确的原始屏幕保真度和可复现的渲染结果——这些是手动关键帧的 After Effects 项目无法提供给智能体的。
来源研究：Higgsfield AI，“AI Created Every Motion Graphic in This Video”（YouTube W3-RIZ-Ps64，11:33，2026 年 9 月），以 720p 分辨率配合联系表进行逐帧检查，外加一个 4 分钟官方 SaaS 产品演示的节奏分析。仅将其用于语法和节奏参考。切勿重复使用其中的像素、音乐、配音、标志或界面。
1. 动效之前先确定简报（先锁定故事）
该教程在动效开始前，花费最初几分钟将简报转化为资源选择和故事板。请同样操作，用五行概括：
- 受众和场景：谁在看，在哪个平台，声音是否开启。
- 一个产品，两个任务，一个下一步：观众应准确记住这些。
- 素材清单：您实际拥有的真实截图和录屏，附上构建/日期。未在此列表中的任何内容都不得出现在屏幕上。
- 配色和字体：使用品牌自身的形象。借鉴参考资料的对比度水平（粗体紧缩文字搭配饱和背景），而非其确切颜色。
- 宽高比：将竖屏（1080x1920）作为独立的合成来设计，不要裁剪横屏。
2. 运动语法
| 节拍 | 规则 | 原因 |
|---|---|---|
| 入场（0-3 秒） | 充满活力：标签落下、旋转、弹跳并稳定一次；或设备有重量感地落下。 | 吸引用户滚动暂停，同时不掩盖产品。 |
| 过渡 | 每个任务使用一种主要过渡。 手机在色块之间滑动或倾斜，或者导航切换到下一个真实屏幕。 | 运动应解释分组或实际产品状态之间的移动。 |
| 稳定 | 短弹簧（GSAP back.out(1.4) 或 elastic.out(1, 0.6)，0.4-0.7 秒）。设备在屏幕内容可读之前稳定下来。 | 物理重量感感觉高端；阅读时摇摆感觉是噪音。 |
| 素材展示 | 每次过渡后至少2-3 秒的稳定、可读屏幕。 | 屏幕比装饰性标签需要更多阅读时间。 |
| 强调元素 | 遮罩/剪辑显示排版、矩形色彩强调、拼贴或色块过渡。谨慎使用。 | 这就是“After Effects 风格”；过度使用会变成模板。 |
默认时间：60 fps；入场 0.5-0.9 秒；标签交错 60-90 毫秒；绝不在观众阅读文本时同时为其添加动画。
3. 32 秒宣传时间线
| 时间 | 目的 | 素材规则 |
|---|---|---|
| 0-4.4 秒 | 可识别的用户问题，一行简洁文字搭配授权 B-roll 或大胆色块。 | 不得使用虚构的推荐或客户身份。 |
| 4.4-13.3 秒 | 第一个任务的真实屏幕序列，保持导航连贯性。 | 实际支持的路径；不得有虚假点击或合成界面。 |
| 13.3-22.2 秒 | 第二个互补任务，并展示录屏证明的可见结果。 | 从已验证的素材中选择；不得引用竞争对手的声明。 |
| 22.2-26.7 秒 | 回归产品价值和身份。 | 表述为目的或邀请，而非未经测算的时间或节省的费用。 |
| 26.7-32 秒 | 单一行动号召，包含 URL 和真实的可用性信息；音乐结束。 | 与实际着陆页和确切发布状态匹配。保留音乐来源信息。 |
对于较长的考虑阶段视频，则遵循官方演示结构：先人文背景，然后每个章节一个工作流，工具之间回归人物，最后品牌结尾。
4. 构建（HyperFrames + GSAP）
- 搭建一个 HyperFrames 合成（参见
hyperframes-best-practices技能了解 CLI、代码检查和渲染注意点）。在项目中锁定 HyperFrames 版本和本地 GSAP 3 构建；不要在渲染时从 CDN 加载动画运行时。 - 设备框架：一个立体的石墨色外壳（顶部柔和光、1-2 px 斜面高光、接触阴影），内含真实截图或静音的
<video>屏幕录制。使用translate3d/rotate为外壳添加动画，保持屏幕内容在稳定后直立且不缩放。 - 动态文字：将标题拆分为单词；在
overflow:hidden遮罩内使用gsap.from(words, {yPercent: 110, rotate: 4, stagger: 0.07, ease: "back.out(1.6)"})。每个节拍一个标题。 - 色块过渡：全出血矩形擦除（
clip-path: inset()补间动画）在节拍之间切换；进入的色块承载下一个设备位置。 - 时间轴：一个主
gsap.timeline({paused: true})，每个节拍带标签 ("problem"、"job1"、"job2"、"payoff"、"cta")，使 HyperFrames 可以确定性查找任何帧。 - 音乐：仅使用授权音轨（例如 CC BY 并署名）。在
audio-provenance.json中记录来源 URL、许可证、署名行和文件哈希；在行动号召节拍处编辑成有始有终的结尾。 - 以目标分辨率/帧率渲染；社交平台使用 H.264 + 立体声 AAC。
5. 讲解和广告设计工具包（经生产验证）
此工具包已成功制作一系列产品讲解视频和 15 秒竖屏广告。第一个版本使用深色背景，但因“太黑”而被拒绝。有效的方法是：
- 每个场景背后的真实素材：产品真实场景的授权素材（例如，体育应用的运动匹配素材），并用品牌色渐变调整 (
linear-gradient(180deg, brand 74% → transparent → ink 50%))，加上素材床上的saturate(1.3) brightness(1.12)。 - 调色板：一种饱和品牌色加一种高能强调色（例如，紫罗兰
#6c4cff+ 石灰绿#d7ff3c），天色/珊瑚色仅作为贴纸使用，深色#16132e用于强调色上的文字。 - 字体：紧缩显示大写字母（Archivo，
font-stretch75-80%，字重 900，在 1080 宽屏幕上 74-96 px）。每个标题的关键词放在一个旋转 -2° 的强调标记框内。请检查每种语言的字符覆盖：Archivo 没有西里尔字母，因此对于 ru/uk/bg 语言需切换到 Inter。 - 设备框架：白色/银色手机和浏览器框架，具有 3D 透视舞台 (
perspective: 1800px)，显示真实截图或真实屏幕录制。每个屏幕必须展示真实内容（人物、标志和数据），而非空状态。 - 落下贴纸：2-3 个简短的大写标签落下、旋转并稳定在设备旁边（每个节拍一个）。
- 过渡：节拍之间使用斜角强调色擦除或 2 帧白色闪光。
- 画外音（TTS 或录制），音乐在其下闪避，然后将最终混音归一化到 -14 LUFS (
ffmpeg -af loudnorm=I=-14:TP=-1.5:LRA=11)。 - 真实设备采集（macOS）：iPhone Mirroring 配合
screencapture -v -V <secs> -R<x,y,w,h>录制真实应用。在发送点击操作前激活镜像窗口。手机必须锁定才能让 Mirroring 连接。 - 本地化变体：保留一个包含
{{placeholders}}的模板，并通过小脚本为每种语言生成副本（参见references/vertical-ad-15s.template.html）。 - 每个链接上的 UTM：在字幕和简介中：
?utm_source=<platform>&utm_medium=organic&utm_campaign=<video-slug>。
渲染陷阱（每个都差点导致视频损坏）
- 当合成中有大量
<video>片段（6 个以上素材床，或素材床加手机片段）时，HyperFrames 可能会在渲染过程中静默丢弃部分覆盖层。 预览截图看起来仍然正常。请将素材床预合并为一个视频，保持片段数量少，并在安排发布前始终检查渲染后的 MP4 的联系表。 - GSAP 的
fromTo在 from 变量中使用autoAlpha: 1会在创作时显示元素。请先使用tl.set(el, {autoAlpha: 1})，然后使用不带autoAlpha的fromTo。 - 上传到社交媒体调度工具有时会返回空主体。请重试，并在安排发布前确认托管文件的字节大小与原始文件匹配。
- 屏幕上出现的真人面部和姓名（玩家、客户）需要获得其同意才能用于商业或公共用途。如果缺少同意，请标记出来。
6. 验证编码文件，而非预览
- 从交付的 MP4 中提取帧（例如
ffmpeg -i out.mp4 -vf fps=2 frames/%03d.png）并检查：每个屏幕在展示期间是否可读，任何字幕是否与平台界面安全区域重叠，文字是否在必须阅读时出现在动画中途？ - 检查解码是否完成、时长、帧率、帧数、响度和峰值；记录最终文件的 SHA-256。
- 运行 HyperFrames 代码检查/布局检查，并在字幕帧上采样对比度。
- 维护一个清单，将每个源资产（含构建/日期的截图、B-roll 许可证、音乐许可证）与最终哈希值绑定。
7. 边界
- 仅限真实界面。如果某个流程无法录制（登录失败、功能未发布），则将其剪掉；切勿模拟。
- 下载的参考视频、联系表和转录稿是私有的分析材料，切勿将其与创意作品一同上传。
- 不得包含未经测量和来源的流行度、投资回报率或节省时间的声明。
- 创意批准不等于发布：安排和发布是独立的、需确认的步骤。