这是一套以 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 只能托管静态页面，在线演示页不负责云端渲染；如果要修改文案、数据并生成新视频，请克隆项目到本地运行。
这套系统的重点不是一次性做出某条视频，而是把常用的视频动效沉淀成可以继续复用、继续扩展的模板资产。
- 模板化：每个动效都有独立源码、默认预设、设计说明和目录登记。
- Skill 入口：
SKILL.md为 Agent 提供使用、扩展模板和调整整片画风的指引。 - 参数化：标题、数字、说明文字、颜色等常改内容都可以通过数据传入。
- 风格化：27 个信息模板可调用 4 套画风，字体、纸张材质、线条和运动节奏一起变化；批量方案支持整片统一风格。
- 双画幅：模板可同时提供横屏 1920×1080 与竖屏 1080×1920 版本，页面上一键切换预览与渲染（
chapter-title、donut-progress已支持）。 - 可扩展：新的动效可以按
SYSTEM.md的规范继续加入模板库，也可以交给 Agent 辅助迭代。
- 黑橙经典改为中性黑
#0D0D0D+ 纯白#F5F5F2，橙色#FF5A1F只做重音。 - 27 个模板全部去掉光晕、玻璃卡、渐变条、胶囊标签和英文小标签；卡片改实色、小圆角，能不用卡就不用。
- 中文统一用 PingFang / 思源黑体字体栈，字距归零；数字用等宽数字。
- 动作改为遮罩升起、擦入擦出、线条生长，去掉回弹、弹跳、模糊放大和呼吸脉冲；数字落定不回弹。
- 默认文案里给使用者看的说明（"适合…"）清空；各模板
design.md与样片同步更新。
- 新增黑橙经典、纸感编辑、手绘笔记、几何构成 4 套画风，覆盖 27 个模板与 29 份横竖屏合成。
- 模板决定信息怎么讲，风格决定字体、材质、图形边缘与运动方式；黑橙经典保持默认。
- 切换风格和修改内容可直接预览；下载的已渲染视频与预览区分开，避免旧样片被误当成新风格。
motion-plan.jsonV1.2 新增整片styleId，场景默认继承，也可以显式覆盖；兼容 V1.0 / V1.1 方案。- 提供风格注册表、统一运行时、Agent 扩展规范和跨模板风格检查，详见
styles/README.md。
- catalog schema 新增
orientations与variants字段：一个模板 ID 聚合横屏与竖屏两个画幅，共享同一套预设与变量；存量单画幅模板零改动、自动退化为纯横屏。 - 竖屏以
templates/<id>/portrait/子目录承载，是完整独立的 hyperframes 项目，lint / validate / inspect / 渲染全链路覆盖，不是二等公民。 chapter-title（章节标题）与donut-progress（圆环占比）首批提供竖屏版：1080×1920，纵向堆叠重排，底部避开平台 UI 遮挡区，铺开门槛按竖屏镜像（横 ≥56%、纵 ≥76%）。- 工作台新增画幅切换（横屏 16:9 / 竖屏 9:16）：预览容器、时长、样片、渲染输出（
portrait-前缀）、下载文件名全部跟随画幅；批量工作台每条任务可独立指定画幅。 check:templates升级：竖屏目录同样过橙色参数化检查、lint 三连与变量声明一致性断言（横竖屏变量名与类型必须逐一相同）。- 修复上一版 4 个新模板共 28 处硬编码
rgba(255,90,54,…)，统一改为color-mix(var(--accent) N%, transparent)参数化写法，强调色变量恢复全链路生效。
- 新增关键词爆破、章节标题、圆环占比、金句引用卡 4 个模板，模板库扩展到 27 个。
- 关键词爆破与章节标题补齐长视频的钩子与分段能力；圆环占比补齐环形数据表达；金句引用卡补齐观点与出处引用。
- 四个新模板均通过真实内容铺开检查（横向 77%–87%，纵向 63%–78%）与可读性校验，并各自附带 3 套场景预设。
- 从
redskill-submission/恢复了缺失的compact-number-callout、mode-choice-compare、iteration-loop三个模板目录，恢复后 27 个模板全部通过npm run check。
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 安装。
在模板右侧选择“画面风格”，文案和数据会保留，画面立即切换。黑橙经典适合通用数据；纸感编辑适合资料解读；手绘笔记适合教学流程；几何构成适合强观点与对比。纯色 MP4 保留画风底色，透明 MOV / WebM 保留必要信息图形与局部材质。
批量工作台可以一次选择整片风格。Agent 输出的 V1.2 方案在项目顶层填写 "styleId": "paper-editorial"；所有未声明场景风格的动效会继承这个选择。真正需要换画风的场景才填写自己的 styleId，工作台会标出这个例外。已有自定义颜色仍可以微调。
扩展风格的方法与完整字段见 风格开发说明。
如果一条视频需要多个动效，可以让 Agent 根据口播稿生成 motion-plan.json，再从页面顶部进入“批量工作台”导入。
项目提供以下可以直接交给 Agent 阅读的文件：
styles/catalog.json：可调用画风与配色、字体、材质、运动约束。director-rules.json：四种画面模式、内容铺开范围和全局导演原则。motion-plan.schema.json：方案的数据格式与字段约束。examples/motion-plan.example.json：包含大数字结论卡和前后对比的完整示例。
V1.2 方案在项目层选择风格，每条任务写清楚原始口播、表达目的、画面模式、必须出现的信息与禁止添加的信息。导入后可以逐条检查导演说明、修改文案与数据、调整顺序、选择 MP4 / MOV / WebM，再统一批量渲染。输出文件位于：
renders/projects/<project-name>/
系统会同时保存一份 motion-plan.json，以后可以继续修改和重新渲染。
常用检查：
npm run check
npm run check:templates
npm run check:styles清理临时渲染：
# 只查看预计会清理什么
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
npm run render -- big-number-card templates/big-number-card/presets/default.json mp4 paper-demo --style=paper-editorial视频渲染会调用 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：新增截图动效时的入库规范
当前模板库已经包含 27 个可复用动效，覆盖数据可视化、透明叠加和知识讲解三类场景。发布前的模板盘点见 references/上线前模板盘点.md。
之后每次新增动效，都沿用“模板源码 + 变量声明 + 默认预设 + 目录登记 + 校验”的结构，系统会自然长成可搜索、可复用的动效库。