API ВЕГА

Создаёт в HyperFrames презентации и интерактивные decks с отдельными слайдами, навигацией и режимом докладчика. Результат — работающий deck, а не единый MP4; навык также помогает преобразовать существующую страницу в слайды.

Возможности

  • Объявляет слайды через сцены HyperFrames и JSON-блок application/hyperframes-slideshow+json.
  • Поддерживает фрагменты для пошагового показа, hotspots для перехода в ветки и заметки докладчика.
  • Добавляет навигацию с клавиатуры и сенсорными жестами, счётчик слайдов и режим докладчика с предпросмотром следующего слайда.
  • При преобразовании страницы помогает сохранить её дизайн, анимации, интерактивность и работу медиа.
  • Не экспортирует deck в единый MP4: поддерживаемый результат — интерактивный deck, который запускают через present.

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

  • Нужно создать презентацию, pitch deck или интерактивный deck в HyperFrames.
  • Нужно показывать содержимое слайда по частям или добавлять переходы к дополнительным слайдам через hotspots.
  • Нужно преобразовать существующую страницу в deck, сохранив её поведение.
  • Если запрос неоднозначен — например, пользователь просит просто «презентацию» — сначала уточните, нужен ли ему именно HyperFrames slideshow.

Установка

Перед использованием обновите skill; сначала подтвердите запуск команды у пользователя:

npx hyperframes skills update slideshow

Примеры

JSON-блок с основным рядом слайдов и веткой:

<script type="application/hyperframes-slideshow+json">
  {
    "slides": [
      {
        "sceneId": "problem",
        "notes": "Lead with the pain, not the company.",
        "fragments": [3.5, 5.2, 7.0],
        "hotspots": [
          {
            "id": "h1",
            "label": "How did we calculate this?",
            "target": "market-deep-dive"
          }
        ]
      }
    ],
    "slideSequences": [
      {
        "id": "market-deep-dive",
        "label": "Market sizing methodology",
        "slides": [{ "sceneId": "mkt-1" }, { "sceneId": "mkt-2" }]
      }
    ]
  }
</script>

Обёртка для deck:

<hyperframes-slideshow>
  <hyperframes-player src="deck.html"></hyperframes-player>
</hyperframes-slideshow>

Запуск deck:

hyperframes present <project-dir>

Установка

npx skills add https://github.com/heygen-com/hyperframes --skill slideshow