Перейти к руководству
hyperframes-keyframesавтор HeyGen

HyperFrames Keyframes Skill.

Навык для Claude Code и Codex для анимации и видео: приближения, масштабирование, перекадрирование, эффект Кена Бёрнса и 2D/3D ключевые кадры для HyperFrames.

  • Анимация и видео
  • Video
heygen-com/hyperframes · skills/hyperframes-keyframes/SKILL.mdSKILL.md
--- name: hyperframes-keyframes description: Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video … --- ## Creator editing boundary ## Procedure ## Contract ## Runtime Rules ## GSAP Skeleton ## Keyframe Forms
Метаданные и заголовки секций прочитаны из исходного файла 2026-09-14 · 15 899 символов полностью

01 Что делает

Что делает skill hyperframes-keyframes в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Обрабатывает наезды камеры, отъезды, зумы, переоформления кадра, движения Ken Burns, движения камеры, визуальные стыки/whip-переходы и seek-safe 2D/3D-кейфреймы для композиций HyperFrames. Поддерживает GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, пути, маски, SVG morph/draw, текстовые шлейфы и 3D-глубину. Кейфреймы — это контракт поз: видимые состояния, непрерывная идентичность субъекта, seek-safe runtime, проверенные пиксели.

Фокусируется на визуальном движении внутри клипов, а не на монтаже клипов или стратегии сцены. Требует синхронного построения runtime, зарегистрированных экземпляров таймлайна и детерминированного тайминга. Авторы проверяют с помощью hyperframes lint, check, команды keyframes, точечной диагностики --shot и снапшотов в точках проверки.

Что он выдаёт

  • Зарегистрированный экземпляр GSAP timeline в window.__timelines[compositionId] с paused: true
Смотрите пример запроса ↗

Как это работает

  1. 01
    Определите субъект и состояния

    Перед созданием кейфреймов определите анимируемый субъект, видимые состояния, финальное состояние и runtime.

  2. 02
    Выберите наименьший механизм

    Выберите наименьший механизм, доказывающий промпт, обращаясь к references/keyframe-patterns.md только если механизм неясен.

  3. 03
    Создайте и зарегистрируйте

    Создавайте seek-safe кейфреймы в заявленном runtime, строя их синхронно и регистрируя экземпляр runtime.

  4. 04
    Проверьте с помощью диагностики

    Проверяйте с помощью hyperframes lint, check, команды keyframes, одного точечного --shot и снапшотов в точках проверки.

  5. 05
    Исправьте и повторно протестируйте

    Если проверка не прошла, исправьте исходные кейфреймы и повторно запустите наименьший неудачный диагностический тест перед рендерингом.

02 Определите своё применение

Когда использовать skill hyperframes-keyframes

Используйте skill hyperframes-keyframes в Claude Code или Codex, когда задача — моушен и видео такого рода. Назначение и ограничения ниже взяты из собственного файла skill.

Хорошо подходит

  • Наезд или отъезд камеры с кейфреймами масштаба и трансляции на невременной визуальной/обрезающей обёртке внутри клипа
  • Плавный многосостоянийный зум или переоформление кадра, сохраняющее одну живую обёртку субъекта с несколькими состояниями как лестницей поз
  • Панорамирование, переоформление кадра или движение Ken Burns с анимированной трансляцией обёртки плюс масштабом
  • Цепочка движений камеры с помеченными тактами трансформации на одном зарегистрированном seek-safe таймлайне
  • Match cut или whip-панорама, сохраняющая заданную геометрию, направление и скорость

Знайте границы

  • Широкая стратегия сцены, брендовый дизайн, подбор медиа, субтитры или общее планирование видео
  • Жёсткие вырезки по диапазону источника, обрезка, склейка и переупорядочивание, которые относятся к hyperframes-core
  • Рамп скорости источника с изменяющейся во времени огибающей частоты воспроизведения, что не поддерживается
  • Произвольные стоп-кадры в середине источника, требующие предварительной обработки статичного/производного сегмента

Что предоставить

  • Видимые позы и финальное состояниеПозы, необходимые для демонстрации задуманного движения, включая финальное состояние, завершающее анимацию.

03 Внутри скилла

Правила, которые skill hyperframes-keyframes задаёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

  1. Приостановленные таймлайны GSAP

    Таймлайны GSAP должны использовать gsap.timeline({ paused: true }), никогда не вызывать tl.play() для движения, критичного для рендера, и регистрироваться как window.__timelines[compositionId] с ключом, соответствующим data-composition-id.

  2. Anime.js Autoplay False

    Экземпляры Anime.js должны иметь autoplay: false и добавляться в window.__hfAnime с конечной длительностью и количеством повторов.

  3. CSS Keyframes Fill Mode

    CSS keyframes требуют конечной длительности и количества итераций, детерминированной задержки и animation-fill-mode: both.

  4. Никогда не используйте таймеры или случайность

    Никогда не используйте Date.now(), performance.now(), незасеянный Math.random(), триггеры hover/scroll, таймеры, асинхронно созданные таймлайны, незарегистрированный requestAnimationFrame или бесконечные циклы для движения, критичного для рендера.

  5. Только видимые каналы в keyframes

    Задавайте в keyframes только видимые каналы, такие как x/y/z, scale, opacity, clip-path, маски, а не скрытое вспомогательное состояние.

  6. Сохраняйте идентичность объекта

    Сохраняйте идентичность объекта, когда важна непрерывность. Используйте кроссфейд только когда задуманное движение — замена или растворение.

  7. Финальный кадр — часть анимации

    Финальный кадр — часть анимации, а не очистка. Не возвращайте в состояние покоя, если это не запрошено. Не заканчивайте на чёрном экране, если это не запрошено.

  8. Называйте субъекты и позы

    Назовите движущийся субъект и позы, необходимые для демонстрации задуманного движения, включая финальное состояние.

04 Применение

Установите hyperframes-keyframes в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте hyperframes-keyframes в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-keyframes

Общая форма CLI skills для skills/hyperframes-keyframes/SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу по motion и видео

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt
Add a Ken Burns punch-in to [clip-id] starting at 2.5s: scale from 1.0 to 1.4 over 3 seconds with ease-out, translating the wrapper 15% right and 10% up to reframe on the subject's face. Hold the final framing for 1 second. Register the timeline and verify with a strip shot showing the route.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

  • Запустите hyperframes lint для проверки структурных проблем
  • Запустите hyperframes check для проверки композиции
  • Запустите hyperframes keyframes с --shot и --samples, чтобы проверить цели, стопы, пути и временные интервалы
  • Используйте --layout strip, чтобы подтвердить движение на месте, перекрытия, контакт и небольшие изменения масштаба/прозрачности
  • Используйте --ghost с --angle, чтобы подтвердить canvas, WebGL, шейдерное движение и 3D-проекцию глубины
  • Сделайте снимок первого кадра, промежуточных поз, кадра «финал минус удержание» и точного финала, чтобы проверить маски, читаемость текста, полное состояние и отсутствие чёрных/сброшенных концов

В OpenDesign импортируйте hyperframes-keyframes по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author
HeyGen
Repository
github.com/heygen-com/hyperframes Ветка main
Файл skill
skills/hyperframes-keyframes/SKILL.md Контрольная сумма содержимого записана при верификации; коммит 558c11b
License
Apache-2.0 Из LICENSE.
Звёзды репозитория
49 761 Снимок GitHub от 14 сентября 2026 для всего репозитория heygen-com/hyperframes, который содержит 9 навыков в этом каталоге. Это не рейтинг и не счётчик использования hyperframes-keyframes.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

  1. Граница редактирования создателяKeyframes отвечает за визуальное движение; ядро — за сборку клипов, обрезку, склейку, смещения источников и жёсткие склейки
  2. ПроцедураПятишаговый workflow: от определения субъекта и состояний до создания, проверки и исправлений на основе диагностики
  3. КонтрактНазывайте субъекты и позы, задавайте ключевые кадры для видимых каналов, сохраняйте идентичность, удерживайте состояния достаточно долго, рассматривайте финальный кадр как анимацию
  4. Правила выполненияПаузированные таймлайны GSAP, CSS fill-mode both, Anime autoplay false, требования регистрации, запрещённые паттерны таймеров/random/async
  5. Формы ключевых кадровМассивы keyframes, процентные keyframes, массивы свойств, родитель с ease-none и индивидуальным easing на каждом стопе, easeEach для общего ощущения
  6. КаналыПредпочитайте композиторные/визуальные каналы, такие как x/y/scale/opacity; избегайте каналов layout/lifecycle, таких как top/left, width/height, display
  7. Выбор механизмаТаблица соответствия потребностей минимальным механизмам: FLIP, движение по пути, отрисовка штриха, интерполяция форм, stagger, разбиение текста, 3D
  8. ТаймингПредвосхищение, ускорение, доказательство пика, доведение движения, overshoot, выбор ease, смещения stagger, финальные удержания, непрерывная скорость
  9. ТекстСохраняйте боксы строк, межсловные интервалы, читаемость, финальную подгонку; двигайте глифы или маскированные полосы; делайте снимки читаемых кадров
  10. SVGDrawSVGPlugin для роста штриха, MorphSVGPlugin для интерполяции форм, преобразование примитивов в пути, разбиение сложных силуэтов
  11. 3DИспользуйте perspective, preserve-3d, движение по z, вращение, движение камеры/мира, окклюзию, порядок слоёв; подтверждайте глубину диагностическими углами
  12. Canvas / WebGLЗадавайте ключевые кадры для камеры, трансформации объекта, материала, uniform-параметров шейдера; рендерите из времени HyperFrames; используйте --ghost для проверки
Собственное описание skill
"Используйте, когда композиции HyperFrames нужен punch-in, punch-out, зум, рефрейм, обработка Ken Burns, движение камеры, визуальная передача match/whip, или другие безопасные для перемотки 2D/3D keyframes; также для GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, путей, масок, SVG morph/draw, текстовых следов, 3D глубины или диагностики `hyperframes keyframes`. Не используйте для общей стратегии сцены, дизайна бренда, поиска медиа, подписей или общего планирования видео."

Описание из front-matter файла SKILL.md. Полный файл содержит около 15 899 символов. Прочитать полный файл на GitHub.

06 Перед установкой

Вопросы о skill hyperframes-keyframes

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

В чём разница между этим skill и hyperframes-animation?

Этот skill отвечает за реализацию ключевых кадров и механику визуального движения. Используйте hyperframes-animation для широких сценарных рецептов и хореографии визуальной передачи. Используйте hyperframes-cli для полной документации по командам. Этот skill фокусируется на создании, регистрации и проверке самих ключевых кадров.

HyperFrames Keyframes

Запустите hyperframes-keyframes на реальной задаче анимации и видео.

Скачайте OpenDesign, импортируйте hyperframes-keyframes по ссылке на его SKILL.md, вставьте промпт выше и прочитайте план перед получением результата.

Терминал
npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-keyframes

OpenDesign для компьютера

Одна дизайн-система. Единый образ бренда во всех материалах

В полном Vibe Design Workspace одни и те же правила бренда работают для сайтов, слайдов, интерактивных прототипов, дашбордов, изображений и HTML-видео. Подключите локальные Codex, Claude Code, Cursor и другие кодинг-агенты и создавайте бесплатно.

  • Сайты, слайды, прототипы, дашборды, изображения и видео
  • Более 140 дизайн-систем и полная библиотека шаблонов и навыков
  • Локальный Codex и более 21 кодинг-агента · Бесплатно
Скачать бесплатно

Для macOS и Windows