1实现原理 · 为什么它能做到
产出镜头：一张居中功能卡（圆形镂空框住点阵球）从右入场（0.25–1.80s）→ 带轻微上下浮动与纵深漂移的保持段 → 绕球心公转一整圈（4.97–5.97s，用 smoothstep）→ 向左退出（7.35–8.55s）。
registry/blocks/orbit-card/SKILL.md
One centred feature card with a circular cut-out framing a dot sphere. The card enters from the right (0.25–1.80 s), holds with a subtle bob and depth drift, orbits a full turn around the sphere's centre (smoothstep between 4.97 and 5.97 s), and exits left (7.35–8.55 s).
注：这里在做什么：这是「功能点揭晓」型镜头——卡片是被介绍的对象，球体是背景锚点。
运动不是现场设计出来的，而是从已批准的 Blender rig 导出后在块内插值：相机路径与卡片 F-curve 按 30fps 烘焙成常量表，来源文件也写在数据里。
registry/blocks/orbit-card/assets/orbit-motion.js
// Approved Blender motion, frame 1 = 0 seconds; generated from the existing saved-rig export. … fps: 30, … orbitFrames: [150, 180], … source: "orbit-card-motion-rig.blend",
注：这里在做什么：把「美术在 Blender 里审过的运动」冻结成数据资产，代码只做插值——所以本块的运动不可在页面上随意改。
因此变量只有 4 个（标题、描述、强调色、公转角度），且公转角度可给到 180°/720° 而不必动关键帧。
registry/blocks/orbit-card/SKILL.md
Title, description, accent and the orbit angle are variables; 180° and 720° work without touching keys.
注：这里在做什么：与本批其它高自由度块相反——本块刻意把运动锁死，只开放文案与品牌色。
结构上分三层：composition（109 行）只做挂载与时间线；场景在 assets/orbit-scene.js（WebGLRenderer 与几何）；运动常量在 assets/orbit-motion.js（59 KB）；且模块以参数接收变量，因为导入模块看不到本 composition 的 __hyperframes。
registry/blocks/orbit-card/assets/orbit-scene.js
// Built per call from the variables the mounting module passes in: an imported // module only sees the page's __hyperframes, not its composition's.
注：这里在做什么：说明 HF 的作用域细节——变量由挂载方传进 createOrbitScene(V)，而不是模块自己去读全局。
坐标系做了显式换算：Blender X/Y/Z → Three X/Z/−Y，且 100 原始 CSS 像素 = 1 rig 单位，保证 2D 排版与 3D 场景对齐。
registry/blocks/orbit-card/assets/orbit-scene.js
// Blender X/Y/Z -> Three X/Z/-Y. 100 original CSS pixels = one rig unit.
注：这里在做什么：卡片是 2D DOM/CSS 排版，球体是 WebGL——单位换算就是让两者同框的前提。
输入收敛：公转角度走有限数判断，强调色用六位 hex 正则校验、非法回默认，标题/描述做 String 兜底。
registry/blocks/orbit-card/assets/orbit-scene.js
const number = (v, fallback) => (Number.isFinite(Number(v)) ? Number(v) : fallback); … const accent = /^#[0-9a-f]{6}$/i.test(V.feature1Accent) ? V.feature1Accent : "#4cc9ff";
注：这里在做什么：4 个变量里两个是文本、一个是颜色，全部先做类型与值域收敛再进场景。
seek 被夹在 [0,10]；独立预览用 ?play（与 ?loop）查询参数驱动时间线。
registry/blocks/orbit-card/orbit-card.html
timeline.totalTime(Math.max(0, Math.min(10, event.detail.time)), true); … if (query.has("play")) { timeline.repeat(query.has("loop") ? 999 : 0);
注：这里在做什么：块既能被渲染器逐帧 seek，也能单独开页面自播，方便人工过眼睛。
全本地：three 与 gsap 都是随包副本，字体 Archivo 亦以 @font-face 指向本地 ttf（regular/semibold，OFL），本块目录内没有任何 http(s) 引用。
registry/blocks/orbit-card/orbit-card.html
font-family: Archivo; font-weight: 400; src: url("assets/archivo-regular.ttf");
注：这里在做什么：离线可渲染的一块——连字体都不走 Google Fonts；three 经 importmap 指向 ./assets/。
2核心能力
01单卡 + 点阵球的「功能揭晓」镜头（1920×1080、10s）
02Blender 授权运动烘焙数据（30fps 相机位姿数组 + 卡片 F-curve，orbitFrames [150,180]）
034 个变量的最小文案接口（feature1Title ≤28 字符、feature1Desc ≤110 字符、feature1Accent、cardOrbitDegrees ±36000）
04公转整圈不需改关键帧（180°/720° 均为变量可及）
05本地字体排版（Archivo regular/semibold @font-face，OFL 文本随块）
06独立预览：?play 自播、?loop 循环
07脱离 Studio 也能出片：直接渲染并覆盖卡片文案
3外部依赖
| 类型 | 依赖 |
|---|---|
| cli | HyperFrames 官方 CLI（add / render） |
| package | GSAP 3.14.2（随块本地副本） |
| package | three.js（随块本地副本）与场景模块 |
| package | Archivo 字体（regular/semibold，OFL） |
4风险提醒 风险提醒：蓝色 · 知晓即可
风险提醒：蓝色 · 知晓即可
- 运动不可调（设计使然） — 相机与卡片轨迹被烘焙（orbit-motion.js 常量表），要改节奏只能改数据表或换块，不适合需要现场调编舞的项目。
- 单卡信息量有限 — 变量只支持一张卡（feature1*），多要点需复制块或改装 scene 模块。
- 文案长度受限 — 标题 max 28 字符、描述 max 110 字符（SKILL.md 变量表），超长文案需要改排版逻辑。
- 随包 three 体积 — three.module.min.js 与 three.core.min.js 合计约 1 MB 随块分发（对比 glass-shard-title 用内联打包产物减少文件数），对体量敏感的项目需评估。
风险提醒：蓝色，知晓即可。判级对象＝本 block 目录（SKILL.md + composition + scene 模块 + 运动数据 + 随包 three/gsap + 字体）：全目录零 http(s) 外链（连字体都本地）、零凭证/env 读取、零 shell 脚本、零写盘、零数据外发。唯一执行面是浏览器内的 WebGL 场景与 ES module，属自带本地可执行内容。安装/渲染走官方 CLI 生态。据此取 blue。
5第二遍独立确认
- [ok] 变量数与声明一致性（frontmatter 自称 4 variables） — 脚本实测：SKILL.md 变量表 4 行、html data-composition-variables 解析出 4 项、frontmatter 写 4 —— 一致，为本批最小变量面。
- [ok] 「approved Blender motion」声称的真实性 — assets/orbit-motion.js 首行注释与字段（fps: 30、frameStart: 1、orbitFrames: [150,180]、source: "orbit-card-motion-rig.blend"）逐字命中；运动确为烘焙数据而非现场函数。
- [ok] 零外链声称 — 对 orbit-card.html / orbit-scene.js / orbit-motion.js 做 http(s):// grep：零命中；脚本与字体全为 ./assets/ 相对路径。
- [ok] registry-item 文件清单 vs 盘上文件 — 声明 12 个文件（含两份许可与两枚字体）全部存在于盘上，无远端 url 兜底。
- [ok] 无随机/时钟依赖 — 本目录 grep Math.random / Date.now / requestAnimationFrame：零命中；运动全部来自常量表插值。
- [ok] 时长一致性 — registry-item duration 10、html data-duration 10、MOTION.duration 10、SKILL.md 标题行 10s —— 四处一致。
6结论
适合：产品功能点揭晓型镜头（10s、单卡、品牌运动已定稿），希望「只换文案与强调色就能出片」的产品/营销短片。
不适合：需要自定义编舞或一张卡以上并列的场合；希望所有运行时资源都走 CDN、不随包分发 three 的轻量流水线。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 orbit-card.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentaffb86a2ddee4335…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库heygen-com / heygen-com/hyperframes
原始 GitHubheygen-com/hyperframes ↗
Stars44283
最近推送2026-09-06
本 skill commit
d2f0bc7f34许可Apache-2.0（仓库根 LICENSE = Apache License Version 2.0；块内随带第三方许可文本：three.js MIT、GSAP 标准许可、Geist/Archivo/Cormorant Garamond OFL 等）
本站信息
收录日期2026-09-06
分类内容创作
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。