Как устроена композиция HyperFrames и как задать, когда элемент появляется на экране?

HyperFrames — открытый (Apache 2.0) фреймворк HeyGen: HTML, CSS и медиа превращаются в MP4. Безголовый Chromium открывает страницу, переводит анимацию на нужный момент для каждого кадра, а FFmpeg кодирует кадры в видео. Нужны Node.js 22+ и FFmpeg.

Корень композиции задаёт id, длительность и размер кадра: data-width="1080" data-height="1920" — вертикаль. Каждый элемент, который живёт на таймлайне, получает атрибуты времени в секундах; класс clip растягивает его на весь кадр. Порядок слоёв — обычный CSS z-index: data-track-index — только дорожка в Studio, на рендер он не влияет.

Движение описывают GSAP: таймлиния создаётся остановленной, а рендер сам выставляет её время. Её регистрируют под id композиции, чтобы рендер нашёл, чем управлять.

Команды: npx hyperframes init — новый проект, preview — просмотр с живой перезагрузкой, check — линтер и проверка вёрстки, render — MP4, add <блок> — готовый блок из каталога (переходы, титры, графики).

<div id="stage" data-composition-id="promo" data-start="0" data-duration="6"
     data-width="1080" data-height="1920">
  <video class="clip" data-start="0" data-duration="6"
         data-track-index="0" src="bg.mp4" muted playsinline></video>
  <h1 id="title" class="clip" data-start="1" data-duration="4"
      data-track-index="1">Скидка 20%</h1>
  <audio id="music" data-start="0" data-duration="6" data-track-index="2"
         data-volume="0.4" src="music.wav"></audio>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
    window.__timelines = window.__timelines || {};
    window.__timelines.promo = tl;
  </script>
</div>