HE
lottie
Адаптер для встраивания анимаций lottie-web и dotLottie в HyperFrames. Позволяет синхронно управлять таймлайном, искать кадры и регистрировать плееры в window.__hfLottie. Полезно для детерминированного воспроизведения анимаций из After Effects.
Что делает навык
Адаптер для встраивания анимаций lottie-web и dotLottie в HyperFrames, позволяющий синхронно управлять таймлайном и искать кадры. Он обеспечивает детерминированное воспроизведение анимаций, закодированных в ассетах, путем регистрации плееров в window.__hfLottie.
Когда применять
- Внедрение экспортов из After Effects, которые корректно рендерятся в lottie-web.
- Создание анимаций логотипов, иконок, декоративных акцентов и UI-движений продуктов.
- Перевод использования Lottie из Remotion в чистый HTML HyperFrames.
- Синхронизация нескольких анимаций (фон, иконки, конфетти) по единому времени композиции.
Как работает
- Загрузить ассеты из локальных файлов проекта (обычно в assets/) с параметром autoplay: false.
- Установить loop: false, если пользователь явно не запросил зацикливание.
- Создать плеер lottie-web через lottie.loadAnimation или dotLottie через new DotLottie.
- Зарегистрировать каждый созданный плеер в массиве window.__hfLottie.
- Обеспечить стабильность размеров контейнера анимации через CSS.
- HyperFrames использует адаптер для поиска кадров: goToAndStop для lottie-web или frame/percentage для dotLottie.
Примеры запросов агенту
Вставь анимацию логотипа из assets/logo-reveal.json в HyperFrames с отключенным автозапуском.
Синхронизируй анимации фона и иконок, зарегистрировав их в window.__hfLottie для общего таймлайна.
Используй dotLottie для отображения продукта на canvas, избегая удаленных URL и асинхронной загрузки после валидации.
Что понадобится
- Наличие HyperFrames и его валидации (npx hyperframes lint/validate).
- Библиотеки lottie-web или @lottiefiles/dotlottie-web.
- Локальные ассеты (JSON или .lottie) в папке проекта.
Описание составлено по SKILL.md навыка, сверено 05.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «heygen-com-lottie» из репозитория:
# https://github.com/heygen-com/hyperframes
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r heygen-com-lottie/ ~/.claude/skills/heygen-com-lottie/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.