mcpField
O
orbit-card

orbit-card

github.com/heygen-comCreative & media74.7k10.5k installsUpdated today
Repository

About orbit-card

A Hyperframes composition skill for a feature card that enters, orbits a dot sphere, and exits. The title, description, accent, and orbit angle can be customized.

Key features

  1. 01Card entrance and exit animation
  2. 02Full orbit around a dot sphere
  3. 03Customizable title and description
  4. 04Adjustable accent and orbit angle
  5. 05Interpolated Blender camera motion

Use cases

  1. 01Animating a feature highlight card
  2. 02Presenting a product title and description
  3. 03Changing the card's orbit angle

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/heygen-com/hyperframes --skill orbit-card

After installing, type/orbit-cardin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

orbit-card.html
registry-item.json
assets/
Archivo-LICENSE.txt
gsap-3.14.2.min.js
GSAP-NOTICE.txt
orbit-motion.js
orbit-scene.js
Three-LICENSE.txt
three.module.min.js

Details

From the project README

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:

<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 [email protected] 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).

idtypedefaultlabel / range
feature1Titlestring"Always in sync"Card title max 28 chars
feature1Descstring"Changes reach every screen the moment they happen."Card description max 110 chars
feature1Accentcolor"#4cc9ff"Card accent
cardOrbitDegreesnumber360Card 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 <canvas> in static markup; create it at runtime.
  3. Keep every visual state a function of t; seek-safety is what makes the block renderable.

Comments

Markdown supported