Hyperframes 用 HTML 重制 Airbnb 2009 种子轮 Pitch Deck从设计规范到可交互放映的实现拆解【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes在 Hyperframes 中一切视频内容都是 Write HTML, Render video——HTML 即画面Timeline 即叙事。registry/examples/airbnb-deck/目录下的示例用纯 HTML CSS Three.js 完整重制了 Airbnb 2009 年种子轮融资演讲稿并叠加了 Hyperframes 的 slideshow演示放映能力分镜注释、碎片化揭示、热点分支跳转、音效 cue 一应俱全。阅读本文后你将掌握如何把一份设计规范Design Spec落地为一段 108 秒、11 幕主场景 1 条分支序列的完整融资 Deck 组合Composition并理解背后的场景可见性控制、确定性粒子背景与 JSON island 清单机制。本文以 registry/examples/airbnb-deck/DESIGN.md 为设计骨架以 index.html 与 demo.html 为实现证据并对照 packages/parsers/src/slideshow/parseSlideshow.ts 等解析器源码说明底层机制。设计意图做一个温暖、有人味的科技演讲稿DESIGN.md 的开篇 Intent 明确了这条创作主线用当下的 Airbnb 品牌语言对 2009 年的种子轮 Deck 做一次高级感重制。它的气质定位是温暖、人性化、有品味——与典型的科技创业暗色模式演讲稿相反白色画布、充裕留白、柔和的珊瑚色点缀Three.js 背景只做优雅的氛围定调者绝不抢戏。这一定位直接决定了后续所有 token 选择暖色珊瑚 中性色明确的反暗色、反炫技设计哲学。在 index.html 中这一意图被落实为#FFFFFF的页面底色与每张幻灯片上的scrim-light浅色玻璃渐变遮罩让文字始终在 3D 粒子之上保持可读。色彩体系Token 化的暖珊瑚色板DESIGN.md 给出了 8 个语义化色彩 token并在源码 CSS 中一一对应见 index.htmlToken值用途源码中的落点Rausch (primary)#FF385CCTA、Logo、强调条、高亮.eyebrow、.stat-number、.accent-bar、#cover-belo描边Coral warm#FF5A5F与 Rausch 搭配的渐变Three.js bokeh 光斑第二色Babu dark#E61E4D悬停 / 强调渐变终点.math-result数学结果的强调色Off-white#FFFFFF浅色幻灯片背景body背景、浅色 slide 底Hof dark#222222主文本戏剧性深色 slide 背景.headline文字色、Team/Ask 场景背景Foggy gray#717171正文、说明文字、次要文本.subhead、.stat-label、.problem-subArches light#F7F7F7卡片背景、细微面板填充Problem 场景 WebGL 清屏色Arches pink#FFF1F1卡片区域的柔和粉色底.card背景、竞争矩阵 Airbnb 行背景设计规范明确要求不要引入蓝色、紫色或绿色点缀色板保持暖珊瑚 中性。从实现看连 Three.js 的 MOODS 配置都严格遵守了这一约束——problem场景的去饱和灰粒子使用的是{ r: 0.6, g: 0.55, b: 0.58 }的暖灰色而非冷蓝详见 index.html。字体排印Nunito Sans 与 1920×1080 下的字号阶梯字体选用 Google Fonts 的Nunito Sans——几何、圆润、友好Fallback 栈为Nunito Sans, Montserrat, system-ui, sans-serif。字体通过link预连接加载权重覆盖 400/600/700/800/900见 index.html。DESIGN.md 的字号阶梯针对 1920×1080 画布与源码类一一对应角色尺寸字重源码类Headline80–96px800.headline80px、.headline-lg88pxSubhead48px400.subhead/.subhead-center44pxBody40–44px400–600.card-body36–40px、.step-text44pxEyebrow28–32px700, letterspaced.eyebrow28px,letter-spacing: 0.14em, 大写Numbers96–120px900.stat-number96px、Ask 页$500K120px硬性下限面向观众的文字不小于 40px。这也是为什么源码中所有audience-facing文本都落在 36–120px 区间36px 仅用于 team-bio 这类次要信息且明确低于规范下限属于刻意为之的层级压缩。Bélo 标识SVG 复刻的归属符号Bélo 是 Airbnb 的归属感标志——一个同时是爱心、定位针和字母 A 的圆角环。DESIGN.md 要求以行内 SVG 复刻使用 Rausch#FF385C并且不得拉伸或改色。实现中Bélo 被封装为一个 100×100 viewBox 的 path心形外廓 圆点中心svg width120 height120 viewBox0 0 100 100 fillnone path dM50 10 C30 10, 16 26, 16 42 C16 60, 32 73, 50 90 C68 73, 84 60, 84 42 C84 26, 70 10, 50 10 Z stroke#FF385C stroke-width5 fillnone/ circle cx50 cy40 r12 fill#FF385C/ /svg使用场景遵循规范封面页大号居中120px其余每页左上角 48×48 角标belo-corner36px SVG 28px 的airbnb小写字标见 index.html。深色页面上字标保持 Rausch 色与白字形成品牌对比。版式语言留白、圆角、柔和阴影与左对齐DESIGN.md 的布局规范在 CSS 中被逐一落实充足留白slide-inner使用padding: 100px 160px对应规范上下 120px / 左右 160px的量级内容垂直居中圆角.card、.team-card使用border-radius: 20px落在 16–24px 区间柔和阴影规范给出box-shadow: 0 4px 24px rgba(0,0,0,0.08)作为卡片基准深色背景页Team 与 Ask 两幕使用scrim-dark玻璃渐变遮罩底色为 Hof#222222营造全片仅有的两处戏剧性停顿左对齐或居中绝大多数布局走左对齐slide-inner或居中slide-center避免右侧重心。一个值得注意的细节slide-inner的 scrim 采用径向渐变玻璃遮罩——中心足够实以承载文字边缘淡出以露出 3D 粒子例如scrim-light使用radial-gradient(ellipse 75% 80% at 50% 50%, rgba(255,255,255,0.88) 30%, rgba(255,255,255,0.60) 65%, rgba(255,255,255,0.0) 100%)。这让背景是氛围、前景是叙事的设计意图在技术上成立。Three.js 背景氛围确定性 LCG 驱动的粒子世界DESIGN.md 规定背景跑在一块常驻的 WebGL 画布上位于所有幻灯片内容之后CSSz-index: 0pointer-events: none并且所有动画使用固定种子禁止Math.random()。粒子的数量、位置、速度全部由种子化数值推导。种子化 LCG 实现源码使用经典的线性同余生成器LCG作为确定性伪随机源function makeLCG(seed) { var s seed 0; return function () { s (Math.imul(1664525, s) 1013904223) 0; return s / 4294967296; }; }同一种子粒子用makeLCG(42)、地球弧线用makeLCG(99)、光斑用makeLCG(17)在任意机器、任意帧上产生完全一致的世界从而保证渲染的可复现性determinism——这是 Hyperframes 组合设计的核心原则之一参见 docs/concepts/determinism.mdx。三套可复用 3D 资产粒子系统280 个粒子PointsMaterial顶点着色、透明度 0.55垂直方向带轻微上漂速度并在边界回绕低多边形地球IcosahedronGeometry(2.2, 2)线框球体 12 条贝塞尔式弧线路径模拟航线只在 market / market-sizing 场景显示置于右侧以免遮挡左侧文字光斑 bokeh8 个半透明珊瑚色球体缓慢视差旋转仅 Team 场景启用。按场景切换的 MOODS 配置每张幻灯片的背景氛围由 MOODS 表驱动——粒子颜色、透明度、是否显示地球/光斑、清屏色全部集中定义见 index.html场景氛围MOODS 关键参数cover暖珊瑚粒子缓慢上浮、暖粉雾感r:1.0 g:0.22 b:0.36opacity 0.55problem去饱和灰粒子、更慢更重、色调偏冷r:0.6 g:0.55 b:0.58opacity 0.30solution珊瑚色汇聚、温暖脉冲opacity 0.60market低多边形地球 珊瑚弧线、缓转globe: trueproduct / business极简——淡色点阵、近乎静止opacity 0.35adoption稀疏暖色节点 细连线网络图感默认珊瑚色competition冷灰极简——定位矩阵背景opacity 0.25team柔焦 bokeh 大光斑、慢视差bokeh: truebg#222222ask珊瑚色渐变膨胀——中心暖径向、慢脉冲opacity 0.60bg#222222market-sizing同 market 地球镜头拉近、弧线高亮globe: truebg#1a1a1a场景切换通过applyMood(id)一次性更新粒子色、材质透明度、地球/光斑可见性与清屏色再经window.__threeApplyMood暴露给可见性控制器调用。优雅降级无 GPU 环境的兜底实现还包含了健壮性设计WebGLRenderer创建放在try/catch中期间临时静默console.error避免报错刷屏若创建失败画布被隐藏并暴露一个 no-op 的__threeApplyMood整套白底品牌版式作为回退方案照常放映见 index.html。时间轴与场景编排108 秒 × 11 幕 1 条分支DESIGN.md 本身没有给出时间轴但 index.html 的注释与data-start/data-duration属性完整定义了它的叙事编排11 个主场景每幕 9 秒共 108 秒末尾 9 秒为分支场景。时间段场景关键叙事0–9scoverBook rooms with locals, rather than hotels.9–18sproblem两个问题逐条揭示fragments 9.3s / 9.6s18–27ssolution三张价值主张卡片Save Money / Make Money / Share Culture27–36svalidation660K Couchsurfing 成员 Craigslist 供给侧36–45smarket底部向上测算560M × 15% × $25 $2.1B45–54sproduct三步预订Search → Book → Travel54–63sbusiness10% 佣金80K × $26 $2.1M63–72sadoption活动、Craigslist 交叉发布、媒体合作72–81scompetition五方定位矩阵81–90steam三位创始人卡片深色页90–99sask$500K 种子轮 45/30/25 资金用途深色页99–108smarket-sizing分支场景市场测算方法论三步拆解场景容器使用统一的scene-frame类绝对定位铺满 1920×1080、opacity: 0初始隐藏、z-index: 1位于画布之上。可见性由底部的控制器脚本维护场景表sceneKey / start / end按当前时间切换opacity与pointerEvents并在场景切换时调用__threeApplyMood同步背景、触发 GSAP 入场动画gsap.from以 0.4s、power2.out、stagger 0.07 让[data-anim]元素依次上浮淡入。Slideshow 清单JSON island 驱动的演示放映与普通视频组合不同这个 Deck 还具备演示放映presentation能力——这正是 Hyperframes 的 slideshow 机制。组合内嵌一个application/hyperframes-slideshowjson类型的 JSON island描述幻灯片与演讲者注释{ 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: 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 } } ] } ], slideSequences: [ { id: market-math-detail, label: Market sizing methodology, slides: [{ sceneId: market-sizing, notes: Bottom-up drill: ... }] } ] }该清单的 schema 由 packages/parsers/src/slideshow/slideshow.types.ts 定义SlideRef支持sceneId、可选的startTime/endTime、fragments、hotspots、autoplaySlideSequence由idlabelslides组成SlideHotspot通过target引用一条序列region以幻灯片尺寸百分比指定点击区域。解析与校验parseSlideshow.ts 做了什么packages/parsers/src/slideshow/parseSlideshow.ts 从组合 HTML 中抽取并校验该 islandslideshowIslandRegex构造匹配script typeapplication/hyperframes-slideshowjson.../script的正则提取内层 JSONparseSlideshowManifest解析并做类型守卫isManifest/isSlideRef/isSlideSequence非法结构直接抛错resolveSlideshow将每个sceneId与组合的场景时间范围start duration对齐解析出每张幻灯片的实际起止时间支持只给startTime或endTime单边时从场景补齐校验规则覆盖fragment 必须落在场景时间区间内、主线上幻灯片不得重叠、hotspot 的target必须指向存在的非空序列、重复的 sequence id 会被标记。也就是说DESIGN.md 中Problem 场景两个碎片在 9.3s / 9.6s 揭示这类节奏设计会被解析器严格校验保证与时间轴一致。放映器嵌入与音效架构demo.html 的组装方式demo.html 演示了如何把组合嵌入幻灯片放映器hyperframes-slideshow tabindex0 sound styledisplay: block; position: relative; width: 100vw; height: 100vh hyperframes-player styleposition: absolute; inset: 0 srcindex.html/hyperframes-player script typeapplication/hyperframes-slideshowjson { /* 与 index.html 中的 island 保持同步的副本 */ } /script /hyperframes-slideshow两个要点值得注意island 是刻意重复的hyperframes-slideshow从自身的 innerHTML读取清单而不是从 player 加载的组合中读取。demo.html 顶部的注释明确警告修改 index.html 中的 slides、fragments、hotspots 或 sequences 时必须同步这份副本。音效必须活在接收用户手势的父文档里组合 iframe 检测到翻页 / 碎片 / 分支进入 / 返回时通过parent.postMessage({ type: hf-sfx, name }, *)向父文档发 cue父文档持有 4 个音频剪辑sfx/advance.mp3、sfx/fragment.mp3、sfx/branch-enter.mp3、sfx/back.mp3见 sfx 目录并在首次键盘 / 指针 / 点击手势时以静音方式预载prime所有剪辑以绕过自动播放限制。静音状态由hyperframes-slideshow sound组件持有通过hf-sound事件同步给音效脚本。组合内部的__playSfx除了向父文档发 cue还会做尽力而为的本地播放兜底——仅在组合文档自身获得激活例如被直接打开时触发。Dos 与 Donts重制演讲稿的检查清单DESIGN.md 末尾的规范清单可以当作自检清单使用Dos应当坚持的大号单数据统计页$2.1B、$500K——让数字呼吸用显式的自底向上算式展示推理trips × take-rate revenue完整陈述句标题表达主张而非仅做标签SVG Bélo 在各页保持一致。Donts应当避免的不出现深紫、电光蓝、霓虹绿不用 hero 图或库存照片——纯排版 Three.js SVG不用玻璃拟态、磨砂面板或游戏化美学注意scrim-light的径向渐变是可读性遮罩而非玻璃拟态属于刻意为之的例外不用未种子化的随机值——所有 Three.js 位置必须确定任何面向观众的文字不低于 40px。源码对照速查以下文件可以帮助你继续深入本示例与相关机制设计规范registry/examples/airbnb-deck/DESIGN.md组合实现时间轴、CSS、Three.js、JSON islandregistry/examples/airbnb-deck/index.html放映器组装与音效架构registry/examples/airbnb-deck/demo.html音效素材sfx 目录Slideshow 清单解析与校验packages/parsers/src/slideshow/parseSlideshow.ts清单类型定义packages/parsers/src/slideshow/slideshow.types.ts放映器组件实现packages/player/src/slideshow/hyperframes-slideshow.ts确定性渲染原则docs/concepts/determinism.mdx从这个示例可以看到一条完整的创作路径先用 DESIGN.md 把调性、色板、字号、版式、氛围锁死成可执行规范再在 index.html 中用 108 秒连续时间轴 确定性 Three.js 背景 JSON island 清单把它变成既可直接渲染、又可演示放映的 Deck。对于需要在 Hyperframes 中制作演讲稿、产品发布页或多幕叙事视频的开发者这套规范先行、实现对应、机制校验的组合拳可以直接复用。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考