Agent skill

Make Video

by BintzGavin in 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.

Apache-2.0Auto-check passedMedia & Creative

Install Make Video

skills CLI
$ npx skills add BintzGavin/helios --skill make-video -a claude-code

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

GitHub CLI
$ gh skill install BintzGavin/helios make-video --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/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-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
make-video
GitHub stars
118
Token cost
~2k tokens
SKILL.md length
732 words
Files
3 (incl. references)
Skills in repo
16
Repo updated
First seen
Licence
Apache-2.0

At a glance

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.

  • Works in 4 steps: Write the page → Render it → Look at the frames before you say it's… → …
  • The user asks for one of these as an MP4
  • SKILL.md covers 1. Write the page, 2. Render it, 3. Look at the frames before… and 4. Music and sound, plus 1 more section
  • Calls npx

What it does

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.

When your agent uses it

  • The user asks for one of these as an MP4
  • Tasks that involve HTML artifacts
  • Tasks that involve Music and audio generation

Example prompts

  • “/make-video”

Requirements

  • Node.js

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Write the page
  2. Render it
  3. Look at the frames before you say it's done
  4. Music and sound

What it can do on your machine

Read from SKILL.md and the folder at commit c6b0c13. 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

    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

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.

Always · name and description, kept in context so the agent knows when to use it
~127
When it runs · the whole SKILL.md, loaded when a task matches
~2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~4.8k

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 BintzGavin/helios at commit c6b0c13, republished under its Apache-2.0 licence (© BintzGavin). 732 words, ~1,975 tokens.

Download SKILL.mdSave it as .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.
name
make-video
description
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.

Make a video with Helios

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.

1. Write the page

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.

  • Derive everything from t: positions, opacity, which scene is showing. Never use counters, x += speed, physics stepped frame by frame, or setTimeout/setInterval.
  • Randomness must be seeded. Use rand(seed) below, not a bare Math.random() inside renderAt.
  • Load assets before the first frame. Keep a ready promise for fonts and images, and make renderAt async and await ready. The renderer waits for any promise that renderAt returns.
  • Size the page to the video. A canvas the size of the video, with html,body{margin:0;overflow:hidden}.
html
<!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.

2. Render it

bash
npx -y @helios-project/cli@latest render video.html -o video.mp4 --duration 12
FlagUse
--duration <s>Length in seconds. Fractions are fine. Required for a renderAt page.
--width 1080 --height 1920Frame size; the default is 1920×1080. Match your canvas. Vertical 9:16 is 1080x1920.
--fps <n>Frame rate; the default is 30.
--audio song.mp3Soundtrack, trimmed to the video.
--mode canvasFaster for a page that is only one full-frame <canvas>. The default, dom, captures the page as it looks.
--preset mediumFor 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.

3. Look at the frames before you say it's done

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:

bash
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 region

Before a long render, check that the page really is a function of t:

bash
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 time

Pick 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:

  • text is legible and inside the frame
  • transitions actually happen
  • there are no empty or black frames
  • the pacing matches the brief

Fix the page, check again, and render again. Then check the file itself:

bash
npx -y @helios-project/cli@latest check video.mp4   # flashing above the WCAG 2.3.1 limit, colour tags, frame count
Show full SKILL.md (277 more words)Show less

4. Music and sound

--audio muxes an audio file. To sync visuals to the music, analyse it first:

bash
npx -y @helios-project/cli@latest analyze track.mp3   # writes track.beats.json: beats, downbeats, drum hits, big moments, loudness per frame

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

When something is wrong

SymptomFix
"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 ChromiumThat'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 failsSomething 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 screenShow each cue for its whole time. Text drawn on a canvas must be declared: window.heliosDrawnText?.add(text).
check reports flashingMore than three flashes in a second can trigger seizures. Slow the strobe, shrink the flashing area, or lower its contrast.
Blank WebGL framesDraw 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

Files

SKILL.md and 2 other files (references) in plugins/helios/skills/make-video of BintzGavin/helios.

  • SKILL.md
  • references/music.md
  • references/pages.md

Open the folder on GitHubat commit c6b0c13

Compare with similar skills

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.

Make Video compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Make Video this skillBintzGavin/helios118—~2kAutomated safety check: PassApache-2.0
Music to Videoheygen-com/hyperframes59k3 repos~4.7kAutomated safety check: NotesApache-2.0
Short Form Editnateherkai/hyperframes-student-kit1.2k—~5.3kAutomated safety check: PassCustom licence
Tesseract Videomirage-hq/Tesseract128—~1.9kAutomated safety check: PassCustom licence
Motion DesignerHainrixz/editor-pro-max264—~2.3kAutomated safety check: PassCustom licence
Qiaomu Cutjoeseesun/qiaomu-cut-skill372—~6.8kAutomated safety check: NotesMIT

Similar skills

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

    59k GitHub starsUsed in 3 repos~4.7k tokens
    Media & CreativeAuto-check: notes
  • Short Form Edit

    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…

    1.2k GitHub stars~5.3k tokensUpdated 11 days ago
    Media & CreativeAuto-check passed
  • Tesseract Video

    mirage-hq/Tesseract

    Edit existing footage into finished videos locally with Tesseract.

    128 GitHub stars~1.9k tokensUpdated 8 days ago
    Media & CreativeAuto-check passed
  • Motion Designer

    Hainrixz/editor-pro-max

    Advanced motion designer with decades of After Effects and motion graphics experience, specialized in creating engaging video specifications for Remotion.

    264 GitHub stars~2.3k tokensUpdated 6 mo ago
    Media & CreativeAuto-check passed
  • Qiaomu Cut

    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 “制作一个科普视频:介绍…

    372 GitHub stars~6.8k tokensUpdated 11 days ago
    Media & CreativeAuto-check: notes
  • Showtime

    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…

    206 GitHub stars~3k tokensUpdated yesterday
    Media & CreativeAuto-check passed

More from BintzGavin/helios

All 16 skills in this repo
  • Create Composition

    BintzGavin/helios

    Workflow for creating a new Helios composition. An agent skill from BintzGavin/helios.

    118 GitHub stars~865 tokensUpdated today
    Auto-check passed
  • Helios Core

    BintzGavin/helios

    Core API for Helios video engine. An agent skill from BintzGavin/helios.

    118 GitHub stars~3k tokensUpdated today
    Auto-check passed
  • Helios Getting Started

    BintzGavin/helios

    Installation and quick start guide for Helios video engine. An agent skill from BintzGavin/helios.

    118 GitHub stars~1.8k tokensUpdated today
    Auto-check passed
  • Helios Player

    BintzGavin/helios

    Player API for embedding Helios compositions in web pages. An agent skill from BintzGavin/helios.

    118 GitHub stars~1.8k tokensUpdated today
    Auto-check passed
  • Helios Renderer

    BintzGavin/helios

    Renderer API for generating video/image output from Helios compositions.

    118 GitHub stars~1.8k tokensUpdated today
    Auto-check passed
  • Helios Skills

    BintzGavin/helios

    Collection of agent skills for Helios video engine. An agent skill from BintzGavin/helios.

    118 GitHub stars~1.7k tokensUpdated today
    Auto-check passed

Questions about Make Video

What does Make Video do?

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.

When should I use Make Video?

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.

How do I install Make Video in Claude Code?

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.

How do I install Make Video in Codex?

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.

Can I use Make Video 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 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.

What does Make Video need to run?

Going by SKILL.md and its folder, Make Video needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Make Video 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 Make Video 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 Make Video use?

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.

How many tokens does Make Video use?

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.

What are the alternatives to Make Video?

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.

Who maintains Make Video?

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.