Helios plugin
The Helios plugin teaches an agent to make videos with code: one HTML page draws the frames and a Chrome renderer encodes the MP4.
- 128 ★ on the repository
- Last commit
Extended access
Why this level
- Launches headless Chrome and video encoding on your machine during rendering.
- Downloads and runs packages through `npx` when installing skills and rendering.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/heliosDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Launches headless Chrome and video encoding on your machine during rendering.
- Downloads and runs packages through `npx` when installing skills and rendering.
This is third-party code. Review the repository files before installing.
What it does
The plugin's main skill, `make-video`, rests on a simple idea: a video is one HTML page with a `window.renderAt(t)` function that draws the frame at second `t`. The Helios renderer opens the page in headless Chrome, calls the function for every frame, captures the frames and encodes an MP4. CSS animations, Canvas, WebGL and any page that draws its own frames work, even without importing Helios. The agent gets guided flows for six kinds of video: launch announcement, promo, explainer, product demo, testimonial and social cut. The `npx skills add BintzGavin/helios` command installs the skills, and rendering runs with `npx @helios-project/cli render ./composition.html -o output.mp4`, optionally with `--duration` and `--audio`. For hands-on work there are the `@helios-project/core` package and the `helios-player` web component.
Who it is for. Developers and marketers who need promo clips, explainers and product demos written in code and assembled by an agent from one request.
Good fit when
- You need a launch announcement or product demo from one request in Claude Code, Cursor or Opencode.
- You need an animated chart or logo reveal where code draws every frame.
- You want to turn an existing site page into an MP4 with a set duration and audio.
- You need a social cut from a template made in HTML and CSS.
Not a fit when
- Editing video from existing footage: the tool draws frames in code.
- Rendering in a browser other than Chromium: it renders in headless Chrome through CDP.
- Cloud distributed rendering right now: in Helios it is in beta and runs through a local orchestrator.
Example request
Generate a product demo video using the guided Helios skill and save it as MP4.Limitations
The project is in beta. The Helios engine is licensed under the Elastic License 2.0, the skills in `skills/` and the plugin in `plugins/helios/` under Apache 2.0, and the rest of the repository follows ELv2 unless a file or folder says otherwise. Rendering works only in Chromium and needs CDP. Distributed rendering is in beta and runs through a local orchestrator. The repository is built with AI agents under human oversight, with details in `docs/prompts/` and `docs/AGENTS.md`.
How to disable. Delete the skills from the agent directory, for example `.claude/skills/`, and remove the plugin with your agent plugin manager. `npm uninstall` removes the `@helios-project/*` packages.
FAQ
How do I install the Helios skills?
Run `npx skills add BintzGavin/helios` in a repository, preferably your marketing site, and ask the agent to make, for example, a product demo with the guided Helios skill. A plugin for Claude Code and Codex also exists.
How do I render a composition to MP4?
With `npx @helios-project/cli render ./composition.html -o output.mp4`. Duration, frame rate and size come from the composition, and for a plain page you pass `--duration` and `--audio`.
Which videos can the skill make?
Launch announcements, promos, explainers, product demos, testimonials and social cuts. The `make-video` skill also covers motion graphics, animated charts, logo reveals, music visualizers and looping GIFs.
Do I need to import Helios into the page?
No, the renderer calls `window.renderAt(t)` for every frame, so any page that draws its own frames renders without importing Helios.
What license does Helios use?
The engine is under the Elastic License 2.0, while the skills in `skills/` and the plugin in `plugins/helios/` are under Apache 2.0. The rest of the code follows ELv2 unless a file or folder says otherwise.
Discussion
No questions or reviews yet.
Related
PluginsA CLI for programmatic video from HTML: the agent assembles frames from templates and renders a finished MP4 on your machine
Skills and CLI from HeyGen: the agent writes HTML compositions and renders them into MP4 videos, captions, motion graphics and decks
A skill that renders HTML and Canvas animation to MP4, GIF or a transparent layer: a browser grabs the frames, ffmpeg encodes.
A skill that makes promo videos from code: direction, in-browser animation with motion blur, its own score and a 60 fps MP4
html-explainer turns a topic into a video with voiceover, subtitles and cover: HTML frames render to MP4 locally.
hve-video-director takes a video from idea to render in six phases and waits for the user to approve each one before moving on.
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Helios (this card) | no | 128 | |
| HyperFrames | no | 83,283 | skills and a CLI from HeyGen with HTML compositions; here one page with a `renderAt(t)` function and six ready video types |
| Remotion Agent Skills | no | 6,903 | official Remotion skills for React video; here video on web standards: CSS, WAAPI and Canvas without React |
README in short
The README opens with a skills quickstart, then shows package install, a CSS composition example and an MP4 render with the CLI. It continues with a comparison to other engines, architecture, browser limits and a section on licenses and the AI-assisted development model.
README badge
Original SKILL.md
---
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 i
---
# 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 n
## Choose an original direction
When the request leaves the look open, don't fall back on a stock look or copy another page's design. Draw a random seed (use an **apply-randomness** skill if one is installed, otherwise run `LC_ALL=C tr -dc 'A-Za-z0-9' < /dev/urandom | head -c 256;
Helios also has opt-in libraries: named visual styles (`motion-styles`) and genre recipes (`video-recipes`). Use them only when the user names a style or genre from them or asks for options. Otherwise you may offer them once, in one line, but don't l
## 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>