--- name: ai-short-video-factory display_name: "AI 短视频工厂" version: "1.2.0" category: "video" platforms: ["macOS", "Linux"] tags: ["AI短视频工厂", "视频制作", "HTML视频", "GSAP动画", "短视频", "AI视频", "HyperFrames", "数据可视化", "产品发布", "科技资讯"] author: "raelzhang" agent_created: true description: "AI Short Video Factory creates MP4 videos from HTML using HyperFrames. Use for captioned talking-head edits, product launches, data visualizations, code walkthroughs, social clips, GSAP animations, transitions, audio muxing, and deterministic rendering." description_zh: "AI 短视频工厂是一个基于 HyperFrames 的 AI 视频生成 Skill，可将文字创意、结构化脚本或内容大纲自动转化为 HTML + CSS + GSAP 动画视频，并渲染为 MP4。支持产品发布、科技资讯、数据可视化、代码讲解、口播字幕等多种视频类型。AI 全流程自动化：项目初始化 → HTML 编写 → 动画编排 → 渲染交付。内置布局自检、中文适配、音频合成等完整管线。" --- # AI 短视频工厂｜HTML-to-Video Studio ## 概述 AI 短视频工厂是一个基于 HyperFrames 的 AI 视频生成 Skill，可将文字创意、结构化脚本或内容大纲自动转化为 HTML + CSS + GSAP 动画视频，并通过 Headless Chrome + FFmpeg 确定性渲染为 MP4。无需 React，无按次收费，专为 AI Agent 设计。 **核心能力：** - 🎬 从文字描述一键生成完整视频（15s ~ 3min） - 🎨 完全自定义：布局、配色、动画、字体均由 HTML/CSS 控制 - 🔄 AI 全流程自动化：初始化 → 编写 → 动画 → 渲染 → 交付 - 🎵 支持字幕同步、原片音频保留、按需 BGM 合成与音量调校 - ✅ 自检管线确保视觉完整性和技术正确性 ## 快速开始 **一句话生成视频：** > "帮我做一个 30 秒的科技资讯短视频，主题是 AI 编程工具的发展趋势" AI 会自动完成全流程： 1. 初始化项目 → `npx hyperframes init` 2. 编写 HTML 视频内容（场景规划 + 动画编排） 3. 渲染为 MP4 → `npx hyperframes render` 4. 按需处理音频 → 保留原片音频，或在用户要求时 FFmpeg 后置混音 5. 执行自检管线 → 确保质量达标后交付 **最小示例：** ```bash # 创建项目 npx hyperframes init my-video --non-interactive # 编辑 index.html（AI 自动生成内容） # 渲染 npx hyperframes render --non-interactive ``` ## 适用场景 | 视频类型 | 典型时长 | 示例 | |----------|---------|------| | 科技资讯 / 行业速报 | 30-60s | AI 编程工具趋势、技术周报 | | 产品发布 / 功能介绍 | 15-45s | 新功能 demo、产品亮点 | | 数据可视化 | 20-40s | 市场规模、增长趋势、对比分析 | | 教程 / 代码讲解 | 30-120s | 技术方案讲解、代码 walkthrough | | 社交媒体短视频 | 15-30s | 抖音/小红书风格竖版视频 | | 口播 + 字幕 | 任意 | 带背景去除、字幕同步的 talking-head | | 品牌宣传 / 活动预热 | 15-45s | 会议宣传、品牌介绍 | --- ## Overview (English) HyperFrames is an open-source (Apache 2.0) HTML-native video rendering framework by HeyGen. Write video as HTML + CSS + seekable animations, then render deterministically to MP4 via headless Chrome + FFmpeg. No React required, no per-render fees, designed for AI agents. ## Prerequisites Check & Installation Before any operation, run the environment diagnostic: ```bash npx hyperframes doctor ``` This reports all dependencies and their status. **If any check fails, STOP and resolve before proceeding.** ### Required Tools (ALL mandatory) | Tool | Minimum version | Purpose | Install command | |------|----------------|---------|----------------| | **Node.js** | 22+ | HyperFrames CLI runtime | WorkBuddy 自动管理；或 `nvm install 22` / 官网安装 | | **FFmpeg** | 5.0+ | Video encoding, audio muxing, frame extraction | macOS: `brew install ffmpeg`; Linux: `apt install ffmpeg` | | **FFprobe** | (bundled with FFmpeg) | Media inspection, duration/format checks | Installed with FFmpeg | | **Chrome Headless Shell** | Auto-managed | Frame-by-frame rendering engine | `npx hyperframes browser ensure` (auto-downloads) | | **HyperFrames CLI** | 0.6.90+ | Composition management & rendering | `npx hyperframes@latest` (auto via npx) | ### Optional Tools (for advanced workflows) | Tool | Purpose | Install command | |------|---------|----------------| | **Docker** | Containerized rendering (CI/CD, remote) | `brew install --cask docker` / Docker Desktop | | **Python 3.9+** | Optional audio analysis / BGM synthesis helpers | WorkBuddy 自动管理；或系统 Python 3.9+ | ### First-Time Setup Sequence For a brand new environment, execute these steps in order: ```bash # 1. Verify Node.js (should be pre-installed by WorkBuddy) node --version # must be >= 22.0.0 # 2. Install FFmpeg if missing which ffmpeg || brew install ffmpeg ffmpeg -version # confirm installation # 3. Download Chrome Headless Shell (auto-cached at ~/.cache/hyperframes/chrome/) npx hyperframes browser ensure # 4. Run full diagnostic — all checks must pass npx hyperframes doctor ``` ### Troubleshooting Common Setup Issues | Symptom | Cause | Fix | |---------|-------|-----| | `doctor` shows ✗ FFmpeg | FFmpeg not installed | `brew install ffmpeg` | | `doctor` shows ✗ Chrome | First run, no cached browser | `npx hyperframes browser ensure` | | Render hangs indefinitely | Chrome sandbox conflict in WorkBuddy | Use `dangerouslyDisableSandbox: true` on Bash tool | | `EACCES` permission error | npx cache permission issue | `sudo chown -R $(whoami) ~/.npm` | | Render produces 0-byte MP4 | FFmpeg encoder issue | Check `ffmpeg -encoders` has `libx264` and `aac` | | `npx hyperframes` not found | Node/npx not in PATH | 确保 Node.js 22+ 在 PATH 中；WorkBuddy 环境下使用托管 Node | ### Pre-Flight Check (AI Must Execute Before Every Project) ```bash # Quick 3-command pre-flight (run at start of every video task) npx hyperframes doctor # full diagnostic which ffmpeg && ffmpeg -version # confirm FFmpeg accessible echo "Pre-flight OK" ``` If `doctor` reports any failure, resolve it BEFORE writing any HTML. Do NOT proceed with a broken environment — it will waste render time and produce invalid output. ## Workflow Decision Tree 1. **从零生成视频** → Step 1 (Init) → Step 2 (Compose) → Step 3 (Animate) → Step 4 (Lint) → Step 5 (Render) 2. **口播后期加工（加字幕/特效/换背景）** → 详见「口播后期处理管线」章节完整流程 3. **已有口播 + 去背景 + 换场景** → Remove background → Write composition with layers → Add captions → Add music → Render 4. **修改已有 composition** → Read files → Modify → Lint → Render 5. **数据可视化视频** → Plan data scenes → Compose with animated charts → Render 6. **多段素材拼接** → FFmpeg concat → HyperFrames 加统一字幕/特效/转场 → Render ## Step 1: Initialize Project ```bash npx hyperframes init --non-interactive npx hyperframes init my-video --example blank npx hyperframes init my-video --video clip.mp4 # with existing video npx hyperframes init my-video --audio track.mp3 # with audio npx hyperframes init my-video --tailwind # Tailwind v4 support ``` Available templates: `blank`, `warm-grain`, `play-mode`, `swiss-grid`, `vignelli`, `decision-tree`, `kinetic-type`, `product-promo`, `nyt-graph` ## CRITICAL: Rendering Requirements These rules are MANDATORY — violating them causes the compile phase to hang indefinitely: 1. **GSAP: Keep CDN URL** — Always use ``. The Compiler automatically inlines CDN scripts. **NEVER use a local `lib/gsap.min.js`** — file serving breaks during render. 2. **Fonts: DO NOT use @import** — Never write `@import url('https://fonts.googleapis.com/...')`. Instead, just declare `font-family: "Inter", sans-serif` in CSS. The Compiler auto-resolves common Google Fonts and caches them to `~/.cache/hyperframes/fonts/`. Supported fonts include: Inter, JetBrains Mono, Roboto, etc. **Noto Sans SC is NOT auto-resolved** — avoid it. 3. **WorkBuddy sandbox** — `npx hyperframes render` requires `dangerouslyDisableSandbox: true` because it launches Headless Chrome (Puppeteer). 4. **Always use `--non-interactive`** — Required for WorkBuddy automation. ## CRITICAL: Prompt Priority & Creative Freedom Protocol ### Priority Rule (MOST IMPORTANT — Governs Everything Below) ``` 用户提示词的明确意图 > 硬约束（技术安全）> 软默认（参考建议） ``` **Two modes of operation:** | 提示词类型 | AI 行为 | |-----------|--------| | **详细提示词**（明确指定布局、配色、风格、动画等） | 严格按提示词执行，只保留硬约束，软默认全部让位。AI 的任务是实现用户的视觉创意，不是把视频拉回模板。 | | **简单提示词**（只给主题/关键词，未指定视觉细节） | AI 自由发挥创意，参考软默认值作为起点，鼓励创新布局和视觉表达。 | **Creative License（创意许可）：** 当用户的提示词包含具体的视觉描述、风格要求、布局指示、动效要求时，视为创意许可——AI 应优先实现用户的视觉意图，所有软默认规则自动退让。AI 不应将每个视频拉回同一个标准模板。 **无论哪种模式，AI 必须在最终输出前执行 §9 AI自检管线，确保技术安全。** --- ### Rule Classification: Hard Constraints vs Soft Defaults #### 🔴 硬约束（HARD CONSTRAINTS — 永远生效，即使用户提示词冲突也不可违反）这些是技术限制，违反会导致渲染崩溃、输出错误或不可预期行为： | # | 硬约束 | 原因 | |---|--------|------| | H1 | 禁止 `Math.random()`/`Date.now()`/`new Date()`/`performance.now()` | 非确定性渲染导致帧不一致 | | H2 | 字体仅限白名单: Inter, JetBrains Mono, Roboto, sans-serif | 其他字体 lint 报错或渲染失败 | | H3 | 禁止 `@import url()` 引入字体 | Compiler 不支持，渲染卡死 | | H4 | GSAP CDN 必须使用 jsdelivr URL | 本地文件路径在渲染环境中不可用 | | H5 | `window.__timelines` 必须同步注册 | 异步注册导致空帧 | | H6 | 内容不可超出画布边界（任何像素） | 超出部分被裁切，用户看到残缺内容 | | H7 | 禁止 inline `style="top:XX%"` 覆盖内容定位 | 百分比定位跨场景不一致，导致溢出 | | H8 | GSAP repeat 使用 `Math.floor` 而非 `Math.ceil` | ceil 可能超出 composition 时长 | | H9 | 音频必须 FFmpeg 后置合成（≥30s视频） | HyperFrames 内置音频 ~32s 截断 bug | #### 🟢 软默认（SOFT DEFAULTS — 仅当用户提示词未指定时生效，一旦用户有明确意图即让位）这些是经过验证的良好实践，但不是唯一正确答案： | # | 软默认 | 默认值 | 用户可覆盖场景 | |---|--------|--------|--------------| | S1 | 标题区位置 | top: 50px | 用户要全屏标题、底部标题等 | | S2 | 内容起始位置 | top: 240px | 用户要居中布局、沉浸式设计等 | | S3 | 卡片间距 | 28-36px | 用户要紧凑/宽松排版 | | S4 | 内容底部边界 | 980px | 用户明确要底部内容 | | S5 | 左右安全边距 | 120px | 用户要全出血设计 | | S6 | 字号范围 | 见参考表 | 用户指定特定字号风格 | | S7 | 卡片宽度 | 320-520px | 用户要大卡片/小卡片 | | S8 | 场景过渡方式 | 0.6s opacity fade | 用户指定滑动/缩放/3D等过渡 | | S9 | 背景风格 | 暗色渐变 + 网格 + 模糊光球 | 用户指定任何其他背景 | | S10 | 粒子数量 | 40 个, mulberry32 seed=42 | 用户不要粒子或要更多 | | S11 | 骨架结构 | scene-wrapper 标准骨架 | 用户描述了不同的布局需求 | | S12 | 配色方案 | 无预设（等用户指定）| 用户未指定时用中性深色/浅色 | --- ### 1. Prompt Compliance Checklist Before writing HTML, create a compact production checklist with: - Topic/title and target audience - Required scenes or content points - Required visual style and forbidden styles - **Required color palette — ALWAYS follow the user's prompt specification; never substitute or override** - Required BGM style, whether it must cover the whole video, and target volume - Duration target and final scene end time - Any requested font/card/icon scale preferences - **Creative direction signal**: 用户是否给了详细视觉指示？(YES → 严格执行，软默认让位; NO → AI自由发挥，参考软默认) After rendering, check the output against this list. If the user asked for a specific BGM style, do not replace it with a different style unless explicitly approved. If the user specified a color palette, do not swap it for a "safer" or "more generic" scheme. ### 2. Color Palette Rule **User's prompt is the ONLY source of truth for color decisions.** The Skill provides NO default theme colors. When the user provides a color scheme (e.g., "霓虹青绿玫红橙紫"), implement it exactly. When the prompt omits color requirements, AI may freely choose a palette that best serves the content and mood — no need to ask unless the user is unsatisfied. ### 3. Safe Typography Scale for 1920x1080 (Soft Default — 参考范围) These are **reference ranges** for when the user hasn't specified typography preferences. If the user describes a specific visual style (e.g., "极简大字报风格", "数据密集仪表盘"), AI should adapt freely while ensuring readability. | Element | Reference range | Hard max (H6: 不可超出画布) | |---------|----------------|---------------------------| | Cover mega title | 96-120px | 132px | | Scene title | 64-84px | 92px | | Subtitle | 38-56px | 64px | | Body text | 28-42px | 48px | | Card title | 32-44px | 48px | | Data number | 72-104px | 112px | | Icon/emoji | 56-96px | 112px | | Code text | 26-36px | 42px | **Note:** Hard max 仅为防溢出，不是风格限制。如果用户明确要超大标题效果且布局容得下，AI 应实现。 ### 4. Layout Safe Zones (Soft Default — 标准布局参考) 以下是 1920x1080 的**标准布局参考**。当用户提示词未指定布局时使用；当用户描述了不同的布局需求（如全屏沉浸式、非规则排列、斜切设计、居中对称等），AI 应自由设计，仅确保不违反硬约束 H6（内容不超出画布）和 H7（禁止 inline top%）。 ``` ┌──────────────────────────────────────────────┐ │ Title Safe Zone: top 50px, height ≤ 150px │ ← 标准参考 ├──────────────────────────────────────────────┤ │ Content Safe Zone: top 240px ~ bottom 980px │ ← 标准参考 ├──────────────────────────────────────────────┤ │ Bottom Safe Margin: bottom 100px │ ← 建议保留 └──────────────────────────────────────────────┘ ``` **硬约束（始终生效）：** - H6: 所有可见内容必须在 0~1920px (水平) 和 0~1080px (垂直) 范围内 - H7: 禁止 inline `style="top:XX%"` — 必须使用 CSS class 或固定 px 值 **软默认（未指定时使用）：** - 标题区: `top: 50px`, 居中, height ≤ 150px - 内容区: `top: 240px`, 底部不超过 980px - 左右边距: ≥ 120px - 标题与内容间距: ≥ 40px **Content height budget (标准布局下的参考计算):** ```text available_height = 980px - 240px = 740px max_card_height = (available_height - (rows-1) × gap) / rows Example: 3 rows, gap=24px → max per row = (740 - 48) / 3 = 230px ✓ Example: 6 cards 2×3, gap=28px → max per row = (740 - 28) / 2 = 356px ✓ Example: 4 vertical items, gap=18px → max per item = (740 - 54) / 4 = 171px ✓ ``` **If content_height > available_height (overflow risk), apply fixes:** 1. Reduce card padding (28px → 20px) 2. Reduce gap (36px → 24px → 18px) 3. Reduce icon/text size within cards 4. Split into two consecutive scenes **Card layout dimension reference (soft defaults):** | Layout type | Card width | Max gap | Container width | |-------------|-----------|---------|-----------------| | 3 horizontal | 360-480px | 36px | 90% (1728px) | | 4 horizontal | 280-380px | 30px | 90% | | 2×3 grid | 320-520px | 28px | 1600px | | 2 large horizontal | 680-780px | 36px | 90% | | Vertical list (3-4 items) | 90% width | 20-24px | 90% | | Timeline (3 items) | 90% width | 20px | 90% | ### 5. Font White List — HARD CONSTRAINT (H2) Only use fonts that HyperFrames Compiler can auto-resolve: ```css /* ALLOWED */ font-family: "Inter", sans-serif; font-family: "JetBrains Mono", monospace; /* for code blocks */ font-family: "Roboto", sans-serif; /* PROHIBITED — cause lint errors or render failures */ font-family: "PingFang SC"; /* macOS only, not bundled */ font-family: "Microsoft YaHei"; /* Windows only */ font-family: "Noto Sans SC"; /* not auto-resolved */ font-family: "Source Han Sans"; /* not auto-resolved */ ``` Chinese text rendering: rely on `sans-serif` fallback (renders correctly in Chrome). The visual difference is negligible for video output. ### 6. Deterministic Rendering — HARD CONSTRAINT (H1, H8) HyperFrames requires frame-level determinism for multi-pass rendering: ```javascript // ❌ PROHIBITED — non-deterministic (H1) Math.random() Date.now() new Date() performance.now() // for positioning // ✅ REQUIRED — use seeded PRNG function mulberry32(seed) { return function() { seed |= 0; seed = seed + 0x6D2B79F5 | 0; let t = Math.imul(seed ^ seed >>> 15, 1 | seed); t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t; return ((t ^ t >>> 14) >>> 0) / 4294967296; } } const rand = mulberry32(42); // fixed seed ``` Also for GSAP `repeat` calculations (H8): ```javascript // ❌ May overshoot composition duration repeat: Math.ceil(duration / cycle) - 1 // ✅ Guaranteed to stay within bounds repeat: Math.floor(duration / cycle) - 1 ``` ### 7. Scene Duration and Root Duration The root composition duration must equal the last scene end time: ```text root_duration = max(scene.data_start + scene.data_duration) ``` Never leave `data-duration` shorter than the final scene. This causes unreliable render behavior and confusing QA results. ### 8. BGM Must Match Prompt and Cover Full Video For videos longer than 30s, do not rely on short audio loops inside HyperFrames. Use this reliable workflow: 1. Generate or prepare a full-length WAV whose duration is at least `root_duration + 3s`. 2. Render the visual video with HyperFrames (audio `data-duration` can match video, but DO NOT trust the rendered audio). 3. Replace/mux final audio with FFmpeg from the WAV source: ```bash ffmpeg -y -i rendered.mp4 -i bgm_full.wav -map 0:v:0 -map 1:a:0 \ -c:v copy -c:a aac -b:a 192k -t \ -movflags +faststart final.mp4 ``` 4. Verify the final MP4 by extracting the audio stream and checking real decoded duration and per-second RMS: ```bash ffmpeg -y -i final.mp4 -vn -ac 1 -ar 44100 extracted_audio.wav ffprobe -v quiet -show_entries format=duration -show_entries stream=codec_type,duration -of default=noprint_wrappers=1 final.mp4 ffmpeg -ss -t 12 -i final.mp4 -af volumedetect -f null /dev/null 2>&1 | grep -E "mean_volume|max_volume" ``` Bundled helper option: ```bash python scripts/verify_audio.py final.mp4 --min-duration --tail-seconds 12 ``` A successful BGM check must prove: - Extracted audio duration >= video duration - 0.1s - No silent seconds in the final 12 seconds (RMS > -30dB per second) - The BGM style matches the user's requested or previously approved style - Volume is audible but not overpowering (RMS mean between -15dB ~ -20dB) **BGM generation fallback:** Only generate BGM when the user explicitly requests new music or when the source material has no audio to preserve. If numpy is unavailable, use Python standard library `struct` + `wave` + `math` to synthesize. A 130BPM electronic track can include: kick (4-on-floor), hi-hat (8th notes), bass (sub oscillator), pad (chord progression), lead melody, and arpeggio layers. For existing edited videos with original audio, preserve and post-mux the original audio instead of synthesizing replacement music. Bundled helper option for generated BGM projects: ```bash python scripts/gen_bgm.py bgm.wav --duration --bpm 110 --volume 0.25 ``` ### 9. AI Self-Check Pipeline (Mandatory Before Delivery — 两种模式通用) **无论用户提示词是详细还是简单，最终交付前都必须执行此管线。** 此管线验证的是**技术安全和视觉完整性**，不是风格是否符合某个模板。 Execute ALL checks in this exact order. Do NOT skip any step. #### Phase A: Pre-Write Validation (before writing HTML) | # | Check | 详细提示词模式 | 简单提示词模式 | |---|-------|---------------|---------------| | A1 | Scene count × avg duration = total duration? | 按提示词场景规划 | AI 自行规划 | | A2 | Content density reasonable for scene duration? | 按提示词内容量 | 参考中文密度表 | | A3 | Colors match user specification? | 严格匹配提示词配色 | AI 自由选择 | | A4 | Font family only uses whitelist? (H2) | **始终检查** | **始终检查** | | A5 | 是否存在 Hard Constraint 冲突? | **始终检查** | **始终检查** | #### Phase B: Post-Write / Pre-Render Validation ```bash # B1: Lint must pass with 0 errors (HARD — always) npx hyperframes lint # B2: Check for prohibited patterns in HTML (HARD — H1, H2) grep -n "Math.random\|Date.now\|PingFang\|Microsoft YaHei\|Noto Sans" index.html # → must return empty # B3: Check for inline top% overrides (HARD — H7) grep -n 'style=.*top:.*%' index.html # → If found: REMOVE immediately (use CSS class or fixed px) # B4: Check root data-duration matches expected grep 'data-composition-id.*data-duration\|data-start.*data-duration' index.html # → Verify last scene end = root duration ``` #### Phase C: Post-Render Validation | # | Check | Command | Pass criteria | |---|-------|---------|---------------| | C1 | Video duration | `ffprobe -show_format` | ≥ target - 0.1s | | C2 | Resolution | `ffprobe -show_streams` | 匹配用户要求的分辨率 | | C3 | Frame rate | `ffprobe -show_streams` | 30fps (除非用户要求 60fps) | | C4 | Audio duration after mux | Extract WAV, check length | ≥ video duration | | C5 | Last 12s no silence | Per-second RMS check | All seconds > -30dB | | C6 | Audio mean volume | `volumedetect` | -15dB ~ -20dB | #### Phase D: Layout & Visual Integrity Check (关键步骤) For **every video**, extract key frames and verify visual integrity: ```bash # Extract key frames at scene midpoints ffmpeg -ss -i final.mp4 -frames:v 1 -q:v 2 check_scene_N.jpg ``` **通用视觉检查（两种模式都执行）：** - ✅ 所有文字和内容在画布范围内（H6）— 无裁切 - ✅ 无文字互相重叠导致不可读 - ✅ 卡片/元素间距均匀，无挤压变形 - ✅ 关键信息可读（字号足够，对比度足够） - ✅ 动画过渡流畅，无跳切（除非用户要求跳切风格） **额外检查（仅标准布局模式——使用软默认时）：** - 标题在顶部可见，不与内容重叠 - 所有卡片在安全区范围内 If ANY check in Phases B-D fails → fix → re-render → re-verify. Maximum 2 retry cycles; if still failing after 2 retries, report the specific issue to the user. ### 10. Auto-Completion Defaults (Soft — 仅简单提示词模式) 当用户的提示词**未指定**以下细节时，AI 可参考这些经过验证的默认值作为**起点**，但鼓励在此基础上发挥创意： | Missing item | Default reference | AI 可自由替换？ | |-------------|------------------|----------------| | Layout strategy | Title top:50px + Content top:240px | ✅ 可用任何不违反 H6/H7 的布局 | | Font | `Inter, sans-serif` | ❌ 硬约束 H2，只能用白名单字体 | | Audio strategy | FFmpeg post-mux from full-length WAV | ❌ 硬约束 H9（≥30s 视频） | | Content container | `.content-area` / `.content-col` | ✅ 可用任何语义化 CSS 结构 | | Card gap | 28-36px (horizontal), 20-24px (vertical) | ✅ | | Particle generation | 40 particles, mulberry32 seed=42 | ✅ 数量自由，但 PRNG 必须用 mulberry32 (H1) | | Background | Dark gradient + grid + blur orb | ✅ 完全自由 | | Transition style | 0.6s opacity fade | ✅ 可用滑动、缩放、模糊等 | | Grid background animation | 20s infinite translate loop | ✅ | | Verification pipeline | Full Phase A-D self-check | ❌ 始终必须执行 | **Key principle:** 默认值是灵感参考，不是束缚。AI 应根据视频主题和内容自然选择最佳表达方式。 ### 11. Common Pitfalls Registry (Quick Reference) | Pitfall | Root cause | Type | Prevention | |---------|-----------|------|------------| | Content overflows bottom | `top:XX%` inline style | 🔴 H7 | 禁止 inline top%，用 CSS class 固定 px | | Audio cuts at ~32s | HyperFrames built-in audio bug | 🔴 H9 | Always FFmpeg post-mux | | Non-deterministic frames | `Math.random()` | 🔴 H1 | Replace with mulberry32 PRNG | | Lint error: unresolved font | Using PingFang SC etc. | 🔴 H2 | Font whitelist only | | GSAP overruns composition | `Math.ceil` for repeat count | 🔴 H8 | Use `Math.floor` instead | | Empty/black frames | `window.__timelines` not registered | 🔴 H5 | Ensure synchronous registration | | Cards overlap title | `transform:translate(-50%,-50%)` centering | ⚠️ 自检 | Phase D frame spot-check 发现即修 | | 2×3 grid uneven spacing | Card width too small for container | ⚠️ 自检 | Phase D 视觉检查 | | Scene jump cuts | Missing exit transitions | ⚠️ 自检 | 除非用户要求跳切风格 | ## Step 2: Write HTML Composition A composition is an HTML file. The root container defines the video canvas. ### Simple Single-Scene Example ```html

Product Launch

``` ### Multi-Scene Standard Skeleton (Soft Default — Reference Starting Point) For videos with 3+ scenes when the user hasn't specified a custom layout, this skeleton provides a proven starting point. **If the user's prompt describes a different visual structure (e.g., full-screen transitions, split-screen, non-linear navigation, cinematic parallax), AI should design freely — only the Hard Constraints (H1-H9) remain in effect.** ```html

场景标题

副标题说明

``` **Skeleton naming conventions (recommended for consistency, not mandatory):** - Scene wrappers: `#scene-1`, `#scene-2`, ... `#scene-N` - Scene titles: `#s1-title`, `#s2-title`, ... `#sN-title` - Content containers: `#s1-content`, `#s2-cards`, `#s3-items`, ... (descriptive suffix) - Card elements: `.glass-card`, `.data-card`, `.app-card` (semantic naming) - Background: `#bg-layer`, `#grid-bg`, `#particles-container` **Scene wrapper pattern (recommended, AI may use alternative transition approaches if user requests):** ```javascript // Scene entry (instant opacity on) tl.to("#scene-N", { opacity: 1, duration: 0.01 }, SCENE_START); // Scene content animations tl.from("#sN-title", { /* entrance */ }, SCENE_START + 0.1); tl.from("#sN-content ...", { /* entrance */ }, SCENE_START + 0.3); // Scene exit (0.6s before end) — EXCEPT final scene tl.to("#scene-N", { opacity: 0, duration: 0.5 }, SCENE_END - 0.6); ``` ### Data Attributes Reference | Attribute | Required | Purpose | |-----------|----------|---------| | `data-composition-id` | Yes | Unique ID for the composition | | `data-start` | Yes | Start time in seconds (or clip ID ref: `"el-1 + 2"`) | | `data-duration` | Yes for img/div | Duration in seconds (video/audio auto-detect) | | `data-track-index` | Yes | Track layer (same-track clips cannot overlap) | | `data-width` / `data-height` | Yes (root) | Canvas dimensions (1920x1080 or 1080x1920) | | `data-volume` | No | Audio volume 0-1 (default 1) | | `data-media-start` | No | Trim offset into source media | | `data-composition-src` | No | Path to external sub-composition HTML | ### Video and Audio Rules - Video MUST be `muted playsinline` — audio is always a separate `

AI 短视频工厂

Description

Latest Changes

Install AI 短视频工厂 with One Click