hyperframes-animationавтор HeyGen

HyperFrames Animation Skill.

Навык для Claude Code и Codex для анимации и видео: правила анимации, схемы сцен, переходы и адаптеры времени выполнения для HyperFrames.

Анимация и видео
Video

Скачать OpenDesign Инструкция по использованию

heygen-com/hyperframes · skills/hyperframes-animation/SKILL.mdSKILL.md

--- name: hyperframes-animation description: All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie … --- ## Default: compose atomic rules ## Load a blueprint when ## Routing ## Picking a runtime ## Critical Constraints ## Scripts

Метаданные и заголовки секций прочитаны из исходного файла 2026-09-14 · 7755 символов полностью

01 Что делает

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

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

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

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

Предоставляет все знания об анимации для HyperFrames: атомарные правила движения, чертежи многофазных сцен, переходы между сценами, техники motion-дизайна и семь runtime-адаптеров (GSAP по умолчанию, а также Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Пользователи выбирают 2-4 атомарных правила и комбинируют их с помощью одного приостановленного GSAP-таймлайна, либо загружают многофазный чертеж для сложной хореографии из 4-5 фаз, либо ищут специфичные для runtime API.

Также охватывает аудит существующих композиций через animation-map.mjs и 24 именованных эффекта текстовой анимации. GSAP по умолчанию используется для 95% работы с движением, покрывая оркестровку таймлайнов, трансформации, easing и stagger. Всё нативно для HyperFrames: единый приостановленный таймлайн, безопасный для seek, детерминированный.

Что он выдаёт

animation-map.json, содержащий данные аудита хореографии с мёртвыми зонами, консистентностью stagger и предупреждениями о жизненном цикле

Смотрите пример запроса ↗

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

01
Выбор и композиция атомарных правил
Выберите 2-4 правила из rules-index.md и соедините их одним приостановленным GSAP-таймлайном. Это стандартный workflow, быстрее, чем начинать с чертежа.
02
Загрузка чертежа для многофазных сцен
Если сцена соответствует существующему предустановленному шаблону, например brand-reveal или social-proof, загрузите его рецепт из blueprints-index.md, чтобы повторно использовать его конвейер фаз.
03
Поиск специфичных для runtime API
Используйте таблицу маршрутизации, чтобы найти easing-функции и элементы управления таймлайном GSAP, методы плеера Lottie, API mixer Three.js или другую документацию, специфичную для runtime, при необходимости.
04
Аудит хореографии с помощью animation-map
Запустите animation-map.mjs, чтобы прочитать каждый GSAP-таймлайн, перечислить твины, сэмплировать bbox, вычислить флаги и вывести animation-map.json для аудита мёртвых зон и консистентности stagger.

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

Когда использовать скилл hyperframes-animation

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

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

Атомарные паттерны движения, выбранные по триггеру или тегу из rules-index.md
Переходы между двумя клипами на основе CSS
3D-сцены, движение камеры и визуалы на основе шейдеров с использованием Three.js
Canvas с GPU-рендерингом, частицами, liquid glass или кастомными шейдерами с использованием TypeGPU

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

Анимация width, height, top или left для изменений layout

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

Директория композицииУкажите путь к вашей директории композиции при запуске animation-map.mjs для аудита хореографии.
ID чертежаЕсли ваша сцена соответствует многофазному шаблону, укажите ID чертежа из blueprints-index.md, чтобы загрузить его полный рецепт.

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

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

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

Предварительный расчёт констант layout
Никогда не вычисляйте позиции через getBoundingClientRect во время tween.
Пространственное движение использует только GSAP transform-алиасы
Используйте x, y, scale, rotation для всего пространственного движения. Никогда не анимируйте width, height, top или left для изменений layout.
GSAP — среда выполнения по умолчанию
GSAP используется по умолчанию для 95% работы с движением: оркестрация timeline, трансформации, easing и stagger. Все атомарные правила этого skill основаны на GSAP.
По умолчанию комбинируйте атомарные правила
Выберите 2-4 правила из rules-index.md и скомбинируйте их. Это быстрее и даёт меньше кода, чем начинать с blueprint.
Несколько сред выполнения могут сосуществовать
Несколько сред выполнения могут сосуществовать в одной композиции. Каждая регистрирует свои экземпляры в специфичной для среды глобальной переменной, чтобы HyperFrames мог искать их все за один проход.
Не читайте blueprint-ы заранее без необходимости
Не читайте файл blueprint заранее без необходимости; загружайте его только когда вы уже решили, что вам нужна оркестрация на уровне сцены.
Непространственные свойства допускаются
Allowlist разрешает opacity, color, backgroundColor и borderRadius для tween непространственных свойств, но никогда width, height, top или left для изменений layout.

04 Применение

Установить hyperframes-animation в Claude Code или Codex

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

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

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

Terminal

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

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

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

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

Starter prompt

Build a brand-reveal scene for [product name] using the multi-phase blueprint. The hero text should fade in with elastic ease at y:40, followed by a product card sliding up from y:60 with 0.2s stagger between child elements. Add a subtle pulse to the CTA button starting at 2.5s. Use GSAP as the runtime, ensure all spatial motion uses transform aliases (x, y, scale, rotation), and pre-calculate any layout constants at composition setup. Run animation-map.mjs on [composition directory] and output the audit results.

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

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

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

Убедитесь, что все экземпляры runtime зарегистрированы в своих специфичных для runtime глобальных объектах, чтобы HyperFrames мог найти их за один проход

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

Скачать OpenDesign Читать quickstart

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

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

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

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

Внутри SKILL.md

По умолчанию: комбинируйте атомарные правилаВыберите 2-4 правила из rules-index.md и скомбинируйте с GSAP timeline — быстрее, чем blueprints
Загружайте blueprint, когдаИспользуйте, если сцена соответствует многофазовому шаблону или нужна готовая к запуску хореография из 4-5 фаз
МаршрутизацияТаблица, связывающая задачи с файлами: rules, blueprints, transitions, techniques, adapters, scripts
Выбор runtimeКогда использовать GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU
Критические ограниченияПредрассчитанные константы layout, только GSAP transform-алиасы, никаких tween width/height/top/left
СкриптыЗапустите animation-map.mjs, чтобы проверить хореографию и получить animation-map.json
См. такжеСсылки на hyperframes-core, hyperframes-creative, hyperframes-cli

Собственное описание skill

«Всё знание об анимации для HyperFrames — атомарные правила движения, многофазные сценарные схемы, переходы между сценами, более широкие техники моушн-дизайна И семь адаптеров времени выполнения (GSAP по умолчанию, плюс Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Используйте для любой задачи с движением или анимацией: выберите 2–4 правила и скомпонуйте, или загрузите схему, или найдите API для конкретного рантайма (например, GSAP eases / Lottie player / Three.js mixer). Также охватывает аудит хореографии (карты анимации) существующей композиции и 24 именованных эффекта текстовой анимации. HyperFrames-native: единая приостановленная временная шкала, безопасна для перемотки, детерминирована.»

Описание из front-matter SKILL.md. Полный файл составляет около 7,755 символов. Прочитать полный файл на GitHub.

HyperFrames Animation

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

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

Загрузить OpenDesign Все навыки

Терминал

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

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

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

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

Когда использовать скилл hyperframes-animation

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

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

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

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

Предварительный расчёт констант layout

Пространственное движение использует только GSAP transform-алиасы

GSAP — среда выполнения по умолчанию

По умолчанию комбинируйте атомарные правила

Несколько сред выполнения могут сосуществовать

Не читайте blueprint-ы заранее без необходимости

Непространственные свойства допускаются