From 61dbb31d1d10d34a4c8f4738366ce15eeb67c512 Mon Sep 17 00:00:00 2001
From: Kieran Zhang <oldmeatovo@gmail.com>
Date: Thu, 11 Jun 2026 23:38:43 +0800
Subject: [PATCH 1/5] feat(website): app-true showcase, overlay capsule, and
 sticky feature scroller

- Add a high-fidelity Home dashboard recreation that peeks up from the hero
  (traffic lights, sidebar, highlighted stat cards, donut + hours charts,
  history) so the empty fold invites scrolling
- Replace the SVG demo with a 1:1 overlay capsule (waveform envelope mirrors
  the app's WaveformView) driven by a shared dictation timeline
- Convert the auto-switching scenes into a sticky-sidebar feature scroller
  (AI Rewrite / In context / Always ready) with scroll-spy highlighting
- Float the overlay capsule below the window edge; nav top-aligns with each
  section heading
- Fix: .page uses overflow-x: clip (not hidden) so position: sticky works;
  .features-flow gets min-width: 0 to stop scenes overflowing on mobile
- Remove the old DemoCard and dead demo/capability styles
---
 website/src/components/AppWindow.tsx        |   35 +
 website/src/components/DashboardWindow.tsx  |  322 +++++
 website/src/components/DemoCard.tsx         |   93 --
 website/src/components/Features.tsx         |  302 ++++
 website/src/components/LandingPage.tsx      |   36 +-
 website/src/components/OverlayCapsule.tsx   |  129 ++
 website/src/components/content.ts           |   52 -
 website/src/components/useDictationScene.ts |  101 ++
 website/src/styles.css                      | 1382 +++++++++++++++----
 9 files changed, 2008 insertions(+), 444 deletions(-)
 create mode 100644 website/src/components/AppWindow.tsx
 create mode 100644 website/src/components/DashboardWindow.tsx
 delete mode 100644 website/src/components/DemoCard.tsx
 create mode 100644 website/src/components/Features.tsx
 create mode 100644 website/src/components/OverlayCapsule.tsx
 create mode 100644 website/src/components/useDictationScene.ts

diff --git a/website/src/components/AppWindow.tsx b/website/src/components/AppWindow.tsx
new file mode 100644
index 0000000..0290075
--- /dev/null
+++ b/website/src/components/AppWindow.tsx
@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react'
+
+// Reusable macOS window chrome. Traffic lights + optional toolbar, then a body
+// slot. Used both for the Voily dashboard recreation and the target-app scenes.
+
+type AppWindowProps = {
+  children: ReactNode
+  className?: string
+  toolbar?: ReactNode
+  flush?: boolean
+}
+
+export function TrafficLights() {
+  return (
+    <span className="win-lights" aria-hidden="true">
+      <span className="win-light win-close" />
+      <span className="win-light win-min" />
+      <span className="win-light win-zoom" />
+    </span>
+  )
+}
+
+export function AppWindow({ children, className, toolbar, flush }: AppWindowProps) {
+  return (
+    <div className={`app-window${className ? ` ${className}` : ''}`}>
+      {toolbar !== undefined ? (
+        <div className="win-toolbar">
+          <TrafficLights />
+          {toolbar}
+        </div>
+      ) : null}
+      <div className={`win-body${flush ? ' is-flush' : ''}`}>{children}</div>
+    </div>
+  )
+}
diff --git a/website/src/components/DashboardWindow.tsx b/website/src/components/DashboardWindow.tsx
new file mode 100644
index 0000000..6b40be8
--- /dev/null
+++ b/website/src/components/DashboardWindow.tsx
@@ -0,0 +1,322 @@
+import { AppWindow, TrafficLights } from './AppWindow'
+import { OverlayCapsule } from './OverlayCapsule'
+
+// High-fidelity recreation of Voily's Home dashboard (see assets/screenshots/hero.png).
+// English-labelled to match the rest of the marketing site.
+
+const navGroups = [
+  {
+    label: 'General',
+    items: [{ id: 'home', name: 'Home', icon: HomeIcon, active: true }],
+  },
+  {
+    label: 'Setup',
+    items: [
+      { id: 'models', name: 'Models', icon: CubeIcon },
+      { id: 'dictionary', name: 'Dictionary', icon: BookIcon },
+      { id: 'general', name: 'General', icon: SlidersIcon },
+      { id: 'input', name: 'Input', icon: KeyIcon },
+    ],
+  },
+  {
+    label: 'App',
+    items: [{ id: 'about', name: 'About', icon: InfoIcon }],
+  },
+]
+
+const stats = [
+  { tone: 'blue', label: 'Total dictation', value: '4h 35m', caption: 'Across 992 sessions' },
+  { tone: 'green', label: 'Total words', value: '54,357', caption: 'Final result text' },
+  { tone: 'amber', label: 'Words / minute', value: '197', caption: 'Across all time' },
+  { tone: 'pink', label: 'Avg latency', value: '249 ms', caption: 'Record → text', highlight: true },
+]
+
+// "Where you dictate" donut — share of sessions by front-most app.
+const sceneSegments = [
+  { name: 'Claude', pct: 37, color: '#5aa6ff' },
+  { name: 'Cursor', pct: 26, color: '#1f86ff' },
+  { name: 'Codex', pct: 16, color: '#0b63d6' },
+  { name: 'Google Chrome', pct: 16, color: '#0a3f93' },
+  { name: 'Discord', pct: 5, color: '#0b2a5e' },
+]
+
+// "When you dictate" — relative activity per ~2h bucket across the day.
+const hourBuckets = [40, 12, 8, 9, 11, 20, 85, 54, 78, 100, 58, 72, 46]
+
+export function DashboardWindow() {
+  return (
+    <div className="dashboard-shell">
+      <AppWindow className="dashboard-window" flush>
+      <div className="dash">
+        <aside className="dash-sidebar">
+          <div className="dash-sidebar-top">
+            <TrafficLights />
+            <SidebarToggleIcon />
+          </div>
+          <div className="dash-brand">
+            <img src="/voily-icon.png" alt="" />
+            <span>Voily</span>
+          </div>
+          <nav className="dash-nav">
+            {navGroups.map((group) => (
+              <div className="dash-nav-group" key={group.label}>
+                <span className="dash-nav-label">{group.label}</span>
+                {group.items.map((item) => {
+                  const Icon = item.icon
+                  return (
+                    <span
+                      className={`dash-nav-item${item.active ? ' is-active' : ''}`}
+                      key={item.id}
+                    >
+                      <Icon />
+                      <span>{item.name}</span>
+                    </span>
+                  )
+                })}
+              </div>
+            ))}
+          </nav>
+        </aside>
+
+        <div className="dash-main">
+          <div className="dash-topbar">
+            <div className="dash-title">
+              <h3>Home</h3>
+              <p>Today's dictation, trends, and full history — all in one place.</p>
+            </div>
+            <div className="dash-pills">
+              <span className="dash-pill">
+                <MicIcon />
+                Microphone
+                <span className="dash-pill-dot" />
+              </span>
+              <span className="dash-pill">
+                <AxIcon />
+                Accessibility
+                <span className="dash-pill-dot" />
+              </span>
+            </div>
+          </div>
+
+          <div className="dash-stats">
+            {stats.map((stat) => (
+              <div className={`dash-stat${stat.highlight ? ' is-highlight' : ''}`} key={stat.label}>
+                <span className={`dash-stat-dot tone-${stat.tone}`} />
+                <span className="dash-stat-label">{stat.label}</span>
+                <strong className="dash-stat-value">{stat.value}</strong>
+                <span className="dash-stat-caption">{stat.caption}</span>
+              </div>
+            ))}
+          </div>
+
+          <div className="dash-charts">
+            <SceneDonut />
+            <HoursBars />
+          </div>
+
+          <div className="dash-history">
+            <div className="dash-history-head">
+              <div>
+                <h4>History</h4>
+                <p>Newest first, with copyable final text.</p>
+              </div>
+            </div>
+            <div className="dash-history-row">
+              <div className="dash-history-body">
+                <div className="dash-history-meta">
+                  <strong>Jun 11, 2026 at 22:31</strong>
+                  <span className="dash-history-tag">Injected</span>
+                  <span className="dash-history-tag is-muted">Refined</span>
+                </div>
+                <span className="dash-history-sub">9s · 29 words · Fun-ASR · cloud-realtime · 228 ms</span>
+                <p>From a search-intent angle it's the brand keyword — should we optimize a bit?</p>
+              </div>
+              <span className="dash-history-copy">Copy text</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      </AppWindow>
+
+      <div className="dash-overlay-dock" aria-hidden="true">
+        <OverlayCapsule phase="listening" text="I'm using an AI voice input assistant" />
+      </div>
+    </div>
+  )
+}
+
+// Donut of session share by app, with a centred total and a percentage legend.
+function SceneDonut() {
+  const r = 47
+  const c = 2 * Math.PI * r
+  const gap = 4
+  let offset = 0
+
+  return (
+    <div className="dash-chart dash-scene">
+      <div className="dash-chart-head">
+        <h5>Where you dictate</h5>
+        <p>By front-most app</p>
+      </div>
+      <div className="scene-body">
+        <div className="scene-donut">
+          <svg viewBox="0 0 120 120" aria-hidden="true">
+            <g transform="rotate(-90 60 60)">
+              {sceneSegments.map((s) => {
+                const len = (s.pct / 100) * c
+                const visible = Math.max(0, len - gap)
+                const el = (
+                  <circle
+                    key={s.name}
+                    cx="60"
+                    cy="60"
+                    r={r}
+                    fill="none"
+                    stroke={s.color}
+                    strokeWidth="13"
+                    strokeLinecap="round"
+                    strokeDasharray={`${visible} ${c - visible}`}
+                    strokeDashoffset={-offset}
+                  />
+                )
+                offset += len
+                return el
+              })}
+            </g>
+          </svg>
+          <div className="scene-donut-center">
+            <strong>19</strong>
+            <span>sessions</span>
+          </div>
+        </div>
+        <ul className="scene-legend">
+          {sceneSegments.map((s) => (
+            <li key={s.name}>
+              <span className="scene-legend-dot" style={{ background: s.color }} />
+              <span className="scene-legend-name">{s.name}</span>
+              <span className="scene-legend-pct">{s.pct}%</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+// Time-of-day activity bars; quieter buckets render in a lighter blue.
+function HoursBars() {
+  const max = Math.max(...hourBuckets)
+
+  return (
+    <div className="dash-chart dash-hours">
+      <div className="dash-chart-head">
+        <h5>When you dictate</h5>
+        <p>Your active hours</p>
+      </div>
+      <div className="hours-bars">
+        {hourBuckets.map((v, i) => (
+          <span
+            key={i}
+            className={`hours-bar${v < 18 ? ' is-faint' : ''}`}
+            style={{ height: `${Math.max(6, (v / max) * 100)}%` }}
+          />
+        ))}
+      </div>
+      <div className="hours-axis">
+        <span>0</span>
+        <span>12</span>
+        <span>24</span>
+      </div>
+    </div>
+  )
+}
+
+/* --- inline icons (16px line icons, currentColor) --- */
+
+function svgProps() {
+  return {
+    width: 15,
+    height: 15,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.8,
+    strokeLinecap: 'round' as const,
+    strokeLinejoin: 'round' as const,
+    'aria-hidden': true,
+  }
+}
+
+function HomeIcon() {
+  return (
+    <svg {...svgProps()}>
+      <path d="M3 10.5 12 3l9 7.5" />
+      <path d="M5 9.5V20h14V9.5" />
+    </svg>
+  )
+}
+function CubeIcon() {
+  return (
+    <svg {...svgProps()}>
+      <path d="M12 2.5 21 7v10l-9 4.5L3 17V7z" />
+      <path d="M3 7l9 4.5L21 7M12 11.5V21" />
+    </svg>
+  )
+}
+function BookIcon() {
+  return (
+    <svg {...svgProps()}>
+      <path d="M5 4h11a2 2 0 0 1 2 2v14H7a2 2 0 0 1-2-2z" />
+      <path d="M5 4a2 2 0 0 0-2 2v12" />
+    </svg>
+  )
+}
+function SlidersIcon() {
+  return (
+    <svg {...svgProps()}>
+      <path d="M4 7h11M19 7h1M4 17h5M13 17h7" />
+      <circle cx="16" cy="7" r="2.2" />
+      <circle cx="10" cy="17" r="2.2" />
+    </svg>
+  )
+}
+function KeyIcon() {
+  return (
+    <svg {...svgProps()}>
+      <rect x="3" y="6" width="18" height="12" rx="2.5" />
+      <path d="M7 10h.01M11 10h.01M15 10h.01M8 14h8" />
+    </svg>
+  )
+}
+function InfoIcon() {
+  return (
+    <svg {...svgProps()}>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 11v5M12 8h.01" />
+    </svg>
+  )
+}
+function MicIcon() {
+  return (
+    <svg {...svgProps()} width={13} height={13}>
+      <rect x="9" y="3" width="6" height="11" rx="3" />
+      <path d="M5 11a7 7 0 0 0 14 0M12 18v3" />
+    </svg>
+  )
+}
+function AxIcon() {
+  return (
+    <svg {...svgProps()} width={13} height={13}>
+      <circle cx="12" cy="4.5" r="1.6" />
+      <path d="M4 8h16M12 8v6M12 14l-3 6M12 14l3 6" />
+    </svg>
+  )
+}
+function SidebarToggleIcon() {
+  return (
+    <svg {...svgProps()} width={15} height={15} className="dash-sidebar-toggle">
+      <rect x="3" y="5" width="18" height="14" rx="2.5" />
+      <path d="M9 5v14" />
+    </svg>
+  )
+}
diff --git a/website/src/components/DemoCard.tsx b/website/src/components/DemoCard.tsx
deleted file mode 100644
index f4bfae7..0000000
--- a/website/src/components/DemoCard.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-
-import { demoExamples } from './content'
-
-const LOOP_MS = 7500
-const REDUCED_MOTION_TIME = 5000
-const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)'
-
-function getStage(elapsed: number) {
-  if (elapsed < 2000) return 'said'
-  if (elapsed < 3000) return 'processing'
-  if (elapsed < 5000) return 'writes'
-  if (elapsed < 7000) return 'hold'
-  return 'fade'
-}
-
-export function DemoCard() {
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState(() =>
-    typeof window !== 'undefined' &&
-      window.matchMedia(REDUCED_MOTION_QUERY).matches
-  )
-  const [time, setTime] = useState(0)
-
-  useEffect(() => {
-    const media = window.matchMedia(REDUCED_MOTION_QUERY)
-    const updatePreference = () => setPrefersReducedMotion(media.matches)
-
-    updatePreference()
-    media.addEventListener('change', updatePreference)
-
-    return () => media.removeEventListener('change', updatePreference)
-  }, [])
-
-  useEffect(() => {
-    if (prefersReducedMotion) return
-
-    const started = performance.now()
-    const interval = window.setInterval(() => {
-      setTime(performance.now() - started)
-    }, 80)
-
-    return () => window.clearInterval(interval)
-  }, [prefersReducedMotion])
-
-  const playbackTime = prefersReducedMotion ? REDUCED_MOTION_TIME : time
-  const exampleIndex = Math.floor(playbackTime / LOOP_MS) % demoExamples.length
-  const elapsed = playbackTime % LOOP_MS
-  const stage = getStage(elapsed)
-  const example = demoExamples[exampleIndex]
-
-  const typedSaid = useMemo(() => {
-    if (stage !== 'said') return example.said
-
-    const progress = Math.min(1, elapsed / 1900)
-    return example.said.slice(0, Math.ceil(example.said.length * progress))
-  }, [elapsed, example.said, stage])
-
-  return (
-    <div className={`demo-card demo-card-${stage}`}>
-      <div className="demo-header">
-        <span className="demo-app">{example.app}</span>
-        <span className="demo-status">
-          {stage === 'processing' ? 'Refining' : 'Voice to text'}
-        </span>
-      </div>
-
-      <div className="demo-columns">
-        <section className="demo-panel demo-panel-said" aria-label="Raw voice input">
-          <span className="demo-label">You said</span>
-          <p>{typedSaid}</p>
-        </section>
-
-        <div className="demo-process" aria-hidden="true">
-          <span />
-        </div>
-
-        <section className="demo-panel demo-panel-writes" aria-label="Voily output">
-          <span className="demo-label">Voily writes</span>
-          <p>{example.writes}</p>
-        </section>
-      </div>
-
-      <div className="demo-dots" aria-label={`Demo ${exampleIndex + 1} of ${demoExamples.length}`}>
-        {demoExamples.map((item, index) => (
-          <span
-            className={index === exampleIndex ? 'is-active' : ''}
-            key={item.app}
-          />
-        ))}
-      </div>
-    </div>
-  )
-}
diff --git a/website/src/components/Features.tsx b/website/src/components/Features.tsx
new file mode 100644
index 0000000..e244b44
--- /dev/null
+++ b/website/src/components/Features.tsx
@@ -0,0 +1,302 @@
+import { useEffect, useRef, useState } from 'react'
+
+import { AppWindow } from './AppWindow'
+import { OverlayCapsule } from './OverlayCapsule'
+import { useDictationScene, type SceneExample } from './useDictationScene'
+
+const navItems = ['AI Rewrite', 'In context', 'Always ready']
+
+// Scroll-spy: highlight the nav entry whose section sits closest to the middle
+// of the viewport, and tell that section it may animate.
+function useActiveSection(count: number) {
+  const refs = useRef<(HTMLElement | null)[]>([])
+  const [active, setActive] = useState(0)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            const idx = Number((entry.target as HTMLElement).dataset.idx)
+            setActive(idx)
+          }
+        }
+      },
+      { rootMargin: '-45% 0px -45% 0px', threshold: 0 }
+    )
+    refs.current.forEach((el) => el && observer.observe(el))
+    return () => observer.disconnect()
+  }, [count])
+
+  const setRef = (idx: number) => (el: HTMLElement | null) => {
+    refs.current[idx] = el
+  }
+
+  return { active, setRef }
+}
+
+export function Features() {
+  const { active, setRef } = useActiveSection(3)
+
+  return (
+    <section className="features" aria-labelledby="features-title">
+      <h2 id="features-title" className="sr-only">
+        How Voily works
+      </h2>
+      <div className="features-grid">
+        <aside className="features-nav" aria-hidden="true">
+          <span className="features-nav-kicker">How it works</span>
+          <ul>
+            {navItems.map((item, i) => (
+              <li key={item} className={i === active ? 'is-active' : ''}>
+                <span className="features-nav-dot" />
+                {item}
+              </li>
+            ))}
+          </ul>
+        </aside>
+
+        <div className="features-flow">
+          <FeatureBlock
+            setRef={setRef(0)}
+            idx={0}
+            eyebrow="01 — AI Rewrite"
+            title={<>Say it rough.<br />Get it polished.</>}
+            copy="Not autocorrect — a full rewrite that fixes grammar, trims filler, and matches the tone your context needs. You ramble; Voily ships the clean version."
+          >
+            <RewriteScene active={active === 0} />
+          </FeatureBlock>
+
+          <FeatureBlock
+            setRef={setRef(1)}
+            idx={1}
+            eyebrow="02 — Adapts to context"
+            title={<>One voice,<br />every register.</>}
+            copy="The same spoken note becomes a concise code comment, a professional email, a casual message, or a structured prompt — shaped for wherever your cursor is."
+          >
+            <ContextScene active={active === 1} />
+          </FeatureBlock>
+
+          <FeatureBlock
+            setRef={setRef(2)}
+            idx={2}
+            eyebrow="03 — Always ready"
+            title={<>One shortcut,<br />anywhere you type.</>}
+            copy="No app switching, no input panel, no copy-paste. Tap your trigger key and the overlay floats up — right over whatever app you're already in."
+          >
+            <AnywhereScene active={active === 2} />
+          </FeatureBlock>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function FeatureBlock(props: {
+  setRef: (el: HTMLElement | null) => void
+  idx: number
+  eyebrow: string
+  title: React.ReactNode
+  copy: string
+  children: React.ReactNode
+}) {
+  return (
+    <article className="feature-block" ref={props.setRef as never} data-idx={props.idx}>
+      <div className="feature-copy">
+        <span className="feature-eyebrow">{props.eyebrow}</span>
+        <h3>{props.title}</h3>
+        <p>{props.copy}</p>
+      </div>
+      <div className="feature-stage">{props.children}</div>
+    </article>
+  )
+}
+
+/* ---------------- Scene 1: AI Rewrite (Slack-style compose) ---------------- */
+
+const rewriteExamples: SceneExample[] = [
+  {
+    app: 'Slack',
+    said: 'tell jason the api bug is fixed, he can pull latest main',
+    writes: 'Hey Jason — the API bug is fixed. Pull the latest from main when you get a chance. 🙌',
+  },
+]
+
+function RewriteScene({ active }: { active: boolean }) {
+  const view = useDictationScene(rewriteExamples, active)
+  const ex = rewriteExamples[view.index]
+  const typing = view.phase === 'injecting' && view.output !== ex.writes
+  const sent = view.phase === 'injecting' && view.output === ex.writes
+  const composeText = typing ? view.output : ''
+
+  return (
+    <div className="scene scene-rewrite">
+      <AppWindow
+        className="chat-window"
+        toolbar={
+          <div className="win-toolbar-inner">
+            <span className="chat-workspace">
+              <span className="chat-workspace-badge">A</span>
+              Acme
+            </span>
+            <span className="chat-channel"># engineering</span>
+          </div>
+        }
+      >
+        <div className="chat-thread">
+          <div className="chat-msg">
+            <span className="chat-avatar tone-amber">J</span>
+            <div>
+              <span className="chat-name">
+                Jason Wu <em>9:41</em>
+              </span>
+              <p>any luck on that auth bug from this morning?</p>
+            </div>
+          </div>
+          {sent ? (
+            <div className="chat-msg chat-msg-me is-sent">
+              <span className="chat-avatar tone-blue">K</span>
+              <div>
+                <span className="chat-name">
+                  You <em>now</em>
+                </span>
+                <p>{ex.writes}</p>
+              </div>
+            </div>
+          ) : null}
+        </div>
+        <div className="chat-compose">
+          <span className={`chat-input${composeText ? '' : ' is-empty'}`}>
+            {composeText || 'Message #engineering'}
+            {typing ? <span className="chat-caret" /> : null}
+          </span>
+          <span className={`chat-send${typing || sent ? ' is-ready' : ''}`} aria-hidden="true">
+            ➤
+          </span>
+        </div>
+      </AppWindow>
+
+      <div className="scene-dock">
+        <OverlayCapsule phase={view.phase} text={view.capsuleText} />
+      </div>
+    </div>
+  )
+}
+
+/* ---------------- Scene 2: Refine for the moment (context tabs) ---------------- */
+
+type ContextExample = SceneExample & { tab: string; kind: 'code' | 'mail' | 'chat' | 'prompt' }
+
+const contextExamples: ContextExample[] = [
+  {
+    tab: 'Code comment',
+    kind: 'code',
+    app: 'Cursor',
+    said: 'this function cleans up the user input and saves it to the database',
+    writes: '// Sanitizes raw user input and persists\n// the cleaned result to the database.',
+  },
+  {
+    tab: 'Email',
+    kind: 'mail',
+    app: 'Gmail',
+    said: 'tell the client the project is delayed one week, waiting on a third party api',
+    writes:
+      "Hi — a quick timeline update: we're waiting on a third-party API integration, which pushes delivery back by about one week. I'll keep you posted.",
+  },
+  {
+    tab: 'Message',
+    kind: 'chat',
+    app: 'Slack',
+    said: 'lunch got moved to one, meet downstairs',
+    writes: "Heads up — lunch moved to 1pm. Let's meet downstairs 👍",
+  },
+  {
+    tab: 'Prompt',
+    kind: 'prompt',
+    app: 'ChatGPT',
+    said: 'write a prompt that makes gpt find outliers in this csv',
+    writes:
+      'Analyze the attached CSV. Identify statistical outliers in each numeric column using the IQR method, flag the rows, and explain why each value is anomalous.',
+  },
+]
+
+function ContextScene({ active }: { active: boolean }) {
+  const view = useDictationScene(contextExamples, active)
+  const ex = contextExamples[view.index]
+  const shown = view.output || (view.phase === 'injecting' ? ex.writes : '')
+
+  return (
+    <div className="scene scene-context">
+      <AppWindow
+        className="context-window"
+        toolbar={
+          <div className="win-toolbar-inner">
+            <span className="context-app">{ex.app}</span>
+            <span className="context-said">“{ex.said}”</span>
+          </div>
+        }
+      >
+        <div className="context-tabs">
+          {contextExamples.map((c, i) => (
+            <span key={c.tab} className={`context-tab${i === view.index ? ' is-active' : ''}`}>
+              {c.tab}
+            </span>
+          ))}
+        </div>
+        <div className={`context-output kind-${ex.kind}`}>
+          {shown ? (
+            <p>{shown}</p>
+          ) : (
+            <span className="context-waiting">{view.phase === 'refining' ? 'Refining…' : 'Listening…'}</span>
+          )}
+        </div>
+      </AppWindow>
+
+      <div className="scene-dock">
+        <OverlayCapsule phase={view.phase} text={view.capsuleText} />
+      </div>
+    </div>
+  )
+}
+
+/* ---------------- Scene 3: Always Ready (floating overlay) ---------------- */
+
+const anywhereExamples: SceneExample[] = [
+  {
+    app: 'Anywhere',
+    said: 'add a note — ship the release on friday',
+    writes: 'Note: ship the release on Friday.',
+  },
+]
+
+const desktopApps = [
+  '/app-icons/cursor.svg',
+  '/app-icons/slack.svg',
+  '/app-icons/gmail.svg',
+  '/app-icons/notion.svg',
+  '/app-icons/chatgpt.svg',
+]
+
+function AnywhereScene({ active }: { active: boolean }) {
+  const view = useDictationScene(anywhereExamples, active)
+
+  return (
+    <div className="scene scene-anywhere">
+      <div className="desktop">
+        <div className="desktop-glow" />
+        <div className="desktop-dock">
+          {desktopApps.map((src) => (
+            <img key={src} src={src} alt="" aria-hidden="true" />
+          ))}
+        </div>
+        <span className="desktop-key" data-pressed={view.phase === 'listening'}>
+          <kbd>fn</kbd>
+          <span>trigger</span>
+        </span>
+        <div className="anywhere-dock">
+          <OverlayCapsule phase={view.phase} text={view.capsuleText} />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/website/src/components/LandingPage.tsx b/website/src/components/LandingPage.tsx
index 1dc9b85..91c8c42 100644
--- a/website/src/components/LandingPage.tsx
+++ b/website/src/components/LandingPage.tsx
@@ -1,5 +1,6 @@
-import { capabilities, apps, openSourceBenefits } from './content'
-import { DemoCard } from './DemoCard'
+import { apps, openSourceBenefits } from './content'
+import { DashboardWindow } from './DashboardWindow'
+import { Features } from './Features'
 import { DotFieldBackground } from './DotFieldBackground'
 
 const downloadUrl = 'https://github.com/BubblePtr/Voily/releases/latest'
@@ -51,22 +52,19 @@ export function LandingPage() {
             macOS 14+ · Apple Silicon · Open Source
           </span>
         </div>
-        <a className="scroll-cue" href="#demo" aria-label="Scroll to demo">
-          <span />
-        </a>
       </section>
 
-      <section className="demo-section" id="demo" aria-labelledby="demo-title">
-        <div className="section-heading">
-          <h2 id="demo-title">See the difference.</h2>
-          <p>
-            Voily turns rough, spoken language into text that is ready to send,
-            ship, or paste into your next prompt.
-          </p>
+      <section className="showcase" id="showcase" aria-label="Voily app">
+        <div className="showcase-frame">
+          <DashboardWindow />
         </div>
-        <DemoCard />
+        <a className="scroll-cue" href="#features" aria-label="Scroll to features">
+          <span />
+        </a>
       </section>
 
+      <Features />
+
       <section className="works-section" aria-label="Works everywhere">
         <p>If you can type there, you can speak there.</p>
         <div className="app-marquee" aria-label="Supported apps">
@@ -94,18 +92,6 @@ export function LandingPage() {
         </div>
       </section>
 
-      <section className="capabilities-section" aria-labelledby="capabilities-title">
-        <h2 id="capabilities-title">Why Voily, not dictation.</h2>
-        <div className="capability-grid">
-          {capabilities.map((capability) => (
-            <article className="capability-card" key={capability.title}>
-              <h3>{capability.title}</h3>
-              <p>{capability.copy}</p>
-            </article>
-          ))}
-        </div>
-      </section>
-
       <section className="open-source-section" aria-labelledby="open-source-title">
         <div className="open-source-copy">
           <span className="section-kicker">Open Source</span>
diff --git a/website/src/components/OverlayCapsule.tsx b/website/src/components/OverlayCapsule.tsx
new file mode 100644
index 0000000..a843a37
--- /dev/null
+++ b/website/src/components/OverlayCapsule.tsx
@@ -0,0 +1,129 @@
+import { useEffect, useRef } from 'react'
+
+// Faithful recreation of the app's floating overlay capsule.
+// Waveform envelope mirrors WaveformView in OverlayPanelController.swift so the
+// motion reads as the real product, not a generic equalizer.
+
+export type CapsulePhase =
+  | 'idle'
+  | 'listening'
+  | 'transcribing'
+  | 'refining'
+  | 'injecting'
+
+const BAR_WEIGHTS = [0.58, 0.88, 1.0, 0.84, 0.62]
+const BAR_POSITIONS = [-2, -1, 0, 1, 2]
+const SPATIAL_PHASE_STEP = Math.PI / 3.2
+const LOOP_DURATION = 0.84 // seconds, matches the app
+const BAR_MIN = 9
+const BAR_MAX = 30
+
+// Target "loudness" per phase. Listening is lively; processing phases settle.
+function rmsFloor(phase: CapsulePhase): number {
+  switch (phase) {
+    case 'listening':
+      return 0.92
+    case 'transcribing':
+      return 0.34
+    case 'refining':
+      return 0.26
+    case 'injecting':
+      return 0.16
+    default:
+      return 0.18
+  }
+}
+
+// Synthesised speech-like loudness so the bars feel driven by a real voice.
+function liveRms(phase: CapsulePhase, t: number): number {
+  if (phase === 'listening') {
+    const a = (Math.sin(t * 6.1) + 1) * 0.5
+    const b = (Math.sin(t * 11.7 + 1.3) + 1) * 0.5
+    const c = (Math.sin(t * 2.3 + 0.6) + 1) * 0.5
+    const env = 0.45 + 0.55 * (a * 0.5 + b * 0.3 + c * 0.2)
+    return Math.min(1, Math.max(0.4, env))
+  }
+  return rmsFloor(phase)
+}
+
+function barHeight(index: number, time: number, rms: number): number {
+  const cycle = (time % LOOP_DURATION) / LOOP_DURATION
+  const phase = cycle * Math.PI * 2
+  const localPhase = phase - BAR_POSITIONS[index] * SPATIAL_PHASE_STEP
+  const primary = (Math.sin(localPhase) + 1) * 0.5
+  const secondary = (Math.sin(localPhase * 2 - Math.PI / 6) + 1) * 0.5
+  const envelope = primary * 0.82 + secondary * 0.18
+  const activity = Math.max(0.18, Math.min(1, rms))
+  const range = (BAR_MAX - BAR_MIN) * BAR_WEIGHTS[index] * activity
+  return BAR_MIN + range * envelope
+}
+
+function Waveform({ phase }: { phase: CapsulePhase }) {
+  const barsRef = useRef<(HTMLSpanElement | null)[]>([])
+  const phaseRef = useRef(phase)
+  phaseRef.current = phase
+
+  useEffect(() => {
+    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    if (reduce) {
+      barsRef.current.forEach((bar, i) => {
+        if (bar) bar.style.transform = `scaleY(${barHeight(i, 0.42, 0.6) / BAR_MAX})`
+      })
+      return
+    }
+
+    let raf = 0
+    const start = performance.now()
+    const tick = (now: number) => {
+      const t = (now - start) / 1000
+      const rms = liveRms(phaseRef.current, t)
+      for (let i = 0; i < BAR_WEIGHTS.length; i += 1) {
+        const bar = barsRef.current[i]
+        if (bar) bar.style.transform = `scaleY(${barHeight(i, t, rms) / BAR_MAX})`
+      }
+      raf = requestAnimationFrame(tick)
+    }
+    raf = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(raf)
+  }, [])
+
+  return (
+    <span className="oc-wave" aria-hidden="true">
+      {BAR_WEIGHTS.map((_, i) => (
+        <span
+          className="oc-bar"
+          key={i}
+          ref={(el) => {
+            barsRef.current[i] = el
+          }}
+        />
+      ))}
+    </span>
+  )
+}
+
+type OverlayCapsuleProps = {
+  phase: CapsulePhase
+  text: string
+  className?: string
+}
+
+const STATUS_LABEL: Partial<Record<CapsulePhase, string>> = {
+  transcribing: 'Transcribing…',
+  refining: 'Refining…',
+  injecting: 'Injecting…',
+}
+
+export function OverlayCapsule({ phase, text, className }: OverlayCapsuleProps) {
+  const display = text || STATUS_LABEL[phase] || (phase === 'listening' ? 'Listening…' : '')
+  const isPlaceholder = !text
+
+  return (
+    <div className={`overlay-capsule${className ? ` ${className}` : ''}`} data-phase={phase}>
+      <Waveform phase={phase} />
+      <div className="oc-text-viewport">
+        <span className={`oc-text${isPlaceholder ? ' is-placeholder' : ''}`}>{display}</span>
+      </div>
+    </div>
+  )
+}
diff --git a/website/src/components/content.ts b/website/src/components/content.ts
index 6a239b4..62c7359 100644
--- a/website/src/components/content.ts
+++ b/website/src/components/content.ts
@@ -1,42 +1,8 @@
-export type DemoExample = {
-  app: string
-  said: string
-  writes: string
-}
-
 export type SupportedApp = {
   iconPath: string
   name: string
 }
 
-export const demoExamples: DemoExample[] = [
-  {
-    app: 'Slack',
-    said: 'tell jason that api bug is fixed\nhe can pull the latest main branch',
-    writes:
-      'Hey Jason - the API bug has been fixed.\nPull the latest from main when you get a chance.'
-  },
-  {
-    app: 'Cursor',
-    said: 'this function cleans up the user input\nand saves it to the database',
-    writes:
-      '// Sanitizes raw user input and persists\n// the cleaned result to the database.'
-  },
-  {
-    app: 'Gmail',
-    said:
-      "tell the client the project is delayed one week\nbecause we're waiting on a third party api",
-    writes:
-      "Hi - I wanted to give you a quick update on the timeline. We're currently waiting on a third-party API integration, which will push delivery back by approximately one week. I'll keep you posted on any changes."
-  },
-  {
-    app: 'ChatGPT',
-    said: 'write a prompt that makes gpt analyze\nthis csv and find outliers',
-    writes:
-      'Analyze the attached CSV file. Identify statistical outliers in each numeric column using the IQR method. Flag rows that contain outliers and explain why each value is anomalous.'
-  }
-]
-
 export const apps: SupportedApp[] = [
   { iconPath: '/app-icons/cursor.svg', name: 'Cursor' },
   { iconPath: '/app-icons/vscode.svg', name: 'VS Code' },
@@ -48,24 +14,6 @@ export const apps: SupportedApp[] = [
   { iconPath: '/app-icons/chatgpt.svg', name: 'ChatGPT' }
 ]
 
-export const capabilities = [
-  {
-    title: 'AI Rewrite',
-    copy:
-      'Say it rough, get it polished. Not autocorrect - a full rewrite that matches the tone your context needs.'
-  },
-  {
-    title: 'Refine for the moment',
-    copy:
-      'Turn a spoken note into a concise code comment, a professional email, a casual message, or a structured prompt.'
-  },
-  {
-    title: 'Always Ready',
-    copy:
-      'One shortcut, anywhere on your Mac. No app switching, no input panel, no copy-pasting.'
-  }
-]
-
 export const openSourceBenefits = [
   {
     title: 'Transparent by default',
diff --git a/website/src/components/useDictationScene.ts b/website/src/components/useDictationScene.ts
new file mode 100644
index 0000000..e8d3aba
--- /dev/null
+++ b/website/src/components/useDictationScene.ts
@@ -0,0 +1,101 @@
+import { useEffect, useRef, useState } from 'react'
+
+import type { CapsulePhase } from './OverlayCapsule'
+
+export type SceneExample = {
+  app: string
+  said: string
+  writes: string
+}
+
+export type SceneView = {
+  phase: CapsulePhase
+  capsuleText: string
+  output: string
+  injected: boolean
+  index: number
+}
+
+const LOOP_MS = 7200
+
+// One full dictation cycle expressed as a pure function of elapsed time, so the
+// loop can be paused/resumed and stays in sync with the waveform.
+function viewAt(totalElapsed: number, examples: SceneExample[]): SceneView {
+  const index = Math.floor(totalElapsed / LOOP_MS) % examples.length
+  const t = totalElapsed % LOOP_MS
+  const { said, writes } = examples[index]
+
+  if (t < 1900) {
+    const p = Math.min(1, t / 1700)
+    return {
+      phase: 'listening',
+      capsuleText: said.slice(0, Math.ceil(said.length * p)),
+      output: '',
+      injected: false,
+      index,
+    }
+  }
+  if (t < 2900) {
+    return { phase: 'listening', capsuleText: said, output: '', injected: false, index }
+  }
+  if (t < 3400) {
+    return { phase: 'transcribing', capsuleText: '', output: '', injected: false, index }
+  }
+  if (t < 4200) {
+    return { phase: 'refining', capsuleText: '', output: '', injected: false, index }
+  }
+  if (t < 5300) {
+    const p = Math.min(1, (t - 4200) / 950)
+    return {
+      phase: 'injecting',
+      capsuleText: '',
+      output: writes.slice(0, Math.ceil(writes.length * p)),
+      injected: true,
+      index,
+    }
+  }
+  // hold the finished result, then fade handled by the consumer
+  return { phase: 'injecting', capsuleText: '', output: writes, injected: true, index }
+}
+
+const RESTING: SceneView = {
+  phase: 'listening',
+  capsuleText: '',
+  output: '',
+  injected: false,
+  index: 0,
+}
+
+export function useDictationScene(examples: SceneExample[], active: boolean): SceneView {
+  const [view, setView] = useState<SceneView>(RESTING)
+  const startRef = useRef<number | null>(null)
+  const lastRef = useRef<string>('')
+
+  useEffect(() => {
+    if (!active) {
+      startRef.current = null
+      return
+    }
+    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    if (reduce) {
+      setView(viewAt(5000, examples))
+      return
+    }
+
+    let raf = 0
+    const tick = (now: number) => {
+      if (startRef.current === null) startRef.current = now
+      const next = viewAt(now - startRef.current, examples)
+      const sig = `${next.index}|${next.phase}|${next.capsuleText.length}|${next.output.length}`
+      if (sig !== lastRef.current) {
+        lastRef.current = sig
+        setView(next)
+      }
+      raf = requestAnimationFrame(tick)
+    }
+    raf = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(raf)
+  }, [active, examples])
+
+  return view
+}
diff --git a/website/src/styles.css b/website/src/styles.css
index 7abe28f..e725ebe 100644
--- a/website/src/styles.css
+++ b/website/src/styles.css
@@ -38,7 +38,9 @@ a {
 }
 
 .page {
-  overflow: hidden;
+  /* overflow-x: clip (not hidden) so the sticky feature nav still works —
+     `hidden` would turn .page into a scroll container and break position: sticky. */
+  overflow-x: clip;
 }
 
 .site-header {
@@ -140,12 +142,27 @@ a {
   position: relative;
   display: grid;
   isolation: isolate;
-  min-height: 100vh;
-  place-items: center;
-  padding: 116px 22px 74px;
+  min-height: 88vh;
+  /* Top-anchored (not centred) so the copy sits higher and the empty space
+     above shrinks while the lower density eases up. */
+  place-items: start center;
+  align-content: start;
+  padding: clamp(150px, 19vh, 210px) 22px 0;
   text-align: center;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .dot-field-background {
   position: absolute;
   inset: 0;
@@ -237,18 +254,6 @@ a {
   animation: cue-bounce 1.8s ease-in-out infinite;
 }
 
-.demo-section {
-  padding: 96px 22px 72px;
-}
-
-.section-heading {
-  width: min(720px, 100%);
-  margin: 0 auto 42px;
-  text-align: center;
-}
-
-.section-heading h2,
-.capabilities-section h2,
 .final-cta h2 {
   margin: 0;
   font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
@@ -258,158 +263,6 @@ a {
   letter-spacing: 0;
 }
 
-.section-heading h2 {
-  font-size: 58px;
-}
-
-.section-heading p {
-  margin: 18px 0 0;
-  color: var(--muted);
-  font-size: 18px;
-  line-height: 1.65;
-}
-
-.demo-card {
-  position: relative;
-  width: min(1010px, 100%);
-  min-height: 430px;
-  margin: 0 auto;
-  padding: clamp(24px, 3.3vw, 44px);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background:
-    radial-gradient(circle at 50% 45%, var(--glow), transparent 38%),
-    linear-gradient(180deg, #fff, #fafbfc);
-  box-shadow: var(--shadow);
-  transition: opacity 300ms ease;
-}
-
-.demo-card-fade {
-  opacity: 0.34;
-}
-
-.demo-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px;
-  padding-bottom: 24px;
-  border-bottom: 1px solid var(--line);
-}
-
-.demo-app {
-  display: inline-flex;
-  align-items: center;
-  gap: 9px;
-  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 15px;
-  font-weight: 750;
-}
-
-.demo-app::before {
-  content: '';
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--blue);
-  box-shadow: 0 0 0 7px rgba(24, 119, 255, 0.1);
-}
-
-.demo-status {
-  color: #7c8188;
-  font-size: 14px;
-  font-weight: 650;
-}
-
-.demo-columns {
-  display: grid;
-  grid-template-columns: 1fr 72px 1fr;
-  gap: 0;
-  min-height: 270px;
-  align-items: stretch;
-}
-
-.demo-panel {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 26px 0;
-}
-
-.demo-label {
-  color: #8a8f96;
-  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 13px;
-  font-weight: 750;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-}
-
-.demo-panel p {
-  margin: 16px 0 0;
-  white-space: pre-wrap;
-  color: #121212;
-  font-size: clamp(20px, 2vw, 28px);
-  line-height: 1.45;
-  font-weight: 500;
-}
-
-.demo-panel-said p {
-  color: #6b7077;
-}
-
-.demo-panel-writes {
-  opacity: 0.24;
-  transform: translateY(8px);
-  transition:
-    opacity 260ms ease,
-    transform 260ms ease;
-}
-
-.demo-card-writes .demo-panel-writes,
-.demo-card-hold .demo-panel-writes,
-.demo-card-fade .demo-panel-writes {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.demo-process {
-  display: grid;
-  place-items: center;
-}
-
-.demo-process span {
-  display: block;
-  width: 46px;
-  height: 1px;
-  background: #d8dbe0;
-  transform-origin: center;
-}
-
-.demo-card-processing .demo-process span {
-  height: 2px;
-  background: var(--blue);
-  box-shadow: 0 0 22px var(--glow);
-  animation: process-line 900ms ease-in-out infinite;
-}
-
-.demo-dots {
-  display: flex;
-  justify-content: center;
-  gap: 9px;
-}
-
-.demo-dots span {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #d6d9de;
-}
-
-.demo-dots .is-active {
-  background: var(--ink);
-}
-
 .works-section {
   width: min(1240px, calc(100% - 44px));
   margin: 0 auto;
@@ -468,43 +321,6 @@ a {
   object-fit: contain;
 }
 
-.capabilities-section {
-  width: min(1120px, calc(100% - 44px));
-  margin: 0 auto;
-  padding: 34px 0 78px;
-  text-align: center;
-}
-
-.capability-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 18px;
-  margin-top: 38px;
-  text-align: left;
-}
-
-.capability-card {
-  min-height: 230px;
-  padding: 30px;
-  border: 1px solid var(--line);
-  border-radius: 24px;
-  background: #fff;
-}
-
-.capability-card h3 {
-  margin: 0;
-  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 24px;
-  line-height: 1.18;
-}
-
-.capability-card p {
-  margin: 24px 0 0;
-  color: var(--muted);
-  font-size: 17px;
-  line-height: 1.66;
-}
-
 .open-source-section {
   display: grid;
   grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.35fr);
@@ -651,16 +467,6 @@ a {
   }
 }
 
-@keyframes process-line {
-  0%,
-  100% {
-    transform: scaleX(0.44);
-  }
-  50% {
-    transform: scaleX(1);
-  }
-}
-
 @keyframes app-marquee {
   from {
     transform: translateX(0);
@@ -707,29 +513,6 @@ a {
     font-size: clamp(46px, 11.6vw, 78px);
   }
 
-  .demo-columns {
-    grid-template-columns: 1fr;
-  }
-
-  .demo-process {
-    min-height: 48px;
-  }
-
-  .demo-process span {
-    width: 1px;
-    height: 32px;
-  }
-
-  .demo-card-processing .demo-process span {
-    width: 2px;
-    height: 38px;
-    animation: process-line-vertical 900ms ease-in-out infinite;
-  }
-
-  .capability-grid {
-    grid-template-columns: 1fr;
-  }
-
   .open-source-section {
     grid-template-columns: 1fr;
     min-height: auto;
@@ -800,31 +583,7 @@ a {
     bottom: 20px;
   }
 
-  .demo-section {
-    padding: 74px 18px 54px;
-  }
-
-  .section-heading h2 {
-    font-size: 36px;
-  }
-
-  .demo-card {
-    min-height: 560px;
-    padding: 22px;
-    border-radius: 22px;
-  }
-
-  .demo-header {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .demo-panel p {
-    font-size: 19px;
-  }
-
   .works-section,
-  .capabilities-section,
   .open-source-section {
     width: calc(100% - 36px);
   }
@@ -849,11 +608,6 @@ a {
     height: 28px;
   }
 
-  .capability-card {
-    min-height: auto;
-    padding: 24px;
-  }
-
   .open-source-section {
     gap: 38px;
     padding: 70px 0 74px;
@@ -896,12 +650,1092 @@ a {
   }
 }
 
-@keyframes process-line-vertical {
-  0%,
-  100% {
-    transform: scaleY(0.44);
-  }
-  50% {
-    transform: scaleY(1);
+/* ============================================================
+   App-true recreation: window chrome, overlay capsule,
+   dashboard showcase, and the sticky feature scroller.
+   ============================================================ */
+
+/* --- macOS window chrome --- */
+.app-window {
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #e6e8ec;
+  border-radius: 16px;
+  box-shadow:
+    0 44px 110px rgba(15, 20, 28, 0.16),
+    0 10px 30px rgba(15, 20, 28, 0.06);
+}
+
+.win-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  height: 46px;
+  padding: 0 16px;
+  border-bottom: 1px solid #eef0f3;
+  background: #fbfbfc;
+}
+
+.win-lights {
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 8px;
+}
+
+.win-light {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.win-close {
+  background: #ff5f57;
+}
+
+.win-min {
+  background: #febc2e;
+}
+
+.win-zoom {
+  background: #28c840;
+}
+
+.win-body.is-flush {
+  padding: 0;
+}
+
+/* --- Overlay capsule (the real floating overlay) --- */
+.overlay-capsule {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 150px;
+  max-width: 440px;
+  height: 54px;
+  padding: 0 18px;
+  border-radius: 999px;
+  background: #0a0a0b;
+  box-shadow:
+    0 20px 44px rgba(8, 10, 14, 0.36),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.oc-wave {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  width: 46px;
+  height: 32px;
+}
+
+.oc-bar {
+  width: 3px;
+  height: 30px;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.97);
+  transform: scaleY(0.3);
+  transform-origin: center;
+  will-change: transform;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
+}
+
+.oc-text-viewport {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  justify-content: flex-end;
+  overflow: hidden;
+  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px);
+  mask-image: linear-gradient(90deg, transparent, #000 18px);
+}
+
+.oc-text {
+  white-space: nowrap;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.oc-text.is-placeholder {
+  color: rgba(255, 255, 255, 0.66);
+}
+
+/* --- Showcase: dashboard peeking up from the hero --- */
+.showcase {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: start center;
+  margin-top: clamp(-220px, -13vh, -120px);
+  padding: 0 22px 96px;
+}
+
+.showcase-frame {
+  width: min(1140px, 100%);
+}
+
+.showcase .scroll-cue {
+  position: absolute;
+  top: -42px;
+  bottom: auto;
+}
+
+/* --- Dashboard recreation --- */
+.dash {
+  display: grid;
+  grid-template-columns: 172px 1fr;
+  min-height: 560px;
+}
+
+.dash-sidebar {
+  display: flex;
+  flex-direction: column;
+  padding: 0 12px 16px;
+  background: linear-gradient(180deg, #eef1f5, #e8ecf1);
+  border-right: 1px solid #e3e6ec;
+}
+
+.dash-sidebar-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 46px;
+}
+
+.dash-sidebar-toggle {
+  color: #9aa0a8;
+}
+
+.dash-brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 6px 16px;
+  font-size: 17px;
+  font-weight: 800;
+}
+
+.dash-brand img {
+  width: 24px;
+  height: 24px;
+  border-radius: 7px;
+}
+
+.dash-nav-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-bottom: 14px;
+}
+
+.dash-nav-label {
+  padding: 0 8px 6px;
+  color: #9aa0a8;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.dash-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 7px 9px;
+  border-radius: 8px;
+  color: #3f444b;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.dash-nav-item.is-active {
+  background: #1877ff;
+  color: #fff;
+  box-shadow: 0 6px 14px rgba(24, 119, 255, 0.3);
+}
+
+.dash-main {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  min-width: 0;
+  padding: 18px 22px 26px;
+}
+
+.dash-topbar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.dash-title h3 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 800;
+}
+
+.dash-title p {
+  margin: 4px 0 0;
+  color: #888d94;
+  font-size: 13px;
+}
+
+.dash-pills {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 8px;
+}
+
+.dash-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 11px;
+  border: 1px solid #e3e6ec;
+  border-radius: 999px;
+  background: #fff;
+  color: #4a4f56;
+  font-size: 12.5px;
+  font-weight: 650;
+}
+
+.dash-pill-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #28c840;
+}
+
+.dash-stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+
+.dash-stat {
+  display: flex;
+  flex-direction: column;
+  padding: 14px 15px;
+  border: 1px solid #ebedf0;
+  border-radius: 14px;
+}
+
+.dash-stat.is-highlight {
+  background: #eef4ff;
+  border-color: #bcd6ff;
+}
+
+.dash-stat-dot {
+  width: 9px;
+  height: 9px;
+  margin-bottom: 11px;
+  border-radius: 50%;
+}
+
+.tone-blue {
+  background: #1877ff;
+}
+
+.tone-green {
+  background: #27c06b;
+}
+
+.tone-amber {
+  background: #ff9f1a;
+}
+
+.tone-pink {
+  background: #ff5d8f;
+}
+
+.dash-stat-label {
+  color: #888d94;
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+.dash-stat-value {
+  margin: 6px 0 8px;
+  font-size: 26px;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+}
+
+.dash-stat-caption {
+  color: #a6abb2;
+  font-size: 11.5px;
+}
+
+.dash-charts {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.dash-chart {
+  padding: 16px;
+  border: 1px solid #ebedf0;
+  border-radius: 14px;
+}
+
+.dash-chart-head h5 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 750;
+}
+
+.dash-chart-head p {
+  margin: 3px 0 12px;
+  color: #9aa0a8;
+  font-size: 12px;
+}
+
+/* Scene donut */
+.scene-body {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+
+.scene-donut {
+  position: relative;
+  flex: 0 0 auto;
+  width: 132px;
+  height: 132px;
+}
+
+.scene-donut svg {
+  width: 100%;
+  height: 100%;
+}
+
+.scene-donut-center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.scene-donut-center strong {
+  font-size: 28px;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+}
+
+.scene-donut-center span {
+  color: #9aa0a8;
+  font-size: 12px;
+}
+
+.scene-legend {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: 9px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.scene-legend li {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-size: 13.5px;
+}
+
+.scene-legend-dot {
+  width: 9px;
+  height: 9px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+}
+
+.scene-legend-name {
+  overflow: hidden;
+  color: #3f444b;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.scene-legend-pct {
+  margin-left: auto;
+  color: #6a6f76;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Hours bars */
+.hours-bars {
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+  height: 132px;
+  padding-top: 8px;
+}
+
+.hours-bar {
+  flex: 1;
+  min-height: 6px;
+  border-radius: 5px 5px 3px 3px;
+  background: #1f86ff;
+}
+
+.hours-bar.is-faint {
+  background: #cfe2ff;
+}
+
+.hours-axis {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+  color: #b0b5bb;
+  font-size: 11px;
+}
+
+.dash-history {
+  padding: 16px;
+  border: 1px solid #ebedf0;
+  border-radius: 14px;
+}
+
+.dash-history-head h4 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 750;
+}
+
+.dash-history-head p {
+  margin: 3px 0 12px;
+  color: #9aa0a8;
+  font-size: 12px;
+}
+
+.dash-history-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 13px;
+  border: 1px solid #eef0f3;
+  border-radius: 12px;
+  background: #fafbfc;
+}
+
+.dash-history-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.dash-history-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.dash-history-meta strong {
+  font-size: 13px;
+}
+
+.dash-history-tag {
+  padding: 2px 7px;
+  border-radius: 6px;
+  background: #e7f7ee;
+  color: #1f8f4e;
+  font-size: 10.5px;
+  font-weight: 700;
+}
+
+.dash-history-tag.is-muted {
+  background: #f0f1f4;
+  color: #80858c;
+}
+
+.dash-history-sub {
+  display: block;
+  margin: 3px 0 6px;
+  color: #9aa0a8;
+  font-size: 11.5px;
+}
+
+.dash-history-body p {
+  margin: 0;
+  color: #2a2e34;
+  font-size: 13.5px;
+}
+
+.dash-history-copy {
+  flex: 0 0 auto;
+  color: #1877ff;
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.dashboard-shell {
+  position: relative;
+}
+
+/* Float the overlay capsule over the bottom edge of the window (mostly below),
+   matching the floating-overlay feel and the feature-scene capsules. */
+.dash-overlay-dock {
+  position: absolute;
+  left: 50%;
+  bottom: -27px;
+  z-index: 3;
+  transform: translateX(-50%);
+}
+
+/* --- Sticky feature scroller --- */
+.features {
+  width: min(1320px, calc(100% - 44px));
+  margin: 0 auto;
+  padding: 60px 0;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  gap: clamp(32px, 5vw, 84px);
+  align-items: start;
+}
+
+.features-nav {
+  position: sticky;
+  top: 0;
+  align-self: start;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  /* Same padding-top as .feature-block so the nav's first line starts on the
+     exact same row as each section heading — in flow AND once pinned. */
+  padding-top: clamp(104px, 13vh, 150px);
+}
+
+.features-nav-kicker {
+  margin-bottom: 8px;
+  color: #b0b5bb;
+  font-size: 12px;
+  font-weight: 750;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.features-nav ul {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.features-nav li {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #c2c6cc;
+  font-size: 18px;
+  font-weight: 700;
+  transition: color 0.3s ease;
+}
+
+.features-nav-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #d6d9de;
+  transition:
+    background 0.3s ease,
+    box-shadow 0.3s ease,
+    transform 0.3s ease;
+}
+
+.features-nav li.is-active {
+  color: #0a0a0a;
+}
+
+.features-nav li.is-active .features-nav-dot {
+  background: #0a0a0a;
+  box-shadow: 0 0 0 5px rgba(10, 10, 10, 0.08);
+  transform: scale(1.1);
+}
+
+.features-flow {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(8px, 3vh, 48px);
+  /* Let the 1fr grid track shrink below the scenes' min-content width. */
+  min-width: 0;
+}
+
+.feature-block {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 30px;
+  min-height: 84vh;
+  /* Keep in sync with .features-nav top. */
+  padding-top: clamp(104px, 13vh, 150px);
+}
+
+.feature-eyebrow {
+  color: #1877ff;
+  font-size: 13px;
+  font-weight: 750;
+  letter-spacing: 0.02em;
+}
+
+.feature-block h3 {
+  margin: 14px 0 0;
+  font-size: clamp(34px, 4.4vw, 58px);
+  line-height: 1.03;
+  font-weight: 780;
+  letter-spacing: -0.015em;
+}
+
+.feature-block p {
+  max-width: 560px;
+  margin: 20px 0 0;
+  color: #5a5f66;
+  font-size: 18px;
+  line-height: 1.62;
+}
+
+/* --- Scene scaffolding --- */
+.scene {
+  position: relative;
+  width: 100%;
+}
+
+.scene-dock {
+  position: absolute;
+  left: 50%;
+  bottom: -26px;
+  z-index: 4;
+  transform: translateX(-50%);
+}
+
+/* Scene 1: Slack-style rewrite */
+.chat-window {
+  width: min(640px, 100%);
+  margin: 0 auto;
+}
+
+.win-toolbar-inner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  flex: 1;
+}
+
+.chat-workspace {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 13.5px;
+  font-weight: 750;
+}
+
+.chat-workspace-badge {
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  background: #4a154b;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.chat-channel {
+  color: #6a6f76;
+  font-size: 13.5px;
+  font-weight: 650;
+}
+
+.chat-thread {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 196px;
+  padding: 20px;
+}
+
+.chat-msg {
+  display: flex;
+  gap: 11px;
+}
+
+.chat-avatar {
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  width: 34px;
+  height: 34px;
+  border-radius: 9px;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.chat-name {
+  font-size: 13.5px;
+  font-weight: 750;
+}
+
+.chat-name em {
+  margin-left: 6px;
+  color: #a2a7ae;
+  font-size: 11.5px;
+  font-style: normal;
+  font-weight: 600;
+}
+
+.chat-msg p {
+  margin: 3px 0 0;
+  color: #2a2e34;
+  font-size: 14.5px;
+  line-height: 1.5;
+}
+
+.chat-msg-me {
+  animation: msg-pop 0.4s ease both;
+}
+
+@keyframes msg-pop {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.chat-compose {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0 20px 20px;
+  padding: 12px 14px;
+  border: 1px solid #e2e5ea;
+  border-radius: 12px;
+}
+
+.chat-input {
+  flex: 1;
+  min-width: 0;
+  color: #1f2329;
+  font-size: 14.5px;
+}
+
+.chat-input.is-empty {
+  color: #aab0b7;
+}
+
+.chat-caret {
+  display: inline-block;
+  width: 2px;
+  height: 16px;
+  margin-left: 1px;
+  vertical-align: -3px;
+  background: #1877ff;
+  animation: caret-blink 1s steps(1) infinite;
+}
+
+@keyframes caret-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+.chat-send {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  background: #eceef1;
+  color: #b3b8bf;
+  font-size: 13px;
+  transition:
+    background 0.3s ease,
+    color 0.3s ease;
+}
+
+.chat-send.is-ready {
+  background: #1877ff;
+  color: #fff;
+}
+
+/* Scene 2: context tabs */
+.context-window {
+  width: min(640px, 100%);
+  margin: 0 auto;
+}
+
+.context-app {
+  flex: 0 0 auto;
+  padding: 3px 10px;
+  border-radius: 7px;
+  background: #f1f3f6;
+  color: #3f444b;
+  font-size: 12.5px;
+  font-weight: 750;
+}
+
+.context-said {
+  overflow: hidden;
+  color: #9aa0a8;
+  font-size: 13px;
+  font-style: italic;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.context-tabs {
+  display: flex;
+  gap: 8px;
+  padding: 16px 20px 0;
+}
+
+.context-tab {
+  padding: 6px 12px;
+  border-radius: 999px;
+  color: #8a8f96;
+  font-size: 12.5px;
+  font-weight: 650;
+  transition:
+    background 0.3s ease,
+    color 0.3s ease;
+}
+
+.context-tab.is-active {
+  background: #0a0a0b;
+  color: #fff;
+}
+
+.context-output {
+  min-height: 168px;
+  margin: 16px 20px 24px;
+  padding: 18px;
+  border: 1px solid #eef0f3;
+  border-radius: 12px;
+  background: #fafbfc;
+}
+
+.context-output p {
+  margin: 0;
+  color: #1f2329;
+  font-size: 16px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+}
+
+.context-output.kind-code p {
+  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 14px;
+  color: #2f6f4f;
+}
+
+.context-output.kind-prompt p {
+  color: #3a3f46;
+}
+
+.context-waiting {
+  color: #aab0b7;
+  font-size: 15px;
+}
+
+/* Scene 3: always-ready desktop */
+.scene-anywhere {
+  padding-bottom: 8px;
+}
+
+.desktop {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 100%;
+  min-height: 360px;
+  padding: 40px;
+  border-radius: 20px;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 30% 20%, rgba(24, 119, 255, 0.16), transparent 45%),
+    radial-gradient(circle at 75% 75%, rgba(120, 180, 255, 0.18), transparent 50%),
+    linear-gradient(160deg, #1b2330, #0f1620);
+}
+
+.desktop-glow {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at 50% 120%, rgba(24, 119, 255, 0.28), transparent 55%);
+  pointer-events: none;
+}
+
+.desktop-dock {
+  display: flex;
+  gap: 16px;
+  padding: 12px 18px;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(14px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.desktop-dock img {
+  width: 44px;
+  height: 44px;
+}
+
+.desktop-key {
+  position: absolute;
+  top: 28px;
+  right: 30px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: rgba(255, 255, 255, 0.66);
+  font-size: 12px;
+  font-weight: 650;
+  transition: opacity 0.3s ease;
+}
+
+.desktop-key kbd {
+  display: inline-grid;
+  place-items: center;
+  min-width: 30px;
+  height: 26px;
+  padding: 0 8px;
+  border-radius: 7px;
+  background: rgba(255, 255, 255, 0.16);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
+  color: #fff;
+  font-family: inherit;
+  font-size: 12px;
+  transition:
+    transform 0.15s ease,
+    background 0.15s ease;
+}
+
+.desktop-key[data-pressed='true'] kbd {
+  transform: translateY(2px);
+  background: rgba(24, 119, 255, 0.5);
+  box-shadow: 0 0 0 rgba(0, 0, 0, 0.25);
+}
+
+.anywhere-dock {
+  position: absolute;
+  left: 50%;
+  bottom: 28px;
+  transform: translateX(-50%);
+  animation: capsule-rise 0.5s ease both;
+}
+
+@keyframes capsule-rise {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 14px);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}
+
+/* --- responsive --- */
+@media (max-width: 980px) {
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .features-nav {
+    position: static;
+    height: auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-bottom: 8px;
+  }
+
+  .features-nav-kicker {
+    width: 100%;
+    margin-bottom: 0;
+  }
+
+  .feature-block {
+    min-height: auto;
+  }
+
+  .dash {
+    grid-template-columns: 148px 1fr;
+  }
+
+  .dash-charts {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 720px) {
+  .showcase {
+    margin-top: clamp(-150px, -15vh, -96px);
+    padding-bottom: 64px;
+  }
+
+  .dash {
+    grid-template-columns: 1fr;
+  }
+
+  .dash-sidebar {
+    display: none;
+  }
+
+  .dash-main {
+    padding: 16px 16px 22px;
+  }
+
+  .dash-topbar {
+    flex-direction: column;
+  }
+
+  .dash-title p {
+    max-width: none;
+  }
+
+  .dash-pills {
+    flex-wrap: wrap;
+  }
+
+  .dash-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .feature-block h3 {
+    font-size: clamp(30px, 9vw, 40px);
+  }
+
+  .chat-thread {
+    min-height: 150px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .anywhere-dock,
+  .chat-msg-me {
+    animation: none !important;
   }
 }

From 4a7b743cea42e8274a0f5eeedadbc818bf99d44f Mon Sep 17 00:00:00 2001
From: Kieran Zhang <oldmeatovo@gmail.com>
Date: Fri, 12 Jun 2026 00:17:38 +0800
Subject: [PATCH 2/5] ci: post Open Code Review findings as a sticky PR comment

The workflow only wrote results to the job summary and an artifact, so OCR
findings never surfaced on the PR. Grant pull-requests: write and add a step
that renders ocr-result.json into a single comment, upserted via
`gh pr comment --edit-last --create-if-none` so repeated pushes update in place.
---
 .github/workflows/open-code-review.yml | 49 +++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/open-code-review.yml b/.github/workflows/open-code-review.yml
index 851e3c7..b9e1359 100644
--- a/.github/workflows/open-code-review.yml
+++ b/.github/workflows/open-code-review.yml
@@ -13,7 +13,7 @@ on:
 
 permissions:
   contents: read
-  pull-requests: read
+  pull-requests: write
 
 concurrency:
   group: open-code-review-${{ github.event.pull_request.number || github.ref }}
@@ -153,6 +153,53 @@ jobs:
                   summary.write(message + "\n")
           PY
 
+      - name: Post review comment
+        if: steps.deepseek.outputs.configured == 'true' && github.event_name == 'pull_request'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+        run: |
+          set -euo pipefail
+
+          python3 - <<'PY' > comment-body.md
+          import json
+          import os
+
+          with open("ocr-result.json", encoding="utf-8") as handle:
+              result = json.load(handle)
+
+          comments = result.get("comments") or []
+          warnings = result.get("warnings") or []
+          model = os.environ.get("OCR_LLM_MODEL", "")
+
+          lines = [
+              "<!-- open-code-review -->",
+              "## 🤖 Open Code Review",
+              "",
+              f"Model `{model}` · **{len(comments)}** comments · **{len(warnings)}** warnings",
+              "",
+          ]
+
+          if comments:
+              for comment in comments[:30]:
+                  path = comment.get("path", "unknown")
+                  line = comment.get("start_line") or comment.get("end_line") or 0
+                  content = " ".join((comment.get("content") or "").split())
+                  if len(content) > 500:
+                      content = content[:497] + "..."
+                  lines.append(f"- **`{path}:{line}`** — {content}")
+              if len(comments) > 30:
+                  lines.append("")
+                  lines.append(f"_Showing first 30 of {len(comments)}. Full output in the `ocr-result` artifact._")
+          else:
+              lines.append(result.get("message") or "No findings 🎉")
+
+          print("\n".join(lines))
+          PY
+
+          # Upsert a single sticky comment so repeated pushes update in place.
+          gh pr comment "$PR_NUMBER" --body-file comment-body.md --edit-last --create-if-none
+
       - name: Upload OCR result
         if: steps.deepseek.outputs.configured == 'true'
         uses: actions/upload-artifact@v4

From 6624e64f5659fc7caa1f60981280ec96ed86e20b Mon Sep 17 00:00:00 2001
From: Kieran Zhang <oldmeatovo@gmail.com>
Date: Fri, 12 Jun 2026 00:17:38 +0800
Subject: [PATCH 3/5] refactor(website): address Open Code Review findings

- Remove the unnecessary `as never` cast on the feature-block ref
- Extract dictation phase timings and the reduced-motion fallback into named
  constants in useDictationScene
- Type the dashboard navGroups data (NavGroup/NavItem)
- Modernize the .sr-only utility to clip-path: inset(50%)
---
 website/src/components/DashboardWindow.tsx  | 16 +++++++++++-
 website/src/components/Features.tsx         |  2 +-
 website/src/components/useDictationScene.ts | 28 +++++++++++++++------
 website/src/styles.css                      |  2 +-
 4 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/website/src/components/DashboardWindow.tsx b/website/src/components/DashboardWindow.tsx
index 6b40be8..ac561af 100644
--- a/website/src/components/DashboardWindow.tsx
+++ b/website/src/components/DashboardWindow.tsx
@@ -1,10 +1,24 @@
+import type { ReactElement } from 'react'
+
 import { AppWindow, TrafficLights } from './AppWindow'
 import { OverlayCapsule } from './OverlayCapsule'
 
 // High-fidelity recreation of Voily's Home dashboard (see assets/screenshots/hero.png).
 // English-labelled to match the rest of the marketing site.
 
-const navGroups = [
+type NavItem = {
+  id: string
+  name: string
+  icon: () => ReactElement
+  active?: boolean
+}
+
+type NavGroup = {
+  label: string
+  items: NavItem[]
+}
+
+const navGroups: NavGroup[] = [
   {
     label: 'General',
     items: [{ id: 'home', name: 'Home', icon: HomeIcon, active: true }],
diff --git a/website/src/components/Features.tsx b/website/src/components/Features.tsx
index e244b44..bd63feb 100644
--- a/website/src/components/Features.tsx
+++ b/website/src/components/Features.tsx
@@ -101,7 +101,7 @@ function FeatureBlock(props: {
   children: React.ReactNode
 }) {
   return (
-    <article className="feature-block" ref={props.setRef as never} data-idx={props.idx}>
+    <article className="feature-block" ref={props.setRef} data-idx={props.idx}>
       <div className="feature-copy">
         <span className="feature-eyebrow">{props.eyebrow}</span>
         <h3>{props.title}</h3>
diff --git a/website/src/components/useDictationScene.ts b/website/src/components/useDictationScene.ts
index e8d3aba..597774b 100644
--- a/website/src/components/useDictationScene.ts
+++ b/website/src/components/useDictationScene.ts
@@ -16,8 +16,20 @@ export type SceneView = {
   index: number
 }
 
+// Dictation phase timeline, in ms from the start of each loop. The phases run:
+// listen+type → hold → transcribe → refine → inject(type) → hold, then repeat.
+const TYPE_SAID_MS = 1700 // time to type out the spoken text
+const LISTEN_TYPING_END = 1900 // listening while the typed text settles
+const LISTEN_HOLD_END = 2900 // full spoken text held before processing
+const TRANSCRIBE_END = 3400
+const REFINE_END = 4200
+const INJECT_TYPE_MS = 950 // time to type the injected result
+const INJECT_TYPING_END = 5300 // result fully injected, then held until LOOP_MS
 const LOOP_MS = 7200
 
+// Frozen frame shown when the scene is off-screen or motion is reduced.
+const REDUCED_MOTION_ELAPSED_MS = 5000
+
 // One full dictation cycle expressed as a pure function of elapsed time, so the
 // loop can be paused/resumed and stays in sync with the waveform.
 function viewAt(totalElapsed: number, examples: SceneExample[]): SceneView {
@@ -25,8 +37,8 @@ function viewAt(totalElapsed: number, examples: SceneExample[]): SceneView {
   const t = totalElapsed % LOOP_MS
   const { said, writes } = examples[index]
 
-  if (t < 1900) {
-    const p = Math.min(1, t / 1700)
+  if (t < LISTEN_TYPING_END) {
+    const p = Math.min(1, t / TYPE_SAID_MS)
     return {
       phase: 'listening',
       capsuleText: said.slice(0, Math.ceil(said.length * p)),
@@ -35,17 +47,17 @@ function viewAt(totalElapsed: number, examples: SceneExample[]): SceneView {
       index,
     }
   }
-  if (t < 2900) {
+  if (t < LISTEN_HOLD_END) {
     return { phase: 'listening', capsuleText: said, output: '', injected: false, index }
   }
-  if (t < 3400) {
+  if (t < TRANSCRIBE_END) {
     return { phase: 'transcribing', capsuleText: '', output: '', injected: false, index }
   }
-  if (t < 4200) {
+  if (t < REFINE_END) {
     return { phase: 'refining', capsuleText: '', output: '', injected: false, index }
   }
-  if (t < 5300) {
-    const p = Math.min(1, (t - 4200) / 950)
+  if (t < INJECT_TYPING_END) {
+    const p = Math.min(1, (t - REFINE_END) / INJECT_TYPE_MS)
     return {
       phase: 'injecting',
       capsuleText: '',
@@ -78,7 +90,7 @@ export function useDictationScene(examples: SceneExample[], active: boolean): Sc
     }
     const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches
     if (reduce) {
-      setView(viewAt(5000, examples))
+      setView(viewAt(REDUCED_MOTION_ELAPSED_MS, examples))
       return
     }
 
diff --git a/website/src/styles.css b/website/src/styles.css
index e725ebe..b505a05 100644
--- a/website/src/styles.css
+++ b/website/src/styles.css
@@ -158,7 +158,7 @@ a {
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
 }

From 638d433488af989bb2934d6f83334afa81c14387 Mon Sep 17 00:00:00 2001
From: Kieran Zhang <oldmeatovo@gmail.com>
Date: Fri, 12 Jun 2026 11:02:35 +0800
Subject: [PATCH 4/5] refactor(website): address second-round Open Code Review
 findings

- Add id="features" so the hero scroll cue's #features anchor resolves
- Stabilize the per-index ref callbacks in useActiveSection to avoid
  detach/reattach churn on every render
- Guard viewAt against an empty examples array (returns the resting frame)
- Restore the clip: rect(0,0,0,0) fallback alongside clip-path on .sr-only
- Swap exact-match hex/rgba colors for var(--blue) / var(--glow)
---
 website/src/components/Features.tsx         | 13 ++++++++++---
 website/src/components/useDictationScene.ts |  1 +
 website/src/styles.css                      | 15 ++++++++-------
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/website/src/components/Features.tsx b/website/src/components/Features.tsx
index bd63feb..40806a3 100644
--- a/website/src/components/Features.tsx
+++ b/website/src/components/Features.tsx
@@ -10,6 +10,7 @@ const navItems = ['AI Rewrite', 'In context', 'Always ready']
 // of the viewport, and tell that section it may animate.
 function useActiveSection(count: number) {
   const refs = useRef<(HTMLElement | null)[]>([])
+  const setters = useRef<((el: HTMLElement | null) => void)[]>([])
   const [active, setActive] = useState(0)
 
   useEffect(() => {
@@ -28,8 +29,14 @@ function useActiveSection(count: number) {
     return () => observer.disconnect()
   }, [count])
 
-  const setRef = (idx: number) => (el: HTMLElement | null) => {
-    refs.current[idx] = el
+  // Stable per-index ref callback so re-renders don't detach/reattach the node.
+  const setRef = (idx: number) => {
+    if (!setters.current[idx]) {
+      setters.current[idx] = (el: HTMLElement | null) => {
+        refs.current[idx] = el
+      }
+    }
+    return setters.current[idx]
   }
 
   return { active, setRef }
@@ -39,7 +46,7 @@ export function Features() {
   const { active, setRef } = useActiveSection(3)
 
   return (
-    <section className="features" aria-labelledby="features-title">
+    <section className="features" id="features" aria-labelledby="features-title">
       <h2 id="features-title" className="sr-only">
         How Voily works
       </h2>
diff --git a/website/src/components/useDictationScene.ts b/website/src/components/useDictationScene.ts
index 597774b..0a68ba2 100644
--- a/website/src/components/useDictationScene.ts
+++ b/website/src/components/useDictationScene.ts
@@ -33,6 +33,7 @@ const REDUCED_MOTION_ELAPSED_MS = 5000
 // One full dictation cycle expressed as a pure function of elapsed time, so the
 // loop can be paused/resumed and stays in sync with the waveform.
 function viewAt(totalElapsed: number, examples: SceneExample[]): SceneView {
+  if (examples.length === 0) return RESTING
   const index = Math.floor(totalElapsed / LOOP_MS) % examples.length
   const t = totalElapsed % LOOP_MS
   const { said, writes } = examples[index]
diff --git a/website/src/styles.css b/website/src/styles.css
index b505a05..053434c 100644
--- a/website/src/styles.css
+++ b/website/src/styles.css
@@ -158,6 +158,7 @@ a {
   padding: 0;
   margin: -1px;
   overflow: hidden;
+  clip: rect(0, 0, 0, 0);
   clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
@@ -853,7 +854,7 @@ a {
 }
 
 .dash-nav-item.is-active {
-  background: #1877ff;
+  background: var(--blue);
   color: #fff;
   box-shadow: 0 6px 14px rgba(24, 119, 255, 0.3);
 }
@@ -939,7 +940,7 @@ a {
 }
 
 .tone-blue {
-  background: #1877ff;
+  background: var(--blue);
 }
 
 .tone-green {
@@ -1175,7 +1176,7 @@ a {
 
 .dash-history-copy {
   flex: 0 0 auto;
-  color: #1877ff;
+  color: var(--blue);
   font-size: 12px;
   font-weight: 650;
 }
@@ -1288,7 +1289,7 @@ a {
 }
 
 .feature-eyebrow {
-  color: #1877ff;
+  color: var(--blue);
   font-size: 13px;
   font-weight: 750;
   letter-spacing: 0.02em;
@@ -1451,7 +1452,7 @@ a {
   height: 16px;
   margin-left: 1px;
   vertical-align: -3px;
-  background: #1877ff;
+  background: var(--blue);
   animation: caret-blink 1s steps(1) infinite;
 }
 
@@ -1476,7 +1477,7 @@ a {
 }
 
 .chat-send.is-ready {
-  background: #1877ff;
+  background: var(--blue);
   color: #fff;
 }
 
@@ -1574,7 +1575,7 @@ a {
   border-radius: 20px;
   overflow: hidden;
   background:
-    radial-gradient(circle at 30% 20%, rgba(24, 119, 255, 0.16), transparent 45%),
+    radial-gradient(circle at 30% 20%, var(--glow), transparent 45%),
     radial-gradient(circle at 75% 75%, rgba(120, 180, 255, 0.18), transparent 50%),
     linear-gradient(160deg, #1b2330, #0f1620);
 }

From a64d850a85cd31e5589aa4b53ca5b996487633bc Mon Sep 17 00:00:00 2001
From: Kieran Zhang <oldmeatovo@gmail.com>
Date: Fri, 12 Jun 2026 11:14:22 +0800
Subject: [PATCH 5/5] refactor(website): address third-round Open Code Review
 findings

- Reset .features-nav / .feature-block padding-top at the 980px breakpoint so
  the desktop sticky-alignment offset doesn't add mobile whitespace
- Drop the redundant prefers-reduced-motion block (the blanket rule covers it)
- Make reduced-motion reactive in useDictationScene and re-baseline startRef on
  restart so an examples swap can't carry a stale timestamp
- Stabilize the per-bar ref callbacks and document the rAF effect in OverlayCapsule
- Scroll-spy now picks the section nearest the viewport centre
- Derive desktopApps from the shared content app list
---
 website/src/components/Features.tsx         | 33 +++++++++++++--------
 website/src/components/OverlayCapsule.tsx   | 21 ++++++++-----
 website/src/components/useDictationScene.ts | 23 ++++++++++++--
 website/src/styles.css                      | 10 ++-----
 4 files changed, 57 insertions(+), 30 deletions(-)

diff --git a/website/src/components/Features.tsx b/website/src/components/Features.tsx
index 40806a3..80489b1 100644
--- a/website/src/components/Features.tsx
+++ b/website/src/components/Features.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 
 import { AppWindow } from './AppWindow'
+import { apps } from './content'
 import { OverlayCapsule } from './OverlayCapsule'
 import { useDictationScene, type SceneExample } from './useDictationScene'
 
@@ -15,13 +16,22 @@ function useActiveSection(count: number) {
 
   useEffect(() => {
     const observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            const idx = Number((entry.target as HTMLElement).dataset.idx)
-            setActive(idx)
+      () => {
+        // A crossing fired — pick the section whose center is closest to the
+        // viewport center, so overlapping sections never flip to the wrong one.
+        const middle = window.innerHeight / 2
+        let best = -1
+        let bestDist = Infinity
+        refs.current.forEach((el, idx) => {
+          if (!el) return
+          const rect = el.getBoundingClientRect()
+          const dist = Math.abs((rect.top + rect.bottom) / 2 - middle)
+          if (dist < bestDist) {
+            bestDist = dist
+            best = idx
           }
-        }
+        })
+        if (best >= 0) setActive(best)
       },
       { rootMargin: '-45% 0px -45% 0px', threshold: 0 }
     )
@@ -276,13 +286,10 @@ const anywhereExamples: SceneExample[] = [
   },
 ]
 
-const desktopApps = [
-  '/app-icons/cursor.svg',
-  '/app-icons/slack.svg',
-  '/app-icons/gmail.svg',
-  '/app-icons/notion.svg',
-  '/app-icons/chatgpt.svg',
-]
+// Derive the desktop dock icons from the shared app list so icon paths live in
+// one place (content.ts).
+const desktopAppNames = new Set(['Cursor', 'Slack', 'Gmail', 'Notion', 'ChatGPT'])
+const desktopApps = apps.filter((app) => desktopAppNames.has(app.name)).map((app) => app.iconPath)
 
 function AnywhereScene({ active }: { active: boolean }) {
   const view = useDictationScene(anywhereExamples, active)
diff --git a/website/src/components/OverlayCapsule.tsx b/website/src/components/OverlayCapsule.tsx
index a843a37..9d8e523 100644
--- a/website/src/components/OverlayCapsule.tsx
+++ b/website/src/components/OverlayCapsule.tsx
@@ -60,9 +60,22 @@ function barHeight(index: number, time: number, rms: number): number {
 
 function Waveform({ phase }: { phase: CapsulePhase }) {
   const barsRef = useRef<(HTMLSpanElement | null)[]>([])
+  const barSetters = useRef<((el: HTMLSpanElement | null) => void)[]>([])
   const phaseRef = useRef(phase)
   phaseRef.current = phase
 
+  // Stable per-bar ref callback so re-renders don't detach/reattach each node.
+  const setBarRef = (i: number) => {
+    if (!barSetters.current[i]) {
+      barSetters.current[i] = (el: HTMLSpanElement | null) => {
+        barsRef.current[i] = el
+      }
+    }
+    return barSetters.current[i]
+  }
+
+  // Empty deps on purpose: the rAF loop runs for the component's lifetime and
+  // reads the latest phase via phaseRef, so it never needs to restart.
   useEffect(() => {
     const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches
     if (reduce) {
@@ -90,13 +103,7 @@ function Waveform({ phase }: { phase: CapsulePhase }) {
   return (
     <span className="oc-wave" aria-hidden="true">
       {BAR_WEIGHTS.map((_, i) => (
-        <span
-          className="oc-bar"
-          key={i}
-          ref={(el) => {
-            barsRef.current[i] = el
-          }}
-        />
+        <span className="oc-bar" key={i} ref={setBarRef(i)} />
       ))}
     </span>
   )
diff --git a/website/src/components/useDictationScene.ts b/website/src/components/useDictationScene.ts
index 0a68ba2..00d277b 100644
--- a/website/src/components/useDictationScene.ts
+++ b/website/src/components/useDictationScene.ts
@@ -79,22 +79,39 @@ const RESTING: SceneView = {
   index: 0,
 }
 
+const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)'
+
 export function useDictationScene(examples: SceneExample[], active: boolean): SceneView {
   const [view, setView] = useState<SceneView>(RESTING)
+  const [reducedMotion, setReducedMotion] = useState(
+    () => typeof window !== 'undefined' && window.matchMedia(REDUCED_MOTION_QUERY).matches
+  )
   const startRef = useRef<number | null>(null)
   const lastRef = useRef<string>('')
 
+  // Track the preference reactively so toggling "Reduce motion" takes effect
+  // immediately, not only after the scene scrolls out and back.
+  useEffect(() => {
+    const media = window.matchMedia(REDUCED_MOTION_QUERY)
+    const update = () => setReducedMotion(media.matches)
+    update()
+    media.addEventListener('change', update)
+    return () => media.removeEventListener('change', update)
+  }, [])
+
   useEffect(() => {
     if (!active) {
       startRef.current = null
       return
     }
-    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches
-    if (reduce) {
+    if (reducedMotion) {
       setView(viewAt(REDUCED_MOTION_ELAPSED_MS, examples))
       return
     }
 
+    // Re-baseline on every (re)start so an examples swap can't carry a stale
+    // timestamp into the elapsed calculation.
+    startRef.current = null
     let raf = 0
     const tick = (now: number) => {
       if (startRef.current === null) startRef.current = now
@@ -108,7 +125,7 @@ export function useDictationScene(examples: SceneExample[], active: boolean): Sc
     }
     raf = requestAnimationFrame(tick)
     return () => cancelAnimationFrame(raf)
-  }, [active, examples])
+  }, [active, examples, reducedMotion])
 
   return view
 }
diff --git a/website/src/styles.css b/website/src/styles.css
index 053434c..08be693 100644
--- a/website/src/styles.css
+++ b/website/src/styles.css
@@ -1671,6 +1671,8 @@ a {
     flex-wrap: wrap;
     gap: 12px;
     margin-bottom: 8px;
+    /* Drop the desktop sticky-alignment offset once the nav stacks above. */
+    padding-top: 0;
   }
 
   .features-nav-kicker {
@@ -1680,6 +1682,7 @@ a {
 
   .feature-block {
     min-height: auto;
+    padding-top: 0;
   }
 
   .dash {
@@ -1733,10 +1736,3 @@ a {
     min-height: 150px;
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .anywhere-dock,
-  .chat-msg-me {
-    animation: none !important;
-  }
-}