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.
Turn the project you just shipped into a short, polished, shareable launch video (an "ad") using HyperFrames.
$ npx skills add coco-research/coco --skill coco-ads -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install coco-research/coco coco-ads --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/coco-research/coco.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/coco-ads .claude/skills/coco-ads && 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 "coco-ads" agent skill from https://github.com/coco-research/coco/tree/main/skills/coco-ads into .claude/skills/coco-ads/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "coco-ads", 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/coco-research/coco/tree/main/skills/coco-adsType 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 coco-research/coco --skill coco-ads -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install coco-research/coco coco-ads --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/coco-research/coco.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/coco-ads .agents/skills/coco-ads && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "coco-ads" agent skill from https://github.com/coco-research/coco/tree/main/skills/coco-ads into .agents/skills/coco-ads/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "coco-ads", 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 coco-research/coco --skill coco-ads -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install coco-research/coco coco-ads --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/coco-research/coco.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/coco-ads .cursor/skills/coco-ads && 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 "coco-ads" agent skill from https://github.com/coco-research/coco/tree/main/skills/coco-ads into .cursor/skills/coco-ads/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "coco-ads", 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/coco-research/coco.git --path skills/coco-ads--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 coco-research/coco --skill coco-ads -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install coco-research/coco coco-ads --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/coco-research/coco.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/coco-ads .gemini/skills/coco-ads && 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 "coco-ads" agent skill from https://github.com/coco-research/coco/tree/main/skills/coco-ads into .gemini/skills/coco-ads/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "coco-ads", 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 coco-research/coco coco-adsInstalls 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 coco-research/coco --skill coco-ads -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/coco-research/coco.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/coco-ads .github/skills/coco-ads && 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 "coco-ads" agent skill from https://github.com/coco-research/coco/tree/main/skills/coco-ads into .github/skills/coco-ads/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "coco-ads", 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 coco-research/coco --skill coco-ads -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install coco-research/coco coco-ads --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/coco-research/coco.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/coco-ads .opencode/skills/coco-ads && 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 "coco-ads" agent skill from https://github.com/coco-research/coco/tree/main/skills/coco-ads into .opencode/skills/coco-ads/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "coco-ads", 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.
coco-adsTurn the project you just shipped into a short, polished, shareable launch video (an "ad") using HyperFrames.
Coco Ads is an agent skill from coco-research/coco. Turn the project you just shipped into a short, polished, shareable launch video (an "ad") using HyperFrames. Use when someone says "/coco-ads", "make a launch video", "brag about this", "turn this into a promo", "make an ad for this", or wants to share what they built. Reads the project code directly — no live URL or screenshots needed. Renders locally.
Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 299 other files, including scripts, reference files and assets (for example `assets/music/README.md`, `assets/music/cues/happy-beats-business-moves-vol-1-by-ende-dot-app.music-cues.json` and `assets/music/cues/happy-beats-business-moves-vol-1-by-ende-dot-app.music-cues.md`).
It sits in Media & Creative, covering Motion graphics. It works with HeyGen. The repository describes itself as: CoCo Super Intelligence is the orchestration layer that turns Claude Code, Cursor, or Codex into an engineering department: a routed advisory board, 226 skills, 386 commands… The licence is MIT.
4 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 6036e9c. 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/, 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.
Links to these hosts (documentation or services it may open):
github.comnpmjs.comFrom URLs in SKILL.md, links to its own repository left out.
Names these keys or tokens, usually read from environment variables:
GEMINI_API_KEYFrom names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Coco Ads loads about 1.8k tokens when it runs, and up to ~17k if it reads all its reference files. Until then it costs about 91 tokens; SKILL.md has 836 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 coco-research/coco at commit 6036e9c, republished under its MIT licence (© coco-research). 836 words, ~1,827 tokens.
.claude/skills/coco-ads/SKILL.md (or your agent's skills folder). This skill also uses 296 other files; get the full folder from GitHub.You built it. Now let CoCo make the ad.
/coco-ads turns the current project into a short (15–25s), polished, shareable launch video using the HyperFrames toolchain, rendered locally. It is narrow, opinionated, and fast.
Credit / lineage. This skill adapts the launch-video flow from brag by Shunit Haviv and runs on the HyperFrames HTML-composition + render engine by HeyGen. Bundled music is "Happy Beats / Business Moves" by ende.app; bundled SFX are CC0 (Kenney.nl). See
CREDITS.md. Re-implemented in CoCo's voice with attribution. Upstreambragis MIT-licensed (Copyright (c) 2026 Shunit Haviv Hakimi); its notice is retained atLICENSEin this skill directory.
The render path is fully local (HeyGen cloud/Lambda paths are never used). It needs:
PATH.npx hyperframes … (auto-fetched on first use). The composition skills install once with npx hyperframes skills.npx hyperframes doctor (Chrome headless-shell + FFmpeg). "Docker not running" is fine — Docker is only for distributed cloud renders, which this skill does not use.No data leaves the machine on the default render path. If GEMINI_API_KEY is set, the optional snapshot frame-analysis would call Gemini — keep it off (--describe false) when bragging about anything you would not paste in public.
/coco-ads
/coco-ads --tone chaotic
/coco-ads --tone polished --format vertical
/coco-ads this. Make it feel like a ridiculous startup launch.| Option | Values | Default |
|---|---|---|
--tone | preset or freeform description | inferred |
--format | landscape, vertical, square | landscape |
--duration | seconds | auto (15-25s) |
--no-music | flag | music on |
--no-sfx | flag | sfx on |
--title | string | inferred from project |
Tone can be a preset (default, polished, yc-parody, chaotic, deadpan, cinematic, app-store) or a creative direction such as "fake Series A launch from 2016". When the user gives freeform direction, map it to the nearest preset for pacing and structure, but preserve the user's direction in the plan and composition brief.
By default, output goes to coco-ads-output/. To avoid overwriting previous runs, use a timestamped directory (coco-ads-output-YYYY-MM-DD-HHmmss/) when the user asks for a new run or one already exists. Generate the timestamp once at the start of the run and use it consistently for the plan, brief, composition, render, and share copy. Keep coco-ads-output/ out of version control.
Read: references/step-1-inspect.md
Scan the project directory and extract what you need to plan the video.
Gate: You can answer all 9 questions in the planning rubric.
Read: references/step-2-plan.md
Write <output-dir>/coco-ads-plan.md. Answer the planning rubric, commit to a creative angle, and write the beat-by-beat storyboard (scenes, text, timing, transitions, SFX cues). Include a compact Music cue guidance section when music is selected.
Gate: <output-dir>/coco-ads-plan.md exists with a full storyboard; scene durations sum to 15–25 seconds.
Read: the installed HyperFrames composition skills (npx hyperframes skills if absent), then references/step-3-compose.md and references/audio.md.
Write <output-dir>/composition-brief.md, then build the composition in <output-dir>/composition/. /coco-ads owns product angle, source material, storyboard, tone, format, audio selection, and delivery; HyperFrames owns the concrete composition structure, animation mechanics, and render workflow.
Gate: npx hyperframes lint passes with zero errors inside <output-dir>/composition/.
Read: references/step-4-deliver.md
Validate (npx hyperframes validate + inspect), render to <output-dir>/brag.mp4, and write <output-dir>/share-copy.txt.
Gate: the rendered MP4 exists and share copy is written.
Seven presets ship with /coco-ads. Each changes scripting energy, pacing, typography personality, and transition style. Presets are defaults, not limits — always allow a freeform creative direction to refine or override.
Full definitions: references/tones.md
| Tone | Energy | One-liner |
|---|---|---|
default | Playful, clean, postable | The good-vibes default |
polished | Serious, elegant | For projects that are not jokes |
yc-parody | Deadpan startup energy | Fake seriousness applied to absurd projects |
chaotic | Fast, loud, aggressive | Over-the-top and unhinged |
deadpan | Calm, dry, understated | The joke is that nothing is a joke |
cinematic | Dramatic, trailer-scale | Big motion, bigger claims |
app-store | Smooth, feature-card clean | Corporate but not boring |
These apply to every video regardless of tone.
Short. 15–25 seconds. Not one second more without a reason.
Readable. Keep the pace high through motion and cuts, never by flashing text. Every line a viewer must read holds long enough to read it (short label ~0.8s settled; a sentence ~0.3s per word). Fast-in, then hold — never fast-in, then gone.
Specific. The video must feel like it was made for this exact project, not any project.
Show the thing. At least one scene must display actual UI, copy, or a key visual from the product. No abstract filler.
No generic SaaS language. "Streamline your workflow" is banned. Use the project's actual copy and claims.
The hook is everything. The first 2 seconds decide whether someone keeps watching. Plan the hook before anything else.
Funny earns its place. Humor should come from the project's absurdity, not from trying to be funny.
Pattern:
Hook (2-3s) → Reveal (2-4s) → 2-3 sharp highlights (5-12s) → Punchline/outro (2-4s)Adapt this. The pattern is a starting shape, not a template.
© coco-research, MIT. 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 296 other files (scripts, references, assets) in skills/coco-ads of coco-research/coco.
Open the folder on GitHubat commit 6036e9c
Coco Ads 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 |
|---|---|---|---|---|---|---|
| Coco Ads this skillcoco-research/coco | 473 | — | ~1.8k | Automated safety check: Pass | MIT | |
| HyperFrames Animationheygen-com/hyperframes | 58k | 3 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| Faceless Explainer Videoheygen-com/hyperframes | 58k | 3 repos | ~7.5k | Automated safety check: Notes | Apache-2.0 | |
| Figma to HyperFramesheygen-com/hyperframes | 58k | 3 repos | ~4.5k | Automated safety check: Notes | Apache-2.0 | |
| HyperFrames Video Entry Pointheygen-com/hyperframes | 58k | 3 repos | ~5.2k | Automated safety check: Pass | Apache-2.0 | |
| Hyperframesboraoztunc/skills | 393 | 9 repos | ~7.6k | Automated safety check: Pass | Apache-2.0 |
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
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
Entry point for making, editing and rendering videos from HTML compositions with HyperFrames, routing each request to the right workflow.
boraoztunc/skills
Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML.
chmonitor/chmonitor
Non-animation creative direction for HyperFrames videos. An agent skill from chmonitor/chmonitor.
coco-research/coco
Build and validate .arch/index.json — a committed map from each architectural component of this repository to the real directories and files that implement it, pinned to a git commit, with every…
coco-research/coco
A skill your agent uses when running, reviewing or changing coco's self-evolution cycle: the 30-day loop that observes how skills are actually used, proposes evidence-backed edits to them as one…
coco-research/coco
A skill your agent uses for architecture, current-state, process, data-flow, medallion, or DP diagrams, including redrawing .drawio and Mermaid sources.
coco-research/coco
A skill your agent uses when the user says brain, project knowledge, what do we know about, open tasks, or recent decisions, or runs /brain or /brain-update.
coco-research/coco
A skill your agent uses when the user says 'm0', 'm0 status', 'start m0', 'cross-tool memory', 'operational thread', or 'where is my memory stored', or when the M0 daemon or MCP wiring needs…
coco-research/coco
A skill your agent uses when the user wants a GitHub PR (URL, owner/repoN, or 'this PR') made into a code-change explainer video from its diff and commits: changelog, feature reveal, fix, or refactor.
Works with
Categories
Turn the project you just shipped into a short, polished, shareable launch video (an "ad") using HyperFrames. Coco Ads is an agent skill from coco-research/coco. Turn the project you just shipped into a short, polished, shareable launch video (an "ad") using HyperFrames.
Coco Ads fits situations like: someone says /coco-ads; make a launch video; brag about this; turn this into a promo.
Run `npx skills add coco-research/coco --skill coco-ads -a claude-code`. Or copy the skill folder (skills/coco-ads in coco-research/coco) into .claude/skills/coco-ads in your project. Claude Code loads it when a task matches its description.
Run `npx skills add coco-research/coco --skill coco-ads -a codex`. Or copy the skill folder (skills/coco-ads in coco-research/coco) into .agents/skills/coco-ads 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 coco-research/coco --skill coco-ads -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/coco-ads, .gemini/skills/coco-ads, .github/skills/coco-ads and .opencode/skills/coco-ads in your project.
Going by SKILL.md and its folder, Coco Ads needs the command-line tools its instructions call (npx) and credentials named GEMINI_API_KEY. Our summary lists: Node.js; Docker; A credential in GEMINI_API_KEY.
SKILL.md names 2 domains. As links in the text: github.com and npmjs.com. 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.
Coco Ads is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.8k tokens (SKILL.md is roughly 7.3k 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 15k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Coco Ads: HyperFrames Animation (heygen-com/hyperframes, 58k stars), Faceless Explainer Video (heygen-com/hyperframes, 58k stars), Figma to HyperFrames (heygen-com/hyperframes, 58k stars) and HyperFrames Video Entry Point (heygen-com/hyperframes, 58k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
coco-research (a GitHub user) maintains it in coco-research/coco, which has 473 GitHub stars. The repository holds 60 skills in this directory. The repository was last updated on October 7, 2026.
Source: coco-research/coco on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.