style-library

用途

本资源用于复用 HyperFrames 视频项目中的动态图形卡片库与样式模板，适合为视频选择视觉风格、添加卡片、构建新样式包，或在 HyperFrames 视频中复用某个模板。

主要能力

• 提供按风格、层级、用途筛选的卡片目录（registry.json）。
• 每种样式包含 DESIGN.md、tokens.css 与清单槽位限制。
• 支持叠加层（overlay）与整屏接管（takeover）两类用法。
• 提供 style-templates/ 作为整场（whole-scene）起点。
• 提供新增样式与构建注册表的脚本命令。

使用方式

1. 先读 style-library/GUIDE.md，再读 style-library/registry.json。
2. 在打开单个卡片前，按风格、层级和用途进行筛选。
3. 阅读所选样式的 DESIGN.md、tokens.css 以及清单槽位限制。
4. 叠加层需在卡片外部与说话者面部保留透明度；整屏接管使用不透明背景。
5. 将选定卡片复制到视频的 compositions/ 中，本地化其 CSS、字体和 GSAP 依赖，填写其命名 data-slot 值，并使用 HyperFrames 技能接入其时间线。注意：只复制卡片而不复制其相对依赖，不会生成完整资产。
6. 使用 style-templates/ 作为整场起点。媒体模板可能需要学生自己的 assets/source.mp4；渲染前请查看其 README。
7. 新增样式时运行 node scripts/style-library/new-style.mjs 03 my-style "My Style"，然后补齐其设计令牌、清单与卡片。清单变更后运行 node scripts/style-library/build-registry.mjs。
8. 将项目专属文案保留在项目内，使可复用库卡片保持通用。

适用场景

适用于使用 HyperFrames 制作视频时需要统一或复用动态图形风格、卡片与整场模板的场景。

限制与注意事项

目录包含的是草稿资源，并不保证每张卡片都通过了渲染质检。应在实际项目分辨率下对所选的卡片执行 lint 与渲染，检查其主帧与转场，并检查槽位文本在最大长度下的表现。素材若涉及媒体模板，可能依赖外部 assets/source.mp4，需先阅读对应 README。