Agent skill

Orbit Card

by heygen-com in heygen-com/hyperframes

HyperFrames block with one feature card that circles a dot sphere, driven by camera and card motion exported from an approved Blender rig.

Apache-2.0Auto-check passedMedia & Creative

Install Orbit Card

skills CLI
$ npx skills add heygen-com/hyperframes --skill orbit-card -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install heygen-com/hyperframes orbit-card --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .claude/skills && cp -r skills-src/registry/blocks/orbit-card .claude/skills/orbit-card && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
orbit-card
GitHub stars
59k
Used in
1 other repo
Token cost
~887 tokens
SKILL.md length
323 words
Files
13 (incl. assets)
Skills in repo
32
Repo updated
First seen
Licence
Apache-2.0

At a glance

HyperFrames block with one feature card that circles a dot sphere, driven by camera and card motion exported from an approved Blender rig.

  • Works in 3 steps: Keep data-composition-variables a… → Do not put in static markup; create it… → Keep every visual state a function of t;…
  • Presenting a single product feature with an animated orbiting card in a short video
  • SKILL.md covers Files, Install, Variables and Runtime contract, plus 1 more section
  • Runs JavaScript scripts from its folder; calls npx

What it does

One centered feature card with a circular cut-out frames a sphere made of dots. In the 10 second, 1920×1080 clip the card enters from the right, holds with a gentle bob and depth drift, makes a full turn around the sphere's centre and exits to the left. The sphere keeps its own translation and a constant spin.

Camera path and card curves were exported from the Blender rig at 30 fps and are interpolated during playback. Four variables are exposed: the card title (up to 28 characters), the description (up to 110), the accent color and the orbit angle, so 180° and 720° turns work without editing keyframes.

The folder bundles Archivo font files, GSAP and the Three scripts along with their licences. Install it with `npx hyperframes add orbit-card` and mount it from the host index.html.

When your agent uses it

  • Presenting a single product feature with an animated orbiting card in a short video
  • Turning a feature title and one-line description into a motion clip
  • Changing the orbit angle to set a half turn or two full turns for a different pace

Example prompts

  • “Add the orbit-card block and set the title to Always in sync with a one-sentence description.”
  • “Change the orbit card accent to a teal color and render the clip.”
  • “Make the card in the orbit block turn 180 degrees instead of a full circle.”

Requirements

  • The hyperframes CLI, run through npx

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

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

What it can do on your machine

Read from SKILL.md and the folder at commit 3aa6886. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Orbit Card loads about 887 tokens when it runs. Until then it costs about 34 tokens; SKILL.md has 323 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~34
When it runs · the whole SKILL.md, loaded when a task matches
~887

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from heygen-com/hyperframes at commit 3aa6886, republished under its Apache-2.0 licence (© heygen-com). 323 words, ~887 tokens.

Download SKILL.mdSave it as .claude/skills/orbit-card/SKILL.md (or your agent's skills folder). This skill also uses 12 other files; get the full folder from GitHub.
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
<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:

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).

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.

© heygen-com, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 12 other files (assets) in registry/blocks/orbit-card of heygen-com/hyperframes.

  • SKILL.md
  • assets/Archivo-LICENSE.txt
  • assets/GSAP-NOTICE.txt
  • assets/Three-LICENSE.txt
  • assets/archivo-regular.ttf
  • assets/archivo-semibold.ttf
  • assets/gsap-3.14.2.min.js
  • assets/orbit-motion.js
  • assets/orbit-scene.js
  • assets/three.core.min.js
  • assets/three.module.min.js
  • orbit-card.html
  • registry-item.json

Open the folder on GitHubat commit 3aa6886

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in heygen-com/hyperframes, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Orbit Card next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Orbit Card compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Orbit Card this skillheygen-com/hyperframes59k1 repos~887Automated safety check: PassApache-2.0
Plotbeat Data VideosUnclecheng-li/AI_Animation1.5k—~2.6kAutomated safety check: PassMIT
Yuv Viral Videohoodini/ai-agents-skills282—~7.5kAutomated safety check: NotesNone
Talking-Head Video Pipelinenaive-kun/naive-video-skill132—~3.3kAutomated safety check: PassMIT
Duo Foldable Phone Comparisonheygen-com/hyperframes-community-skills183—~2kAutomated safety check: PassApache-2.0
X Posting License Videoheygen-com/hyperframes-community-skills183—~1.2kAutomated safety check: PassApache-2.0

Similar skills

  • Plotbeat Data Videos

    Unclecheng-li/AI_Animation

    Turns a local CSV or JSON file, or data fetched from an approved source, into an editable data-visualization video by adapting HyperFrames templates.

    1.5k GitHub stars~2.6k tokensUpdated 4 days ago
    Media & CreativeAuto-check passed
  • Yuv Viral Video

    hoodini/ai-agents-skills

    Edit any selfie or screen-share footage into a viral short-form video in YUV.AI's signature style — Apple-style liquid-glass cards (real CSS backdrop-filter), dark-mode polish, MrBeast-paced cuts…

    282 GitHub stars~7.5k tokensUpdated 2 mo ago
    Media & CreativeAuto-check: notes
  • Talking-Head Video Pipeline

    naive-kun/naive-video-skill

    Turns raw or rough-cut talking-head footage into a captioned, animated final video through a staged, resumable production pipeline.

    132 GitHub stars~3.3k tokensUpdated 1 mo ago
    Media & CreativeAuto-check passed
  • Duo Foldable Phone Comparison

    heygen-com/hyperframes-community-skills

    Builds side-by-side comparison and meme videos on a fixed photo of hands holding an open foldable phone, with your own HTML playing in each screen.

    183 GitHub stars~2k tokensUpdated 10 days ago
    Media & CreativeAuto-check passed
  • X Posting License Video

    heygen-com/hyperframes-community-skills

    Builds a short animated posting-license card video from an X profile's name, handle, counters and avatar, using a fixed template that the agent only fills in and renders.

    183 GitHub stars~1.2k tokensUpdated 10 days ago
    Media & CreativeAuto-check passed
  • Build a Vietnamese vertical TikTok explainer in the "MỔ XẺ PAPER AI" (AI paper dissection) format with HyperFrames (HTML/CSS/GSAP → MP4), Noti.vn style.

    126 GitHub stars~4.8k tokensUpdated yesterday
    Media & CreativeAuto-check passed

More from heygen-com/hyperframes

All 32 skills in this repo
  • HyperFrames Animation

    heygen-com/hyperframes

    Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.

    59k GitHub starsUsed in 3 repos~2.1k tokens
    Auto-check passed
  • Embedded Video Captions

    heygen-com/hyperframes

    Adds captions to a single-subject talking-head video without editing the footage, from plain subtitles to cinematic text placed behind the speaker.

    59k GitHub starsUsed in 3 repos~8.6k tokens
    Auto-check passed
  • Weekly Changelog Video

    heygen-com/hyperframes

    Turns a weekly changelog markdown file into a branded HyperFrames video with voiceover, animated mock-UI scenes and captions, using fonts, background and scripts bundled in the skill.

    59k GitHub stars~3.3k tokensUpdated today
    Auto-check passed
  • Faceless Explainer Video

    heygen-com/hyperframes

    Turns an article, notes or a topic brief into an explainer video whose visuals are invented per scene, built frame by frame in HyperFrames with no footage.

    59k GitHub starsUsed in 3 repos~7.7k tokens
    Auto-check: notes
  • Figma to HyperFrames

    heygen-com/hyperframes

    Imports Figma assets, brand tokens, components and motion into a HyperFrames video composition, using the Figma REST API with a connector or native export for shaders.

    59k GitHub starsUsed in 3 repos~4.5k tokens
    Auto-check: notes
  • HyperFrames Media Use

    heygen-com/hyperframes

    Finds, generates and edits media for HyperFrames video projects: music, sound effects, images, icons, logos, voiceovers, captions and color grades.

    59k GitHub stars~2.4k tokensUpdated today
    Auto-check passed

Questions about Orbit Card

What does Orbit Card do?

HyperFrames block with one feature card that circles a dot sphere, driven by camera and card motion exported from an approved Blender rig. One centered feature card with a circular cut-out frames a sphere made of dots. In the 10 second, 1920×1080 clip the card enters from the right, holds with a gentle bob and depth drift, makes a full turn around the sphere's centre and exits to the left.

When should I use Orbit Card?

Orbit Card fits situations like: presenting a single product feature with an animated orbiting card in a short video; turning a feature title and one-line description into a motion clip; changing the orbit angle to set a half turn or two full turns for a different pace.

How do I install Orbit Card in Claude Code?

Run `npx skills add heygen-com/hyperframes --skill orbit-card -a claude-code`. Or copy the skill folder (registry/blocks/orbit-card in heygen-com/hyperframes) into .claude/skills/orbit-card in your project. Claude Code loads it when a task matches its description.

How do I install Orbit Card in Codex?

Run `npx skills add heygen-com/hyperframes --skill orbit-card -a codex`. Or copy the skill folder (registry/blocks/orbit-card in heygen-com/hyperframes) into .agents/skills/orbit-card in your project. Codex loads it when a task matches its description.

Can I use Orbit Card in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add heygen-com/hyperframes --skill orbit-card -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/orbit-card, .gemini/skills/orbit-card, .github/skills/orbit-card and .opencode/skills/orbit-card in your project.

What does Orbit Card need to run?

Going by SKILL.md and its folder, Orbit Card needs JavaScript for the scripts in its folder and the command-line tools its instructions call (npx). Our summary lists: The hyperframes CLI, run through npx.

Does Orbit Card access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Orbit Card safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Orbit Card use?

Orbit Card is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Orbit Card use?

About 887 tokens (SKILL.md is roughly 3.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Orbit Card?

Skills that share tags, products or a category with Orbit Card: Plotbeat Data Videos (Unclecheng-li/AI_Animation, 1.5k stars), Yuv Viral Video (hoodini/ai-agents-skills, 282 stars), Talking-Head Video Pipeline (naive-kun/naive-video-skill, 132 stars) and Duo Foldable Phone Comparison (heygen-com/hyperframes-community-skills, 183 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Orbit Card?

heygen-com (a GitHub organization) maintains it in heygen-com/hyperframes, which has 59,375 GitHub stars. The repository holds 32 skills in this directory. The repository was last updated on October 9, 2026.

Source: heygen-com/hyperframes on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.