君启文案生成HTML动画

解决什么问题

把中文口播稿直接截图或贴进剪辑软件，得到的往往是一屏静止文字。这个技能关注更实际的目标：让画面随讲解节奏动起来，还能保证后期录屏或直播时分辨率稳定在 1080×1920 竖屏。

核心能力

输入是一段口播稿或脚本，输出是单文件 HTML 动画。GSAP 通过 CDN 加载，不依赖本地构建，浏览器打开即可播放与录屏。

• 固定 1080×1920 画布，并定义安全区：左 120、右 120、上 231、下 260。
• 4 种风格共享同一套 JS 引擎，包括调度器、17 个动画基元、缩放与导航，只在 CSS 令牌与组件层面分化。
• 包含 TextPlugin 与 CustomEase，支持打字机效果和自定义缓动。

工作流程

流程共 6 个阶段，其中 3 个需要确认：

1. 审稿：按 6 条标准判断内容是否需要轻改或重写。
2. 分镜：按自然段落拆节拍，每个节拍只承载一句核心信息，必须绑定一个视觉动词。
3. 锁风格 + 构图：选定财经演播室、科技极简、报纸档案或杂志编辑中的一种，全片不得混搭。
4. 生成 HTML：从 assets/templates/ 复制模板，只使用 Edit 修改，不写裸 CSS，全部视觉元素走 CSS 令牌。
5. 验收：检查 JS 报错、画布比例、文案覆盖率、字号下限，以及“每个节拍只有 1 个 .layer-pop”的视觉霸权规则。
6. 配音：用户自行录音或选择 TTS 合成后注入 HTML。

每个节拍默认采用 4 段式编排：主视觉入场 → 画面重构 → 关键词强调 → 标注落位，总时长控制在 2-4 秒。

适用边界

适合结构化口播、数据解读、概念拆解等需要逐页推进的内容。不适合实时互动界面或非线性工具。

需要注意：风格一旦锁定就不能混搭；屏幕文字必须短于口播；禁止紫粉渐变、彩色左边框、Emoji 图标和双胞胎卡片；高密度文案必须拆节拍，不能压缩字号；条状图必须使用 data-w + width，不能依赖 --w + scaleX。