Remotion to HyperFrames

Перенос видеокомпозиций Remotion (React) в HyperFrames (HTML + GSAP). Большинство идиом Remotion имеют прямые эквиваленты в HyperFrames — перевод механически прост примерно для 80% типичных композиций.

Используйте этот навык ТОЛЬКО когда пользователь явно просит мигрировать из Remotion. Примеры запросов: «port my Remotion project to HyperFrames», «convert this Remotion code», «migrate from Remotion».

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

• Создание новой HyperFrames-композиции (даже вдохновлённой Remotion-видео).
• Remotion упомянут вскользь без запроса на миграцию.
• Пользователь делится кодом Remotion как справочным материалом, не прося перевод.

Не поддерживается (откажитесь):

• Обратное направление. Экспорт HyperFrames → Remotion или другие фреймворки — не поддерживается.
• Не-Remotion источники. After Effects (.aep), Framer Motion, plain React/CSS — пересоздайте через /general-video.

Рабочий процесс

Шаг 1: Линтинг источника

Запустите scripts/lint_source.py над директорией Remotion-источника. Линтер обнаруживает паттерны, которые не переводятся корректно:

• Блокеры (отказ + рекомендация interop): useState, useReducer, useEffect/useLayoutEffect с непустыми зависимостями, async calculateMetadata, сторонние React UI-библиотеки (MUI, Chakra, shadcn, Radix и т.д.).
• Предупреждения (перевести после удаления конструкта): конфиг @remotion/lambda, delayRender, useCallback, useMemo, кастомные хуки.
• Информация (перевести с примечанием): staticFile, interpolateColors.

При срабатывании блокера — остановитесь. Прочитайте references/escape-hatch.md и предложите runtime interop паттерн.

Шаг 2: Планирование перевода

Прочитайте references/api-map.md — индекс каждого Remotion API и его HF-эквивалента. Загружайте только нужные справочники:

Шаг 3: Генерация HF-композиции

Создайте index.html с:

• Корневым <div id="stage"> с атрибутами data-composition-id, data-start="0", data-duration, data-fps, data-width, data-height.
• Плоским списком scene div с data-start / data-duration / data-track-index.
• Инлайн <style> для раскладки; CSS устанавливает начальное состояние каждого анимированного свойства.
• Одним тегом <script> с паузированным gsap.timeline({paused: true}). Каждый useCurrentFrame() становится tween на этом timeline.
• Регистрацией: window.__timelines["<composition-id>"] = tl;

Шаг 4: Валидация

# Рендер Remotion-baseline
cd remotion-src && npx remotion render <CompositionId> out/baseline.mp4

# Рендер HF-перевода
cd ../hf-src && npx hyperframes render --skill=remotion-to-hyperframes --output ../hf.mp4

# SSIM diff
../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./diff

Порог: ~0.02 ниже p05 уровня сложности источника. Критично: оба рендера должны использовать одинаковый формат пикселей — установите Config.setVideoImageFormat("png") + Config.setColorSpace("bt709") в remotion.config.ts.

Шаг 5: Документирование пробелов

Всё, что не перевелось корректно (опущенные volume ramps, приблизительные переходы, заменённые шрифты), фиксируется в TRANSLATION_NOTES.md рядом с HF-выводом.

Валидированные результаты тестового корпуса