Helios — плагин
Плагин Helios учит агента делать ролики кодом: одна HTML-страница рисует кадры, а рендерер в Chrome собирает MP4.
- 129 ★ репозитория
- Последний коммит
- Apache-2.0
Расширенный доступ
Почему такой уровень
- Запускает безголовый Chrome и кодирование видео на вашей машине, пока идет рендер.
- Скачивает и запускает пакеты через `npx` при установке скиллов и рендере.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add plugins/heliosОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Запускает безголовый Chrome и кодирование видео на вашей машине, пока идет рендер.
- Скачивает и запускает пакеты через `npx` при установке скиллов и рендере.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Главный скилл плагина, `make-video`, строится на простой идее: видео — одна HTML-страница с функцией `window.renderAt(t)`, которая рисует кадр на секунде `t`. Рендерер Helios открывает страницу в безголовом Chrome, вызывает функцию на каждом кадре, снимает кадры и кодирует MP4. Годятся CSS-анимации, Canvas, WebGL и любая страница, которая сама рисует кадры, даже без импорта Helios. Агент получает управляемые сценарии для шести типов роликов: анонс запуска, промо, объясняющее видео, демо продукта, отзыв клиента и нарезка для соцсетей. Команда `npx skills add BintzGavin/helios` ставит скиллы, а рендер запускает `npx @helios-project/cli render ./composition.html -o output.mp4`, при желании с `--duration` и `--audio`. Для ручной работы есть пакеты `@helios-project/core` и веб-компонент `helios-player`.
Для кого. Разработчикам и маркетологам, которым нужны промо-ролики, объясняющие видео и демо продукта, написанные кодом и собранные агентом по одному запросу.
Подходит, если
- Нужен анонс запуска или демо продукта по одному запросу в Claude Code, Cursor или Opencode.
- Надо собрать анимированный график или раскрытие логотипа, где каждый кадр рисует код.
- Нужно превратить существующую страницу сайта в MP4 с заданной длительностью и звуком.
- Требуется нарезка для соцсетей из заготовки, сделанной на HTML и CSS.
Не подходит, если
- Монтаж видео из готовых съемок: инструмент рисует кадры кодом.
- Рендер в браузере, отличном от Chromium: отрисовка идет в безголовом Chrome через CDP.
- Облачная распределенная отрисовка прямо сейчас: она у Helios в бете и работает через локальный оркестратор.
Пример запроса к агенту
Сделай демо-ролик моего продукта с помощью скилла Helios и сохрани его в MP4.Ограничения
Проект находится в бете. Движок Helios распространяется по лицензии Elastic License 2.0, а скиллы в `skills/` и плагин в `plugins/helios/` под Apache 2.0, остальное в репозитории подчиняется ELv2, если файл или папка не указывают иное. Отрисовка работает только в Chromium и требует CDP. Распределенный рендер находится в бете и идет через локальный оркестратор. Репозиторий создается с помощью ИИ-агентов под надзором человека, подробности лежат в `docs/prompts/` и `docs/AGENTS.md`.
Как отключить. Удалите скиллы из каталога агента, например `.claude/skills/`, а плагин снимите средствами менеджера плагинов вашего агента. Пакеты `@helios-project/*` убирает `npm uninstall`.
Частые вопросы
Как поставить скиллы Helios?
Выполните `npx skills add BintzGavin/helios` в репозитории, лучше с вашим маркетинговым сайтом, и попросите агента сделать, например, демо продукта «guided helios skill». Для Claude Code и Codex есть и плагин.
Как отрисовать композицию в MP4?
Командой `npx @helios-project/cli render ./composition.html -o output.mp4`. Длительность, частота кадров и размер берутся из композиции, а для обычной страницы задают `--duration` и `--audio`.
Какие ролики умеет делать скилл?
Анонс запуска, промо, объясняющее видео, демо продукта, отзыв клиента и нарезку для соцсетей. Скилл `make-video` также описывает моушн-графику, анимированные графики, раскрытие логотипа, визуализаторы музыки и цикличные GIF.
Нужно ли импортировать Helios в страницу?
Нет, рендерер вызывает `window.renderAt(t)` для каждого кадра, поэтому любая страница, которая сама рисует кадры, отрисуется без импорта Helios.
Какая лицензия у Helios?
Движок распространяется под Elastic License 2.0, а скиллы в `skills/` и плагин в `plugins/helios/` под Apache 2.0. Остальной код следует ELv2, если файл или папка не говорят иное.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ПлагиныCLI для программного создания видео из HTML: агент собирает кадры по шаблонам и рендерит готовый MP4 на вашем компьютере
Скиллы и CLI от HeyGen: агент пишет HTML-композиции и рендерит из них MP4-ролики, субтитры, моушн-графику и слайды
Скилл превращает HTML и Canvas-анимацию в MP4, GIF или прозрачный слой: кадры снимает браузер, видео собирает ffmpeg.
Скилл делает промо-видео из кода: режиссура, анимация в браузере с размытием движения, своя музыка и готовый MP4 в 60 кадров
html-explainer превращает тему в видео с озвучкой, субтитрами и обложкой: кадры пишутся на HTML и рендерятся в MP4 локально.
hve-video-director ведет ролик от идеи до рендера в шесть фаз и просит подтверждение пользователя после каждой из них.
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Helios (эта карточка) | нет | 129 | |
| HyperFrames | нет | 83 283 | скиллы и CLI от HeyGen с HTML-композициями; здесь одна страница с функцией `renderAt(t)` и шесть готовых типов роликов |
| Скиллы Remotion | нет | 6 903 | официальные скиллы Remotion для видео на React; здесь видео на веб-стандартах: CSS, WAAPI и Canvas без React |
Коротко о README
README начинается с быстрого старта через скиллы, затем показывает установку пакетов, пример композиции на CSS и рендер в MP4 командой CLI. Дальше идут сравнение с другими движками, архитектура, ограничения браузера и раздел о лицензиях и модели разработки с помощью ИИ-агентов.
Бейдж для README
Исходный 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>