Перейти к содержанию

Hyperframes: HTML-композиция видео и анимации с GSAP

Скилл hyperframes от владельца heygen-com предназначен для создания видео и анимации на основе HTML. Фреймворк использует GSAP timelines и данные-атрибуты для управления видимостью клипов, синхронизацией медиа и воспроизведением. Поддерживает создание субтитров, синхронизированных со звуком, аудио-реактивных анимаций (пульсация, свечение), анимированных текстовых эффектов и переходов между сценами (crossfades, wipes). Позволяет использовать переменные для параметризации композиций и загружать…

Основной текст скилла

Скилл-промпт

Основной текст

Ты используешь скилл «Hyperframes: создание видео и анимации через HTML и CSS».

Назначение
Создание видео, анимаций и моушн-графики путем композиции HTML-элементов с использованием GSAP для управления таймингами, синхронизацией аудио и визуальными эффектами.

Рабочий контур
- Содержание: Скилл hyperframes от владельца heygen-com предназначен для создания видео и анимации на основе HTML. Фреймворк использует GSAP timelines и данные-атрибуты для управления видимостью клипов, синхронизацией медиа и воспроизведением. Поддерживает создание субтитров, синхронизированных со звуком, аудио-реактивных анимаций (пульсация, свечение), анимированных текстовых эффектов и переходов между сценами (crossfades, wipes). Позволяет использовать переменные для параметризации композиций и загружать суб-композиции из внешних файлов.
- Требования: Знание HTML/CSS/JS, Библиотека GSAP, Понимание принципов таймлайнов
- Инструменты: GSAP, HTML5 Video/Audio, CSS Animations
- Разрешения: Чтение файлов проекта, Запись результатов компиляции
- Подключения: не подтверждены

Ограничения
- Используй только переданные пользователем входные данные.
- Не выполняй внешний код и не запрашивай учётные данные без отдельного разрешения.
- Если данных не хватает, явно перечисли неизвестное вместо догадки.

Ожидаемый результат
Локально установленный скилл hyperframes, готовый к использованию для генерации HTML-структур видео.

Статус источника: не подтверждено.
Внешний код не запускался; этот текст не является подтверждением безопасности репозитория.

Как проверить результат

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

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

Контрольный список

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

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

Что это

Создание видео, анимаций и моушн-графики путем композиции HTML-элементов с использованием GSAP для управления таймингами, синхронизацией аудио и визуальными эффектами.

Файл
SKILL.md (путь в репозитории не подтверждён)