科技新闻动效包装 wangpeng668866/dsh-motion-news-plugin

dsh-motion-news-plugin

DeepSeek Harness「科技新闻风」口播动效插件 —— 清单驱动 Remotion 动效组件包 + 口播语义自动校准引擎 + 画中画解说员模式。

把一段数字人口播视频（如《DeepSeek Harness 保姆级教程》），一键包装成「科技资讯 / 数据可视化」风格的成片：片头标题揭示、关键词爆发、排名数据卡、安装清单、模式矩阵、卡拉OK字幕、LIVE 徽标、进度条、结尾二维码关注卡——全部动效与口播台词按语义自动对齐，并可在动效组件预览台里拖拽微调后本地渲染。

封面示例

✨ 功能特性

1. 清单驱动动效组件包（10 个标准类型组件 · 16 条时间轴实例）

package/DeepSeekHarness_TechNews_Motion.tsx 是一个自包含的 Remotion 组件包，严格遵循 MOTION_COMPONENTS + MOTION_TIMELINE 清单协议（只导入 react 与 remotion）：

| 组件 ID | 名称 | 动效 |
| TitleReveal | 片头标题揭示 | 故障感滑入 + 模糊聚焦，BREAKING 角标 |
| KeywordBurst | 关键词爆发 | 弹簧弹出 + 扩散光环 ×4 |
| Leaderboard | 排行名次变化 | 排名 30→5 滚动 + 提升徽标 |
| BulletStack | 逐条要点 | 按台词逐条滑入 ×3 |
| Checklist | 检查清单 | 勾选动画逐条弹出 |
| StatGrid | 多指标矩阵 | 2×2 卡片矩阵 ×2 |
| CaptionHighlight | 字幕关键词高亮 | 卡拉OK式逐字高亮 |
| ChapterMarker | 章节进度条 | 顶部进度 + 流光扫过 |
| StatusMonitor | LIVE 状态徽标 | 红点闪烁 + 脉冲光环 |
| EndLockup | 结尾关注卡 | 二维码 + 行动提示 |

所有组件 ID 使用动效组件预览台的标准类型 ID，导入后自动覆盖内置模板，每个时间轴实例都可独立拖动、缩放、改参数。

2. 口播语义自动校准引擎

align-engine/align_semantic.py：一键把整条动效时间轴对齐到视频真实口播。

- 语义级：SenseVoice 离线语音识别（sherpa-onnx，全本地、无需联网）输出词级时间戳，字幕逐句、组件逐条精确匹配到对应台词时刻；容忍「三分钟 / 3分钟」这类 ITN 差异与个别识别误差；
- 停顿级降级：无模型时用能量包络检测语音段 + 动态规划对齐，句子级精度；
- 校准完成后自动重写组件包并同步画中画切换点。

3. 画中画解说员模式

开场 / 结尾人物大画面讲观点，中间展示动效内容时人物自动缩小为左上角小头像（圆角 + 青色发光边框，0.8 秒平滑过渡），动效成为画面主角。

4. 预览台「语义校准」面板

studio-patches/ 提供预览台增强补丁：

- 前端一键按钮「按语义自动校准动效时间轴」+ 校准结果明细表；
- 服务端 /api/align-semantic 接口（调用 Python 引擎、自动激活新版本组件包）。

🖼 效果展示

| 3:4 主图 | 4:3 | 16:9 |
| 3:4 | 4:3 | 16:9 |

示例成片（1080p、原声保留）的效果风格：

- 0–21s：人物大画面 + 片头标题 / 公式 / 关键词卡（讲概念）
- 21–149s：左上角小头像 + 居中数据卡、安装清单、四种模式、Cordis 要点（讲内容）
- 149s–结束：人物大画面 + 结尾二维码关注卡（讲总结与 CTA）

🚀 快速开始

准备

1. 准备一段数字人口播视频（示例场景为 720×960 竖版口播）。
2. 安装「动效组件预览台」（MotionComponentStudio 本地开源版）并 npm install。
3. 准备 Node.js 20+ 与 Python 3.10+。

安装插件

git clone https://github.com/<你的账号>/dsh-motion-news-plugin.git

1. 组件包：在预览台点击「导入 Remotion TSX」选择 package/DeepSeekHarness_TechNews_Motion.tsx；
2. 校准引擎：把 align-engine/align_semantic.py 复制到预览台 scripts/ 目录，并 pip install -r align-engine/requirements.txt；（推荐）按 align-engine/README.md 下载 SenseVoice 模型（约 228MB）到 scripts/models/sensevoice/；
3. 预览台补丁：按 studio-patches/README.md 把三个补丁片段合入预览台源码。

使用流程

1. 打开预览台（http://127.0.0.1:41735），「导入原视频」选择口播视频；
2. 「导入 Remotion TSX」选择本插件组件包；
3. 点击左侧「🎯 语义校准动效」→「按语义自动校准动效时间轴」（约 10 秒，语音识别 + 词级对齐自动完成，画中画切换点同步更新）；
4. 在画布 / 时间轴中按需微调组件位置与时长；
5. 「导出」在本地渲染 MP4（人物大画面 ↔ 小头像布局会自动生效）。

📁 目录结构

dsh-motion-news-plugin/
├── README.md
├── LICENSE
├── package/
│ └── DeepSeekHarness_TechNews_Motion.tsx # 语义校准版动效组件包（自包含） ├── align-engine/ │ ├── align_semantic.py # 口播语义校准引擎 │ ├── requirements.txt │ └── README.md # 模型下载与对齐原理 ├── studio-patches/ │ ├── README.md # 补丁集成说明 │ ├── video-pip-layout.tsx # 画中画视频层布局 │ ├── api-align-semantic.ts # 服务端校准接口 │ ├── align-panel.tsx # 前端校准面板 │ └── align-panel.css └── examples/ ├── concept.png # 3:4 无字概念图 ├── cover-3x4.png # 网感封面 3:4 ├── cover-4x3.png # 网感封面 4:3 └── cover-16x9.png # 网感封面 16:9

🔧 组件包协议要点

- 单文件 TSX，只从 react / remotion 导入；禁止网络请求、动态导入与浏览器/Node 全局对象；
- 导出 FPS、DURATION_IN_FRAMES、MOTION_COMPONENTS、MOTION_TIMELINE 与默认组件；
- 已知类型必须使用预览台标准 ID（如 Checklist、StatGrid、TitleReveal），导入的 AI 版本会覆盖同 ID 内置模板；
- bounds 贴合真实视觉内容；默认 backgroundOpacity = 0（透明无边框），用户调高后才显示卡片底色；动画全部由 Remotion 帧驱动，保证预览与导出一致；
- 列表/清单/矩阵类组件通过 itemStarts（"1.2|3.4|5.6"）声明逐条弹出时间，时间来源于语音转写词级时间戳。

❓ FAQ

Q：换一个视频/文案还能用吗？ 组件包里的字幕时间轴与条目文案与示例文案绑定。换文案时先改 CAPTIONS 常量与各实例 props 文本，再点一次「语义校准」，时间轴会按新口播自动对齐。校准引擎本身与文案无关，任何清单组件包都可复用。

Q：没有下载 SenseVoice 模型会怎样？ 校准自动降级为停顿级（能量对齐），句子级精度，流程不断。

Q：画中画切换点在哪控制？ studio-patches/video-pip-layout.tsx 中 PIP_BIG_UNTIL / PIP_SMALL_UNTIL；执行语义校准后，服务端会自动把它们更新为当前视频 Leaderboard 与 EndLockup 的台词时刻。

Q：为什么预览台 .ps1 启动器双击没反应？ Windows PowerShell 5.1 会把无 BOM 的中文脚本按 GBK 误读导致解析失败，把脚本另存为「UTF-8 with BOM」即可。

📄 许可

MIT。examples/ 内的示例封面与概念图仅作效果演示，请勿商用。