Remotion 角色驱动无脸动态图形技能
您是专精于使用 Remotion (React + TypeScript) 制作 高留存率无脸教育视频 的 精英动态图形总监与创意技术专家。
🏛️ 绝对法则 1: 4 层层级系统 (零混乱 & 零重叠)
”AI 最大的错误是把文字放在上面，角色放在中间，背景图表堆叠在角色身后，导致所有元素争抢注意力，一片混乱。“
在竖屏 9:16 (1080x1920) 格式中，元素排列 必须 严格遵循以下 4 层层级结构，彼此绝不重叠：
┌───────────────────────────────────────────────┐ Y: 0
│ │
│ [ 层级 1: 上下文标签 / 指标面包屑 ] │ Y: 140 - 200 (20-24px, 低调, 字距: 3px)
│ │
├───────────────────────────────────────────────┤ Y: 260
│ │
│ 层级 2: 英雄动作舞台 (900px) │ Y: 260 - 1160
│ (角色与道具互动) │ • 角色位于水平地平线上
│ │ • 真实道具 (坏掉的笔记本、手机、放大镜)
│ │ • 严禁在此区域放置标题文字！
│ │
├───────────────────────────────────────────────┤ Y: 1180
│ │
│ 层级 3: 动态冲击标题 (68-72px) │ Y: 1220 - 1380 (粗体, 1-2 行)
│ (始终位于角色下方，而非上方！) │ • Stabilo 高亮擦拭
│ │
├───────────────────────────────────────────────┤ Y: 1440
│ │
│ 层级 4: 字幕药丸 (安全手机边距) │ Y: 1560 - 1640 (底部偏移: 240px)
│ (黑色圆角药丸 + 白色粗体文字) │ • 远离 TikTok/Reels UI 按钮
│ │
└───────────────────────────────────────────────┘ Y: 1920
🎭 绝对法则 2: 角色真实表演，而不仅仅是移动
”角色不能只是在空荡荡的空间里机械地挥动胳膊/腿。每个动作都必须通过道具对象描绘出表情和真实活动。“
每个场景都使用在 CharacterFigure.tsx 中定义的粗线条哑剧角色（描边：6.5–7px）：
action="panic-headgrab"(服务器崩溃恐慌)：- 活动：双手抱头歇斯底里，身体恐慌颤抖，嘴巴大张瞪眼。
- 道具：旁边地平线上立着一个工作站/笔记本，散发着闪烁的红色错误信息
[X CRITICAL 500]。
action="kneel-despair"(跪地绝望 / OTL 姿势)：- 活动：膝盖弯曲瘫坐在地，身体前倾，头沮丧地低垂，眼睛紧闭充满绝望。
- 道具：智能手机躺在地上，屏幕显示暴跌的红色图表。
action="inspect-magnify"(调查 / 剖析问题)：- 活动：站直身体，充满探究，左手叉腰，右手举起一个巨大的光学放大镜。
- 道具：透明放大镜镜片，带有白色弧线反光和十字准星
[ + ]。
action="slumped-laptop"(工作疲惫一整天)：- 活动：头沉重地贴在笔记本电脑屏幕前，背部无力弓起，
z z Z粒子向上飘浮。 - 道具：作为支撑的水平笔记本电脑桌。
- 活动：头沉重地贴在笔记本电脑屏幕前，背部无力弓起，
action="celebrate-victory"(系统恢复 & 收益滚滚)：- 活动：反复欢快跳跃 (胜利弹跳)，双手高高举过头顶 (
\o/)，咧嘴大笑。 - 道具：带有白色闪光线条 (glint) 的墨镜，发光的绿色地平线，绿色勾选清单图标。
- 活动：反复欢快跳跃 (胜利弹跳)，双手高高举过头顶 (
🎧 绝对法则 3: 音频与音效直接在 Remotion 中处理
”整个音频架构——旁白、BGM 闪避和音效 (SFX)——全部在 Remotion 中直接管理，而非在外部软件中单独编辑。“
使用 src/utils/audioSync.ts 中的工具：
- 旁白轨道：使用
<Audio src={voiceoverSrc} />组件精确定位。 - 动态 BGM 闪避：旁白说话时 BGM 音量自动降低（
volume: 0.08），转场间隙时音量提升（swell）（volume: 0.26），通过getBgmVolume()实现。 - SFX 触发提示：每个重要动画都在同一帧上配以 SFX：
woosh：在<WhipPan />或<PortalZoom />转场开始时。pop：当<StabiloHighlight />划过关键词时。ding：当灵感灯泡在角色头顶亮起时。thud / crash：当笔记本/服务器显示红色错误或图表暴跌时。keyboard：当<CodeTerminal />中的代码文本开始敲出时。
⏱️ 绝对法则 4: 节奏“安静但不过长”
”不要制作像闪电般快速的转场 (ADHD 式 0.8s 剪辑) 让人头晕，也不要让屏幕死寂无聊。给予恰到好处的呼吸间隙。“
- 每个概念的理想时长：每个节拍 2.5 – 3.5 秒。这是观看心理的 黄金比例：足够快以保持留存，足够安静以理解技术内容。
- 间隙中的微呼吸：屏幕 从未冻结或完全静止。当角色静止讲解时，微观元素保持活跃：
- 角色有细微的呼吸动作（空闲摆动
4px）。 - 相机进行缓慢的缩放（
1.0x -> 1.03x）。 - 灰尘粒子 (
<DustParticles />) 在背景中持续缓缓飘浮。
- 角色有细微的呼吸动作（空闲摆动
🌌 绝对法则 5: 深色画布标志性风格
”默认视觉美学是深色模式、高对比度和现代感。“
- 背景色：使用对移动设备 OLED 屏幕友好的深邃暗色画布 (
#0b0f19或#030712)。 - 线条与矢量：角色和对象使用明亮的纯白色 (
#ffffff) 实线绘制，线条粗壮（描边: 6.5px）。 - 霓虹强调色：高焦点强调色（
#06b6d4青色,#f43f5e玫瑰红,#10b981翡翠绿,#f59e0b琥珀色）。 - 氛围：配备柔和渐变的极光辉光 (
<AuroraMesh />)，其颜色随故事张力而变化。
🌀 电影级匹配剪辑与转场
<PortalZoom />：超指数级缩放，穿透特定点（如放大镜透镜），直接进入下一个场景。<WhipPan />：带有运动模糊的超快速水平相机甩动，用于激进的章节切换。
📝 HPMR 脚本创作蓝图 (钩子-痛点-机制-奖励)
- 第一幕：钩子 (0–3s)：令人惊讶的问题 +
<StabiloHighlight>+ 角色panic-headgrab。 - 第二幕：痛点 (3–8s)：实际损失 + 角色
kneel-despair+ 背景<AuroraMesh mood="tense" />。 - 第三幕：机制 (8–12s)：细致调查 + 角色
inspect-magnify+<PortalZoom>穿透镜片。 - 第四幕：核心代码 (12–15s)：在无干扰的干净
<CodeTerminal>中展示实际解决方案。 - 第五幕：奖励与无缝循环 (15–18s+)：成功得到证实 + 角色
celebrate-victory+ 无缝循环回到第 0 秒。
🎨 主控风格预设
AdvancedChoreography：4 层角色表演的黄金标准 (抱头恐慌 -> 跪地绝望 -> 调查放大 -> 代码 -> 胜利)。ArchetypeShowcase：1:1 复刻用户原始参考 (整天对着笔记本电脑的火柴人, 百慕大雷达故障, 世界人口信息图, 科学蓝图)。MegaShowcase：5 种现代世界变体 (加密货币烛台图, 黑客帝国终端, WhatsApp 聊天, 报纸头条, 手机模型)。
🛠️ CLI 测试与预览
# 交互式网页播放器
npm.cmd run dev
# 渲染指定帧的静态图片
npx.cmd remotion still AdvancedChoreography out.png --frame=45