> **orbit-card** — skill 12 of 34 in [heygen-com/hyperframes](https://skillsdocs.com/heygen-com/hyperframes).
>
> Book (all skills, one file): https://skillsdocs.com/heygen-com/hyperframes.md
> Machine manifest: https://skillsdocs.com/heygen-com/hyperframes/.well-known/agent-skills/index.json
> Install the book: `npx skills add heygen-com/hyperframes`
> Upstream: https://github.com/heygen-com/hyperframes/blob/main/registry/blocks/orbit-card/SKILL.md @ `main`
> Raw bytes, no header: https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/orbit-card/SKILL.md
> Base for relative paths: https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/orbit-card/
> Licence: Apache-2.0 — https://spdx.org/licenses/Apache-2.0.html
>
> Bundled files (12), referenced from this skill's directory:
> - `assets/Archivo-LICENSE.txt` — https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/orbit-card/assets/Archivo-LICENSE.txt
> - `assets/archivo-regular.ttf` — https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/orbit-card/assets/archivo-regular.ttf
> - `assets/archivo-semibold.ttf` — https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/orbit-card/assets/archivo-semibold.ttf
> - `assets/gsap-3.14.2.min.js` — https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/orbit-card/assets/gsap-3.14.2.min.js
> - `assets/GSAP-NOTICE.txt` — https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/orbit-card/assets/GSAP-NOTICE.txt
> - `assets/orbit-motion.js` — https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/orbit-card/assets/orbit-motion.js
> - `assets/orbit-scene.js` — https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/orbit-card/assets/orbit-scene.js
> - `assets/Three-LICENSE.txt` — https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/orbit-card/assets/Three-LICENSE.txt
> - `assets/three.core.min.js` — https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/orbit-card/assets/three.core.min.js
> - `assets/three.module.min.js` — https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/orbit-card/assets/three.module.min.js
> - `orbit-card.html` — https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/orbit-card/orbit-card.html
> - `registry-item.json` — https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/orbit-card/registry-item.json
>
> Content © its authors, served unmodified. Takedown: https://github.com/DreambaseAI/skillsdocs/issues/new?labels=takedown&title=Takedown+request
---
name: orbit-card
description: A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.
---
# Orbit Card
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 camera path and card F-curves are exported from the approved Blender rig at 30 fps and interpolated; the sphere keeps its own translation and a constant spin. Title, description, accent and the orbit angle are variables; 180° and 720° work without touching keys.
Composition id: `orbit-card`. Duration 10 s at 30 fps, 1920×1080.
## Files
- `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)
## Install
Install with `npx hyperframes add orbit-card`; by default the files above land under `compositions/orbit-card/`. Then mount the block from the host `index.html`:
```html
```
Render with custom values by targeting the composition file directly:
```sh
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."}'
```
## Variables
Read at runtime via `window.__hyperframes.getVariables()`; declared on the composition root as `data-composition-variables` (single-quoted attribute, plain JSON).
| id | type | default | label / range |
| ------------------ | ------ | ------------------------------------------------------ | -------------------------------------- |
| `feature1Title` | string | `"Always in sync"` | Card title max 28 chars |
| `feature1Desc` | string | `"Changes reach every screen the moment they happen."` | Card description max 110 chars |
| `feature1Accent` | color | `"#4cc9ff"` | Card accent |
| `cardOrbitDegrees` | number | `360` | Card orbit degrees -36000–36000 step 1 |
## Runtime contract
- One paused GSAP timeline registered as `window.__timelines["orbit-card"]`.
- Re-syncs on the `hf-seek` CustomEvent; every frame is a closed-form function of time (seeded PRNG only, no rAF loops, no Date.now).
- Renderer: GSAP.
- External runtime dependencies: none (served locally).
- Local fonts: assets/archivo-regular.ttf, assets/archivo-semibold.ttf.
## Editing rules (from the source project)
1. Keep `data-composition-variables` a single-quoted attribute with plain `"` JSON. Never save it through Studio's Design panel.
2. Do not put `