mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
ukimsanov
6fe5b4f82a
Adds the pages the rebuilt navigation is organised around, and moves the sidebar onto that structure. Every entry points at a file that exists after this commit; nothing is rewritten or removed yet, and no redirect is claimed yet. - Studio (13 pages) — the editor had no section of its own - One guide per creation workflow, matching the shipped agent skills - Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help, Go further, Product updates, 30 Days of HyperFrames Pages a later commit retires drop out of the sidebar here but still exist and still resolve, so the site stays navigable at this commit. Incidentally fixes a link to /concepts from the Lambda migration guide that is broken on main today — the destination did not exist.
65 lines
2.7 KiB
Plaintext
65 lines
2.7 KiB
Plaintext
---
|
||
title: "Build a slideshow"
|
||
description: "Shape the main presentation, then add reveals, notes, branches, and hotspots where they help."
|
||
---
|
||
|
||
A slideshow is a live, navigable presentation—not one linear video. The **Slideshow** tab appears when the active composition contains a HyperFrames slideshow manifest.
|
||
|
||
<Frame caption="The Slideshow panel builds the main route from real scenes before optional branches are added.">
|
||
<img
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/studio-slideshow-panel-v1.jpg"
|
||
alt="HyperFrames Studio showing three main-line slides in the Slideshow panel beside the deck timeline"
|
||
/>
|
||
</Frame>
|
||
|
||
## Build the main path
|
||
|
||
Start with the route everyone should see:
|
||
|
||
1. In **Slides**, check the scenes that belong in the main presentation.
|
||
2. Use the arrows to put them in order.
|
||
3. Select each slide and confirm that it makes one complete point.
|
||
4. In **Slide Inspector**, add speaker notes that help the presenter rather than repeat the slide.
|
||
|
||
Studio saves slideshow changes into the project’s manifest. Notes save after a short pause; other edits save immediately and participate in project history.
|
||
|
||
## Add fragment reveals
|
||
|
||
Move the playhead to the moment when the presentation should pause, then click **Mark** in Slide Inspector. That time becomes a fragment hold-point for the selected slide.
|
||
|
||
Use fragments when the presenter needs to reveal part of an idea before advancing. A slide does not need a hold-point for every bullet.
|
||
|
||
## Add an optional path
|
||
|
||
Branches keep optional detail outside the main story:
|
||
|
||
1. Open **Branches**, name a branch, and assign its slides.
|
||
2. On the slide where the choice appears, select the visible button or object on the canvas.
|
||
3. Open **Hotspot Tool**, choose the target branch, add a useful label, and click **Make hotspot**.
|
||
4. Keep a clear route back to the main story.
|
||
|
||
Deleting a branch removes that branch definition and every hotspot that points to it, so Studio asks for confirmation first. The source scenes remain in the project.
|
||
|
||
## Test it as a presentation
|
||
|
||
Run the presenter locally:
|
||
|
||
```bash
|
||
npx hyperframes present <project-directory>
|
||
```
|
||
|
||
Test next and previous navigation, every fragment, every hotspot, every branch, and the return path. Click **Present** or press **P** to open the synchronized audience view.
|
||
|
||
<Note>
|
||
A slideshow stays interactive. If the result should simply play from beginning to end as an MP4,
|
||
use a [video workflow](/workflows) instead.
|
||
</Note>
|
||
|
||
To create the deck with an agent before refining it here, follow [Create an interactive presentation](/guides/slideshow).
|
||
|
||
## Related topics
|
||
|
||
- [Create an interactive presentation](/guides/slideshow)
|
||
- [Use variables and templates](/studio/variables)
|
||
- [Work with source and an agent](/studio/source)
|