# HyperFrames Slideshow

Builds a live presentation with slides, reveals and speaker notes, not a video.

- Repository: https://github.com/heygen-com/hyperframes (77062 stars)
- Category: Media
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add heygen-com/hyperframes --skill slideshow -g -a claude-code -y`
Codex: `npx skills add heygen-com/hyperframes --skill slideshow -g -a codex -y`
Cursor: `npx skills add heygen-com/hyperframes --skill slideshow -g -a cursor -y`
Gemini CLI: `npx skills add heygen-com/hyperframes --skill slideshow -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add heygen-com/hyperframes`

## Description

Build a HyperFrames slideshow to present live - slides, fragment reveals, branching hotspots and presenter mode with speaker notes, served by `hyperframes present` - or turn an existing page into one. Use when the person wants a deck or presentation rather than a rendered video.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](../hyperframes/references/plugin-installation.md) when this skill is inside a HyperFrames plugin.

# HyperFrames slideshow

A slideshow is a normal composition (the `/hyperframes` contract applies) plus one JSON island that says which scenes are slides and how they connect. The deliverable is a running deck, not an MP4.

## What changes from a video project

- **Each slide is a top-level scene** in the composition file: `data-composition-id`, `data-start`, `data-duration`, `data-label`, `data-width`, `data-height`. There is no master root composition wrapping them.
- **One island per composition**, near the top of `<body>`, written in the HTML (never generated by script; `present` reads the file statically):

```html
<script type="application/hyperframes-slideshow+json">
  {
    "slides": [
      { "sceneId": "hook", "notes": "Pause on the number." },
      {
        "sceneId": "problem",
        "fragments": [11.0, 15.0],
        "hotspots": [
          {
            "id": "h1",
            "label": "Where does $40B come from?",
            "target": "market-detail",
            "region": { "x": 55, "y": 60, "w": 40, "h": 20 }
          }
        ]
      }
    ],
    "slideSequences": [
      { "id": "market-detail", "label": "Market sizing", "slides": [{ "sceneId": "mkt-math" }] }
    ]
  }
</script>
```

The rest: https://github.com/heygen-com/hyperframes/blob/HEAD/skills/slideshow/SKILL.md