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外部依赖

Kind	Dependency / Endpoint
cli	HyperFrames 官方 CLI（add / render）
package	GSAP 3.14.2（随块本地副本）
package	three.js（随块本地副本）与场景模块
package	Archivo 字体（regular/semibold，OFL）

4管控建议与判定依据

建议配套管控措施

面向 Agent

分级或逐次授权，建议在沙箱运行

面向管理者

审批流程、可回滚、全程审计

判定依据（文件路径与关键语句摘要）

scripts/: 执行本地脚本或命令: orbit-card.html（浏览器/渲染器端执行：挂载 scene、注册 paused timeline、hf-seek 重同步、?play 预览

审计说明： 。判级对象＝本 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结论

运动经过美术批准、可复制

零外链、离线可渲染

接口极小、上手快

2D/3D 对齐有明确换算

适合： 产品功能点揭晓型镜头（10s、单卡、品牌运动已定稿），希望「只换文案与强调色就能出片」的产品/营销短片。

不适合： 需要自定义编舞或一张卡以上并列的场合；希望所有运行时资源都走 CDN、不随包分发 three 的轻量流水线。

Install Agent-Ready

① Verified Mirror 2026-09-28

Option A · Direct DownloadDownload orbit-card.tar.gz

sha256: affb86a2ddee4335…

Option B · Copy Guide for Agent

install.json

agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit d2f0bc7f34.