> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-codex-docs-human-first-refactor.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Create an interactive presentation

> Build a navigable deck with reveals, notes, optional branches, hotspots, and presenter mode.

export const DeckKindChooser = () => {
  const kinds = [{
    id: "linear",
    label: "Present a clear story",
    prompt: `/hyperframes Build an eight-slide interactive briefing from my attached notes.

Give every slide one complete claim and one useful visual. Add concise speaker notes and keep the main narrative direct.`
  }, {
    id: "reveals",
    label: "Reveal points as I speak",
    prompt: `/hyperframes Build an interactive deck from my attached notes.

Use progressive reveals where the presenter should control the explanation. Each reveal must add meaning, not merely delay content.`
  }, {
    id: "branches",
    label: "Offer optional detail",
    prompt: `/hyperframes Build an interactive product briefing from my attached notes.

Keep the main story concise. Add two optional branches—roadmap and pricing—opened through clear hotspots, with speaker notes throughout.`
  }, {
    id: "page",
    label: "Convert an interactive page",
    prompt: `/hyperframes Turn this page into a HyperFrames slideshow.

Preserve its visual design, motion, media, and interactive behavior. Translate the page’s movement into deliberate slide and reveal states.`
  }];
  const [selectedId, setSelectedId] = useState("linear");
  const selected = kinds.find(kind => kind.id === selectedId) || kinds[0];
  return <div style={{
    margin: "1rem 0 1.5rem"
  }}>
      <div role="group" aria-label="Choose the kind of interactive deck" style={{
    display: "flex",
    flexWrap: "wrap",
    gap: "0.5rem",
    marginBottom: "0.75rem"
  }}>
        {kinds.map(kind => {
    const active = kind.id === selected.id;
    return <button key={kind.id} type="button" aria-pressed={active} onClick={() => setSelectedId(kind.id)} style={{
      border: "1px solid currentColor",
      borderRadius: "999px",
      padding: "0.4rem 0.75rem",
      background: active ? "#d8ff5f" : "transparent",
      color: "inherit",
      cursor: "pointer",
      opacity: active ? 1 : 0.7
    }}>
              <span style={{
      color: active ? "#111111" : "inherit",
      fontSize: "0.8125rem",
      fontWeight: 600
    }}>
                {kind.label}
              </span>
            </button>;
  })}
      </div>

      <pre aria-live="polite" style={{
    margin: 0,
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere"
  }}>
        <code style={{
    display: "block",
    maxWidth: "100%",
    whiteSpace: "inherit",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
          {selected.prompt}
        </code>
      </pre>
    </div>;
};

A HyperFrames slideshow stays interactive. The result is a live, navigable deck—not a linear MP4.

<Frame caption="A real deck: points reveal, slides advance, a hotspot opens optional detail, then the presenter returns to the main story.">
  <video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://mintcdn.com/hyperframes-codex-docs-human-first-refactor/IlELVlDzxEe6Svc_/images/showcase/wfv2-slideshow.mp4?fit=max&auto=format&n=IlELVlDzxEe6Svc_&q=85&s=73993c028c18cef5e3e8694632b485ba" poster="/images/showcase/wfv2-slideshow.jpg" autoPlay muted loop playsInline preload="metadata" data-path="images/showcase/wfv2-slideshow.mp4" />
</Frame>

If the result should play from beginning to end without a presenter, use a normal [video workflow](/workflows). A slideshow cannot currently be exported as one complete linear MP4; per-slide snapshots are supported.

## What control does the presenter need?

<DeckKindChooser />

Attach the source notes, document, page, or existing deck. Name the audience and what should change after the presentation.

## Keep the main story clear

* **Slides** carry one complete claim and one useful visual.
* **Reveals** let the presenter add part of an idea at a time.
* **Branches** hold optional detail without interrupting the story everyone sees.
* **Speaker notes** help the presenter; they should not repeat the slide.

The main story should still make sense when no optional branch is opened.

## Review it as a presenter

* Each slide makes one clear point.
* Reveals help the explanation.
* Hotspots are obvious without distracting.
* Embedded media stops when its slide is left.
* Presenter notes and the audience view stay separate.
* The complete deck works with keyboard, touch, and its visible controls.

Use [Studio’s Slideshow panel](/studio/slideshows) to adjust order, notes, reveals, and branches.

## Present the deck

```bash theme={null}
npx hyperframes present <project-directory>
```

Open the local URL, then click **Present** or press **P**. The audience gets a clean full-screen view while the presenter keeps the current slide, next slide, notes, and timer.

In Google Meet, share the audience **tab**. In Zoom, move the audience tab into its own window and share that window.

<Card title="Edit slideshow behavior" icon="presentation" href="/studio/slideshows">
  Adjust slides, reveals, branches, hotspots, and notes.
</Card>