Turn a Chinese voiceover script into an information animation HTML ready for direct screen recording. You are not a PPT template machine, but a presentation director who understands voiceover rhythm, information architecture, visual aesthetics and motion physics at the same time.
Primary goal: while the audience listens to the voiceover, the information on screen is understood at a glance, the hierarchy is clear, the rhythm is in sync, and the visuals are premium. HTML only carries key turns, core frameworks and memory points; it does not put the full text on screen.
First principles:
口播节拍 → 观众注意力落点 → 信息关系变化 → 最终记忆点
Each beat answers four questions: where does the eye look first? What relationship is understood in this second? How does the animation make the relationship change? Can the final freeze frame stand on its own?
Core judgment: information expression > layout > animation > decoration. Design the final frame first, then work backward to the motion; when a static frame already explains the relationship clearly, do not force a reconstruction.
Step Zero: Choose the Run Mode
Lock the mode before starting script review; when the user has already stated it clearly, record it directly and do not ask again.
| Mode | Input | Output and Control | Aspect Ratio |
|---|---|---|---|
standard Pure HTML |
Voiceover script | Click, Space or arrow keys to advance manually, suitable for recording while presenting | 16:9 or 3:4 |
srt Autoplay |
Voiceover script + proofread .srt |
SRT master clock autoplay, automatically arranging titled B-roll screen-recording frames | 16:9 |
Routing rules:
- When the user provides an SRT, or explicitly requests autoplay, strict sync, or a B-roll screen-recording window, choose
srt。 - When the user only provides a voiceover script, or needs 3:4 vertical, choose
standard。 - When the user requests autoplay but there is no SRT, first ask for a proofread SRT; estimating time by word count is forbidden.
- When the user has no preference, default to
standard, do not make SRT a barrier to use. - Both modes share script review, storyboard, the seven styles, layout skeletons, visual gates and motion language; SRT only adds the timeline, autoplay and B-roll rules.
Architecture
共享视觉核心
+ standard：16:9 / 3:4 固定基座 + 手动推进
+ srt：16:9 自动播放基座 + SRT 主时钟 + B-roll
standard: for 16:9 use base-template.html, for 3:4 use base-template-portrait.html。srt: use only base-template-srt.html, then read SRT timeline、SRT assembly increment、SRT Beat increment and SRT acceptance increment。- When generating, only fill the template injection points; do not modify RUNTIME CORE and RUNTIME JS; do not write separate state machines, event listeners or independent timers inside a beat.
Production Workflow
Shared Workflow
P1 审稿 → 确认 → P2 分镜 → 确认 → P3 锁风格与 Beat Contract → 确认
| Stage | Single Entry | Output |
|---|---|---|
| P1 Script Review | script-audit.md | Pass / minor revision / rewrite, stop and wait for confirmation |
| P2 Storyboard | storyboard.md; for primitives check information-primitives.md | Aspect ratio, mode and storyboard table, stop and wait for confirmation |
| P3 Style Lock | Selected styles/{id}.md + hybrid-quality-gate.md + beat-contract.md |
Full-film style and beat contract, stop and wait for confirmation |
Standard Wrap-up
P4 按 html-production.md 装配 → P5 按 quality-check.md 验收 → 交付
3:4 must additionally read portrait-adaptation.md, and from layout-skeletons-portrait.md select the V skeleton; for 16:9, from layout-skeletons.md select the L skeleton.
SRT finishing
P3.5 锁 SRT 覆盖与 B-roll → 确认 → P4 装配自动播放 HTML → P5 视觉与同步验收 → 交付
First run node scripts/parse-srt.mjs input.srt. SRT is the only master clock, but it is not the subtitle layer; the final HTML does not display sentence-by-sentence subtitles, does not generate voiceover, and does not embed audio/voice.
Seven key styles
| Style | Best suited for | Visual temperament |
|---|---|---|
| apple-tech-gradient | AI tools, product concepts, abstract mechanisms | Concepts lifted by a light field in black space |
| finance-studio-cards | Finance, business models, metric relationships | Studio information screen, key numbers and transmission paths |
| editorial-magazine | In-depth viewpoints, cultural and business insights | A Chinese magazine spread being rearranged |
| newspaper-evidence | News, history, cases, chains of evidence | An organized investigative archive |
| paper-craft-studio | Courses, educational explanations, approachable brands | Concepts laid out layer by layer on a warm paper workbench |
| paper-collage | Xiaohongshu, reviews, experience checklists | Trendy retro sticker journal spread |
| sketch-note | Popular science, teaching, beginner-oriented explanations | Knowledge manuscript in black lines on white paper |
Selection rule: content fit takes priority; use only one main style for the whole film. When none is specified, provide a concise selection table based on fit, recommend only one, and stop for confirmation.apple-light-blue-glass、ink-framework、manifesto-poster is a compatible asset and does not enter the default recommendation loop.
Inviolable overall rules
- Single visual center: each beat has only one first-glance landing point and one core information relationship.
- Spacious but not empty: at most two large information zones; determine primary, secondary, and negative space first, then write CSS; no central stacking, random scatter, or full-screen large cards.
- Provable information distribution: the 16:9 main subject must not remain squeezed into the central 40% for long; for regular 3:4 pages, the final-state vertical effective span must reach 62% or more of the stage height.
- Text shorter than voiceover: Chinese titles break lines by semantic phrase; no single-character orphan lines, squeezing, overflow, or masking layout problems by shrinking font size.
- final-state-first: the CSS static state is the final frame; the timeline uses only
gsap.from/fromTo+clearProps, and after it ends it is completely static and screenshot-ready. - Four-stage shot: the core beat can explain
glance → reconstruct → push → lock. Claim pages may omit reconstruct, but must retain a clear landing point and memory freeze. - Item-by-item reveal: checklists spoken one by one in the voiceover are revealed by step; multiple items must not stagger in simultaneously.
- Motion budget: each beat has at most 1 structural motion, 2 auxiliary appearance groups, and 1 lock-in emphasis; the total animation duration must be shorter than that segment's voiceover.
- Numbered layering: chapter decorative numbers, process numbers, and page numbers use different roles and must not press on lines, press on text, or impersonate each other.
- Elements do not overlap: any real overlap, cropping, out-of-bounds, or guide line crossing content is judged a failure; fix the structure first, then re-screenshot.
- Style must be explicit: each beat uses at least one signature component or composition of the chosen style, and core beats use at least two.
- Token discipline: beat CSS only consumes style variables and signature classes, and does not hard-code colors or fonts.
- 3:4 is not scaling: Convert left-right layout to top-bottom, horizontal path to vertical, 3×2 to 2×3, using only the V skeleton.
- SRT time complete: All time intervals belong to
motionorbroll; adjacent intervals do not overlap, uncovered gaps do not exceed 500ms; step uses real semantic trigger cues. - B-roll is formal footage: Only display
B-ROLL, sequence number, and a specific 4-18 character title; do not use blank pages or production notes such as "put material here". - Real browser acceptance: At minimum check the first screen, the densest beat, the multi-step final frame, B-roll (if any), and the closing page; if screenshot fails, do not deliver.
Validation command
Standard：
node <SKILL_ROOT>/scripts/validate-motion-html.mjs output.html
node <SKILL_ROOT>/scripts/check-layout-browser.mjs output.html
SRT：
node <SKILL_ROOT>/scripts/validate-motion-html-srt.mjs output.html
node <SKILL_ROOT>/scripts/check-layout-browser-srt.mjs output.html
When Playwright is unavailable, switch to Agent browser or manual screenshots; do not block delivery for installing dependencies.
Resource guide
jacky-motion2-0/
├── SKILL.md
├── assets/
│ ├── base-template.html
│ ├── base-template-portrait.html
│ ├── base-template-srt.html
│ └── styles/{id}.css
├── styles/{id}.md
├── references/
│ ├── script-audit.md / storyboard.md / beat-contract.md
│ ├── layout-skeletons.md / layout-skeletons-portrait.md
│ ├── portrait-adaptation.md / motion-language.md
│ ├── html-production.md / quality-check.md
│ └── srt-autoplay.md / srt-production.md / srt-beat-contract.md / srt-quality-check.md
└── scripts/
├── parse-srt.mjs
├── validate-motion-html.mjs / check-layout-browser.mjs
└── validate-motion-html-srt.mjs / check-layout-browser-srt.mjs
Long content handling
| Length | Handling |
|---|---|
| 1-3 minutes | Single storyboard, 5-8 beats |
| 3-8 minutes | Compress the main track, 9-14 beats; leave details to voiceover or B-roll |
| Over 8 minutes | Split into multiple episodes or multiple files; a single file only does the overview main track |