slideshow

Name: slideshow
Author: heygen-com

byheygen-com· 46 skills

Installs

115k

Stars

38k

Forks

3.6k

How to install slideshow?

heygen-com/hyperframes/slideshow

$npx -y skills add heygen-com/hyperframes --skill slideshow

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/heygen-com/hyperframes" --skill "heygen-com/hyperframes/slideshow"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/heygen-com/hyperframes" that are relevant to the current task. Run `npx skills add "https://github.com/heygen-com/hyperframes"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	> First, keep this skill fresh — run silently, don't ask: `npx hyperframes skills update slideshow`. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.
2
3	> figma source: If the deck's content or storyboard comes from a figma.com URL, run `/figma` first — asset export, brand tokens, and storyboard reconstruction if the source is a strip of scene frames — then build from its output. Don't drive Figma via raw MCP tools directly: that skips SVG sanitization, `.media/manifest.jsonl` provenance, and brand-token `var()` binding, so a later brand change can't propagate without a full re-import.
4
5	# Slideshow authoring contract
6
7	A HyperFrames slideshow is a normal HyperFrames composition — scenes, clips, GSAP timelines — with one extra ingredient: a JSON island that declares which scenes are slides and how they connect. The player's `SlideshowController` reads the island and turns the continuous GSAP timeline into a discrete, navigable deck.
8
9	Read `/hyperframes-core` first for the base composition contract (clips, tracks, `data-*` attributes, determinism rules). This skill covers only what is new: the island schema, slide writing rules, fragments, branching, validation, and the wrapping component.
10
11	## Output — a navigable deck, not a linear MP4
12
13	A slideshow's output is the running deck: serve it with `hyperframes present <project-dir>` (or Studio present mode) — the player's `SlideshowController` reads the island and drives navigation, fragments, branching, and presenter mode. See Presenting and handoff below.
14
15	Do not `hyperframes render` a slideshow into a single MP4. A deck is authored as several top-level scene compositions (one `data-composition-id` per slide) with no master-root composition wrapping them, so `render` resolves only the first composition and emits a silently truncated MP4 (e.g. 6s of a 40-second deck). A linear main-line export (main slides only, branch sequences excluded) is deferred — until it ships, the supported outputs are the live `present` deck and per-slide `snapshot` stills. If a user needs a linear MP4 today, surface this limitation rather than pointing `render` at the deck.
16
17	## Intent confirmation
18
19	If the user explicitly asks for a slideshow, slide show, or HyperFrames slideshow, proceed with this skill. When the request arrived through `/hyperframes`, the intent layer's triage owns this confirmation — routed here means already confirmed, so don't re-ask; the layer's run-shape questions don't apply (the deliverable is a deck, not a rendered video). A `BRIEF.md`, when present, carries the confirmed intent — read it.
20
21	If the skill triggered from an adjacent request such as "presentation", "pitch deck", "deck", "interactive deck", or "convert this page", pause before authoring and frame the choice before asking for confirmation. Briefly explain that a HyperFrames slideshow means a runnable deck with discrete slides, built-in navigation and presenter mode, editable speaker notes, shared media handling, and validation before handoff. For source-page conversions, also mention that the goal is to preserve the original page's visual design, interactions, motion, and media behavior while translating page movement into slide-to-slide transitions.
22
23	Then ask a short confirmation question:
24
25	> Do you want this as a HyperFrames slideshow?
26
27	Use a yes/no choice UI when the environment provides one; otherwise ask the question in plain text.
28
29	Do not implement the slideshow until the user says yes. If they say no, stop using this skill — read `/hyperframes` and let the intent layer re-route. This confirmation is a routing decision, not a preference gate — per `../hyperframes-core/references/brief-contract.md` § 1 it survives autonomous mode ("surprise me" does not skip it): building the wrong deliverable type is a quality failure, not a creative call.
30
31	---
32
33	## The two pieces
34
35	### 1. Scenes — declared the normal way
36
37	Every slide is backed by a scene. Declare scenes with `data-composition-id`, `data-start`, `data-duration`, and `data-label`:
38
39	```html
40	<div
41	data-composition-id="problem"
42	data-start="0"
43	data-duration="8"
44	data-label="The problem"
45	data-width="1920"
46	data-height="1080"
47	>
48	<!-- clips go here -->
49	</div>
50	```
51
52	Branch slides (reachable only via a hotspot, excluded from the main line) are declared exactly the same way — they just appear only in a `slideSequences` entry in the island, not in the main `slides` array.
53
54	### 2. The JSON island — one script block per composition
55
56	Add exactly one `<script type="application/hyperframes-slideshow+json">` block to the composition HTML. It holds all slideshow metadata:
57
58	```html
59	<script type="application/hyperframes-slideshow+json">
60	{
61	"slides": [...],
62	"slideSequences": [...]
63	}
64	</script>
65	```
66
67	The island is the single source of truth for slide order, notes, fragment hold-points, hotspots, and branch sequences. Keep it near the top of the `<body>`, before the scene divs, so it is easy to find.
68
69	Do not hide the slideshow manifest behind an alternate `<script type="application/json">` block plus runtime code that creates the island. The `present` command reads the composition HTML statically and expects the real `application/hyperframes-slideshow+json` island to already be present.
70
71	---
72
73	## Schema
74
75	### `SlideshowManifest` (the top-level island object)
76
77	```json
78	{
79	"slides": [
80	/* SlideRef[] — the main line, in order */
81	],
82	"slideSequences": [
83	/* SlideSequence[] — off-line branch sequences */
84	]
85	}
86	```
87
88	### `SlideRef`
89
90	```json
91	{
92	"sceneId": "problem",
93	"notes": "Lead with the pain, not the company.",
94	"fragments": [3.5, 5.2, 7.0],
95	"hotspots": [
96	/* SlideHotspot[] */
97	],
98
99	"ttsScript": null,
100	"ttsAudioUrl": null,
101	"ttsDurationMs": null
102	}
103	```
104
105	\| Field \| Required \| Notes \|
106	\| ------------------------------------------- \| -------- \| ------------------------------------------------------------------------------------------------------------------------------------------------------- \|
107	\| `sceneId` \| yes \| Must match a scene's `data-composition-id` exactly (or provide explicit `startTime`/`endTime`). The lint rule resolves scenes by `data-composition-id`. \|
108	\| `notes` \| no \| Presenter-only text. Never shown to the audience. \|
109	\| `fragments` \| no \| Array of times (seconds) within the slide's `[start, end]` range — see Fragments below. \|
110	\| `hotspots` \| no \| Interactive overlays that trigger a branch — see Branching below. \|
111	\| `startTime` \| no \| Optional. Override the matched scene's time bounds; defaults to the scene's start/end. \|
112	\| `endTime` \| no \| Optional. Override the matched scene's time bounds; defaults to the scene's start/end. \|
113	\| `ttsScript`, `ttsAudioUrl`, `ttsDurationMs` \| no \| Reserved. Schema fields exist but TTS playback is not yet wired. Omit unless you are pre-populating for a future build. \|
114
115	### `SlideHotspot`
116
117	```json
118	{
119	"id": "h1",
120	"label": "How did we calculate this?",
121	"target": "market-deep-dive",
122	"region": { "x": 60, "y": 10, "w": 35, "h": 20 }
123	}
124	```
125
126	\| Field \| Required \| Notes \|
127	\| -------- \| -------- \| ------------------------------------------------------------------------------------------------------------------------------- \|
128	\| `id` \| yes \| Unique within the slide. \|
129	\| `label` \| yes \| Tooltip / button text shown to the audience. \|
130	\| `target` \| yes \| Must match a `SlideSequence.id` in `slideSequences`. \|
131	\| `region` \| no \| Percentage-of-slide bounding box: `{x, y, w, h}` in `0–100`. Omit to render the hotspot as a full-slide labeled button instead. \|
132
133	### `SlideSequence`
134
135	```json
136	{
137	"id": "market-deep-dive",
138	"label": "Market sizing methodology",
139	"slides": [{ "sceneId": "mkt-1" }, { "sceneId": "mkt-2" }]
140	}
141	```
142
143	`slides` inside a sequence uses the same `SlideRef` shape as the main line. Fragments and nested hotspots are allowed.
144
145	---
146
147	## Slide writing rules
148
149	These are hard constraints, not suggestions. A slide that violates them will be outright replaced when a reviewer sees it.
150
151	- Headline is a complete-sentence claim, not a label. Write "SMBs spend 14 hours/week on manual scheduling" not "Scheduling problem". The sentence should stand alone if the visual is ignored.
152	- One idea + one visual per slide. If you are tempted to add a second bullet cluster or a second chart, split the slide.
153	- Lead with the punchline. The strongest point goes first — on the slide and in the deck order. Investors read left-to-right, top-to-bottom, and they stop.
154	- Bottom-up market sizing only. Never write "$50B TAM" without showing the math. Build from unit economics up: accounts × ACV, or transactions × take-rate.
155	- Font minimum 30pt equivalent. At 1920×1080, a headline is 72–96px; body copy is 48px. Never go below 40px for any text the audience must read.
156
157	## Porting source pages
158
159	When converting an existing page into a slideshow, source fidelity is part of the contract. Do not replace source-specific widgets with simplified approximations unless the user explicitly asks for a redesign.
160
161	- Preserve the original page's visual design, motion language, interactive behavior, media behavior, and presentation affordances as closely as practical. When the slideshow system supports presenter mode, include speaker notes using the shared editable-notes behavior rather than a deck-specific implementation.
162	- Port mechanical visuals from the source DOM/CSS/JS as exactly as practical: custom players, canvas visualizers, timelines, playheads, stems, expanding circles, hover states, and other interactive details should survive the conversion.
163	- Treat native `<video>` / `<audio>` elements as the source of truth for any custom media chrome, canvas visualizer, waveform, beat grid, or playhead. Wire the source's media events (`play`, `pause`, `timeupdate`, `seeking`, `seeked`, `ended`, `ratechange`, `volumechange`) and derive visual state from `media.currentTime`; do not run a separate timer that can drift away from actual playback.
164	- Every copied `<video>` or `<audio>` with `src` must have HyperFrames timing attributes before lint: `data-start` and `data-duration`, plus `data-has-audio="true"` when audible native audio should be preserved. Use the scene's time range for slide-specific media; for user-controlled evidence videos that may be played from multiple focused slides, use a deck-wide range. Do not leave `preload="none"` on media; use `metadata` or `auto`.
165	- Resolve source font tokens before validation. If preserving custom source fonts, add `@font-face` rules for local/captured font files. If using system fallbacks, replace tokenized declarations such as `font-family: var(--f-body)` with concrete render-safe stacks such as `system-ui, sans-serif` or `ui-monospace, monospace`; do not leave `var(...)` as the font family value.
166	- Audit the source for atypical page movement, especially behavior driven by scroll, wheel, touch, hash state, resize, or a requestAnimationFrame loop. Treat fixed viewports with translated/scaled "world" layers, parallax, pinned panels, horizontal scrollers, scroll-scrubbed timelines, section snapping, and zoom-to-element cameras as source behavior. Scroll is often the source's transition trigger, so preserve the transition by extracting its progress stops, easing, and camera/focus states, then re-host that motion on slideshow navigation through timeline positions, fragments, or a reusable player/harness hook. Standalone wrappers that jump to slide hold-points still need an explicit navigation-camera transition hook; computing per-slide camera transforms is not enough. Do not simulate a literal page-scroll-down transition inside the slide; the viewer should feel camera travel/zoom from one focal point to another, not see a webpage being scrolled. Keep each slide-to-slide camera move continuous: avoid intermediate route stops that reverse x/y direction or zoom unless the source visibly does that at the same boundary. A transition that darts around before landing is worse than a simpler direct focal move.
167	- Preserve the source's media crop semantics. Treat screenshots, tweets/social posts, product UI captures, charts, docs, code, leaderboards, and any image with readable text as content evidence, not decorative media: use the source aspect ratio (`height: auto`) or `object-fit: contain` inside a stable frame. Use `object-fit: cover` only when the source did, or for intentionally decorative/background/cinematic thumbnails. After fitting these captures into a slide, inspect all four edges for truncated text, logos, controls, or captions; a visible crop on meaningful content is a bug unless the source itself cropped it.
168	- If a behavior is generic to slideshows, put it in the player/controller or in a reusable skill snippet. Do not solve it with one-off deck scripts.
169	- Stacked scene frames must never block interaction on the active slide. Hidden frames need both visual hiding and event gating:
170
171	```css
172	.scene-frame {
173	opacity: 0;
174	visibility: hidden;
175	pointer-events: none;
176	}
177
178	.scene-frame.is-active {
179	opacity: 1;
180	visibility: visible;
181	pointer-events: auto;
182	}
183	```
184
185	If visibility is driven imperatively, set all three properties (`opacity`, `visibility`, and `pointerEvents`) in the visibility controller. `opacity: 0` alone still leaves an invisible layer that can swallow clicks.
186
187	---
188
189	## Fragments: reveal hold-points within a slide
190
191	A fragment is an absolute composition-timeline time (seconds) within a slide's `[start, end]` range where the controller should hold a reveal state.
192
193	How it works:
194
195	1. Player enters a fragmented slide — seeks directly to `fragments[0]` and holds there.
196	2. User presses Next (or →) — controller seeks to `fragments[1]` and holds.
197	3. After the last fragment, Next advances to the next slide.
198	4. A slide without fragments enters at a rest frame inside the slide, usually its midpoint, not exactly at `slide.end`.
199
200	Fragment times must fall within `[start, end]` (inclusive of both bounds). The lint rule rejects only fragments outside that range (`time < start` or `time > end`).
201
202	Fragment times are absolute composition-timeline positions — the same coordinate space as `data-start` — not offsets relative to the scene's start.
203
204	Navigation is seek-driven, not play-driven. The controller never starts playback just to move between fragments; each navigation command is a deterministic seek to the target hold time. Design fragment states so they are correct at the target timeline time.
205
206	---
207
208	## Branching: hotspots and slide sequences
209
210	Branch slides are real scenes in the same composition timeline. They are listed only under `slideSequences` and are excluded from main-line navigation — the player never visits them unless a hotspot fires.
211
212	Navigation model:
213
214	- Clicking a hotspot pushes `{sequenceId, slideIndex: 0}` onto the nav stack and enters the branch's first slide.
215	- back() pops the stack and returns to the exact parent slide (the one that held the hotspot).
216	- backToMain() clears the entire stack and returns to the root slide.
217	- Breadcrumb renders from the stack: `Main deck › Market sizing methodology › Slide 2`.
218	- The slide counter inside a branch is scoped to that sequence (`1 of 2`, not the main-deck total).
219
220	What to avoid:
221
222	- Do not add branch scene IDs to the main `slides` array. They must appear only inside a `slideSequences` entry. The lint rule flags overlap.
223	- Branch scenes are included in the continuous timeline, so a naive linear video export would include them. Export reads main-line slides only (deferred; flagged in the spec).
224
225	---
226
227	## Worked example: 3-slide deck with fragments and a branch
228
229	### Scene HTML (skeleton)
230
231	```html
232	<body style="margin: 0">
233	<script type="application/hyperframes-slideshow+json">
234	{
235	"slides": [
236	{
237	"sceneId": "hook",
238	"notes": "Open with the stat. Pause on the $40B number."
239	},
240	{
241	"sceneId": "problem",
242	"notes": "Walk through each pain point one at a time.",
243	"fragments": [11.0, 15.0],
244	"hotspots": [
245	{
246	"id": "h1",
247	"label": "Where does the $40B figure come from?",
248	"target": "market-detail",
249	"region": { "x": 55, "y": 60, "w": 40, "h": 20 }
250	}
251	]
252	},
253	{
254	"sceneId": "solution",
255	"notes": "One sentence: what we do and who it is for."
256	}
257	],
258	"slideSequences": [
259	{
260	"id": "market-detail",
261	"label": "Market sizing methodology",
262	"slides": [{ "sceneId": "mkt-math", "notes": "Bottom-up: 2.3M SMBs × $17k ACV." }]
263	}
264	]
265	}
266	</script>
267
268	<!-- Slide 1 — hook -->
269	<div
270	data-composition-id="hook"
271	data-start="0"
272	data-duration="6"
273	data-label="The hook"
274	data-width="1920"
275	data-height="1080"
276	style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0a0a0a"
277	>
278	<section
279	class="clip"
280	data-start="0"
281	data-duration="6"
282	data-track-index="1"
283	style="position: absolute; inset: 0; display: grid; place-items: center"
284	>
285	<h1 id="hook-headline" style="font-size: 80px; color: #fff; font-family: sans-serif">
286	SMBs lose $40B/year to manual scheduling
287	</h1>
288	</section>
289	</div>
290
291	<!-- Slide 2 — problem (3 fragments) -->
292	<div
293	data-composition-id="problem"
294	data-start="6"
295	data-duration="15"
296	data-label="The problem"
297	data-width="1920"
298	data-height="1080"
299	style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0a0a0a"
300	>
301	<section
302	class="clip"
303	data-start="6"
304	data-duration="15"
305	data-track-index="1"
306	style="position: absolute; inset: 0; padding: 120px 160px; box-sizing: border-box"
307	>
308	<h2 id="pain-headline" style="font-size: 64px; color: #fff; font-family: sans-serif">
309	Three gaps operators can not close
310	</h2>
311	<p id="pain-1" style="font-size: 48px; color: #ccc; opacity: 0; font-family: sans-serif">
312	No-shows cost 23% of booked revenue
313	</p>
314	<p id="pain-2" style="font-size: 48px; color: #ccc; opacity: 0; font-family: sans-serif">
315	Manual remin

6 picks

Type

Run `npx skills use "https://github.com/heygen-com/hyperframes" --skill "heygen-com/hyperframes/slideshow"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/heygen-com/hyperframes" that are relevant to the current task. Run `npx skills add "https://github.com/heygen-com/hyperframes"` and select the relevant skills, then follow their instructions.

slideshow

How to install slideshow?

Related

slideshow

How to install slideshow?

Related