SuperAPI AI 工具集

hyperframes

设计与创作

查看项目

更新于 10-15 20:27

技能介绍

用途:用 HTML 编写视频合成,制作动画、标题卡、叠加层、字幕、配音、音频响应视觉与场景转场。

主要能力:合成是带 data-* 计时属性的 HTML 文件,动画用 GSAP 时间线,外观用 CSS;框架负责片段可见性、媒体播放与时间线同步。支持子合成、外部合成文件、多轨道(视频、音频、叠加、字幕)、时间线自动嵌套。

必要用法:先做视觉识别——优先读取项目中的 DESIGN.md 或 visual-style.md,用户指定风格时读取 visual-styles.md 的 8 个命名预设;都没有则先问情绪、明暗画布、品牌色/字体三问再写 HTML。布局先于动画:先写出元素最完整可见那一帧的静态 HTML+CSS,.scene-content 用 width:100%;height:100%;padding;flex 充满场景,再用 gsap.from() 做入场、gsap.to() 做退场。时间线必须 paused:true 并注册 window.__timelines["<composition-id>"] = tl,时长由 data-duration 决定。视频必须 muted playsinline,音频单独用 <audio>。

限制与规则:禁止 Math.random()、Date.now() 等非确定性逻辑;不得动画 visibility/display 或调用媒体 play/pause/seek;不用 repeat:-1;时间线须同步构建,不能放在 async、setTimeout 或 Promise 中;不用 data-layer、data-end,不用 <br> 强制换行。多场景必须使用转场与入场动画,除最终场景外不得写退场动画。完成后运行 npx hyperframes lint、validate、inspect 检查,并按需运行 animation-map.mjs 校验动画编排。价格、收费与平台支持情况暂未提供。