| name | linyuebanzi-teaching-animation |
| description | 把单个学科概念(中文/英文都行,如"声现象""杠杆原理""光合作用")自动做成动态教学内容。两种产出都由 HyperFrames 渲染、共用同一个 index.html(mode 变量切换):① 配音教学视频 — 分镜 + Minimax TTS 中文配音 + 字幕 + 完整 MP4(1080p, ~90s, 发视频号/给孩子看);② 无声循环动图 — 同一内容的紧凑无声版 MP4(1080p, ~32s, 循环, 公众号正文内嵌自动播放)。共用一份 7 段分镜和同一套主题配色(声/光/力/电/热/生物/数学各有色系),视频和动图风格完全统一。当用户提"教学视频""配音视频""教学动图""无声动图""循环视频""公众号内嵌动图""concept → animation"或给一个学科概念要做成动态内容时,使用本 skill。 |
Teaching Animation (配音教学视频 + 无声循环动图)
概述
输入一个概念 (例 "声现象") → 两种动态产出,都是 HyperFrames 渲染的 MP4,共用同一个 index.html:
| 产出 | 规格 | 用途 |
|---|
| 配音视频 | 1080p、~90s、中文旁白 + 字幕 | 完整讲解,发视频号 / 给孩子看 |
| 无声动图 | 1080p、~32s、无声、循环 | 公众号正文内嵌自动播放 |
关键: 两种产出共用同一个 index.html,靠 HyperFrames 变量 mode(video/silent)切换——
搭一次内容,两种都能出。silent 模式紧凑时间轴、无字幕、不淡出(循环无缝),质感和动效
与视频版完全一致。
共用: 7 段结构 (1 标题 + 5 子概念 + 1 总结)、同一套主题配色
(references/color-palettes.md)、同一份分镜脚本 (references/storyboard-guide.md)。
触发路由
| 用户说 | 做什么 |
|---|
| "教学视频" / "配音" / "讲解版" | 搭 index.html → build_video.sh |
| "教学动图" / "无声" / "循环" / "公众号内嵌" | 搭 index.html → build_silent.sh |
| "视频和动图都要" | 搭一次 index.html,两个脚本都跑 |
不确定时, 先问清楚概念 + 适用学段 (默认初二物理), 其他别问。
统一流程 (两种产出共用前 4 步)
export MINIMAX_API_KEY=...
python3 scripts/minimax_tts.py storyboard.json --outdir audio/
python3 scripts/scaffold_video.py <project_dir>
bash scripts/build_video.sh <project_dir>
bash scripts/build_silent.sh <project_dir>
build_video.sh: lint + WCAG 对比度审计 + render(video 模式) + 场景中点蒙太奇。
build_silent.sh: 临时改 data-duration + render(silent 模式,紧凑 32s 无声) + 蒙太奇。
两个脚本读同一个 index.html,只是渲染的 mode 变量不同。
换音色/改旁白后重跑 TTS,用 python3 scripts/sync_timeline.py <project_dir> 同步
时间轴 (不要手抄数字),再重新渲染。
场景内容标准: section-chip + SVG 示意图 (≥3 图形元素) + info-card + callout。
视频尺寸规范、SVG 画法、动效编排、silent 机制、实测 lint 坑都在 references/video-authoring.md。
环境: Node.js ≥22 + ffmpeg (npx hyperframes doctor 自检); Minimax TTS 走 HTTP API,
无额外 Python 依赖。
silent(无声)模式怎么工作
index.html 的 <html> 声明 mode 变量。渲染时 --variables '{"mode":"silent"}' 切到无声版:
- 时间轴: 每段等长紧凑 (
SILENT_SEG=4.6s, 共 ~32s), 不依赖音频长度
- 无字幕:
MODE !== "silent" 才生成字幕
- 不淡出: 最后一段不淡出到底, 循环首尾无缝
- 质感动效全保留: 渐变/颗粒/波形流动都在 (MP4 有帧间压缩, 不像 GIF 怕连续色调和运动)
为什么不出 GIF? GIF 无帧间压缩, 完整 7 段想要 720p 高清必然 >2MB (实测), 只能降到
480p 且小字发糊。公众号早已支持内嵌 MP4 自动播放, 无声 MP4 = 1080p 完整 + 8~10MB,
比任何 GIF 都清晰。所以动图产出用无声 MP4, 不用 GIF。
输出文件规范
<topic>/
├── storyboard.json # 分镜 (第 0 步)
├── audio/
│ ├── seg-01..07.mp3 # TTS 分段配音
│ └── durations.json # 时间轴来源
├── index.html # HyperFrames 组合 (video/silent 双模式)
├── renders/
│ ├── <topic>.mp4 # 配音视频 (~90s)
│ └── <topic>-silent.mp4 # 无声循环动图 (~32s)
└── preview/
├── montage.png # 配音视频蒙太奇
└── montage-silent.png # 无声动图蒙太奇
资源
assets/video-template/index.html — HyperFrames 模板 (组件 + video/silent 双模式 + 转场/字幕/波形引擎)examples/sound-video/ — 声现象完整示例 (storyboard → 音频 → index.html → 配音视频 + 无声动图)scripts/minimax_tts.py — Minimax 分段配音 + 时间轴scripts/scaffold_video.py — 骨架生成 (第 2 步, 含 silent 机制)scripts/sync_timeline.py — 重配音后同步时间轴scripts/build_video.sh — 配音视频渲染 (lint + validate + render + 蒙太奇)scripts/build_silent.sh — 无声循环动图渲染 (silent 模式)references/storyboard-guide.md — 分镜拆解 + 旁白规范 (第 0 步必读)references/video-authoring.md — 场景编写硬规则 + silent 机制 + 实测坑 (必读)references/svg-parts.md — SVG 符号库 (电学/波形/图线/力学/光学, 画示意图先来这拷)references/color-palettes.md — 7 套主题调色板 (60-30-10 + 莫兰迪, 含 CSS 变量)
