🎬

hyperframes

Name: hyperframes
Author: heygen-com

Низкий риск ⚙️ Внешние команды🌐 Доступ к сети📁 Доступ к файловой системе🔑 Переменные окружения

Создание HTML-based видео композиций и анимаций

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

Поддерживает: Claude Codex Code(CC)

🥈 80 Серебро

Скачать ZIP навыка

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

Включите и начните использовать

Протестировать

Использование «hyperframes». Создайте простую титульную карточку с текстом "Добро пожаловать"

Ожидаемый результат:

HTML композиция со статическим позиционированием и входной GSAP анимацией, которая плавно показывает заголовок.

Использование «hyperframes». Добавьте субтитры, синхронизированные с моим аудио файлом

Ожидаемый результат:

Композиция с построчными элементами субтитров и данными тайминга, полученными из транскрипта.

Использование «hyperframes». Создайте кроссфейд между двумя сценами

Ожидаемый результат:

Композиция из двух сцен с GSAP-переходами прозрачности для плавной визуальной непрерывности.

Аудит безопасности

Низкий риск

v1 • 4/26/2026

All 791 static findings are false positives. The skill is a legitimate HTML-based video composition framework with documented CLI commands, file operations for composition authoring, and optional API integrations for transcription/TTS services. The detected patterns are benign: hex color codes in palette files (misidentified as Ruby commands), relative file paths (../) in documentation, and CLI tool invocations that are expected behavior for a video production tool.

Просканировано файлов

3,777

Проанализировано строк

находки

Всего аудитов

Проблемы низкого риска (2)

SKILL.md:279-281 SKILL.md:292-293 SKILL.md:324-327

CLI Command Usage (Expected Behavior)

The skill instructs users to run CLI commands like `npx hyperframes lint`, `npx hyperframes inspect`, and `node scripts/animation-map.mjs` for video composition validation. These are documented authoring tools, not command injection vulnerabilities.

references/transcript-guide.md:120 references/transcript-guide.md:133

Environment Variable Documentation for External APIs

The transcript-guide.md shows curl examples with `$OPENAI_API_KEY` and `$GROQ_API_KEY` placeholders. These are documentation examples showing users how to authenticate with external transcription APIs - not actual credential exfiltration.

Факторы риска

⚙️ Внешние команды (4)

SKILL.md:279 SKILL.md:280 SKILL.md:289 SKILL.md:325-327

🌐 Доступ к сети (1)

SKILL.md:42

📁 Доступ к файловой системе (1)

SKILL.md:269

🔑 Переменные окружения (2)

references/transcript-guide.md:120 references/transcript-guide.md:133

Обнаруженные паттерны

Hex Color Codes (False Positive)Relative Path References in Documentation (False Positive)Word Count Commands in Validation Instructions (False Positive)

Проверено: claude

Оценка качества

Архитектура

100

Сопровождаемость

Контент

Сообщество

Безопасность

Соответствие спецификации

Что вы можете построить

Маркетинговые и социальные видео

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

Образовательный и пояснительный контент

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

Презентации мероприятий и конференций

Создание анимированных слайдов и нарезок с плавными переходами, типографическими эффектами и элементами, реагирующими на звук.

Попробуйте эти промпты

Базовый запрос композиции

Создайте композицию HyperFrames с титульной карточкой, на которой написано [TITLE] на тёмном фоне с плавным появлением текста. Используйте чистую корпоративную палитру.

Запрос видео с субтитрами

У меня есть аудио файл по пути [PATH]. Создайте композицию HyperFrames с построчными субтитрами, синхронизированными с аудио. Используйте тёмный фон с белым текстом.

Запрос последовательности переходов

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

Запрос полноценного видео

Создайте полное видео HyperFrames с: титульной карточкой, 3 сценами контента с субтитрами, анимациями фона, реагирующими на звук, и плавными переходами. Стиль должен быть [STYLE].

Лучшие практики

Определите визуальную идентичность (DESIGN.md или visual-style.md) перед написанием HTML композиции
Сначала создайте статическую разметку, позиционируя элементы там, где они видны лучше всего
Запустите `hyperframes validate` для проверки контраста WCAG и `hyperframes inspect` для верификации разметки перед рендерингом
Используйте GSAP.from() для входов и GSAP.to() для выходов, анимируя ОТ/ДО CSS состояния по умолчанию

Избегать

Не создавайте композиции с общими или стандартными цветами — всегда применяйте определённую визуальную идентичность
Не позиционируйте контейнеры контента сцен с абсолютным позиционированием и фиксированными размерами
Не пропускайте валидацию разметки и контраста перед финальным рендерингом

Часто задаваемые вопросы

Что такое HyperFrames?

HyperFrames — это HTML-based фреймворк для видео композиций. Вы пишете HTML с data-* атрибутами для тайминга и CSS для стилизации. GSAP управляет анимацией. Фреймворк управляет видимостью клипов, воспроизведением медиа и синхронизацией таймлайна.

Нужно ли мне что-то устанавливать для использования этого навыка?

Да. Вам нужно установить CLI hyperframes через npm и движок рендеринга (Puppeteer и FFmpeg) для вывода видео. Запустите `npx hyperframes init` для настройки проекта.

Могу ли я добавить субтитры из аудио файла?

Да. Вы можете использовать внешние API транскрипции (OpenAI Whisper, Groq) или локальную транскрипцию. Навык конвертирует временные метки в построчные элементы субтитров, синхронизированные с вашим аудио.

Как добавить голосовую озвучку?

Используйте встроенную команду TTS с моделями Kokoro-ONNX. Запустите `npx hyperframes tts` с текстом вашего скрипта. Навык поддерживает выбор голоса и генерирует аудио файлы.

Какие возможности анимации доступны?

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

Как проверить композицию перед рендерингом?

Запустите `npx hyperframes lint` для проверки синтаксиса, `npx hyperframes validate` для контраста WCAG и `npx hyperframes inspect` для верификации разметки. Исправьте все предупреждения перед рендерингом.