mcpField
O
orbit-card

orbit-card

github.com/heygen-com创意与媒体74.7k10.5k 次安装今天更新
代码仓库

关于 orbit-card

用于制作特色卡片动画的 Hyperframes 组合技能，卡片进入画面、绕点状球体旋转后离开。标题、描述、强调色和轨道角度均可自定义。

主要功能

  1. 01卡片入场与退场动画
  2. 02绕点状球体完整旋转
  3. 03可自定义标题与描述
  4. 04可调整强调色和轨道角度
  5. 05插值处理的 Blender 相机运动

适用场景

  1. 01制作特色内容卡片动画
  2. 02展示产品标题与描述
  3. 03更改卡片的轨道角度

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/heygen-com/hyperframes --skill orbit-card

安装后在 Claude Code 中输入/orbit-card确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

orbit-card.html
registry-item.json
assets/
Archivo-LICENSE.txt
gsap-3.14.2.min.js
GSAP-NOTICE.txt
orbit-motion.js
orbit-scene.js
Three-LICENSE.txt
three.module.min.js

详细介绍

Orbit Card

一张居中的功能卡片，其圆形镂空框住一个点状球体。卡片从右侧进入（0.25–1.80 s），随后停留，轻微上下浮动并产生景深漂移；绕球体中心旋转一整圈（在 4.97 到 5.97 s 之间使用 smoothstep 插值），然后从左侧退出（7.35–8.55 s）。摄像机路径和卡片 F 曲线从经批准的 Blender 绑定导出，帧率为 30 fps，并进行插值；球体保持自身平移，并持续自转。标题、描述、强调色和轨道角度均可设为变量；无需调整关键帧即可使用 180° 和 720°。

构图 ID：orbit-card。时长为 10 s，帧率为 30 fps，分辨率为 1920×1080。

文件

  • orbit-card.html（3 KB）
  • assets/Archivo-LICENSE.txt（4 KB）
  • assets/Three-LICENSE.txt（1 KB）
  • assets/archivo-regular.ttf（108 KB）
  • assets/archivo-semibold.ttf（109 KB）
  • assets/gsap-3.14.2.min.js（128 KB）
  • assets/GSAP-NOTICE.txt（1 KB）
  • assets/orbit-motion.js（59 KB）
  • assets/orbit-scene.js（8 KB）
  • assets/three.core.min.js（554 KB）
  • assets/three.module.min.js（468 KB）

安装

运行 npx hyperframes add orbit-card 进行安装；默认情况下，上述文件会放在 compositions/orbit-card/ 下。然后从宿主 index.html 挂载该区块：

<div
  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"
></div>

直接指定构图文件并渲染自定义值：

npx --yes [email protected] render 'compositions/orbit-card/orbit-card.html' --variables '{"feature1Title":"Always in sync","feature1Desc":"Changes reach every screen the moment they happen."}'

变量

运行时通过 window.__hyperframes.getVariables() 读取；变量在构图根元素上通过 data-composition-variables 声明（使用单引号属性，内容为纯 JSON）。

id类型默认值标签 / 范围
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。

编辑规则（来自源项目）

  1. 保持 data-composition-variables 为单引号属性，JSON 使用普通的 "。切勿通过 Studio 的 Design 面板保存它。
  2. 不要在静态标记中放入 <canvas>；应在运行时创建。
  3. 让每个视觉状态都由 t 决定；可安全跳转时间才能使区块可渲染。

评论

支持 Markdown