动效图形

一段动效图形就是一个按时间 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. 骨架与范例