AIKraft/AI/Войти
AIKraft/Skills/waapi

waapi

Адаптер Web Animations API для HyperFrames: позволяет создавать и синхронно управлять анимациями через element.animate() с детерминированным поиском по таймлайну. Пригодится, когда нужно рендерить нативные браузерные анимации в HyperFrames, использовать fill modes, staggered-анимации и easing, избегая бесконечных итераций и callback-ов.

HEHeyGen official Разработка ★ 56.7k

Что делает навык

Адаптер Web Animations API для HyperFrames, позволяющий создавать и синхронно управлять анимациями через element.animate() с детерминированным поиском по таймлайну. Решает задачу рендеринга нативных браузерных анимаций в HyperFrames без зависимости от GSAP и использования callback-ов.

Когда применять

  • Рендеринг нативных браузерных анимаций в HyperFrames с использованием JavaScript-created timing.
  • Использование fill modes (например, fill: 'both') для сохранения состояний при поиске по таймлайну.
  • Создание staggered-анимаций и применение easing без бесконечных итераций.
  • Управление анимациями синхронно во время инициализации композиции.

Как работает

  1. Создавать анимации синхронно во время инициализации композиции с использованием element.animate(...).
  2. Указывать конечную длительность (finite duration) и количество итераций (iterations).
  3. Использовать fill: 'both', чтобы состояния, полученные при поиске, сохранялись.
  4. Останавливать анимации после создания или позволить адаптеру приостанавливать их при первом поиске.
  5. Избегать callback-ов и промисов для состояния, критичного для рендеринга.
  6. Адаптер вызывает document.getAnimations(), устанавливает currentTime каждой анимации в значение времени HyperFrames в миллисекундах, затем приостанавливает её.

Примеры запросов агенту

Создай анимацию для элемента с id 'orb' в HyperFrames, используя Web Animations API, чтобы она синхронизировалась с таймлайном.
Настрой адаптер waapi для HyperFrames: создай анимацию с fill: 'both' и синхронизируй её с текущим временем композиции.
Используй element.animate() для создания анимации в HyperFrames, избегая callback-ов и обеспечивая детерминированный поиск по таймлайну.

Что понадобится

  • Среда выполнения HyperFrames с поддержкой runtime adapter waapi.
  • Браузерная среда, поддерживающая Web Animations API (document.getAnimations, element.animate).

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «waapi» из репозитория: # https://github.com/heygen-com/hyperframes
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r waapi/ ~/.claude/skills/waapi/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.