# Motion Graphics

给音频视频定制内容背景与标题，或要在视频上加一段动效图形时用：下横栏（姓名职务）、关键词字幕、大数字与图表、标注与引导、品牌贴片与片尾、倒计时与进度。不选模板，按规则写一个自包...

- Repository: https://github.com/JimLiu/baocut (1645 stars)
- Category: Engineering
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add JimLiu/baocut --skill motion-graphics -g -a claude-code -y`
Codex: `npx skills add JimLiu/baocut --skill motion-graphics -g -a codex -y`
Cursor: `npx skills add JimLiu/baocut --skill motion-graphics -g -a cursor -y`
Gemini CLI: `npx skills add JimLiu/baocut --skill motion-graphics -g -a gemini-cli -y`

## Description

给音频视频定制内容背景与标题，或要在视频上加一段动效图形时用：下横栏（姓名职务）、关键词字幕、大数字与图表、标注与引导、品牌贴片与片尾、倒计时与进度。不选模板，按规则写一个自包含的 HTML 画面（时间的纯函数），打包成代码包导入后放上时间线。只加静态文字、贴纸或已有的文字动画预设时不用；声波一律用内置的声波元素，不用本 skill 画；整条成片的规划看「从简报到成片」。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 动效图形

一段动效图形就是**一个按时间 seek 的纯函数画面**：给它第 t 秒，它画出第 t 秒该有的样子。不从模板库里挑，而是按本 skill 的规则把骨架的三个槽填上：结构（有哪些元素）、布局（放在哪）、动效（每个元素怎么进、停、出）。同一份槽换一行布局就是竖版，换三个颜色 token 就是另一套皮肤。顺序：

1. 定类别、时长、画幅与合成方式（第 1 节）。
2. 读骨架与一个最接近的范例（第 2 节）。
3. 按语法填三个槽：结构 → 布局 → 动效，再套时间包络与颜色（第 3 节）。
4. 自检：lint、抽帧、换长文案（第 4 节）。
5. 打包导入，放上时间线，对齐旁白（第 5 节）。
6. 验收（第 6 节）。

**声波不归本 skill**：跟着声音起伏的声波（音量条、频谱、示波、环形）一律用内置的声波元素（用 `skills_read` 读 `baocut-catalog-editing` 的「声波与进度条」），不按本 skill 写 HTML，用户要特殊造型也一样：挑最接近的内置款改色、挪位置。

### 内容背景

给播客、访谈、口述录音等音频配画面时，用 HTML 按内容定制背景与标题，并和内置声波、字幕、配图与章节小标题排成同一张版面；源是历史演讲、讲座这类说话的影像时，影像放进版面的一格。动手前用 `skills_read` 读本 skill 的 `references/audio-backdrop.md`：先从博客正文、转写或简报写三行方案（主题与语气、画面的隐喻与视觉重心、取自本期的母题），再定色、字与格子。里面有格子换算成字幕、文字、声波、配图与影像窗坐标的公式，随内容换的配图、章节与计时，HTML 截成背景图的步骤，以及千篇一律的信号；示例只是一种做法，版式按内容重想。用户要求简洁或内容适合时，纯色也可以。

- **静态版式**（长录音的默认）：按骨架写，compositions_preview 取一帧 PNG，作为图片铺到片尾；保留 HTML 源码供修改，不为一张静态背景烘焙整段长录音。
- **需要动画**：只在录音短或用户要求时做，整段一个慢而连续的合成，不把短循环重复摆放（每段结尾都会淡出）。
- 背景放在最下面的独立画面轨，只画不变的框架；声音、声波、字幕、配图、章节小标题与计时保持独立图层，不画进 HTML。

## 1. 定类别与时长

四类图形与它们的节奏；时长是目标，由旁白节点与可读性决定：

| 类别 | 用途 | 时长 | 要点 |
| --- | --- | --- | --- |
| 下横栏 | 姓名职务、来源、地点 | 3, 4 s | 说话人开口后 0.5 s 内出现；左下或右下安全区 |
| 关键词 | 强调一句话里的一个词、一句口号 | 1.5, 3 s | 跟旁白里那个词同时弹出；停留够读两遍 |
| 数据 | 一个数字、一条趋势、几项对比 | 3, 5 s | 数字 count-up 1, 1.6 s，结论句在数字之后 |
| 品牌贴片 | 标志进场、片尾、合作标识 | 2, 3 s | 标志最后一个到位（lock），其余元素先就位 |

- **可读停留**：任何带文字的元素，入场结束到出场开始至少 1.2 s；一句话以上的文案 ≥ 2 s。
- **合成方式**：叠在视频上的图形用透明根（`alpha: true`），只画元素不画底；全画幅（片头、片尾、纯图形镜头）才给根上底色（`alpha: false`）。
- **画幅**：按视频的画幅写，16:9 用 1920×1080，9:16 用 1080×1920，1:1 用 1080×1080；帧率与视频一致（通常 30）。
- 画面里的事实（数字、姓名、引语）只用用户给的，不编；不用未经授权的商标与形象。

## 2. 骨架与范例

The rest: https://github.com/JimLiu/baocut/blob/HEAD/skills/baocut/built-in-skills/motion-graphics/SKILL.md