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.
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.
$ npx skills add heygen-com/hyperframes-community-skills --skill duo -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install heygen-com/hyperframes-community-skills duo --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-community-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/duo .claude/skills/duo && 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 "duo" agent skill from https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/duo into .claude/skills/duo/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "duo", 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-community-skills/tree/master/skills/duoType 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-community-skills --skill duo -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install heygen-com/hyperframes-community-skills duo --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes-community-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/duo .agents/skills/duo && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "duo" agent skill from https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/duo into .agents/skills/duo/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "duo", 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-community-skills --skill duo -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install heygen-com/hyperframes-community-skills duo --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes-community-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/duo .cursor/skills/duo && 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 "duo" agent skill from https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/duo into .cursor/skills/duo/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "duo", 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-community-skills.git --path skills/duo--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-community-skills --skill duo -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install heygen-com/hyperframes-community-skills duo --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-community-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/duo .gemini/skills/duo && 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 "duo" agent skill from https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/duo into .gemini/skills/duo/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "duo", 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-community-skills duoInstalls 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-community-skills --skill duo -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes-community-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/duo .github/skills/duo && 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 "duo" agent skill from https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/duo into .github/skills/duo/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "duo", 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-community-skills --skill duo -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-community-skills duo --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes-community-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/duo .opencode/skills/duo && 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 "duo" agent skill from https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/duo into .opencode/skills/duo/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "duo", 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.
duoBuilds 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.
Duo renders comparison and meme videos on a single fixed still: a photograph of two hands holding an open foldable phone with both screens blank. The agent writes the HTML that plays inside the left and right screen slots, such as a mock chat, a scrolling feed or live video, and the rig masks it to the phone's rounded-corner geometry. The composition is 1448×1086 at 30fps.
The phone image, screen rectangles, corner radii and hinge divider are treated as fixed: the skill says not to redraw the device or edit the rig. Changes happen only inside the two screen content areas and one shared GSAP timeline, and the only built-in motion is one slow camera push. A build.mjs script copies the plate into each project and writes only inside the output folder. The skill does not fit a single phone, a laptop or a bezel you supply.
It needs Node 18 or newer and the HyperFrames CLI run through npx. The composition loads GSAP from the jsDelivr CDN at preview and render time, so rendering is not fully offline. Reference notes cover feed recipes, screen geometry and sourcing real UI, including a rights caveat for content you add.
5 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit ba7a0bb. 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 1 file in scripts/ (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
npxnodeFrom 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.
Duo Foldable Phone Comparison loads about 2k tokens when it runs, and up to ~4.6k if it reads all its reference files. Until then it costs about 161 tokens; SKILL.md has 1,039 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); the scripts in this folder are not scanned.
The full file from heygen-com/hyperframes-community-skills at commit ba7a0bb, republished under its Apache-2.0 licence (© heygen-com). 1,039 words, ~2,007 tokens.
.claude/skills/duo/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.One fixed 1448×1086 @ 30fps composition: a photo of two hands holding an open foldable, with both screens blanked. You fill the two screen slots with HTML (live video, a mock chat, a scrolling feed, anything HyperFrames renders) and the rig masks it to the phone's true rounded-corner geometry.
The phone and hands are a photograph, not something you build.
assets/plate.png IS the device. Never recreate, redraw, or CSS-model the
foldable, its bezel, the hinge, or the hands, and never substitute a different
image. build.mjs copies the plate into every project; if it is missing, stop
and reinstall the skill rather than improvising a phone.
Do not edit the rig. The two .screen rects, their corner radii and the
hinge divider were measured from that photo pixel by pixel. Every visual change
you make happens inside #screen-left .content and #screen-right .content,
plus the one shared GSAP timeline.
references/screen-geometry.md) rather than stretch this one.npx hyperframes@latest (@latest is
mutable; pin a version for byte-identical re-renders).registry.npmjs.org — the HyperFrames CLI itself, via npx.cdn.jsdelivr.net — the composition loads GSAP (pinned 3.14.2) at
preview/render time. Rendering is not fully offline.references/sourcing-real-ui.md documents how, and the rights caveat.No credentials, no paid operations, no telemetry. build.mjs writes only
inside --out and refuses to write through symlinks.
<SKILL_DIR> is this skill's installed directory (e.g.
~/.claude/skills/duo).
node <SKILL_DIR>/scripts/build.mjs --out ./foldable-meme --duration 10 --icons tiktok,instagram --icons is optional; it copies the real TikTok / Instagram glyph sheets
(assets/icons-*.svg, extracted from the live mobile sites) into the project.
Decide what each screen does for the length of the clip, in writing, before touching HTML. The pause test: at any second, something inside at least one screen must be mid-motion (a swipe landing, a video playing, text arriving). Two static screenshots is not a video.
Author the screens. Inside each .content you have a normal DOM
viewport: left 495×849, right 498×849. Position against those, never the
root. Patterns (full-screen snap feed, drag→fling swipe, like-tap, chat
typing) are in references/feed-recipes.md. Rules:
<video class="clip" data-start data-duration muted playsinline> for
every clip; HyperFrames owns playback. Overlap the windows of an outgoing
and incoming clip across a swipe so both are decoded mid-transition.tl inside the marked hook; do not create
a second gsap.timeline or register another window.__timelines key.repeat: -1, no Math.random, no clocks — the render seeks.9:41 top-left of the left
screen and wifi/battery top-right of the right screen. Reproduce that split
if your apps show a status bar; it sells the "one device" read.Check and snapshot:
npx hyperframes@latest check ./foldable-meme
npx hyperframes@latest snapshot ./foldable-meme --at 1,4,7 --no-endLint must be 0 errors. Layout/contrast warnings about text passing under a fixed header, or white UI text over video, are expected for app UIs; read the frames instead and confirm (a) content reaches every rounded corner with no gap, (b) the gray hinge divider is visible between the screens, (c) nothing from one screen leaks over the hinge.
npx hyperframes@latest render ./foldable-meme -o ./foldable-meme/renders/v1.mp4check passes lint with 0 errors; snapshot frames show both screens filled
edge to edge inside the phone with the divider intact; the MP4 is the requested
duration at 1448×1086 and, on a pause at any second, something on screen is
moving. Pull frames from the rendered MP4 (not the preview) for the final QC.
assets/plate.png — the clean plate, screens blanked to neutral (1448×1086).assets/screen-spec.json — measured rects, radii, hinge, status-bar split.assets/icons-tiktok.svg, assets/icons-instagram.svg — <symbol> sheets of
the real mobile-web glyphs (like, comment, share, nav bars…).template/index.template.html — the locked rig with two empty slots.scripts/build.mjs — scaffolder.references/screen-geometry.md — how the geometry was measured and how to
re-measure for a new plate.references/feed-recipes.md — snap feed, swipe physics, like tap, chat typing.references/sourcing-real-ui.md — pulling real app UI and clips, and the
rights caveat.2097769962936868872, a foldable showing ChatGPT and Claude side by
side); the two screens were blanked so it can carry any content. It is
redistributed here as a meme template; users of this skill publish results at
their own judgment and should credit the source where appropriate.© 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 10 other files (scripts, references, assets) in skills/duo of heygen-com/hyperframes-community-skills.
Open the folder on GitHubat commit ba7a0bb
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-community-skills, which our catalogue first saw on October 7, 2026.
Duo Foldable Phone Comparison 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 |
|---|---|---|---|---|---|---|
| Duo Foldable Phone Comparison this skillheygen-com/hyperframes-community-skills | 178 | 1 repos | ~2k | Automated safety check: Pass | Apache-2.0 | |
| HyperFrames Animationheygen-com/hyperframes | 59k | 3 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| Embedded Video Captionsheygen-com/hyperframes | 59k | 3 repos | ~8.6k | Automated safety check: Pass | Apache-2.0 | |
| Figma to HyperFramesheygen-com/hyperframes | 59k | 3 repos | ~4.5k | Automated safety check: Notes | Apache-2.0 | |
| Remotion to HyperFrames Porterheygen-com/hyperframes | 59k | 3 repos | ~2.8k | Automated safety check: Pass | Apache-2.0 | |
| Talking-Head Video Pipelinenaive-kun/naive-video-skill | 132 | — | ~3.3k | Automated safety check: Pass | MIT |
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
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
Ports an existing Remotion (React) composition to HyperFrames HTML with GSAP, one way, and grades the result against a tiered set of reference fixtures.
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
Lays timed graphic cards such as lower-thirds, data callouts and quotes over an existing talking-head video, synced to the transcript.
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.
heygen-com/hyperframes-community-skills
Turns your local Claude Code session history into a 60 to 75 second hand-drawn ink film about a day with your agent, with a string score and your approval of every line.
heygen-com/hyperframes-community-skills
Builds captions that move in 3D space around a talking head: a virtual camera flies past words at different depths, hero words hide behind the speaker, and text steps at 15 fps with motion blur.
heygen-com/hyperframes-community-skills
Turns a text prompt, photo or short video into hand-made looking p5.js animation: self-writing handwriting, brushstroke repaints and living paintings rendered offline.
heygen-com/hyperframes-community-skills
Turns a Strudel live-coding music track into a 1080x1080 HyperFrames video where the code itself is the picture and each line highlights on the note it plays.
heygen-com/hyperframes-community-skills
Turns one typical session between you and your agent into a short animated film built from your real messages, with a composed score, after you approve every line.
Categories
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. Duo renders comparison and meme videos on a single fixed still: a photograph of two hands holding an open foldable phone with both screens blank. The agent writes the HTML that plays inside the left and right screen slots, such as a mock chat, a scrolling feed or live video, and the rig masks it to the phone's rounded-corner geometry.
Duo Foldable Phone Comparison fits situations like: making a two-screen comparison video such as TikTok versus Reels; showing two chats answering the same prompt side by side; producing a before and after clip on a foldable phone photo; racing two apps or feeds in one frame for a meme video.
Run `npx skills add heygen-com/hyperframes-community-skills --skill duo -a claude-code`. Or copy the skill folder (skills/duo in heygen-com/hyperframes-community-skills) into .claude/skills/duo in your project. Claude Code loads it when a task matches its description.
Run `npx skills add heygen-com/hyperframes-community-skills --skill duo -a codex`. Or copy the skill folder (skills/duo in heygen-com/hyperframes-community-skills) into .agents/skills/duo 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-community-skills --skill duo -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/duo, .gemini/skills/duo, .github/skills/duo and .opencode/skills/duo in your project.
Going by SKILL.md and its folder, Duo Foldable Phone Comparison needs JavaScript for the scripts in its folder and the command-line tools its instructions call (npx and node). Our summary lists: Node 18 or newer; The HyperFrames CLI via npx hyperframes@latest; Network access to npm and the jsDelivr CDN.
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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
Duo Foldable Phone Comparison 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 2k tokens (SKILL.md is roughly 8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.6k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Duo Foldable Phone Comparison: HyperFrames Animation (heygen-com/hyperframes, 59k stars), Embedded Video Captions (heygen-com/hyperframes, 59k stars), Figma to HyperFrames (heygen-com/hyperframes, 59k stars) and Remotion to HyperFrames Porter (heygen-com/hyperframes, 59k 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-community-skills, which has 178 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on September 29, 2026.
Source: heygen-com/hyperframes-community-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.