Turn a voiceover script into a screen-recordable 16:9 information animation HTML. Information expression drives everything—layout serves the information hierarchy, animation serves the information rhythm.
Pipeline (6 stages, 3 confirmation gates)
口播稿 → [审稿] →⏸→ [分镜] →⏸→ [锁风格] →⏸→ [生成HTML] → [验收] → [配音录制] → 交付
Phase 1: Script Review
Check against the 6 criteria of script-audit.md → Output: Pass / Minor Revision / Rewrite. Stop, wait for user confirmation.
Phase 2: Storyboard
Split beats by natural paragraphs of the voiceover; the number is determined by the content, with no upper limit. Fill in a table for each beat:
节拍 | 口播摘要 | 核心信息(1句) | 信息结构 | 视觉动词 | 屏幕文字
Stop, wait for user confirmation. Hard constraints: each beat must have a visual verb; the core message can only be one sentence; on-screen text must be shorter than the voiceover.
Phase 3: Lock Style + Composition
Recommend a style → read styles/{ID}.md → describe a composition plan for each beat. Output:
风格：[ID]
Beat 1 → 构图：[描述] → 核心元素：[列表] → 4段编排简述
Beat 2 → ...
Stop, wait for user confirmation. A single style for the whole video; no mixing.
Phase 4: Generate HTML
- Read the style template assets/templates/{ID}.html to get CSS variables and component classes
- Write an independent CSS class for each beat (e.g. b1-left, b2-grid) and an independent GSAP animation
- Design the shot choreography for each beat using the 4-segment structure
- Output a single-file .html
- Reserve audio hooks in the HTML:
advance()andshowBeat()function structures support later injection ofplayStepAudio(), with no need to rewrite the navigation logic
Phase 5: Acceptance
Check against quality-check.md → auto-fix if it fails.
Phase 6: Voiceover Recording
After acceptance passes, ask the user to choose a voiceover method:
- Option A: Record your own voiceover → The user records the HTML full-screen with OBS/QuickTime and does their own voiceover; the process ends.
- Option B: TTS voiceover → Enter the TTS synthesis process (see below), output an auto-playing HTML with audio, and the user just records the screen.
TTS Synthesis Process (Phase 6B)
Lightweight TTS pipeline, no npm, single-file HTML + external mp3 folder.
Pre-check
Check whether the mmx CLI is available:
mmx auth status
If not installed, prompt the user to choose one of three options:
- Install MiniMax CLI:
npm install -g mmx-cli && mmx auth login --api-key <KEY>(recommended, good Chinese results) - Switch to another TTS (OpenAI TTS / Edge TTS, etc.)—the AI modifies the synthesis script to adapt
- Skip TTS and fall back to Option A for recording your own voiceover
Step 1: Extract Voiceover Text
Extract the voiceover text for each step from the storyboard table, and generate audio-segments.json：
[
{"beat": 1, "step": 0, "text": "口播文本…", "file": "audio/b1-s0.mp3"},
{"beat": 1, "step": 1, "text": "口播文本…", "file": "audio/b1-s1.mp3"},
{"beat": 2, "step": 0, "text": "口播文本…", "file": "audio/b2-s0.mp3"}
]
Rules:
- Multi-step beats (data-steps) are split into multiple entries, one audio segment per step
- Empty text is skipped; no audio is generated
- Files are placed in the
audio/folder in the same directory as the HTML
Step 2: Synthesize Audio
Call TTS one by one,execute seriallyto avoid rate limiting:
mkdir -p audio
for each segment in audio-segments.json:
mmx speech synthesize --text "$text" --out "$file"
Existing mp3 files are automatically skipped (safe re-run). Add --force to force re-synthesis.
Step 3: Inject Audio into HTML
Make two modifications in the already-generated HTML:
1) Annotate each step with an audio path:
On each .beat add the data-audio-map attribute, with a JSON value:
<section class="beat" data-steps="2" data-audio-map='["audio/b4-s0.mp3","audio/b4-s1.mp3"]'>
Single-step beat (no data-steps):
<section class="beat" data-audio-map='["audio/b1-s0.mp3"]'>
2) Add a playback mode toggle + audio controller script:
// 三种模式：manual / audio / auto
// manual: 原始手动翻页，无音频
// audio: 播放音频，但手动翻页
// auto: 播放音频 + 音频结束自动翻页
//
// 切换方式：按 M 键循环，或 URL 参数 ?auto=1 / ?audio=1
// 浏览器自动播放限制：auto 模式首次需要用户点击一次启动
Audio controller core logic:
let mode = 'manual'; // manual | audio | auto
let audioEl = null;
function playStepAudio(beat, step) {
if (mode === 'manual') return;
const map = JSON.parse(beat.dataset.audioMap || '[]');
const src = map[step];
if (!src) return;
if (audioEl) { audioEl.pause(); audioEl = null; }
audioEl = new Audio(src);
audioEl.play().catch(() => {});
if (mode === 'auto') {
audioEl.onended = () => setTimeout(advance, 200);
}
}
advance()then callplayStepAudio(currentBeat, currentStep)- If audio is playing during manual paging, stop it immediately
- 200ms tail buffer to avoid abrupt transitions
Step 4: Recording
- Open the HTML in a browser (Chrome fullscreen recommended)
- Add
?auto=1to enable autoplay mode - Start screen recording (QuickTime / OBS / Cmd+Shift+5)
- Click once to start, the whole video plays automatically to the end
- Stop recording, just trim the head and tail
TTS alternatives
If not using MiniMax, just replace the synthesis command; the interface convention:
- Input: text (≤5000 characters) + output file path
- Output: mp3 file
- Example (OpenAI TTS):
curl -s https://api.openai.com/v1/audio/speech \
-H "Authorization: Bearer $OPENAI_API_KEY" \
-H "Content-Type: application/json" \
-d '{"model":"tts-1","input":"文本","voice":"alloy"}' \
--output "$file"
Visual verbs × information structure
| Visual verb | Meaning | Information structure fit |
|---|---|---|
| Highlight | Look here | Evidence, quotes, comparison |
| Connect | There is a connection | Relationships, hierarchy, process |
| Growth | Quantity increases | Data, comparison |
| Contrast | A and B differ | Comparison, data |
| Push in | Details matter | Evidence, concepts, quotes |
| Expand | There is logic behind it | Concepts, hierarchy, process, conclusion |
| Flow | Transmitted within a system | Process, relationships, timeline |
| Stack | Accumulation of evidence/hierarchy | Evidence, timeline |
| Count | Numbers matter | Data |
| Gray-out focus | Ignore the rest for now | Concepts, relationships, comparison, conclusion |
4-stage shot composition
The animation of each beat is divided into 4 stages; after clicking it completes automatically, then stops at the hero frame:
- Main visual entrance — establish the main subject of the frame
- Frame reconstruction — layout change or new elements added
- Keyword emphasis — key information visually highlighted
- Annotation placement — supporting information in place, frame freezes
This is the composition approach; the AI implements it freely with a GSAP timeline. Total duration 2-4 seconds, with breathing room left for each stage.
4 styles
| Style | Applicable | Temperament |
|---|---|---|
| newspaper-evidence | News, history, policy, social issues | Evidence, archives, documentary |
| apple-tech-gradient | AI tools, product concepts, abstract mechanisms | Restrained keynote, concept expansion |
| finance-studio-cards | Finance, business, company analysis | Studio Information Big Screen |
| editorial-magazine | Deep knowledge, culture, and business insights | Advanced editorial layout |
Generation Rules
- Default aspect ratio is 16:9 (1920×1080), optional 4:3 (1440×1080). Manual page turning (click / Space / ←→). Ratio confirmed during Phase 3 style lock
- Single-file HTML, GSAP 3 via CDN, no npm
- Read the style template to get CSS variables and component classes, use this as the visual foundation
- Write independent CSS classes (such as b1-left, b2-grid) and independent GSAP animations for each beat
- The total duration of the 4-stage choreography for each beat is 2-4 seconds, each stage has a sense of breathing
- Each beat must fill the screen—minimum font size (16:9): title ≥ 96px, body ≥ 25px, labels/auxiliary ≥ 18px; for 4:3: title ≥ 72px, body ≥ 22px, labels ≥ 16px
- .beat uses
position:absolute;inset:0to fill the canvas, no padding added; only inner containers have padding. Inner containers of the beat addoverflow:hidden, child elements are forbidden to exceed the stage boundary - The number of beats is determined by the content, prefer more rather than losing information
- Screenshots/illustrations must be displayed as visible main visuals,must notbe used as dim background images (background-image with opacity<0.5)
- CSS implementation of screenshots/illustrations—distinguish two types of images:
- Information screenshots(UI interfaces, code screenshots, tables, conversation screenshots, etc. that need to be fully read):Forbidden
object-fit:cover. Container usesdisplay:flex;align-items:center;justify-content:center+ padding centered, img usesmax-width:100%;max-height:100%;display:blocknatural scaling, withborder-radius + box-shadowfor card wrapping. Containerno background-color set, avoid gray background frame - Decorative illustrations(atmosphere images, textures, character close-ups, etc. that do not need to be fully read): can use
.crop-frame+object-fit:cover
- Information screenshots(UI interfaces, code screenshots, tables, conversation screenshots, etc. that need to be fully read):Forbidden
- Information element layout must be aligned and structured (grid/rows and columns),must notbe randomly scattered (such as absolute positioning to random percentage coordinates)
- Progressive reveal and multi-step animation: beats with clear progression in the spoken content, use
data-steps="N"markers, click to advance steps in sequence, only after all steps are completed enter the next beat. Multiple items such as lists/labels/key points must appear item by item (1 item = 1 step), must not stagger all at once - Elements in the same area must not overlap or obscure each other—big numbers, titles, description text, etc. must be arranged in layers, text overlap caused by absolute positioning is not allowed
- Segmented navigation bar: must be placed inside
#stage, useposition:absolute;bottom:28px;left:50%;transform:translateX(-50%)，Forbiddenposition:fixed. Display past / active / future states, support click to jump to any beat - body background color must be the same as
#stagemain background color. body usesdisplay:grid;place-items:center;min-height:100vhto center the stage. stage uses fixed pixel size (16:9 is 1920×1080, 4:3 is 1440×1080) + JStransform:scale(Math.min(innerWidth/W, innerHeight/H))scaling +transform-origin:center center - 4:3 layout adaptation: stage width 1440px, information source beat's left image right text changed to top image bottom text or 6:4 ratio (image takes 40%), single-line text max-width does not exceed 1200px
- Visual focus: each beat must have one dominant element, all elements evenly tiled in size is forbidden. Specific requirements:
- Image-text beat: Screenshots and text must have a clear primary-secondary relationship. When a screenshot is the main visual, it must be ≥ 40% of the frame area with clear edges; when text is the main visual, the title font size must be ≥ 3 times the body text. The two cannot both be medium-sized
- Text-only beat: Use an oversized title or number (16:9 ≥ 120px / 4:3 ≥ 88px) as the visual anchor, with supporting text noticeably smaller to create hierarchy
- Check: Title-to-body font size difference < 2 times → insufficient hierarchy; screenshot becomes illegible when shrunk to half → screenshot is too small
Animation decision tree
Derive animation from the spoken content; do not add decoration out of thin air:
口播内容 → 提取内容动作（对比？递增？展开？）→ 匹配视觉动词 → 选择信息结构
If the content has no clear action, fall back to the most basic: centered concept → supporting information fades in. Never add motion that does not exist in the content.
Anti-AI visual fingerprints
The following are common low-quality visual patterns in AI-generated content,must be avoided：
| Forbidden pattern | Alternative |
|---|---|
| Purple-pink gradient background | Use the background color system of the corresponding style |
| Cards with colored left borders | Use the card components defined by the corresponding style template |
| Emoji as icons | Plain text labels or minimalist linear icons |
| Same animation for all beats | Each beat choreographed independently |
| Centered large title + 3-column cards | Information structure drives layout (left-right for comparison, top-bottom for hierarchy, center-outward expansion for unfolding) |
| Dark card panel filling the screen | Sense of spatial depth, concepts unfold in space |
| Rainbow of multiple accent colors | Use the accent color of the corresponding style, used sparingly |
Forbidden
- Fabricating data, sources, citations
- On-screen text = full spoken script (on-screen text must be shorter than the spoken script)
- Mixing styles
- Decorative animation (motion that does not aid understanding)
- Using the same animation for all beats
- Everything appearing on the page at once (each beat must have at least 2 animation stages)
- All content within a beat playing automatically without pauses—beats with content progression should be split into multiple steps
- Purple-pink gradients, colored left borders, Emoji icons—see "Anti-AI visual fingerprints"
- Multiple items staggering in all at once—must reveal progressively item by item
- Tiled layout with all elements the same size—each beat must have a clear large > medium > small visual hierarchy, with at least one dominant element significantly larger than the rest
Handling long content
| Length | Handling |
|---|---|
| 1-3 minutes | Single storyboard, one HTML |
| 3-8 minutes | Split into chapters, do chapter 1 first to confirm the visual anchor |
| Over 8 minutes | Split into multiple episodes or multiple files |