orbit-card
A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.
1How It Works & Mechanism
Output shot: A centered feature card (with a circular cutout framing the dot sphere) enters from the right (0.25–1.80s) → a hold segment with subtle vertical floating and depth drift → a full orbit around the sphere center (4.97–5.97s, using smoothstep) → exits to the left (7.35–8.55s).
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).
The motion is not designed on the fly, but exported from an approved Blender rig and interpolated within the block: camera path and card F-curves are baked into constant tables at 30fps, with source file provenance recorded in the data.
// 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",
Therefore, there are only 4 variables (title, description, accent color, orbit angle), and the orbit angle can be set to 180°/720° without touching keyframes.
Title, description, accent and the orbit angle are variables; 180° and 720° work without touching keys.
Structurally divided into three layers: composition (109 lines) handles only mounting and timeline; scene logic resides in assets/orbit-scene.js (WebGLRenderer and geometry); motion constants reside in assets/orbit-motion.js (59 KB); and the module receives variables as parameters because imported modules cannot access __hyperframes in this composition.
// Built per call from the variables the mounting module passes in: an imported // module only sees the page's __hyperframes, not its composition's.
Explicit coordinate conversion is applied: Blender X/Y/Z → Three X/Z/−Y, with 100 raw CSS pixels = 1 rig unit, ensuring alignment between 2D typography and the 3D scene.
// Blender X/Y/Z -> Three X/Z/-Y. 100 original CSS pixels = one rig unit.
Input sanitization: orbit angle is validated as a finite number, accent color is checked against a 6-digit hex regex with fallback to default, and title/description are guarded with String fallbacks.
const number = (v, fallback) => (Number.isFinite(Number(v)) ? Number(v) : fallback); … const accent = /^#[0-9a-f]{6}$/i.test(V.feature1Accent) ? V.feature1Accent : "#4cc9ff";
seek is clamped within [0,10]; standalone preview uses ?play (and ?loop) query parameters to drive the timeline.
timeline.totalTime(Math.max(0, Math.min(10, event.detail.time)), true); … if (query.has("play")) { timeline.repeat(query.has("loop") ? 999 : 0);
Fully local: three and gsap are bundled copies, and the Archivo font points to local ttf files via @font-face (regular/semibold, OFL); no http(s) references exist within this block directory.
font-family: Archivo; font-weight: 400; src: url("assets/archivo-regular.ttf");
2Core Capabilities
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| cli | HyperFrames 官方 CLI（add / render） |
| package | GSAP 3.14.2（随块本地副本） |
| package | three.js（随块本地副本）与场景模块 |
| package | Archivo 字体（regular/semibold，OFL） |
4Recommended Governance & Evidence
- scripts/: Executes local script or command: orbit-card.html (browser/renderer execution: mounts scene, registers paused timeline, hf-seek resync, ?play preview)
5Second-Pass Verification
- [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 —— 四处一致。
6Verdict & Scenarios
affb86a2ddee4335…