自适应 React & Remotion 动态图形技能
本技能指导使用 React 和 Remotion 设计、进行上下文感知的艺术指导、构建流畅叙事结构，并实现无头渲染专业级动态图形 (MP4 视频)。
核心理念： "形式追随语境。" 切勿将僵化的模板或固定的幕数强行套用到每个视频上。首先评估品牌、时长、宽高比和受众——然后自主选择理想的结构原型和现代设计语言，构建专属的 React 组件。
1. 预飞资产调查与评估（第 0 步）
在编写代码或渲染之前，执行 资产调查与上下文诊断：
🎯 强制资产调查规则
除非用户已在提示中明确提供了图片文件、Logo 或设计令牌，否则 你必须主动询问用户他们现有的资产：
标准调查模板： "您是否有可以用于视频的 品牌 Logo (SVG/PNG)、产品截图、实拍照片、官方颜色 (HEX)、标语/文案 等资产吗？
- 如果您有现有资产：请提供文件路径或将其放入项目的
public/文件夹中，我们将精确地将其映射到视频中。- 如果您没有现有资产或希望我直接制作（'你来搞定'）：我将直接为您重建品牌/组织的官方 CI 矢量图，并自行设计电影感视觉效果和定制的 UI 组件来完成制作。"
3 轨资产执行路由：
- 轨道 A（用户提供资产）：
- 首先检查本地工作区 /
public/文件夹。 - 通过
staticFile('...')导入 SVG 路径、高分辨率图像和截图。 - 应用 Ken Burns 微摇镜效果 (
references/asset-orchestration.md) 和 3D 透视模型。
- 首先检查本地工作区 /
- 轨道 B（零资产 / 自主生成）：
- 如果用户说 "没有"、"你来搞定" 或未提供任何资产：切勿停滞或受阻。
- 自主重建官方企业形象 (CI) 矢量标记 (
references/brand-identity-and-ci.md)。 - 综合生成领域内真实的视觉隐喻、样式化卡片、矢量徽章和几何图案。
- 轨道 C（混合编排）：
- 用户仅提供 Logo 或 URL：提取颜色令牌，自主构建产品 UI、仪表盘和叙事世界。
项目上下文诊断（4 个维度）
1. 目标平台与宽高比：
• 16:9 横向 (1920×1080) -> YouTube、首页着陆页、主题演讲展示
• 9:16 纵向 (1080×1920) -> TikTok、Instagram Reels、YouTube Shorts
• 1:1 方形 (1440×1440) -> Twitter/X 动态、Instagram 帖子、触觉 UI 循环
• 4:5 纵向 (1080×1350) -> 社交媒体推送
2. 时长与节奏：
• 超短片 (3–7s) -> 动态 Logo 片头、循环签名图案、微交互
• 短片 (8–15s) -> 高留存社交短片、病毒式产品特点、电梯演讲
• 中片 (15–30s) -> 完整品牌形象片、全面产品发布
• 长片 (30–60s) -> 多章节产品说明、公司周年庆、作品集
3. 实体身份与调性：
• 企业 / 航空公司 / 汽车 -> 庄严、广阔、流线型、奢华
• 高增长科技 / SaaS / AI -> 清晰、触感强、超高速、钛金属暗色
• 学术 / 大学 / 文化 -> 历史感、权威性、衬线体、智性
• 消费 / 创意 / 生活方式 -> 活力、触感、弹性、排版趣味
4. 叙事弧与消息层级：
• 钩子 (0–20%) -> 实证/功能 (20–70%) -> 品牌收尾与行动号召 (70–100%)
2. 自适应结构原型
选择自然契合时长和目标的结构，切勿在灵活的循环或双拍冲击更优时强行使用僵化的 4 幕模式：
| 结构原型 | 典型时长 | 节奏与场景结构 | 最佳用途 |
|---|---|---|---|
| A. 动态片头 / 微循环 | 3s – 6s (6–12 拍) | 单焦点动量：即时视觉钩子 → 连续无缝变形 → 英雄 Logo 锁定（循环接缝差 < 0.05）。 | Logo 揭示、签名 UI 循环、应用加载状态 |
| B. 垂直社交短片 / Shorts | 8s – 15s (16–30 拍) | 3 秒规则：0–1s 大胆停指钩子 → 2–10s 快速动态实证（3 个交错快切） → 11–15s 有力的行动号召 (CTA)。 | Instagram Reels、TikTok、YouTube Shorts |
| C. 叙事品牌影片 | 15s – 30s (30–60 拍) | 4 幕交响弧：出发/钩子 (0–20%) → 核心/网络 (20–55%) → 升维提升 (55–80%) → 标志性收尾 (80–100%)。 | 重大品牌影片（例如大韩航空、苹果级发布） |
| D. 多章节说明视频 | 30s – 60s (60–120 拍) | 章节式旅程：痛点钩子 → 架构分解 → 深入功能演示 → 社会证明与生态 → 最终品牌锁定。 | SaaS 说明、机构概览、投资者演示 |
| E. 连续形状变形 | 任意时长 | 不间断身份：一个主容器从不切离画面；持续变换维度、圆角和内部内容。 | 触觉 UI 展示、产品变形循环 |
3. 现代设计语言谱系
自主选择与实体个性匹配的视觉语言：
[1. 瑞士新粗野主义] 超严谨网格、粗犷无衬线黑体 (Geist, Inter)、高对比纸张/墨水、零冗余。
[2. 奢华钛金属暗色] 苹果/Stripe 美学、深黑曜石 (#0B0C10)、1px 发丝边框、金属闪光、暖金色/朱红。
[3. 衬线体与电影感] 学术与文化尊严、大胆现代衬线体 (Instrument Serif, Editorial New)、暖色纸张、字母间距。
[4. 光学半色调与点阵] 工作室图形工艺、响应式动态点阵、半色调波浪过渡、复古现代氛围。
[5. 触觉物理 UI] SaaS 与工具精通、物理按压弹簧、橡皮筋拖拽、液态标签、物理光标。
[6. 电影感空气动力学] 航空、汽车、移动性；蜿蜒飞行路径、遥测 HUD、地平线照明、宏大尺度。
[7. 活力流行与几何] 创意应用、消费工具；大胆扁平色块、弹性形状过渡、有力排版。
(有关每种风格的代码配方、调色板和排版配对，请参阅 references/design-styles.md)。
4. Remotion 项目架构
每个项目都使用经过验证、无神奇数字的 Remotion 结构：
my-motion-project/
├── package.json # remotion, @remotion/cli, react, react-dom
├── remotion.config.ts # 系统 Chrome/Edge GPU D3D11 加速
├── tsconfig.json # ES2022, NodeNext, jsx: react-jsx
└── src/
├── index.ts # registerRoot(Root) 入口点
├── Root.tsx # <Composition> 注册（尺寸、fps、时长）
├── compositions/ # 主合成时间线
├── scenes/ # 模块化 <Sequence> 场景
├── components/ # 可复用 UI、品牌 Logo、光标、模型
└── constants/ # 调色板、120 BPM 计时辅助、排版
remotion.config.ts（系统 Chrome 集成）
import { Config } from '@remotion/cli/config';
import fs from 'node:fs';
const chromePath = 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe';
const edgePath = 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe';
if (fs.existsSync(chromePath)) {
Config.setBrowserExecutable(chromePath);
} else if (fs.existsSync(edgePath)) {
Config.setBrowserExecutable(edgePath);
}
Config.setVideoImageFormat('jpeg');
Config.setChromiumOpenGlRenderer('angle');
Config.setConcurrency(4);
5. 执行与渲染 CLI
# 1. 交互式工作室预览（可拖动时间线和实时 HMR）
npm run preview # 或: npx remotion preview src/index.ts
# 2. 渲染 60fps 主 MP4
npm run build # 或: npx remotion render src/index.ts <CompId> out.mp4
# 3. 捕获高分辨率关键帧静态图像
npx remotion still src/index.ts <CompId> still_frame.png --frame=60
6. 参考文档索引
在设计动态图形的特定方面时，请查阅这些深入指南：
- structural-archetypes.md：5 种结构蓝图（微循环、社交短片、品牌影片、多章节说明、连续变形）。
- design-styles.md：7 种现代设计风格（瑞士新粗野主义、暗黑钛金属、衬线体编辑、光学半色调、触觉 UI、电影感移动、活力流行），包含调色板和排版。
- brand-identity-and-ci.md：自主矢量 CI 重建、Logo 揭示机制、颜色规则和品牌图案。
- storytelling-and-narrative.md：叙事弧、视觉隐喻、共享物体过渡和节奏。
- asset-orchestration.md：Ken Burns 平移/缩放、透视模型、SVG 矢量徽章和视觉层次。
- remotion-patterns.md：弹簧力学、
interpolate()、相机容器、交错级联和<Sequence>编排。 - ui-motion-recipes.md：光标、实时计数器、滑块、模态框、通知卡片和图表。
- remotion-qa-and-verification.md：3 步 QA 循环、10 点海报检查表和无头 GPU 渲染。
- timing.md：120 BPM 音乐节拍网格、帧数学、交错偏移和保持限制。
- motion-math.md：谐波弹簧、种子 PRNG 和对数相机缩放。
- gotchas.md：Chromium 渲染陷阱、
preserve-3d、溢出蒙版和文本模糊避免。