[bubbleptr]

这是什么

官网首屏到功能区的整体改造：用 HTML/CSS 高保真复刻真实 App 界面与交互，替换原先的 SVG 动画。

改了什么

① 首屏 Dashboard 露出

• 新增 DashboardWindow：复刻「首页」——红绿灯 + 侧边栏、4 张统计卡（「平均延时」为高亮选中态）、语音输入场景环形图 + 使用时段分布柱状图、历史记录（已注入/已润色双标签）。
• 窗口从 hero 视口底部「升」上来，只露顶部一截引导下滑。

② App 真实交互复刻（替换 SVG 动画）

• 新增 OverlayCapsule：1:1 还原悬浮黑胶囊，5 根波形条直接照搬 App 源码 WaveformView 的正弦包络公式，配白色滑动文字 + 阶段占位。
• useDictationScene 把「说话→转写→润色→注入」做成纯时间线，离屏自动暂停。

③ 场景自动切换 → sticky 功能区

• 新增 Features：左侧 sticky 导航（AI Rewrite / In context / Always ready）+ 右侧文档流滚动，IntersectionObserver 滚动高亮；导航顶部与每节标题严格平齐。
• 三个场景均为 App 界面复刻：Slack 改写、上下文多文体 tabs、桌面浮动 overlay。

关键修复

• .page 改用 overflow-x: clip（而非 hidden）——hidden 会创建滚动容器、破坏 position: sticky。
• .features-flow 加 min-width: 0，避免场景窗口 min-content 撑爆移动端 1fr 轨道导致横向溢出。

清理

• 删除旧 DemoCard 组件、content.ts 中已无用的 demoExamples/capabilities，以及 demo/capability 相关死 CSS。

验证

• bun run build 通过，无 TS/构建错误。
• 桌面端 + 移动端逐段预览截图确认（首屏露出、完整 Dashboard、三个功能场景、导航对齐、响应式）。

注：未包含 .claude/ 等本机预览配置。

[github-actions]

🤖 Open Code Review

Model deepseek-v4-flash · 6 comments · 0 warnings

• website/src/components/DashboardWindow.tsx:0 — Side effect in map() callback — The offset variable is mutated inside .map() via offset += len. While this works because .map() is synchronous, it's an anti-pattern: a mapping function should be pure (no external side effects). If the ordering changes or the code is refactored to be asynchronous, this will silently break. Consider pre-computing the offsets before the map, or using reduce to build the segments array with pre-calculated offsets.
• website/src/components/DashboardWindow.tsx:321 — Cryptic icon function name — AxIcon is unclear and doesn't convey its purpose. It's used alongside MicIcon (Microphone) in the dash pills with the label "Accessibility", so it clearly represents an accessibility icon. Consider renaming to AccessibilityIcon for consistency and readability, matching the naming pattern of the other icon functions.
• website/src/components/DashboardWindow.tsx:148 — Non-interactive element for an action — "Copy text" is rendered as a <span>, but semantically it represents an actionable item. Even though this is currently a static demo, using a <button> (styled as plain text) would be more accessible for screen readers and more resilient if interactivity is added later.
• website/src/components/Features.tsx:56 — Hardcoded section count 3 should be derived from navItems.length to stay in sync if nav items change. If someone adds/removes a nav entry without updating this number, the scroll-spy observer won't track the correct number of sections.
• website/src/components/useDictationScene.ts:0 — The examples dependency in the animation useEffect is a stability footgun: if a consumer ever passes a freshly created array reference (e.g., inline literal or non-memoized mapping), the effect will tear down and restart the entire requestAnimationFrame loop on every render, causing a jarring reset for the user. Currently all three consumers in Features.tsx use module-level const arrays (stable references), so it's not triggered today — but consider documenting this contract or ...
• website/src/components/useDictationScene.ts:35 — In viewAt, if totalElapsed were ever negative (theoretical edge case — though performance.now() is monotonic, a bug elsewhere or a timing glitch could produce a negative value), Math.floor on a negative number combined with JavaScript's % operator (which retains the dividend's sign) would yield a negative index, causing examples[negativeIndex] to return undefined and crash at the destructuring { said, writes }. Clamping totalElapsed to >= 0 at the top of viewAt adds a ...