diff --git a/README.md b/README.md index 7d8d06c..1a14bee 100644 --- a/README.md +++ b/README.md @@ -14,10 +14,18 @@ | Skill | 说明 | 路径 | |---|---|---| | AI 信息差快报 | 新闻检索、素材匹配、口播字幕、视频渲染 | `skills/ai-tech-news-video/SKILL.md` | +| IT 基础设施连续 PNG | 根据描述或参考图生成 1-N 张连续风格竖版 PNG 素材 | `skills/it-infra-continuous-png/SKILL.md` | +| IT 基础设施长图讲解视频 | 基于长图素材生成 HyperFrames 讲解视频、口播、字幕和 timeline | `skills/it-infra-evolution-video/SKILL.md` | | 产品介绍视频 | 官网信息提炼、叙事结构、成片节奏 | `skills/product-intro-video/SKILL.md` | | 视频音效工作流 | 音效搜索、下载与合成、时间线接入 | `skills/sound-fx-for-video/SKILL.md` | | 简笔画动画视频 | 线稿风动画、动作叙事、抽检闭环 | `skills/sketch-animation-video/SKILL.md` | +## Examples + +| Example | 说明 | 路径 | +|---|---|---| +| IT 基础设施演进视频模板 v1 | 轻量 HyperFrames 工程模板，只包含 HTML、配置、脚本与占位说明，不包含图片、音频、快照或渲染产物 | `example/it-infra-evolution-video/` | + ## 预览 ### ai-tech-news-video diff --git a/example/it-infra-evolution-video/.template-lock.json b/example/it-infra-evolution-video/.template-lock.json new file mode 100644 index 0000000..f8d6cb2 --- /dev/null +++ b/example/it-infra-evolution-video/.template-lock.json @@ -0,0 +1,7 @@ +{ + "name": "it-infra-evolution-video", + "version": "v1", + "status": "read-only", + "role": "frozen-project-template", + "note": "Copy this directory for v2 or experiments. Do not edit v1 in place." +} diff --git a/example/it-infra-evolution-video/AGENTS.md b/example/it-infra-evolution-video/AGENTS.md new file mode 100644 index 0000000..6876b63 --- /dev/null +++ b/example/it-infra-evolution-video/AGENTS.md @@ -0,0 +1,62 @@ +# HyperFrames Composition Project + +## Skills + +This project uses AI agent skills for framework-specific patterns. Install them if not already present: + +```bash +npx skills add heygen-com/hyperframes +``` + +Skills encode patterns like `window.__timelines` registration, `data-*` attribute semantics, Tailwind v4 browser-runtime styling for `--tailwind` projects, and shader-compatible CSS rules that are not in generic web docs. Using them produces correct compositions from the start. + +## Commands + +```bash +npm run dev # start the preview server (long-running — keep it alive in background) +npm run check # lint + validate + inspect +npm run render # render to MP4 +npm run publish # publish and get a shareable link +npx hyperframes docs # reference docs in terminal +``` + +> **`npm run dev` is a long-running server, not a one-shot command.** It blocks until stopped. +> Always run it as a background process so it stays alive while you edit compositions. +> Running it in the foreground will time out and kill the server, breaking the browser preview. + +## Project Structure + +- `index.html` — main composition (root timeline) +- `compositions/` — sub-compositions referenced via `data-composition-src` +- `assets/` — media files (video, audio, images) +- `meta.json` — project metadata (id, name) +- `transcript.json` — whisper word-level transcript (if generated) + +## Linting — Always Run After Changes + +After creating or editing any `.html` composition, run the full check before considering the task complete: + +```bash +npm run check +``` + +Fix all errors before presenting the result. + +## Key Rules + +1. Every timed element needs `data-start`, `data-duration`, and `data-track-index` +2. Visible timed elements **must** have `class="clip"` — the framework uses this for visibility control +3. GSAP timelines must be paused and registered on `window.__timelines`: + ```js + window.__timelines = window.__timelines || {}; + window.__timelines["composition-id"] = gsap.timeline({ paused: true }); + ``` +4. Videos use `muted` with a separate `