mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 07:19:52 +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>
91 lines
4.5 KiB
Markdown
91 lines
4.5 KiB
Markdown
# 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.
|