orbit-card

heygen-com/hyperframes

Animated feature card orbiting a sphere with customizable text and motion.

What is orbit-card?

A 10-second HyperFrames composition that displays a feature card with title and description orbiting around a central dot sphere. Use it for product showcases, feature highlights, or promotional animations in web projects that support HyperFrames.

Renders a centered feature card with circular cutout framing a spinning dot sphere
Animates card entrance from right, orbital motion around sphere center, and exit to left
Supports 4 customizable variables: title, description, accent color, and orbit angle (±36000°)
Exports camera motion and card keyframes from Blender rig at 30 fps for smooth interpolation
Maintains seek-safe timeline for frame-accurate rendering and scrubbing
Includes local fonts (Archivo) and Three.js for 3D sphere rendering

How to install orbit-card

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

Prerequisites

Node.js and npx installed
HyperFrames CLI (npx hyperframes)
Host HTML file with composition mounting support
1920×1080 canvas or container for rendering

Claude Code

Cursor

Windsurf

Cline

How to use orbit-card

1.Install the skill with `npx hyperframes add orbit-card`
2.Mount the composition in your host HTML using the data-composition-id div with src, duration, and dimensions
3.Customize variables by setting data-composition-variables JSON or passing --variables to the render command
4.Call `window.__hyperframes.getVariables()` at runtime to read current variable values
5.Trigger playback via the registered GSAP timeline at `window.__timelines["orbit-card"]` or seek with hf-seek CustomEvent

Use cases

Good for

Showcase product features in a rotating card presentation on marketing websites
Create animated feature highlights for SaaS landing pages with custom branding colors
Build promotional videos with multiple orbit-card compositions sequenced together
Render feature cards programmatically with different titles and descriptions via CLI
Integrate into HyperFrames-based video generation pipelines for automated content creation

Who it's for

Web developers building HyperFrames-based animation systems
Marketing teams creating product showcase videos
Video automation engineers rendering dynamic feature presentations
Design teams prototyping animated UI components

orbit-card FAQ

Can I change the orbit angle after rendering?

Yes, the cardOrbitDegrees variable accepts any value from -36000 to 36000 in 1° increments. 360° is one full rotation; 720° is two rotations.

How do I customize the card text?

Set feature1Title (max 28 chars) and feature1Desc (max 110 chars) via data-composition-variables in HTML or --variables in the CLI render command.

What's the output resolution and duration?

Fixed at 1920×1080 pixels, 10 seconds at 30 fps (300 frames total).

Can I seek or scrub through the animation?

Yes, the composition is seek-safe. Dispatch an hf-seek CustomEvent or control the GSAP timeline directly via window.__timelines["orbit-card"].

What are the external dependencies?

None—Three.js, GSAP, and fonts are all served locally within the compositions folder.

Full instructions (SKILL.md)

Source of truth, from heygen-com/hyperframes.

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:

<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."}'

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)

Keep data-composition-variables a single-quoted attribute with plain " JSON. Never save it through Studio's Design panel.
Do not put <canvas> in static markup; create it at runtime.
Keep every visual state a function of t; seek-safety is what makes the block renderable.