Skills
Skill 12 of 34
A single feature card orbits a dot sphere on approved Blender camera motion.
1 minute · 306 words · 5 sections
Install
npx skills add heygen-com/hyperframes --skill orbit-cardnpx skills add heygen-com/hyperframes/plugin marketplace add heygen-com/hyperframesThe first command installs just this skill, by the name in its SKILL.md; the second installs the whole repository.
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.
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 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:
<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>Render with custom values by targeting the composition file directly:
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."}'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 |
window.__timelines["orbit-card"].hf-seek CustomEvent; every frame is a closed-form function of time (seeded PRNG only, no rAF loops, no Date.now).data-composition-variables a single-quoted attribute with plain " JSON. Never save it through Studio’s Design panel.<canvas> in static markup; create it at runtime.A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.
The verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.
main, last pushed 23 September 2026.SKILL.md, not by matching a directory convention. 3 distinct layouts observed: .agents/skills/*/SKILL.md, registry/blocks/*/SKILL.md, skills/*/SKILL.md.h1 and no skipped levels:.claude-plugin/marketplace.json by HeyGen, declaring 2 plugins. It is read for editorial metadata only — never as the skill index, which is always the repository tree./heygen-com/hyperframes.md, and each skill at its own .md URL.12 files · 1.4 MB
Everything this skill ships beside its prose. 8 of them are set here as subchapters of skill 12; the other 4 are described rather than reproduced.
Templates, schemas and fixtures the skill draws on.
Everything else published alongside the skill.