framefields — скилл
Набор скиллов учит агента писать видео на TypeScript и рендерить его на GPU без браузера: композитинг, моушн-графика, 3D.
- 519 ★ репозитория
- Последний коммит
- Apache-2.0
Расширенный доступ
Почему такой уровень
- Скилл запускает код проекта, рендерит на видеокарте и пишет файлы в `output/`.
- Облачный рендер забирает репозиторий проекта и ассеты по Git, для него нужны токены доступа к хостингу кода.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/framefieldsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скилл запускает код проекта, рендерит на видеокарте и пишет файлы в `output/`.
- Облачный рендер забирает репозиторий проекта и ассеты по Git, для него нужны токены доступа к хостингу кода.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
framefields — npm-пакет для видео из кода, а `npx skills add gatewai-dev/framefields` ставит агенту семь скиллов по работе с ним: основной, плюс отдельные для композиции, эффектов, стилей, рендера, компьютерного зрения и облачного рендера. По ним Claude Code, Cursor или Codex пишет сцену на TypeScript, смотрит сетку отрендеренных кадров и выгружает MP4. Рендер идет прямо на видеокарте через WebGPU (Dawn, Metal, Vulkan) без Chromium и Puppeteer. Время в кадрах абсолютное, звук привязан к сетке битов, поэтому один и тот же код дает одинаковые кадры. В пакет входят композитинг в духе Photoshop, типографика и моушн-графика в духе After Effects, 3D-сцены и камеры. Команда `framefields init my-film --install` создает проект с `film.ts`, `render.ts`, Git LFS для ассетов и шрифтами Inter, JetBrains Mono и Noto Color Emoji. Есть и десктопное приложение для macOS и Linux, где фильм собирается в диалоге с агентом.
Для кого. Разработчикам и мотион-дизайнерам, которые делают ролики, превью и объяснялки с Claude Code или Cursor и хотят воспроизводимый рендер на своей видеокарте.
Подходит, если
- Нужен ролик-объяснялка или промо, и сцены проще описать кодом, чем собирать в монтажке.
- Агент должен сам смотреть кадры, править анимацию и перерендеривать без Chromium.
- Один и тот же фильм надо выпускать повторно с идентичными кадрами, например в CI.
- Ролик собирают из 3D-моделей, титров и диаграмм в одном проекте.
Не подходит, если
- Видеокарты с поддержкой WebGPU нет, а рендер нужен локально.
- Нужен готовый монтажный редактор с таймлайном для ручной работы.
- Ролик короткий и однократный, а Node.js 22 ставить не хочется.
Пример запроса к агенту
Создай проект ролика через framefields, собери 20-секундную заставку с анимированными титрами и покажи сетку кадров 0, 30 и 60.Ограничения
Нужен Node.js 22 или новее и видеокарта, которую понимает Dawn (Metal или Vulkan). Пакет в статусе бета-версии, интерфейс может меняться: версию в проекте лучше закрепить. Для облачного рендера есть отдельный сервис с Docker-образом и шаблонами RunPod, их надо разворачивать самостоятельно. Ассеты проекта хранятся в Git LFS, поэтому для репозитория с роликом нужен установленный `git-lfs`, а крупные файлы увеличивают размер хранилища. Последний коммит в репозитории: ноябрь 2026.
Как отключить. Удалите папки `framefields*` из каталога скиллов агента (`.claude/skills` или `.agents/skills`) и выполните `pnpm remove framefields` в проекте с роликом.
Частые вопросы
Как поставить framefields в Claude Code?
Выполните `npx skills add gatewai-dev/framefields`: скиллы встанут в каталог агента. Сам пакет добавляется в проект командой `pnpm add framefields`.
Нужен ли браузер для рендера?
Нет. Рендер идет на GPU через WebGPU, без Chromium, Puppeteer и скриншотов страниц. Готовое видео кодируется на видеокарте в MP4.
Какая версия Node.js нужна?
Node.js 22 или новее. Для видеокарты используется Dawn с бэкендами Metal и Vulkan.
Как начать новый ролик?
Команда `pnpm dlx framefields init my-film --install` создает `package.json`, TypeScript-конфиг, `film.ts`, `render.ts`, папку `assets/` с Git LFS и шрифты. Затем `pnpm frames -- 0 30 60` рендерит первые кадры в `output/`.
Есть ли готовые примеры?
Да, в папке `examples` лежат фильмы с исходниками, в том числе новостная объяснялка, продуктовый ролик и 3D-сцены. Каждый кадр там собран из TypeScript.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл и CLI, с которыми Claude Code или Codex делает видео как веб-страницы, а редактор Studio позволяет править результат
Видеодвижок для агентов на Rust: код на TypeScript в стиле Remotion или HTML-страница превращается в MP4 на GPU, без браузера.
Два скилла: короткие фильмы, где каждый кадр и музыка вычисляются кодом на canvas, без картинок и ключей, рендер в MP4
Агент пишет сценарий, озвучивает и рисует документальный ролик в коде: одна непрерывная камера над фото, картами и карточками.
Скилл для промо-роликов и кинетической типографики: идея и раскадровка до сборки, рендер в MP4 через Chrome и ffmpeg, проверка шестью гейтами
Скилл для Claude Code и Codex: агент пишет сцены анимации, плеер в браузере их показывает, ролик уходит в MP4 и Lottie.
Коротко о README
Фреймворк для видео из кода на WebGPU: композитинг, моушн-графика и 3D в одном npm-пакете, который агент ведет по скиллам. Ставится через `npx skills add` и `pnpm add`.