SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场hyperframes

hyperframes

设计与创作

查看项目

更新于 10-15 15:43

技能介绍

用途

HyperFrames 以 HTML 作为视频的事实来源。一个“合成（composition）”就是一个 HTML 文件：通过 data-* 属性标注时间信息，通过 GSAP 时间轴控制动画，通过 CSS 控制外观。框架本身负责片段可见性、媒体播放和时间轴同步。该技能适用于创建视频合成、动画、标题卡、叠加层、字幕、配音、音频可视化效果以及场景转场等。

主要能力与核心结构

  • 片段属性：id、data-start（秒或片段 ID 引用，如 "el-1"、"intro + 2"）、data-duration（img/div/合成必填，视频/音频默认使用媒体时长）、data-track-index（整数，同轨道片段不能重叠）、data-media-start（裁剪偏移）、data-volume（0-1）。data-track-index 不影响视觉层级，视觉叠加需用 CSS z-index。
  • 合成片段属性：data-composition-id、data-start、data-duration（优先于 GSAP 时间轴时长）、data-width/data-height、data-composition-src（可选，指向外部 HTML 文件）。
  • 合成结构：通过 data-composition-src 加载的子合成使用 <template> 包裹；独立合成（主 index.html）不使用 <template>，而是将 data-composition-id 的 div 直接放在 <body> 中。在独立文件中使用 <template> 会隐藏全部内容并破坏渲染。
  • 视频与音频：视频必须 muted playsinline，音频始终是独立的 <audio> 元素。
  • 时间轴约定：所有时间轴以 { paused: true } 开始，由播放器控制播放；必须注册 window.__timelines["<composition-id>"] = tl；框架自动嵌套子时间轴，不要手动添加；时长来自 data-duration，而非 GSAP 时间轴长度。

使用方式

在 OpenDesign 环境（$OD_PROJECT_DIR 已设置）中运行时的推荐流程：

  1. 选择一个隐藏缓存槽（点号前缀目录），避免源文件出现在项目文件列表中。
  2. 通过 Open Design 的确定性脚手架获取一个可直接渲染的模板（包含 hyperframes.json、meta.json、带 GSAP CDN 与 window.__timelines.main 注册的 index.html）。
  3. 只编辑 index.html：如需要非默认时长则修改根节点的 data-duration，替换 <style> 中的占位配色，添加 1–3 个文本/图像片段 <div>，并在既有的 window.__timelines["main"] = gsap.timeline({paused:true}) 块中追加匹配的 GSAP 补间。保持最小编辑量。
  4. 通过 OD 守护进程派发渲染，不要在 shell 中自行运行 HyperFrames render；使用 media generate 派发并以 media wait 轮询直到完成，最终输出为 .mp4 文件名。

可在自有 shell 中直接运行的较轻子命令（不需启动 Chrome）：lint（校验合成）、transcribe（生成字幕）、tts（生成旁白）。render/inspect/preview 等依赖 Chrome 的操作应通过守护进程派发。

方法要点

  • 视觉标识门（Visual Identity Gate）：按顺序检查项目中的 DESIGN.md、visual-style.md、用户指定的风格（参考 visual-styles.md 的 8 个预设），若都没有则先提出 3 个问题（情绪、亮/暗画布、品牌色/字体/视觉参考）再写 HTML。每个合成的配色与字体都必须可追溯到 DESIGN.md、visual-style.md 或明确的用户指示。
  • 先布局后动画：先把每个元素在其最可见时刻的位置写成静态 HTML+CSS，再用 gsap.from() 添加入场、gsap.to() 添加出场。.scene-content 容器须填满场景（width/height 100%、padding、flex 列布局、box-sizing: border-box），用 padding 内推内容，绝不使用 position: absolute + top 定位内容容器（绝对定位仅用于装饰元素）。
  • 硬性规则：确定性——禁止 Math.random()、Date.now() 或基于时间的逻辑，需要伪随机时使用带种子的 PRNG（如 mulberry32）。GSAP 只能动画视觉属性，不得动画 visibility/display，不得调用 video.play()/audio.play()。禁止同一元素同一属性被多个时间轴同时动画。禁止 repeat: -1，需按合成时长计算精确重复次数。时间轴必须同步构建，不得放在 async/await、setTimeout 或 Promise 中。

适用场景

适用于需要在 HTML/CSS/GSAP 体系下制作产品展示、演示片段、标题卡、叠加层、字幕、配音、音频可视化等视频内容的场景，也适用于与 OpenDesign 集成后自动产出 .mp4 的工作流。

限制与注意事项

  • 多场景合成必须始终使用转场（不得跳切），每个场景的每个元素都必须有入场动画。
  • 不要忘记 window.__timelines 注册；不要用视频承载音频；不要把视频嵌套在带时间信息的 div 中；不要使用 data-layer（应用 data-track-index）或 data-end（应用 data-duration）；不要动画视频元素尺寸（应动画其外层 div）；不要对媒体调用 play/pause/seek；不要创建没有 data-composition-id 的顶层容器；不要对后续场景的片段元素使用 gsap.set()；内容文本不要使用 <br>（短展示标题除外）。
  • 不要在项目根目录放置 hyperframes.json / meta.json / index.html，应放入隐藏缓存目录，避免污染项目文件列表。

其他信息（如具体定价、收费模式、支持平台范围等）暂未提供。