SuperAPI AI 工具集

orbit-card

设计与创作

查看项目

更新于 10-15 22:13

技能介绍

用途:orbit-card 是 HyperFrames 的一个视频合成块,用于生成 1920×1080、10 秒、30fps 的动效画面。画面为一张居中的功能卡片,卡片带圆形镂空框住一个点阵球体;卡片从右侧进入(0.25–1.80 秒),保持时带轻微上下浮动与景深漂移,随后绕球体中心完整环绕一圈(4.97–5.97 秒间用 smoothstep 过渡),最后向左退出(7.35–8.55 秒)。相机路径与卡片 F-curve 由已批准的 Blender 绑定以 30fps 导出并插值,球体保持自身平移与恒定自转。

主要能力:标题、描述、强调色和环绕角度均为变量;环绕角度设为 180° 或 720° 无需改动关键帧。运行时通过 window.__hyperframes.getVariables() 读取变量,变量在合成根节点以 data-composition-variables 声明(单引号属性、纯 JSON)。

使用方式:用 npx hyperframes add orbit-card 安装,文件默认落在 compositions/orbit-card/ 下;再从宿主 index.html 挂载该块(data-composition-id="orbit-card"、data-composition-src="compositions/orbit-card/orbit-card.html"、data-start="0"、data-duration="10"、data-track-index="1"、data-width="1920"、data-height="1080")。渲染自定义值可直接指定合成文件:npx --yes hyperframes@0.8.12 render 'compositions/orbit-card/orbit-card.html' --variables '{"feature1Title":"Always in sync","feature1Desc":"Changes reach every screen the moment they happen."}'。

变量:feature1Title(字符串,默认 "Always in sync",最长 28 字符)、feature1Desc(字符串,默认 "Changes reach every screen the moment they happen.",最长 110 字符)、feature1Accent(颜色,默认 "#4cc9ff")、cardOrbitDegrees(数字,默认 360,范围 -36000–36000,步长 1)。

限制与编辑规则:运行时为一个暂停的 GSAP 时间线,注册为 window.__timelines["orbit-card"],通过 hf-seek CustomEvent 重新同步,每帧都是时间的闭式函数(仅用带种子的 PRNG,无 rAF 循环、无 Date.now)。渲染器为 GSAP,无外部运行时依赖(本地提供),使用本地字体 assets/archivo-regular.ttf 与 assets/archivo-semibold.ttf。需保持 data-composition-variables 为单引号属性与纯 JSON,不要经 Studio 的 Design 面板保存;不要在静态标记中放 <canvas>,应在运行时创建;每个视觉状态都须是 t 的函数以保证可 seek 渲染。收费、价格与平台信息暂未提供。