chore: import upstream snapshot with attribution

registry/examples/airbnb-deck/DESIGN.md

@@ -0,0 +1,90 @@
+# Airbnb Seed Deck — Design Notes
+
+## Intent
+
+A premium remake of Airbnb's 2009 seed pitch deck using current Airbnb brand language.
+The composition should feel warm, human, and tasteful — the opposite of a tech startup
+dark-mode deck. White canvas, generous space, soft coral accents. Three.js backgrounds
+are elegant mood-setters, never distracting.
+
+## Color Palette
+
+| Token            | Value     | Use                                  |
+| ---------------- | --------- | ------------------------------------ |
+| Rausch (primary) | `#FF385C` | CTAs, logo, accent bars, highlights  |
+| Coral warm       | `#FF5A5F` | Gradient partner to Rausch           |
+| Babu dark        | `#E61E4D` | Hover / emphasis gradient endpoint   |
+| Off-white        | `#FFFFFF` | Slide background on light slides     |
+| Hof dark         | `#222222` | Primary text; dramatic dark slide bg |
+| Foggy gray       | `#717171` | Body copy, captions, secondary text  |
+| Arches light     | `#F7F7F7` | Card backgrounds, subtle panel fills |
+| Arches pink      | `#FFF1F1` | Soft pink tint for card areas        |
+
+Do not introduce blue, purple, or green accents. The palette is warm coral + neutral.
+
+## Typography
+
+**Font**: "Nunito Sans" from Google Fonts — geometric, rounded, friendly.
+Fallback stack: `"Nunito Sans", "Montserrat", system-ui, sans-serif`.
+
+| Role     | Size (1920×1080) | Weight            |
+| -------- | ---------------- | ----------------- |
+| Headline | 80–96px          | 800               |
+| Subhead  | 48px             | 400               |
+| Body     | 40–44px          | 400–600           |
+| Eyebrow  | 28–32px          | 700, letterspaced |
+| Numbers  | 96–120px         | 900               |
+
+Minimum readable size: 40px. Never go below that for audience-facing text.
+
+## The Bélo Logo
+
+The Bélo is Airbnb's universal belonging mark — a rounded loop that is simultaneously
+a heart, a location pin, and a letter A. Reproduce it as inline SVG in Rausch `#FF385C`.
+
+Use on: cover slide (large, centered), corner mark on every slide (48×48px, top-left).
+Do NOT stretch or recolor the Bélo. Pair with lowercase "airbnb" wordmark in `#222222`.
+
+## Layout Language
+
+- **Generous whitespace**: 120px top/bottom padding, 160px left/right on 1920px canvas.
+- **Rounded corners**: 16–24px on all cards and stat blocks.
+- **Soft shadows**: `box-shadow: 0 4px 24px rgba(0,0,0,0.08)` for cards.
+- White or very light slide backgrounds for most slides (readable and clean).
+- Dark background (`#222222`) for: Cover (optional dramatic variant), Team, Ask.
+- Keep layouts left-aligned or centered — never right-heavy.
+
+## Three.js Background Moods (per-slide)
+
+Backgrounds run on a persistent WebGL canvas behind all slide content.
+All animations use a fixed seed (no `Math.random()`); seeded using a deterministic LCG.
+Particle counts, positions, and velocities are computed from seeded values.
+
+| Slide         | Mood                                                                |
+| ------------- | ------------------------------------------------------------------- |
+| cover         | Soft floating coral particles, slow upward drift, warm pink fog     |
+| problem       | Desaturated gray particles, slower/heavier motion, cooler hue       |
+| solution      | Coral bloom: particles converge inward, warm pulse                  |
+| market        | Low-poly globe outline with soft arc routes in coral, gentle rotate |
+| product       | Clean minimal — very subtle grid of pale dots, nearly static        |
+| business      | Same as product — minimal                                           |
+| adoption      | Sparse warm nodes with thin connecting lines (network graph feel)   |
+| competition   | Cool gray minimal — positioning matrix backdrop                     |
+| team          | Soft bokeh: large blurred coral orbs, slow parallax                 |
+| ask           | Coral gradient swell — warm radial from center, slow pulse          |
+| market-sizing | Same globe as market, camera zoomed in, arcs highlighted            |
+
+## Do's
+
+- Large, single-stat slides for numbers ($2.1B, $500K) — let the number breathe.
+- Bottom-up math shown explicitly: trips × take-rate = revenue.
+- Complete-sentence headlines that make a claim, not a label.
+- SVG Bélo mark consistent across slides.
+
+## Don'ts
+
+- No dark purple, electric blue, neon green.
+- No hero imagery or stock photos (pure typography + Three.js + SVG).
+- No glassmorphism, frosted panels, or gamer-aesthetic effects.
+- No unseeded random values — all Three.js positions must be deterministic.
+- No font below 40px for any audience-visible text.

registry/examples/airbnb-deck/demo.html

@@ -0,0 +1,187 @@
+<!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>