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.
HyperFrames block with one feature card that circles a dot sphere, driven by camera and card motion exported from an approved Blender rig.
$ npx skills add heygen-com/hyperframes --skill orbit-card -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install heygen-com/hyperframes orbit-card --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "orbit-card" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/orbit-card into .claude/skills/orbit-card/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "orbit-card", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/orbit-cardType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add heygen-com/hyperframes --skill orbit-card -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install heygen-com/hyperframes orbit-card --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .agents/skills && cp -r skills-src/registry/blocks/orbit-card .agents/skills/orbit-card && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "orbit-card" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/orbit-card into .agents/skills/orbit-card/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "orbit-card", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add heygen-com/hyperframes --skill orbit-card -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install heygen-com/hyperframes orbit-card --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/registry/blocks/orbit-card .cursor/skills/orbit-card && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "orbit-card" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/orbit-card into .cursor/skills/orbit-card/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "orbit-card", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/heygen-com/hyperframes.git --path registry/blocks/orbit-card--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add heygen-com/hyperframes --skill orbit-card -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install heygen-com/hyperframes orbit-card --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/registry/blocks/orbit-card .gemini/skills/orbit-card && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "orbit-card" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/orbit-card into .gemini/skills/orbit-card/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "orbit-card", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install heygen-com/hyperframes orbit-cardInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add heygen-com/hyperframes --skill orbit-card -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .github/skills && cp -r skills-src/registry/blocks/orbit-card .github/skills/orbit-card && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "orbit-card" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/orbit-card into .github/skills/orbit-card/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "orbit-card", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add heygen-com/hyperframes --skill orbit-card -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install heygen-com/hyperframes orbit-card --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/registry/blocks/orbit-card .opencode/skills/orbit-card && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "orbit-card" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/orbit-card into .opencode/skills/orbit-card/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "orbit-card", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
orbit-cardHyperFrames 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. 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.
3 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 3aa6886. It shows what the files ask for, not the result of running them.
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.
Ships script files (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
npxFrom the folder's file list and the shell code blocks in SKILL.md.
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.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from heygen-com/hyperframes at commit 3aa6886, republished under its Apache-2.0 licence (© heygen-com). 323 words, ~887 tokens.
.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.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.© 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
SKILL.md and 12 other files (assets) in registry/blocks/orbit-card of heygen-com/hyperframes.
Open the folder on GitHubat commit 3aa6886
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.
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Orbit Card this skillheygen-com/hyperframes | 59k | 1 repos | ~887 | Automated safety check: Pass | Apache-2.0 | |
| Plotbeat Data VideosUnclecheng-li/AI_Animation | 1.5k | — | ~2.6k | Automated safety check: Pass | MIT | |
| Yuv Viral Videohoodini/ai-agents-skills | 282 | — | ~7.5k | Automated safety check: Notes | None | |
| Talking-Head Video Pipelinenaive-kun/naive-video-skill | 132 | — | ~3.3k | Automated safety check: Pass | MIT | |
| Duo Foldable Phone Comparisonheygen-com/hyperframes-community-skills | 183 | — | ~2k | Automated safety check: Pass | Apache-2.0 | |
| X Posting License Videoheygen-com/hyperframes-community-skills | 183 | — | ~1.2k | Automated safety check: Pass | Apache-2.0 |
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.
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…
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.
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.
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.
notivn/AIEV
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.
heygen-com/hyperframes
Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.
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.
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.
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.
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.
heygen-com/hyperframes
Finds, generates and edits media for HyperFrames video projects: music, sound effects, images, icons, logos, voiceovers, captions and color grades.
Categories
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.