API ВЕГА

Keyframes задают seek-safe движение в композициях HyperFrames: zoom, reframe, панораму, маски, SVG-анимацию и 3D. Навык помогает сохранить непрерывность объекта, проверить ключевые позы и убедиться, что анимация корректно работает при перемотке.

Возможности

  • Подсказывает, как анимировать масштаб, позицию, crop и маски, не меняя временные границы исходного клипа.
  • Помогает выбирать механизм движения: FLIP, траектории, рисование SVG-штрихов, морфинг фигур, stagger или 3D-трансформации.
  • Описывает правила для GSAP, CSS keyframes, Anime.js и WAAPI: синхронное создание, конечная длительность и регистрация анимаций для перемотки.
  • Даёт команды hyperframes для диагностики ключевых поз, проверки выбранного объекта и создания snapshots.
  • Разграничивает визуальные keyframes и монтаж: обрезка, перестановка клипов и source ranges относятся к /hyperframes-core, а звуковые переходы — к /hyperframes-audio.

Когда использовать

  • Нужно сделать punch-in, zoom, Ken Burns, reframe или цепочку движений камеры.
  • Требуется анимировать маску, wipe, iris, SVG-путь, текст или глубину сцены.
  • Анимация должна корректно отображаться при перемотке и нуждается в диагностике через hyperframes keyframes.
  • Нужно проверить финальную позу, читаемость текста или фактическое движение объекта по snapshots и --shot.

Примеры

Проверить keyframes и получить результат в JSON:

npx hyperframes keyframes . --json

Снять выбранный объект с заданным числом samples:

npx hyperframes keyframes . --selector "<selector>" --shot "<file>" --samples <n>

Зарегистрировать seek-safe GSAP timeline:

const root = document.querySelector("[data-composition-id]");
const compositionId = root.dataset.compositionId;
const tl = gsap.timeline({ paused: true });

tl.addLabel("state-a", 0);
tl.to(".subject", {
  keyframes: [
    { x: 0, opacity: 1, duration: 0.2 },
    { x: 120, opacity: 1, duration: 0.4, ease: "power2.out" },
    { x: 100, opacity: 1, duration: 0.2, ease: "power2.inOut" },
  ],
  ease: "none",
});

window.__timelines = window.__timelines || {};
window.__timelines[compositionId] = tl;

Установка

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