mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
Vance IngallsandClaude Opus 4.8
ae40498433
* feat(player): slideshow controller state machine Stack-split from the original ss-player PR (#1581): the SlideshowController state machine (stack-based slide/fragment/branch navigation) and its tests. The <hyperframes-slideshow> web component follows in the next PR. * feat(player): <hyperframes-slideshow> web component + presenter Stack-split from the original ss-player PR (#1581): the <hyperframes-slideshow> custom element (wraps <hyperframes-player>, drives the controller), presenter/audience BroadcastChannel sync, nav chrome, and the player scenes hook. * feat(studio): slideshow manifest persistence + panel helpers Stack-split from the original ss-studio PR (#1582): the data layer — setSlideshowManifest, the useSlideshowPersist hook, and panel helpers. The editor panel UI follows in the next PR. * feat(studio): slideshow branching editor panel UI Stack-split from the original ss-studio PR (#1582): the SlideshowPanel / SlideshowSubPanels editor UI, right-panel wiring, and app integration. * docs(skill): slideshow authoring guidance + standalone harness reference New /slideshow skill (island schema, slide rules, fragments, branching, validation) + a standalone-harness reference doc, and a router entry in the /hyperframes skill. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * test(examples): slideshow demos — airbnb deck, startup pitch, fixture Three runnable slideshow compositions: a current-Airbnb-branded remake of the 2009 seed deck (Three.js backgrounds, GSAP entrances, hotspot branch, HeyGen SFX), an animated startup pitch, and a minimal fixture. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
188 lines
6.7 KiB
HTML
Vendored
188 lines
6.7 KiB
HTML
Vendored
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Airbnb 2009 Seed Deck — Slideshow Demo</title>
|
||
<script src="../../../packages/player/dist/hyperframes-player.global.js"></script>
|
||
<script src="../../../packages/player/dist/slideshow/hyperframes-slideshow.global.js"></script>
|
||
<style>
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
html,
|
||
body {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
background: #111;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!--
|
||
NOTE: The <script type="application/hyperframes-slideshow+json"> island below is a
|
||
COPY of the island inside index.html. This duplication is intentional: <hyperframes-slideshow>
|
||
reads the island from its OWN innerHTML (not from the composition loaded by
|
||
<hyperframes-player>). Keep this copy in sync with the island in index.html whenever
|
||
slides, fragments, hotspots, or sequences change.
|
||
-->
|
||
<hyperframes-slideshow tabindex="0" sound style="display: block; position: relative; width: 100vw; height: 100vh">
|
||
<hyperframes-player
|
||
style="position: absolute; inset: 0"
|
||
src="index.html"
|
||
></hyperframes-player>
|
||
|
||
<script type="application/hyperframes-slideshow+json">
|
||
{
|
||
"slides": [
|
||
{
|
||
"sceneId": "cover",
|
||
"notes": "Open with the tagline. Let the Bélo breathe. This is the belonging company."
|
||
},
|
||
{
|
||
"sceneId": "problem",
|
||
"notes": "Two problems, one at a time. Price first — hotels are expensive. Then connection.",
|
||
"fragments": [9.3, 9.6]
|
||
},
|
||
{
|
||
"sceneId": "solution",
|
||
"notes": "Platform connects hosts and travelers. Belong anywhere. Three value props."
|
||
},
|
||
{
|
||
"sceneId": "validation",
|
||
"notes": "Couchsurfing proves demand: 660k members want this. Craigslist shows supply side."
|
||
},
|
||
{
|
||
"sceneId": "market",
|
||
"notes": "Bottom-up: trips × take-rate = $2.1B. Use the hotspot for the drill-down math.",
|
||
"hotspots": [
|
||
{
|
||
"id": "mkt-hotspot",
|
||
"label": "Show me the math",
|
||
"target": "market-math-detail",
|
||
"region": { "x": 70, "y": 80, "w": 25, "h": 12 }
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"sceneId": "product",
|
||
"notes": "Three clicks: Search, Book, Travel. Show the booking flow simplicity."
|
||
},
|
||
{
|
||
"sceneId": "business",
|
||
"notes": "10% commission. At 80k transactions × $26 avg nightly take = $2.1M revenue."
|
||
},
|
||
{
|
||
"sceneId": "adoption",
|
||
"notes": "Events, conferences, Craigslist cross-posting, partnerships. Grass-roots growth."
|
||
},
|
||
{
|
||
"sceneId": "competition",
|
||
"notes": "Matrix: cheapest + online + transaction. Airbnb is the only one that hits all three."
|
||
},
|
||
{
|
||
"sceneId": "team",
|
||
"notes": "Brian (CEO/design), Joe (design), Nate (engineering). Domain depth: housing + tech."
|
||
},
|
||
{
|
||
"sceneId": "ask",
|
||
"notes": "Raising $500K. 12 months runway. Target: 80K transactions ≈ $2M revenue."
|
||
}
|
||
],
|
||
"slideSequences": [
|
||
{
|
||
"id": "market-math-detail",
|
||
"label": "Market sizing methodology",
|
||
"slides": [
|
||
{
|
||
"sceneId": "market-sizing",
|
||
"notes": "Bottom-up drill: global trips × budget share × online booking rate × take-rate = $2.1B."
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
</script>
|
||
</hyperframes-slideshow>
|
||
|
||
<!--
|
||
Sound effects play HERE, in the parent document. The composition (loaded in the
|
||
player's iframe) detects slide/fragment/branch transitions and posts
|
||
{ type: 'hf-sfx', name } to the parent. Audio must live in the frame that
|
||
receives the user's gesture (the parent) — an iframe without its own user
|
||
activation is autoplay-blocked. The mp3s are in sfx/ next to this file.
|
||
|
||
Mute state is owned by <hyperframes-slideshow sound>. Listen for 'hf-sound'
|
||
events (or read slideshow.muted / data-hf-muted) to skip playback when muted.
|
||
-->
|
||
<script>
|
||
(function () {
|
||
var clips = {
|
||
advance: new Audio("sfx/advance.mp3"),
|
||
fragment: new Audio("sfx/fragment.mp3"),
|
||
"branch-enter": new Audio("sfx/branch-enter.mp3"),
|
||
back: new Audio("sfx/back.mp3"),
|
||
};
|
||
clips.advance.volume = 0.45;
|
||
clips.fragment.volume = 0.4;
|
||
clips["branch-enter"].volume = 0.4;
|
||
clips.back.volume = 0.4;
|
||
for (var k in clips) clips[k].preload = "auto";
|
||
|
||
// Track mute state: updated via 'hf-sound' events from the slideshow chrome.
|
||
var muted = false;
|
||
var slideshow = document.querySelector("hyperframes-slideshow");
|
||
if (slideshow) {
|
||
slideshow.addEventListener("hf-sound", function (e) {
|
||
muted = e.detail && e.detail.muted === true;
|
||
});
|
||
}
|
||
|
||
var unlocked = false;
|
||
function unlock() {
|
||
if (unlocked) return;
|
||
unlocked = true;
|
||
// Prime each clip (play muted then reset) so later plays are instant + allowed.
|
||
Object.keys(clips).forEach(function (name) {
|
||
var el = clips[name];
|
||
var v = el.volume;
|
||
el.volume = 0;
|
||
el.play()
|
||
.then(function () {
|
||
el.pause();
|
||
el.currentTime = 0;
|
||
el.volume = v;
|
||
})
|
||
.catch(function () {
|
||
el.volume = v;
|
||
});
|
||
});
|
||
}
|
||
window.addEventListener("keydown", unlock, true);
|
||
window.addEventListener("pointerdown", unlock, true);
|
||
window.addEventListener("click", unlock, true);
|
||
|
||
window.addEventListener("message", function (e) {
|
||
var d = e.data;
|
||
if (!d || d.type !== "hf-sfx") return;
|
||
// Skip playback when muted — the component owns mute state.
|
||
if (muted) return;
|
||
var el = clips[d.name];
|
||
if (!el || !unlocked) return;
|
||
try {
|
||
el.currentTime = 0;
|
||
el.play().catch(function () {});
|
||
} catch (err) {
|
||
/* ignore */
|
||
}
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|