Music to Video
heygen-com/hyperframes
Turns a music track into a beat-synced HyperFrames video such as a lyric video, slideshow or kinetic promo, with any supplied images or clips cut onto the beat grid.
Make videos drawn with code: motion graphics, launch and explainer videos, animated shorts, animated charts and data, logo reveals, social clips, music visualizers, UI demos and GIF loops.
$ npx skills add BintzGavin/helios --skill make-video -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install BintzGavin/helios make-video --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/BintzGavin/helios.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/helios/skills/make-video .claude/skills/make-video && 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 "make-video" agent skill from https://github.com/BintzGavin/helios/tree/main/plugins/helios/skills/make-video into .claude/skills/make-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "make-video", 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/BintzGavin/helios/tree/main/plugins/helios/skills/make-videoType 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 BintzGavin/helios --skill make-video -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install BintzGavin/helios make-video --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/BintzGavin/helios.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/helios/skills/make-video .agents/skills/make-video && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "make-video" agent skill from https://github.com/BintzGavin/helios/tree/main/plugins/helios/skills/make-video into .agents/skills/make-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "make-video", 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 BintzGavin/helios --skill make-video -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install BintzGavin/helios make-video --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/BintzGavin/helios.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/helios/skills/make-video .cursor/skills/make-video && 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 "make-video" agent skill from https://github.com/BintzGavin/helios/tree/main/plugins/helios/skills/make-video into .cursor/skills/make-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "make-video", 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/BintzGavin/helios.git --path plugins/helios/skills/make-video--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 BintzGavin/helios --skill make-video -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install BintzGavin/helios make-video --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/BintzGavin/helios.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/helios/skills/make-video .gemini/skills/make-video && 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 "make-video" agent skill from https://github.com/BintzGavin/helios/tree/main/plugins/helios/skills/make-video into .gemini/skills/make-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "make-video", 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 BintzGavin/helios make-videoInstalls 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 BintzGavin/helios --skill make-video -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/BintzGavin/helios.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/helios/skills/make-video .github/skills/make-video && 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 "make-video" agent skill from https://github.com/BintzGavin/helios/tree/main/plugins/helios/skills/make-video into .github/skills/make-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "make-video", 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 BintzGavin/helios --skill make-video -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install BintzGavin/helios make-video --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/BintzGavin/helios.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/helios/skills/make-video .opencode/skills/make-video && 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 "make-video" agent skill from https://github.com/BintzGavin/helios/tree/main/plugins/helios/skills/make-video into .opencode/skills/make-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "make-video", 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.
make-videoMake videos drawn with code: motion graphics, launch and explainer videos, animated shorts, animated charts and data, logo reveals, social clips, music visualizers, UI demos and GIF loops.
Make Video is an agent skill from BintzGavin/helios. Make videos drawn with code: motion graphics, launch and explainer videos, animated shorts, animated charts and data, logo reveals, social clips, music visualizers, UI demos and GIF loops. Write one HTML page that draws any frame from its time t, render it frame-exact to MP4 with Helios, check stills and contact sheets, and add a soundtrack. Use when the user asks for one of these as an MP4, GIF or animation file. Not for live-action or AI-generated realistic footage or editing camera video.
Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/music.md` and `references/pages.md`).
It sits in Media & Creative, covering HTML artifacts, Music and audio generation and Video production. The repository describes itself as: Programmatic video creation with web technologies you already know. CSS animations just work. The licence is Apache-2.0.
4 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit c6b0c13. 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.
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.
Make Video loads about 2k tokens when it runs, and up to ~4.8k if it reads all its reference files. Until then it costs about 127 tokens; SKILL.md has 732 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 BintzGavin/helios at commit c6b0c13, republished under its Apache-2.0 licence (© BintzGavin). 732 words, ~1,975 tokens.
.claude/skills/make-video/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.A Helios video is one HTML page with one function, window.renderAt(t). It draws the frame at t seconds. The Helios renderer loads the page in headless Chrome, calls renderAt(t) once per frame, captures each frame and encodes the MP4. There is no bundler, no framework and no capture script to write.
Every frame must be a pure function of t. The renderer may ask for frames in any order, and it renders the same frame identically every time.
t: positions, opacity, which scene is showing. Never use counters, x += speed, physics stepped frame by frame, or setTimeout/setInterval.rand(seed) below, not a bare Math.random() inside renderAt.ready promise for fonts and images, and make renderAt async and await ready. The renderer waits for any promise that renderAt returns.html,body{margin:0;overflow:hidden}.<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>html,body{margin:0;background:#0b0b10;overflow:hidden}</style>
</head>
<body>
<canvas id="c" width="1920" height="1080"></canvas>
<script>
const W = 1920, H = 1080;
const ctx = document.getElementById('c').getContext('2d');
const clamp = (x, a = 0, b = 1) => Math.min(b, Math.max(a, x));
const ease = (x) => 1 - Math.pow(1 - clamp(x), 3); // easeOutCubic
const span = (t, start, dur) => clamp((t - start) / dur); // 0→1 over [start, start+dur]
const rand = (seed) => { const x = Math.sin(seed * 12.9898) * 43758.5453; return x - Math.floor(x); };
const ready = document.fonts.ready; // plus any images you load
window.renderAt = async (t) => {
await ready;
ctx.fillStyle = '#0b0b10';
ctx.fillRect(0, 0, W, H);
// Scene 1 (0–3s): title rises in.
const p = ease(span(t, 0.2, 1.2));
ctx.globalAlpha = p;
ctx.fillStyle = '#f5b700';
ctx.font = '800 140px system-ui, sans-serif';
ctx.textAlign = 'center';
ctx.fillText('Hello, video', W / 2, H / 2 + 60 * (1 - p));
ctx.globalAlpha = 1;
// Particles: a seeded position per particle, animated by t.
for (let i = 0; i < 80; i++) {
const x = (rand(i) * W + t * 60 * (0.5 + rand(i + 99))) % W;
const y = rand(i + 7) * H;
ctx.fillStyle = `rgba(255,255,255,${0.15 + 0.35 * rand(i + 3)})`;
ctx.fillRect(x, y, 3, 3);
}
};
</script>
</body>
</html>DOM, CSS, SVG and WebGL pages work too. Set styles from t inside renderAt, or let CSS animations and GSAP/motion timelines run. The renderer seeks those to each frame's time. See references/pages.md.
npx -y @helios-project/cli@latest render video.html -o video.mp4 --duration 12| Flag | Use |
|---|---|
--duration <s> | Length in seconds. Fractions are fine. Required for a renderAt page. |
--width 1080 --height 1920 | Frame size; the default is 1920×1080. Match your canvas. Vertical 9:16 is 1080x1920. |
--fps <n> | Frame rate; the default is 30. |
--audio song.mp3 | Soundtrack, trimmed to the video. |
--mode canvas | Faster for a page that is only one full-frame <canvas>. The default, dom, captures the page as it looks. |
--preset medium | For the final file. It's several times smaller at the same quality and takes longer to encode. The default, ultrafast, is quick for drafts. |
Rendering is frame-exact. Frame n is exactly renderAt(n / fps), with no dropped or duplicated frames and no dependence on machine speed.
For a GIF, render the MP4 and then convert it. See references/pages.md.
Don't hand over a video you haven't looked at. Render stills and contact sheets from the page itself; they're fast and need no encode:
npx -y @helios-project/cli@latest still video.html --at 0.5,3,7.25 # full-size PNGs
npx -y @helios-project/cli@latest sheet video.html --every 1 --duration 12 # one labelled grid
npx -y @helios-project/cli@latest sheet video.html --strip 2:3 --fps 30 # every frame in 2–3s
npx -y @helios-project/cli@latest sheet video.html --at 4 --crop 600,300,720,480 # zoom into a regionBefore a long render, check that the page really is a function of t:
npx -y @helios-project/cli@latest verify video.html --duration 12 # exits 1 and names the frames that depend on history
npx -y @helios-project/cli@latest verify video.html --duration 12 --cues lyrics.srt # also: every lyric or caption on screen at its timePick the moments for a sheet from the video's structure, not at random: the first, middle and last frame of each scene, every big beat or hit, every entrance, the middle of every transition.
Open the PNGs with your image-viewing tool and check:
Fix the page, check again, and render again. Then check the file itself:
npx -y @helios-project/cli@latest check video.mp4 # flashing above the WCAG 2.3.1 limit, colour tags, frame count--audio muxes an audio file. To sync visuals to the music, analyse it first:
npx -y @helios-project/cli@latest analyze track.mp3 # writes track.beats.json: beats, downbeats, drum hits, big moments, loudness per frameLoad that file in the page and read it at t: cut on downbeats, punch on kicks, land big moves on hits. Real songs drift in tempo, so use its beats list rather than k * 60 / bpm. Lyrics and captions go on screen at their sung time, not snapped to the beat. See references/music.md.
| Symptom | Fix |
|---|---|
| "How long should the video be? Pass --duration" | Add --duration <seconds>. |
window.renderAt(2.5) threw: … | Your page errored at that time. The message includes your stack trace. |
| The first render pauses to download Chromium | That's expected, and it happens once. Don't run npx playwright install yourself: it fetches a build for the wrong Playwright version. |
| "The page defines no window.helios, window.renderAt(t) …" | Your script never defined renderAt. Check the page for a load error, such as a syntax error or a failed import. |
Frames differ between two renders, or verify fails | Something isn't a function of t: an unseeded Math.random(), a counter or a timer. On a canvas, also a pixel readback without willReadFrequently, or context state left from the last frame. See references/pages.md. |
verify --cues says a cue is not on screen | Show each cue for its whole time. Text drawn on a canvas must be declared: window.heliosDrawnText?.add(text). |
check reports flashing | More than three flashes in a second can trigger seizures. Slow the strobe, shrink the flashing area, or lower its contrast. |
| Blank WebGL frames | Draw inside renderAt (or a rAF loop), not once at load. |
Bigger projects (React/Vue components, studio editing, distributed cloud rendering) use the Helios packages directly: https://github.com/BintzGavin/helios.
© BintzGavin, 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 2 other files (references) in plugins/helios/skills/make-video of BintzGavin/helios.
Open the folder on GitHubat commit c6b0c13
Make Video 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 |
|---|---|---|---|---|---|---|
| Make Video this skillBintzGavin/helios | 118 | — | ~2k | Automated safety check: Pass | Apache-2.0 | |
| Music to Videoheygen-com/hyperframes | 59k | 3 repos | ~4.7k | Automated safety check: Notes | Apache-2.0 | |
| Short Form Editnateherkai/hyperframes-student-kit | 1.2k | — | ~5.3k | Automated safety check: Pass | Custom licence | |
| Tesseract Videomirage-hq/Tesseract | 128 | — | ~1.9k | Automated safety check: Pass | Custom licence | |
| Motion DesignerHainrixz/editor-pro-max | 264 | — | ~2.3k | Automated safety check: Pass | Custom licence | |
| Qiaomu Cutjoeseesun/qiaomu-cut-skill | 372 | — | ~6.8k | Automated safety check: Notes | MIT |
heygen-com/hyperframes
Turns a music track into a beat-synced HyperFrames video such as a lyric video, slideshow or kinetic promo, with any supplied images or clips cut onto the beat grid.
nateherkai/hyperframes-student-kit
Turn talking-head footage into a finished reel, YouTube Short, or short advertisement with curiosity-led openings, earned payoffs, story-driven cuts, transcript-synced motion graphics, moving…
mirage-hq/Tesseract
Edit existing footage into finished videos locally with Tesseract.
Hainrixz/editor-pro-max
Advanced motion designer with decades of After Effects and motion graphics experience, specialized in creating engaging video specifications for Remotion.
joeseesun/qiaomu-cut-skill
把一句话需求转成可复现、可验收视频工程的乔木智能剪辑导演。Use when the user asks to create, plan, edit, remix, explain, narrate, subtitle, animate, composite, or render a video—including one-line requests such as “制作一个科普视频:介绍…
FavioVazquez/showtime
A skill your agent uses when the user wants a video made, edited or finished: a launch or promo, product demo, explainer, trailer or teaser, tutorial or walkthrough, a screen recording turned into a…
BintzGavin/helios
Workflow for creating a new Helios composition. An agent skill from BintzGavin/helios.
BintzGavin/helios
Core API for Helios video engine. An agent skill from BintzGavin/helios.
BintzGavin/helios
Installation and quick start guide for Helios video engine. An agent skill from BintzGavin/helios.
BintzGavin/helios
Player API for embedding Helios compositions in web pages. An agent skill from BintzGavin/helios.
BintzGavin/helios
Renderer API for generating video/image output from Helios compositions.
BintzGavin/helios
Collection of agent skills for Helios video engine. An agent skill from BintzGavin/helios.
Categories
Make videos drawn with code: motion graphics, launch and explainer videos, animated shorts, animated charts and data, logo reveals, social clips, music visualizers, UI demos and GIF loops. Make Video is an agent skill from BintzGavin/helios. Make videos drawn with code: motion graphics, launch and explainer videos, animated shorts, animated charts and data, logo reveals, social clips, music visualizers, UI demos and GIF loops.
Make Video fits situations like: the user asks for one of these as an MP4; tasks that involve HTML artifacts; tasks that involve Music and audio generation.
Run `npx skills add BintzGavin/helios --skill make-video -a claude-code`. Or copy the skill folder (plugins/helios/skills/make-video in BintzGavin/helios) into .claude/skills/make-video in your project. Claude Code loads it when a task matches its description.
Run `npx skills add BintzGavin/helios --skill make-video -a codex`. Or copy the skill folder (plugins/helios/skills/make-video in BintzGavin/helios) into .agents/skills/make-video 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 BintzGavin/helios --skill make-video -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/make-video, .gemini/skills/make-video, .github/skills/make-video and .opencode/skills/make-video in your project.
Going by SKILL.md and its folder, Make Video needs the command-line tools its instructions call (npx). Our summary lists: Node.js.
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.
Make Video 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 7.9k 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.9k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Make Video: Music to Video (heygen-com/hyperframes, 59k stars), Short Form Edit (nateherkai/hyperframes-student-kit, 1.2k stars), Tesseract Video (mirage-hq/Tesseract, 128 stars) and Motion Designer (Hainrixz/editor-pro-max, 264 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
BintzGavin (a GitHub user) maintains it in BintzGavin/helios, which has 118 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on October 9, 2026.
Source: BintzGavin/helios on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.