这是一套以 HyperFrames 为渲染内核的本地动效资产库。每个动效都是一个可独立预览、校验和渲染的模板；文案、数字、颜色等可变内容通过参数传入，不需要改动动画源码。
这个项目由 栗噔噔 创建。
小红书、抖音、视频号、公众号、B站、X、YouTube、即刻都是同一个 ID：栗噔噔。
如果这个项目对你有帮助，欢迎关注 栗噔噔，也欢迎给这个 GitHub 项目点一个 Star，让更多做视频的人看到这套工作流：
https://github.com/nutllwhy/hyperframes-motion-library
GitHub Pages 演示页：
https://nutllwhy.github.io/hyperframes-motion-library/
演示页可以查看模板库、使用指引和每个动效的样片。因为 GitHub Pages 只能托管静态页面，在线演示页不负责云端渲染；如果要修改文案、数据并生成新视频，请克隆项目到本地运行。
这套系统的重点不是一次性做出某条视频，而是把常用的视频动效沉淀成可以继续复用、继续扩展的模板资产。
- 模板化：每个动效都有独立源码、默认预设、设计说明和目录登记。
- 参数化：标题、数字、说明文字、颜色等常改内容都可以通过数据传入。
- 可扩展：新的动效可以按
SYSTEM.md的规范继续加入模板库，也可以交给 Agent 辅助迭代。
motion-plan.json升级到 V1.1，每条任务新增原始口播、表达目的、画面模式、必须信息和禁加信息。- 批量工作台新增导演卡片与渲染前检查；旧版 V1.0 方案仍可导入，但需要补齐导演信息后才能批量渲染。
- 23 个模板都声明了适用画面模式、真实内容选择器、外层框架选择器、铺开目标和导演规则，避免 Agent 仅凭输出格式猜测构图。
- 新增真实内容铺开检查，分别测量面积、横向跨度和纵向跨度，不再把一个很大的空面板误判成“已经铺满”。
- 导演规则明确禁止添加口播中没有出现的数字、时间、状态、英文标签和模板编号；独立全屏动效必须主动填满安全区。
- 完成数字计数器、数据脉冲、大数字结论卡、前后对比、横向条形、Top 排名、拐点趋势、状态转折、三步流程和误区纠正等历史模板的全屏重构；全屏模板的真实内容横向铺开约 88%–89%，纵向铺开约 76%–85%。
- 数字计数器移除没有分母依据的进度环与英文底纹；其余模板同步移除无意义装饰，并重新生成展示样片。
- 新增
motion-plan.json数据格式，Agent 可以把带时间码的口播稿整理成结构化动效方案。 - 新增“批量工作台”：支持导入方案、校验模板与变量、编辑单项内容、调整顺序和移除任务。
- 支持本地顺序渲染整份方案，视频按“序号—时间码—模板 ID”命名并归档到独立项目目录。
- 支持保存、重新导出动效方案，并从界面直接打开本地输出目录。
- 在线演示页可以导入和检查方案，但批量渲染仍只在本地执行，不增加云端成本。
- 项目正式采用 MIT License，明确允许个人及商业使用、修改和再发布，同时须保留原作者版权与许可声明。
- 模板库增加分类筛选和结果数量提示，20 个模板更容易定位。
- 每个模板从单一默认数据扩展为 3 套场景预设，覆盖默认示例、AI 提效与业务增长。
- 新增渲染清理机制：自动保留每个模板最近 8 组临时渲染，样片和命名文件不会被删除。
- RedSkill 投稿包改为从主项目自动同步，避免模板、界面和脚本继续产生版本偏差。
- 发布准备命令会统一检查目录、同步 RedSkill 投稿包并构建 GitHub Pages。
- 20 个模板统一支持纯色底 MP4、透明 MOV 和透明 WebM。
- 新增面向剪映的 ProRes 4444 透明 MOV，本地渲染完成后会自动转换。
- 为柱状图、数字计数器、折线图和数据脉冲补齐透明模式，并保留必要的局部深色信息面板。
- 透明视频在系统中使用棋盘格预览，方便确认画布是否真正透明。
git clone https://github.com/nutllwhy/hyperframes-motion-library.git
cd hyperframes-motion-library
npm install
npm run dev打开终端显示的地址，在模板库里修改参数，然后保存为预设或生成草稿视频。
模板列表支持按分类和关键词组合筛选。每个模板内置多套场景预设，也可以在本地保存自己的预设。
每个模板支持按用途选择输出格式：
- 纯色底 MP4：保留黑色背景，兼容性最好，可直接导入剪映。
- 透明 MOV：带透明通道，适合叠加在口播画面上；本地会自动转换为 ProRes 4444，文件会明显大于 MP4。
- 透明 WebM：文件更小并保留透明通道，适合网页或支持 WebM 的剪辑软件。
透明 MOV 转换依赖本机安装 FFmpeg。macOS 可以通过 brew install ffmpeg 安装。
如果一条视频需要多个动效，可以让 Agent 根据口播稿生成 motion-plan.json，再从页面顶部进入“批量工作台”导入。
项目提供三份可以直接交给 Agent 阅读的文件：
director-rules.json：四种画面模式、内容铺开范围和全局导演原则。motion-plan.schema.json：方案的数据格式与字段约束。examples/motion-plan.example.json：包含大数字结论卡和前后对比的完整示例。
V1.1 方案的每条任务都必须写清楚原始口播、表达目的、画面模式、必须出现的信息与禁止添加的信息。导入后可以逐条检查导演说明、修改文案与数据、调整顺序、选择 MP4 / MOV / WebM，再统一批量渲染。输出文件位于：
renders/projects/<project-name>/
系统会同时保存一份 motion-plan.json，以后可以继续修改和重新渲染。
常用检查：
npm run check
npm run check:templates清理临时渲染：
# 只查看预计会清理什么
npm run cleanup:renders -- --dry-run
# 每个模板只保留最近 8 组临时渲染
npm run cleanup:renders -- --keep 8准备发布副本：
npm run prepare:release这个命令会先校验全部模板与预设，再同步 redskill-submission/，最后构建 GitHub Pages 的 dist/。
命令行渲染：
npm run render -- metric-pulse templates/metric-pulse/presets/default.json视频渲染会调用 Chrome / FFmpeg / HyperFrames，算力成本主要发生在渲染阶段。建议克隆到自己的电脑后，用本地资源生成视频。
如果你想让自己的 Agent 继续往系统里加动效，请把整个项目文件夹交给 Agent，并让它先阅读：
README.mdSYSTEM.mdAGENT_GUIDE.mdcatalog.jsontemplates/下已有模板
更多提示词和入库要求见 AGENT_GUIDE.md。如果你基于这个项目长出了自己的动效库，也欢迎回到原项目点 Star 支持一下：
https://github.com/nutllwhy/hyperframes-motion-library
本项目采用 MIT License。你可以将它用于个人或商业项目，也可以修改和继续发布，但需要在副本或主要代码中保留原作者版权与许可声明。
catalog.json：所有动效模板的目录与检索信息templates/<id>/index.html：HyperFrames 动效源码templates/<id>/presets/*.json：同一动效的文案/数据预设app/：模板库与参数编辑界面renders/：界面或命令行生成的视频redskill-submission/：由主项目自动生成的 RedSkill 轻量源码包motion-plan.schema.json：Agent 动效方案的数据契约director-rules.json：全屏、叠加、数据图表与章节过渡的导演规则examples/motion-plan.example.json：可直接导入的批量动效示例SYSTEM.md：新增截图动效时的入库规范
当前模板库已经包含 23 个可复用动效，覆盖数据可视化、透明叠加和知识讲解三类场景。发布前的模板盘点见 references/上线前模板盘点.md。
之后每次新增动效，都沿用“模板源码 + 变量声明 + 默认预设 + 目录登记 + 校验”的结构，系统会自然长成可搜索、可复用的动效库。