diff --git a/.changelog/unreleased/1003-phase-9-scroll-and-wallet-motion.md b/.changelog/unreleased/1003-phase-9-scroll-and-wallet-motion.md
new file mode 100644
index 00000000..3721d6a1
--- /dev/null
+++ b/.changelog/unreleased/1003-phase-9-scroll-and-wallet-motion.md
@@ -0,0 +1,7 @@
+---
+type: changed
+area: trade
+pr: 1003
+breaking: false
+---
+The header now hides on scroll-down and reveals on scroll-up on mobile with a fading hairline, landing sections reveal as they scroll into view, landing statistics count up the first time they are seen, and the wallet connect flow staggers its wallet list, pulses while connecting, and morphs into the account pill.
diff --git a/apps/docs/content/reference/tokens.generated.mdx b/apps/docs/content/reference/tokens.generated.mdx
index 9a564c14..770a394e 100644
--- a/apps/docs/content/reference/tokens.generated.mdx
+++ b/apps/docs/content/reference/tokens.generated.mdx
@@ -7,7 +7,7 @@ status: stable
 
 This page is generated from [`packages/ui/src/styles/globals.css`](https://github.com/SO4-Markets/interface/blob/main/packages/ui/src/styles/globals.css) — the `@theme inline` block plus the `:root` and `.dark` values it resolves to. It cannot drift from the source: `bun run --cwd apps/docs check:tokens:generated` (wired into CI) fails the build if this file is out of date. See [Design system](/developers/design-system) for what these roles mean and when to reach for each one; see [`DESIGN.md`](https://github.com/SO4-Markets/interface/blob/main/DESIGN.md) for the full written contract.
 
-128 tokens, in both themes. A dashed swatch means one of two things, distinguished by the raw value column: the token is not defined in that theme at all (`—`), or it resolves through the excluded GMX palette (see below) and so cannot be rendered here — see [Design system](/developers/design-system#one-theme-so-far) for what that means for `surface-*` and `text-*` in light mode specifically.
+129 tokens, in both themes. A dashed swatch means one of two things, distinguished by the raw value column: the token is not defined in that theme at all (`—`), or it resolves through the excluded GMX palette (see below) and so cannot be rendered here — see [Design system](/developers/design-system#one-theme-so-far) for what that means for `surface-*` and `text-*` in light mode specifically.
 
 The `--color-gmx-*` palette and its landing-only typography/button utilities are excluded from this page. DESIGN.md documents them as source material for the GrantFox 3 landing theme, not general-purpose tokens — see [`docs/gf_3/001_theme_update.md`](https://github.com/SO4-Markets/interface/blob/main/docs/gf_3/001_theme_update.md).
 
diff --git a/apps/web/src/features/wallet/components/ConnectButton.test.tsx b/apps/web/src/features/wallet/components/ConnectButton.test.tsx
index af98b588..6a7e03c0 100644
--- a/apps/web/src/features/wallet/components/ConnectButton.test.tsx
+++ b/apps/web/src/features/wallet/components/ConnectButton.test.tsx
@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
-import { cleanup, render, screen } from "@testing-library/react"
+import { act, cleanup, render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { useWalletStore } from "../store/wallet-store"
 import { ConnectButton } from "./ConnectButton"
@@ -109,7 +109,9 @@ describe("ConnectButton - Disconnected State", () => {
       const dialog = screen.getByRole("dialog")
       expect(dialog).toBeInTheDocument()
 
-      const dialogTitle = screen.getByRole("heading", { name: "Connect Wallet" })
+      const dialogTitle = screen.getByRole("heading", {
+        name: "Connect Wallet",
+      })
       expect(dialogTitle).toBeInTheDocument()
     })
 
@@ -127,7 +129,7 @@ describe("ConnectButton - Disconnected State", () => {
 
       // Dialog description should be present
       expect(
-        screen.getByText("Choose a supported Stellar wallet to continue."),
+        screen.getByText("Choose a supported Stellar wallet to continue.")
       ).toBeInTheDocument()
     })
 
@@ -141,9 +143,22 @@ describe("ConnectButton - Disconnected State", () => {
       // Mobile wallet section should be visible
       expect(screen.getByText("Use Mobile Wallet")).toBeInTheDocument()
       expect(
-        screen.getByText(/Scan to connect from a mobile wallet/),
+        screen.getByText(/Scan to connect from a mobile wallet/)
       ).toBeInTheDocument()
     })
+
+    it("should stagger the wallet list on open", async () => {
+      const user = userEvent.setup()
+      render(<ConnectButton />)
+
+      await user.click(screen.getByRole("button", { name: /Connect wallet/i }))
+
+      const rows = Array.from(document.querySelectorAll(".so4-wallet-row"))
+      expect(rows).toHaveLength(3)
+      expect(rows[0]).toHaveStyle({ "--wallet-stagger": "0" })
+      expect(rows[1]).toHaveStyle({ "--wallet-stagger": "1" })
+      expect(rows[2]).toHaveStyle({ "--wallet-stagger": "2" })
+    })
   })
 
   describe("Loading/Connecting State", () => {
@@ -166,15 +181,14 @@ describe("ConnectButton - Disconnected State", () => {
       expect(button).toBeDisabled()
     })
 
-    it("should show spinner when connecting", () => {
+    it("should show a pulsing wallet icon when connecting", () => {
       useWalletStore.setState({ status: "connecting" })
 
       render(<ConnectButton />)
 
-      // Spinner SVG should be rendered
-      const svg = screen.getByRole("button").querySelector("svg")
-      expect(svg).toBeInTheDocument()
-      expect(svg).toHaveClass("animate-spin")
+      const button = screen.getByRole("button", { name: /Connecting wallet/i })
+      expect(button.querySelector(".so4-wallet-pulse")).toBeInTheDocument()
+      expect(button).toHaveTextContent("Connecting")
     })
 
     it("should not open modal when connecting", async () => {
@@ -261,6 +275,26 @@ describe("ConnectButton - Disconnected State", () => {
       // Account badge should be rendered instead
       expect(screen.getByText(/GAAAAA/)).toBeInTheDocument()
     })
+
+    it("should morph the connecting pill into the account badge", () => {
+      const { rerender } = render(<ConnectButton />)
+
+      act(() => {
+        useWalletStore.setState({ status: "connecting" })
+      })
+      rerender(<ConnectButton />)
+
+      act(() => {
+        useWalletStore.setState({
+          status: "connected",
+          address: fakeWalletAddress,
+        })
+      })
+      rerender(<ConnectButton />)
+
+      const pill = document.querySelector('[data-wallet-state="connected"]')
+      expect(pill).toHaveClass("so4-wallet-pill")
+    })
   })
 
   describe("Keyboard Shortcuts", () => {
@@ -277,7 +311,7 @@ describe("ConnectButton - Disconnected State", () => {
         expect.objectContaining({
           key: "k",
           enabled: true,
-        }),
+        })
       )
     })
 
@@ -293,7 +327,7 @@ describe("ConnectButton - Disconnected State", () => {
       expect(useKeyboardShortcut).toHaveBeenCalledWith(
         expect.objectContaining({
           enabled: false,
-        }),
+        })
       )
     })
 
@@ -312,7 +346,7 @@ describe("ConnectButton - Disconnected State", () => {
       expect(useKeyboardShortcut).toHaveBeenCalledWith(
         expect.objectContaining({
           enabled: false,
-        }),
+        })
       )
     })
   })
@@ -324,7 +358,9 @@ describe("ConnectButton - Disconnected State", () => {
       expect(state.status).toBe("disconnected")
 
       render(<ConnectButton />)
-      expect(screen.getByRole("button", { name: /Connect wallet/i })).toBeInTheDocument()
+      expect(
+        screen.getByRole("button", { name: /Connect wallet/i })
+      ).toBeInTheDocument()
     })
 
     it("test B: should not have state from test A", () => {
@@ -334,14 +370,18 @@ describe("ConnectButton - Disconnected State", () => {
       expect(state.status).toBe("disconnected")
 
       render(<ConnectButton />)
-      expect(screen.getByRole("button", { name: /Connect wallet/i })).toBeInTheDocument()
+      expect(
+        screen.getByRole("button", { name: /Connect wallet/i })
+      ).toBeInTheDocument()
     })
 
     it("should not render connected UI after render if store changes", () => {
       const { rerender } = render(<ConnectButton />)
 
       // Initially should show connect button
-      expect(screen.getByRole("button", { name: /Connect wallet/i })).toBeInTheDocument()
+      expect(
+        screen.getByRole("button", { name: /Connect wallet/i })
+      ).toBeInTheDocument()
 
       // Update store to connected state
       useWalletStore.setState({
@@ -354,7 +394,7 @@ describe("ConnectButton - Disconnected State", () => {
 
       // Now should show account badge instead
       expect(
-        screen.queryByRole("button", { name: /Connect wallet/i }),
+        screen.queryByRole("button", { name: /Connect wallet/i })
       ).not.toBeInTheDocument()
       expect(screen.getByText(/GAAAAA/)).toBeInTheDocument()
     })
diff --git a/apps/web/src/features/wallet/components/ConnectButton.tsx b/apps/web/src/features/wallet/components/ConnectButton.tsx
index 7a5073b0..81dfe26c 100644
--- a/apps/web/src/features/wallet/components/ConnectButton.tsx
+++ b/apps/web/src/features/wallet/components/ConnectButton.tsx
@@ -15,7 +15,7 @@ import { cn } from "@workspace/ui/lib/utils"
 import { createSep7ConnectUri, createSep7TransactionUri } from "../lib/sep7"
 import { useBalance } from "../hooks/useBalance"
 import { useWalletStore } from "../store/wallet-store"
-import type { ComponentProps } from "react"
+import type { CSSProperties, ComponentProps } from "react"
 import { useKeyboardShortcut } from "@/shared/hooks/useKeyboardShortcut"
 import { useWallet } from "@/app/providers"
 import { NETWORK } from "@/app/config/network"
@@ -64,6 +64,19 @@ export function ConnectButton({ className, ...props }: ConnectButtonProps) {
   const address = useWalletStore((state) => state.address)
   const status = useWalletStore((state) => state.status)
   const isConnecting = status === "connecting"
+  // #887: only the transition into `connected` should play the pill entrance,
+  // not every render of an already-connected wallet.
+  const wasConnecting = useRef(false)
+
+  useEffect(() => {
+    if (status === "connecting") {
+      wasConnecting.current = true
+    } else if (status !== "connected") {
+      wasConnecting.current = false
+    }
+  }, [status])
+
+  const justConnected = status === "connected" && wasConnecting.current
 
   // Must be called unconditionally — before any early return
   useKeyboardShortcut({
@@ -73,7 +86,39 @@ export function ConnectButton({ className, ...props }: ConnectButtonProps) {
   })
 
   if (status === "connected" && address) {
-    return <AccountBadge address={address} className={className as string | undefined} {...props} />
+    return (
+      <AccountBadge
+        address={address}
+        animateIn={justConnected}
+        className={className as string | undefined}
+        {...props}
+      />
+    )
+  }
+
+  // #887: while the kit handshake is in flight the trigger becomes an
+  // aria-busy status with a single pulsing indicator, so the click has
+  // immediate feedback that never shifts the surrounding layout.
+  if (isConnecting) {
+    return (
+      <Button
+        {...props}
+        type="button"
+        aria-label="Connecting wallet"
+        aria-busy="true"
+        className={cn("w-full justify-center gap-2 sm:w-auto", className)}
+        disabled
+      >
+        <span
+          className="relative inline-flex size-3.5 items-center justify-center"
+          aria-hidden="true"
+        >
+          <span className="so4-wallet-pulse absolute inset-0 rounded-full bg-primary/20" />
+          <WalletIcon className="relative size-3.5" />
+        </span>
+        <span role="status">Connecting</span>
+      </Button>
+    )
   }
 
   return (
@@ -81,13 +126,11 @@ export function ConnectButton({ className, ...props }: ConnectButtonProps) {
       <Button
         {...props}
         type="button"
-        aria-label={isConnecting ? "Connecting wallet" : "Connect wallet"}
-        aria-busy={isConnecting}
+        aria-label="Connect wallet"
         className={cn("w-full sm:w-auto", className)}
-        disabled={isConnecting || props.disabled}
+        disabled={props.disabled}
         onClick={() => setIsWalletModalOpen(true)}
       >
-        {isConnecting && <Spinner />}
         Connect Wallet
       </Button>
 
@@ -96,13 +139,34 @@ export function ConnectButton({ className, ...props }: ConnectButtonProps) {
   )
 }
 
+function WalletIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M4 7.5A2.5 2.5 0 0 1 6.5 5H18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6.5A2.5 2.5 0 0 1 4 16.5v-9Z" />
+      <path d="M4 8h13" />
+      <path d="M16 12h4v4h-4a2 2 0 0 1 0-4Z" />
+    </svg>
+  )
+}
+
 function AccountBadge({
   address,
   className,
+  animateIn = false,
   ...props
 }: {
   address: string
   className?: string
+  animateIn?: boolean
 } & Omit<ConnectButtonProps, "className">) {
   const [open, setOpen] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
@@ -122,7 +186,11 @@ function AccountBadge({
   }, [open])
 
   return (
-    <div ref={ref} className="relative">
+    <div
+      ref={ref}
+      data-wallet-state="connected"
+      className={cn("relative", animateIn && "so4-wallet-pill")}
+    >
       <Button
         {...props}
         type="button"
@@ -302,7 +370,7 @@ function WalletModal({
         </DialogHeader>
 
         <div className="space-y-2">
-          {sortedWalletOptions.map((wallet) => {
+          {sortedWalletOptions.map((wallet, index) => {
             const isAvailable = availableWalletIds.has(wallet.id)
 
             return (
@@ -310,7 +378,8 @@ function WalletModal({
                 key={wallet.id}
                 type="button"
                 variant={isAvailable ? "default" : "outline"}
-                className="w-full justify-between"
+                className="so4-wallet-row w-full justify-between"
+                style={{ "--wallet-stagger": index } as CSSProperties}
                 onClick={() => {
                   void connectWallet(wallet)
                 }}
@@ -376,31 +445,6 @@ function WalletModal({
   )
 }
 
-function Spinner() {
-  return (
-    <svg
-      className="size-3.5 animate-spin"
-      viewBox="0 0 24 24"
-      aria-hidden="true"
-    >
-      <circle
-        className="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="4"
-      />
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"
-      />
-    </svg>
-  )
-}
-
 export function formatAddress(address: string) {
   if (address.length <= 12) {
     return address
diff --git a/apps/web/src/lib/supports-view-timeline.ts b/apps/web/src/lib/supports-view-timeline.ts
new file mode 100644
index 00000000..84a6c5a3
--- /dev/null
+++ b/apps/web/src/lib/supports-view-timeline.ts
@@ -0,0 +1,14 @@
+/**
+ * CSS scroll-driven animation support (#885).
+ *
+ * `animation-timeline: view()` is the preferred path: it runs off the main
+ * thread and needs no IntersectionObserver. Browsers without support keep the
+ * existing observer fallback.
+ */
+export function supportsViewTimeline(): boolean {
+  return (
+    typeof CSS !== "undefined" &&
+    typeof CSS.supports === "function" &&
+    CSS.supports("animation-timeline: view()")
+  )
+}
diff --git a/apps/web/src/lib/use-viewport-reveal.test.ts b/apps/web/src/lib/use-viewport-reveal.test.ts
deleted file mode 100644
index 9774d235..00000000
--- a/apps/web/src/lib/use-viewport-reveal.test.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
-import { renderHook } from "@testing-library/react"
-import { useViewportReveal } from "./use-viewport-reveal"
-
-describe("useViewportReveal", () => {
-  let observerCallback: IntersectionObserverCallback
-
-  beforeEach(() => {
-    global.IntersectionObserver = vi.fn((callback) => {
-      observerCallback = callback
-      return {
-        observe: vi.fn(),
-        unobserve: vi.fn(),
-        disconnect: vi.fn(),
-      } as unknown as IntersectionObserver
-    })
-  })
-
-  afterEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it("returns a ref object", () => {
-    const { result } = renderHook(() => useViewportReveal())
-    expect(result.current).toHaveProperty("current")
-  })
-
-  it("calls onReveal callback when element enters viewport", () => {
-    const onReveal = vi.fn()
-    renderHook(() => useViewportReveal({ onReveal }))
-
-    const mockEntry = {
-      isIntersecting: true,
-      target: document.createElement("div"),
-    } as unknown as IntersectionObserverEntry
-
-    observerCallback([mockEntry], {} as IntersectionObserver)
-    expect(onReveal).toHaveBeenCalledOnce()
-  })
-
-  it("respects once option - only triggers once", () => {
-    const onReveal = vi.fn()
-    renderHook(() => useViewportReveal({ once: true, onReveal }))
-
-    const mockEntry = {
-      isIntersecting: true,
-      target: document.createElement("div"),
-    } as unknown as IntersectionObserverEntry
-
-    observerCallback([mockEntry], {} as IntersectionObserver)
-    observerCallback([mockEntry], {} as IntersectionObserver)
-
-    expect(onReveal).toHaveBeenCalledOnce()
-  })
-
-  it("triggers on each intersection when once is false", () => {
-    const onReveal = vi.fn()
-    renderHook(() => useViewportReveal({ once: false, onReveal }))
-
-    const mockEntry = {
-      isIntersecting: true,
-      target: document.createElement("div"),
-    } as unknown as IntersectionObserverEntry
-
-    observerCallback([mockEntry], {} as IntersectionObserver)
-    observerCallback([mockEntry], {} as IntersectionObserver)
-
-    expect(onReveal).toHaveBeenCalledTimes(2)
-  })
-
-  it("does not trigger when element is not intersecting", () => {
-    const onReveal = vi.fn()
-    renderHook(() => useViewportReveal({ onReveal }))
-
-    const mockEntry = {
-      isIntersecting: false,
-      target: document.createElement("div"),
-    } as unknown as IntersectionObserverEntry
-
-    observerCallback([mockEntry], {} as IntersectionObserver)
-    expect(onReveal).not.toHaveBeenCalled()
-  })
-
-  it("passes threshold to IntersectionObserver", () => {
-    renderHook(() => useViewportReveal({ threshold: 0.5 }))
-
-    expect(global.IntersectionObserver).toHaveBeenCalledWith(
-      expect.any(Function),
-      expect.objectContaining({ threshold: 0.5 })
-    )
-  })
-
-  it("disconnects observer on unmount", () => {
-    const disconnect = vi.fn()
-    global.IntersectionObserver = vi.fn(() => ({
-      observe: vi.fn(),
-      unobserve: vi.fn(),
-      disconnect,
-    } as unknown as IntersectionObserver))
-
-    const { unmount } = renderHook(() => useViewportReveal())
-    unmount()
-
-    expect(disconnect).toHaveBeenCalled()
-  })
-})
diff --git a/apps/web/src/lib/use-viewport-reveal.test.tsx b/apps/web/src/lib/use-viewport-reveal.test.tsx
new file mode 100644
index 00000000..33cbcc63
--- /dev/null
+++ b/apps/web/src/lib/use-viewport-reveal.test.tsx
@@ -0,0 +1,134 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import { act, render } from "@testing-library/react"
+
+import { useViewportReveal } from "./use-viewport-reveal"
+
+type Options = Parameters<typeof useViewportReveal>[0]
+
+function Harness({ options }: { options?: Options }) {
+  const ref = useViewportReveal(options)
+  return <div ref={ref} data-testid="reveal-target" />
+}
+
+function renderReveal(options?: Options) {
+  return render(<Harness options={options} />)
+}
+
+let observerCallback: IntersectionObserverCallback
+let observerInstance: IntersectionObserver
+let observerOptions: IntersectionObserverInit | undefined
+
+function installObserver() {
+  const observe = vi.fn()
+  const unobserve = vi.fn()
+  const disconnect = vi.fn()
+
+  class MockIntersectionObserver {
+    constructor(
+      callback: IntersectionObserverCallback,
+      options?: IntersectionObserverInit
+    ) {
+      observerCallback = callback
+      observerOptions = options
+      observerInstance = this as unknown as IntersectionObserver
+    }
+    observe = observe
+    unobserve = unobserve
+    disconnect = disconnect
+  }
+
+  vi.stubGlobal("IntersectionObserver", MockIntersectionObserver)
+  return { observe, unobserve, disconnect }
+}
+
+function entry(isIntersecting: boolean): IntersectionObserverEntry {
+  return {
+    isIntersecting,
+    target: document.createElement("div"),
+  } as unknown as IntersectionObserverEntry
+}
+
+describe("useViewportReveal", () => {
+  beforeEach(() => {
+    installObserver()
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it("observes the mounted element", () => {
+    const { observe } = installObserver()
+    renderReveal()
+
+    expect(observe).toHaveBeenCalledWith(screenTarget())
+  })
+
+  it("calls onReveal callback when element enters viewport", () => {
+    const onReveal = vi.fn()
+    renderReveal({ onReveal })
+
+    act(() => observerCallback([entry(true)], observerInstance))
+
+    expect(onReveal).toHaveBeenCalledOnce()
+  })
+
+  it("respects once option - only triggers once", () => {
+    const onReveal = vi.fn()
+    renderReveal({ once: true, onReveal })
+
+    act(() => {
+      observerCallback([entry(true)], observerInstance)
+      observerCallback([entry(true)], observerInstance)
+    })
+
+    expect(onReveal).toHaveBeenCalledOnce()
+  })
+
+  it("triggers on each intersection when once is false", () => {
+    const onReveal = vi.fn()
+    renderReveal({ once: false, onReveal })
+
+    act(() => {
+      observerCallback([entry(true)], observerInstance)
+      observerCallback([entry(true)], observerInstance)
+    })
+
+    expect(onReveal).toHaveBeenCalledTimes(2)
+  })
+
+  it("does not trigger when element is not intersecting", () => {
+    const onReveal = vi.fn()
+    renderReveal({ onReveal })
+
+    act(() => observerCallback([entry(false)], observerInstance))
+
+    expect(onReveal).not.toHaveBeenCalled()
+  })
+
+  it("passes the configured threshold to IntersectionObserver", () => {
+    renderReveal({ threshold: 0.5 })
+
+    expect(observerOptions).toEqual(expect.objectContaining({ threshold: 0.5 }))
+  })
+
+  it("does not observe when disabled", () => {
+    const { observe } = installObserver()
+    renderReveal({ enabled: false })
+
+    expect(observe).not.toHaveBeenCalled()
+  })
+
+  it("disconnects observer on unmount", () => {
+    const { disconnect } = installObserver()
+    const { unmount } = renderReveal()
+
+    unmount()
+
+    expect(disconnect).toHaveBeenCalled()
+  })
+})
+
+function screenTarget(): Element {
+  return document.querySelector('[data-testid="reveal-target"]') as Element
+}
diff --git a/apps/web/src/lib/use-viewport-reveal.ts b/apps/web/src/lib/use-viewport-reveal.ts
index 8a4fd1e7..d1baf00e 100644
--- a/apps/web/src/lib/use-viewport-reveal.ts
+++ b/apps/web/src/lib/use-viewport-reveal.ts
@@ -7,6 +7,8 @@ type UseViewportRevealOptions = {
   threshold?: number | Array<number>
   /** Callback when element enters viewport */
   onReveal?: () => void
+  /** Disable the observer when a CSS scroll-driven reveal is in charge */
+  enabled?: boolean
 }
 
 /**
@@ -15,13 +17,13 @@ type UseViewportRevealOptions = {
  * automatically on unmount.
  */
 export function useViewportReveal(options: UseViewportRevealOptions = {}) {
-  const { once = true, threshold = 0.1, onReveal } = options
+  const { once = true, threshold = 0.1, onReveal, enabled = true } = options
   const ref = useRef<HTMLDivElement>(null)
   const hasRevealed = useRef(false)
 
   useEffect(() => {
     const element = ref.current
-    if (!element) return
+    if (!element || !enabled) return
 
     const observer = new IntersectionObserver(
       (entries) => {
@@ -38,7 +40,7 @@ export function useViewportReveal(options: UseViewportRevealOptions = {}) {
 
     observer.observe(element)
     return () => observer.disconnect()
-  }, [once, threshold, onReveal])
+  }, [enabled, once, threshold, onReveal])
 
   return ref
 }
diff --git a/apps/web/src/shared/hooks/useScrollHeader.test.ts b/apps/web/src/shared/hooks/useScrollHeader.test.ts
new file mode 100644
index 00000000..a577b2fa
--- /dev/null
+++ b/apps/web/src/shared/hooks/useScrollHeader.test.ts
@@ -0,0 +1,137 @@
+import { act, renderHook } from "@testing-library/react"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+
+import { useScrollHeader } from "./useScrollHeader"
+
+type ChangeListener = () => void
+
+function stubMediaQuery(initialMatches: boolean) {
+  let matches = initialMatches
+  let listener: ChangeListener | undefined
+
+  const query = {
+    get matches() {
+      return matches
+    },
+    addEventListener: vi.fn((_event: string, next: ChangeListener) => {
+      listener = next
+    }),
+    removeEventListener: vi.fn(),
+  }
+
+  vi.stubGlobal("matchMedia", () => query)
+
+  return {
+    query,
+    setMobile(value: boolean) {
+      matches = value
+      listener?.()
+    },
+  }
+}
+
+function setScrollY(value: number) {
+  Object.defineProperty(window, "scrollY", {
+    configurable: true,
+    value,
+  })
+}
+
+function scrollTo(value: number) {
+  setScrollY(value)
+  act(() => {
+    window.dispatchEvent(new Event("scroll"))
+    vi.advanceTimersByTime(20)
+  })
+}
+
+describe("useScrollHeader", () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    setScrollY(0)
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    vi.unstubAllGlobals()
+  })
+
+  it("stays idle at the top of the page", () => {
+    stubMediaQuery(true)
+    const { result } = renderHook(() => useScrollHeader())
+
+    expect(result.current).toEqual({ scrolled: false, hidden: false })
+  })
+
+  it("hides on scroll down and reveals on scroll up on mobile", () => {
+    stubMediaQuery(true)
+    const { result } = renderHook(() => useScrollHeader())
+
+    scrollTo(120)
+    expect(result.current.scrolled).toBe(true)
+    expect(result.current.hidden).toBe(true)
+
+    scrollTo(60)
+    expect(result.current.hidden).toBe(false)
+  })
+
+  it("never hides the header on desktop", () => {
+    stubMediaQuery(false)
+    const { result } = renderHook(() => useScrollHeader())
+
+    scrollTo(240)
+    expect(result.current.scrolled).toBe(true)
+    expect(result.current.hidden).toBe(false)
+  })
+
+  it("reveals the header when crossing back to desktop", () => {
+    const media = stubMediaQuery(true)
+    const { result } = renderHook(() => useScrollHeader())
+
+    scrollTo(160)
+    expect(result.current.hidden).toBe(true)
+
+    act(() => media.setMobile(false))
+    expect(media.query.removeEventListener).not.toHaveBeenCalled()
+    expect(result.current.hidden).toBe(false)
+  })
+
+  it("reveals the header at the top even after a downward scroll", () => {
+    stubMediaQuery(true)
+    const { result } = renderHook(() => useScrollHeader())
+
+    scrollTo(160)
+    expect(result.current.hidden).toBe(true)
+
+    scrollTo(0)
+    expect(result.current.scrolled).toBe(false)
+    expect(result.current.hidden).toBe(false)
+  })
+
+  it("does not flip direction on sub-threshold jitter", () => {
+    stubMediaQuery(true)
+    const { result } = renderHook(() => useScrollHeader())
+
+    scrollTo(160)
+    expect(result.current.hidden).toBe(true)
+
+    scrollTo(157)
+    expect(result.current.hidden).toBe(true)
+  })
+
+  it("removes listeners and cancels an in-flight frame on unmount", () => {
+    const media = stubMediaQuery(true)
+    const removeSpy = vi.spyOn(window, "removeEventListener")
+    const { unmount } = renderHook(() => useScrollHeader())
+
+    setScrollY(100)
+    act(() => window.dispatchEvent(new Event("scroll")))
+    unmount()
+
+    expect(removeSpy).toHaveBeenCalledWith("scroll", expect.any(Function))
+    expect(media.query.removeEventListener).toHaveBeenCalledWith(
+      "change",
+      expect.any(Function)
+    )
+  })
+})
diff --git a/apps/web/src/shared/hooks/useScrollHeader.ts b/apps/web/src/shared/hooks/useScrollHeader.ts
new file mode 100644
index 00000000..3b944227
--- /dev/null
+++ b/apps/web/src/shared/hooks/useScrollHeader.ts
@@ -0,0 +1,83 @@
+import { useEffect, useState } from "react"
+
+const SCROLLED_THRESHOLD = 8
+const DIRECTION_THRESHOLD = 6
+const MOBILE_HEADER_HEIGHT = 64
+
+type MediaQueryListLike = {
+  matches: boolean
+  addEventListener?: (
+    type: "change",
+    listener: (event: MediaQueryListEvent) => void
+  ) => void
+  removeEventListener?: (
+    type: "change",
+    listener: (event: MediaQueryListEvent) => void
+  ) => void
+}
+
+function getMobileQuery(): MediaQueryListLike {
+  if (
+    typeof window === "undefined" ||
+    typeof window.matchMedia !== "function"
+  ) {
+    return { matches: false }
+  }
+
+  return window.matchMedia("(max-width: 639px)")
+}
+
+/**
+ * Scroll position for the sticky/fixed header (#884).
+ *
+ * - `scrolled`: the page has moved far enough for the hairline/shadow.
+ * - `hidden`: the mobile header has left the top while scrolling down.
+ *
+ * Scroll work is coalesced into one animation frame, and the header is always
+ * revealed at the top of the page and on desktop. Hiding uses `transform`, so
+ * no document layout is recalculated.
+ */
+export function useScrollHeader() {
+  const [scrolled, setScrolled] = useState(false)
+  const [hidden, setHidden] = useState(false)
+
+  useEffect(() => {
+    const mobile = getMobileQuery()
+    let lastY = Math.max(0, window.scrollY || 0)
+    let frame: number | null = null
+
+    const update = () => {
+      frame = null
+
+      const y = Math.max(0, window.scrollY || 0)
+      const delta = y - lastY
+      const atTop = y <= MOBILE_HEADER_HEIGHT
+
+      setScrolled(y > SCROLLED_THRESHOLD)
+
+      if (!mobile.matches || atTop) {
+        setHidden(false)
+      } else if (Math.abs(delta) >= DIRECTION_THRESHOLD) {
+        setHidden(delta > 0)
+      }
+
+      lastY = y
+    }
+
+    const scheduleUpdate = () => {
+      if (frame === null) frame = requestAnimationFrame(update)
+    }
+
+    window.addEventListener("scroll", scheduleUpdate, { passive: true })
+    mobile.addEventListener?.("change", update)
+    update()
+
+    return () => {
+      window.removeEventListener("scroll", scheduleUpdate)
+      mobile.removeEventListener?.("change", update)
+      if (frame !== null) cancelAnimationFrame(frame)
+    }
+  }, [])
+
+  return { scrolled, hidden }
+}
diff --git a/apps/web/src/ui/Navbar.tsx b/apps/web/src/ui/Navbar.tsx
index e90cba8a..0b656444 100644
--- a/apps/web/src/ui/Navbar.tsx
+++ b/apps/web/src/ui/Navbar.tsx
@@ -16,6 +16,7 @@ import { ConnectButton } from "@/features/wallet/components/ConnectButton"
 import { WhatsNew } from "@/features/changelog/components/WhatsNew"
 import { WhatsNewDot } from "@/features/changelog/components/WhatsNewDot"
 import { useWhatsNewIndicator } from "@/features/changelog/whats-new"
+import { useScrollHeader } from "@/shared/hooks/useScrollHeader"
 
 const LANDING_LINKS = [
   { label: "Trade", href: "/trade" },
@@ -46,12 +47,17 @@ type Props = {
 
 export function Navbar({ variant }: Props) {
   const { open, toggle, close } = useMobileMenu()
+  const { scrolled, hidden } = useScrollHeader()
   const isApp = variant === "app"
   // DX-016: dot on the changelog nav item when a major/minor release shipped.
   const hasNewReleases = useWhatsNewIndicator()
 
   return (
-    <nav className={navOuterClass}>
+    <nav
+      data-scrolled={scrolled}
+      data-hidden={hidden}
+      className={`${navOuterClass} so4-scroll-header`}
+    >
       <div
         className={`${containerClass} ${
           isApp ? "h-14 max-w-full" : "h-16 max-w-330"
diff --git a/apps/web/src/ui/landing/count-up.test.tsx b/apps/web/src/ui/landing/count-up.test.tsx
new file mode 100644
index 00000000..88fb6f34
--- /dev/null
+++ b/apps/web/src/ui/landing/count-up.test.tsx
@@ -0,0 +1,123 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import { act, render, screen } from "@testing-library/react"
+
+import { CountUp, easeOutCubic } from "./count-up"
+import { shortFormat } from "./utils/formatters"
+import { useReducedMotion } from "@/lib/use-reduced-motion"
+
+vi.mock("@/lib/use-reduced-motion", () => ({
+  useReducedMotion: vi.fn(() => false),
+}))
+
+let observerCallback: IntersectionObserverCallback | undefined
+let observerInstance: IntersectionObserver | undefined
+
+function installObserver() {
+  class MockIntersectionObserver {
+    constructor(callback: IntersectionObserverCallback) {
+      observerCallback = callback
+      observerInstance = this as unknown as IntersectionObserver
+    }
+    observe = vi.fn()
+    unobserve = vi.fn()
+    disconnect = vi.fn()
+  }
+
+  vi.stubGlobal("IntersectionObserver", MockIntersectionObserver)
+  return { observe: vi.fn() }
+}
+
+function enterViewport() {
+  const node = document.querySelector(".so4-count-up") as Element
+  act(() =>
+    observerCallback!(
+      [
+        {
+          isIntersecting: true,
+          target: node,
+        } as unknown as IntersectionObserverEntry,
+      ],
+      observerInstance!
+    )
+  )
+}
+
+describe("CountUp", () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    installObserver()
+    vi.mocked(useReducedMotion).mockReturnValue(false)
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    vi.unstubAllGlobals()
+  })
+
+  it("renders the unavailable placeholder without an animation", () => {
+    render(<CountUp value={null} format={shortFormat} />)
+
+    expect(screen.getByText("-")).toBeInTheDocument()
+    expect(screen.getByText("Unavailable")).toBeInTheDocument()
+    expect(observerCallback).toBeUndefined()
+  })
+
+  it("shows the final value immediately under reduced motion", () => {
+    vi.mocked(useReducedMotion).mockReturnValue(true)
+    const observe = vi.fn()
+    vi.stubGlobal(
+      "IntersectionObserver",
+      class {
+        constructor(callback: IntersectionObserverCallback) {
+          observerCallback = callback
+        }
+        observe = observe
+        unobserve = vi.fn()
+        disconnect = vi.fn()
+      }
+    )
+
+    render(<CountUp value={1_234} format={shortFormat} />)
+
+    expect(screen.getAllByText("1.2K")).toHaveLength(2)
+    expect(observe).not.toHaveBeenCalled()
+  })
+
+  it("counts up on first view and ends on the exact value", () => {
+    render(<CountUp value={1_234} format={shortFormat} />)
+
+    expect(screen.getByText("0")).toBeInTheDocument()
+
+    enterViewport()
+    act(() => vi.advanceTimersByTime(500))
+
+    expect(screen.getAllByText("1.2K")).toHaveLength(2)
+  })
+
+  it("exposes the final value once to screen readers", () => {
+    render(<CountUp value={5_200_000} format={shortFormat} />)
+
+    const accessible = screen.getByText("5.2M")
+    expect(accessible).toHaveClass("sr-only")
+    expect(
+      document.querySelector('[aria-hidden="true"]')?.textContent
+    ).toBe("0")
+  })
+
+  it("keeps a tabular figure class on the display", () => {
+    render(<CountUp value={42} format={shortFormat} />)
+
+    expect(document.querySelector(".so4-count-up")).toHaveClass(
+      "so4-count-up",
+      "tabular-nums"
+    )
+  })
+})
+
+describe("easeOutCubic", () => {
+  it("starts at 0, settles at 1, and decelerates", () => {
+    expect(easeOutCubic(0)).toBe(0)
+    expect(easeOutCubic(1)).toBe(1)
+    expect(easeOutCubic(0.5)).toBeGreaterThan(0.5)
+  })
+})
diff --git a/apps/web/src/ui/landing/count-up.tsx b/apps/web/src/ui/landing/count-up.tsx
new file mode 100644
index 00000000..fecfc945
--- /dev/null
+++ b/apps/web/src/ui/landing/count-up.tsx
@@ -0,0 +1,115 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react"
+import { cn } from "@workspace/ui/lib/utils"
+
+import { useReducedMotion } from "@/lib/use-reduced-motion"
+
+const FALLBACK_DURATION_MS = 400
+
+type CountUpProps = {
+  value: number | null
+  format: (value: number) => string
+  className?: string
+}
+
+const useIsomorphicLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect
+
+function readDurationMs(): number {
+  if (typeof window === "undefined") return FALLBACK_DURATION_MS
+
+  const raw = getComputedStyle(document.documentElement)
+    .getPropertyValue("--duration-slowest")
+    .trim()
+  const parsed = Number.parseFloat(raw)
+
+  if (!Number.isFinite(parsed)) return FALLBACK_DURATION_MS
+  return raw.endsWith("ms") ? parsed : parsed * 1000
+}
+
+/** Same shape as --ease-out: fast start, gentle settle. */
+export function easeOutCubic(progress: number): number {
+  return 1 - Math.pow(1 - progress, 3)
+}
+
+/**
+ * Eases a landing statistic from 0 to its final value the first time it enters
+ * the viewport (#886). The value is rendered as a regular number with tabular
+ * figures so the layout never reflows; screen readers get the final formatted
+ * value once, never one announcement per frame.
+ */
+export function CountUp({ value, format, className }: CountUpProps) {
+  const reducedMotion = useReducedMotion()
+  const ref = useRef<HTMLSpanElement>(null)
+  const hasAnimated = useRef(false)
+  const [display, setDisplay] = useState<number | null>(value)
+  const [inView, setInView] = useState(false)
+
+  useIsomorphicLayoutEffect(() => {
+    if (value === null || reducedMotion || hasAnimated.current) {
+      setDisplay(value)
+      return
+    }
+
+    // The server/first paint keeps the real value for no-JS readers; the
+    // browser resets to zero before paint so the count starts from 0.
+    setDisplay(0)
+  }, [reducedMotion, value])
+
+  useEffect(() => {
+    if (value === null || reducedMotion || hasAnimated.current) return
+
+    const element = ref.current
+    if (!element) return
+
+    if (typeof IntersectionObserver === "undefined") {
+      hasAnimated.current = true
+      setDisplay(value)
+      return
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return
+        hasAnimated.current = true
+        setInView(true)
+        observer.disconnect()
+      },
+      { threshold: 0.35 }
+    )
+
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [reducedMotion, value])
+
+  useEffect(() => {
+    if (!inView || value === null || reducedMotion) return
+
+    const duration = readDurationMs()
+    const start = performance.now()
+    let frame = 0
+
+    const tick = (now: number) => {
+      const progress = Math.min((now - start) / duration, 1)
+      setDisplay(value * easeOutCubic(progress))
+
+      if (progress < 1) {
+        frame = requestAnimationFrame(tick)
+      } else {
+        setDisplay(value)
+      }
+    }
+
+    frame = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(frame)
+  }, [inView, reducedMotion, value])
+
+  const finalText = value === null ? "Unavailable" : format(value)
+  const visibleText = value === null ? "-" : format(display ?? 0)
+
+  return (
+    <span ref={ref} className={cn("so4-count-up tabular-nums", className)}>
+      <span aria-hidden="true">{visibleText}</span>
+      <span className="sr-only">{finalText}</span>
+    </span>
+  )
+}
diff --git a/apps/web/src/ui/landing/header-menu.test.tsx b/apps/web/src/ui/landing/header-menu.test.tsx
index 8d378421..b34b55a3 100644
--- a/apps/web/src/ui/landing/header-menu.test.tsx
+++ b/apps/web/src/ui/landing/header-menu.test.tsx
@@ -40,4 +40,23 @@ describe("HeaderMenu", () => {
     expect(panel).toHaveAttribute("inert")
     expect(document.body.style.overflow).toBe("")
   })
+
+  it("renders the mobile menu outside the scrolled header", () => {
+    vi.stubGlobal("matchMedia", () => ({
+      matches: true,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }))
+    render(<HeaderMenu />)
+
+    const header = document.querySelector("header.so4-scroll-header")
+    const panel = document.getElementById("landing-mobile-menu")
+
+    expect(header).not.toBeNull()
+    expect(panel).not.toBeNull()
+    // Regression guard for #884: the header is transformed while hidden, and a
+    // transformed ancestor becomes the containing block for fixed descendants,
+    // which collapses this fixed panel. Keep the panel as a sibling.
+    expect(panel?.closest("header")).toBeNull()
+  })
 })
diff --git a/apps/web/src/ui/landing/header-menu.tsx b/apps/web/src/ui/landing/header-menu.tsx
index f6206067..b3e39872 100644
--- a/apps/web/src/ui/landing/header-menu.tsx
+++ b/apps/web/src/ui/landing/header-menu.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react"
 import { Link } from "@tanstack/react-router"
 import { HamburgerButton, SiteLogo, useMobileMenu } from "../nav/primitives"
+import { useScrollHeader } from "@/shared/hooks/useScrollHeader"
 
 const NAV_LINKS: Array<{
   label: string
@@ -38,6 +39,7 @@ export function HeaderMenu() {
   const triggerRef = useRef<HTMLButtonElement>(null)
   const desktopNavRef = useRef<HTMLUListElement>(null)
   const [instant, setInstant] = useState(false)
+  const { scrolled, hidden } = useScrollHeader()
   const restoreTrigger = useCallback(() => {
     setInstant(true)
     triggerRef.current?.focus()
@@ -98,53 +100,65 @@ export function HeaderMenu() {
   }, [open])
 
   return (
-    <header className="fixed top-0 z-30 w-full bg-gmx-slate-900">
-      <div className="mx-auto flex h-16 max-w-300 items-center justify-between px-4 sm:px-10">
-        {/* SiteLogo renders its own <a href="/"> — do not wrap it in
+    <>
+      <header
+        data-scrolled={scrolled}
+        data-hidden={hidden}
+        className="so4-scroll-header so4-scroll-header--compact fixed top-0 z-30 w-full bg-gmx-slate-900"
+      >
+        <div className="so4-scroll-header__inner mx-auto flex h-16 max-w-300 items-center justify-between px-4 sm:px-10">
+          {/* SiteLogo renders its own <a href="/"> — do not wrap it in
             another anchor (nested <a> is invalid HTML and breaks
             hydration for the whole route). */}
-        <div className="flex h-5 min-w-0 flex-1 items-center overflow-hidden sm:h-6">
-          <SiteLogo variant="landing" />
-        </div>
+          <div className="flex h-5 min-w-0 flex-1 items-center overflow-hidden sm:h-6">
+            <SiteLogo variant="landing" />
+          </div>
 
-        {/* Desktop nav */}
-        <ul ref={desktopNavRef} className="hidden items-center gap-5.5 sm:flex">
-          {NAV_LINKS.map(({ label, to }) => (
-            <li key={label}>
-              <Link
-                to={to}
-                className="text-14 font-medium tracking-[-0.448px] text-white/80 transition-colors duration-180 hover:text-white [&.active]:text-white/60"
+          {/* Desktop nav */}
+          <ul
+            ref={desktopNavRef}
+            className="hidden items-center gap-5.5 sm:flex"
+          >
+            {NAV_LINKS.map(({ label, to }) => (
+              <li key={label}>
+                <Link
+                  to={to}
+                  className="text-14 font-medium tracking-[-0.448px] text-white/80 transition-colors duration-180 hover:text-white [&.active]:text-white/60"
+                >
+                  {label}
+                </Link>
+              </li>
+            ))}
+            <li>
+              <a
+                href="#"
+                className="text-14 font-medium tracking-[-0.448px] text-white/80 transition-colors duration-180 hover:text-white"
               >
-                {label}
-              </Link>
+                Docs
+              </a>
             </li>
-          ))}
-          <li>
-            <a
-              href="#"
-              className="text-14 font-medium tracking-[-0.448px] text-white/80 transition-colors duration-180 hover:text-white"
-            >
-              Docs
-            </a>
-          </li>
-        </ul>
-
-        <div className="flex shrink-0 items-center gap-3">
-          <OpenAppButton className="hidden sm:inline-flex" />
-          <HamburgerButton
-            open={open}
-            controls="landing-mobile-menu"
-            buttonRef={triggerRef}
-            className="sm:hidden"
-            onToggle={(event) => {
-              setInstant(event.detail === 0)
-              toggle()
-            }}
-          />
+          </ul>
+
+          <div className="flex shrink-0 items-center gap-3">
+            <OpenAppButton className="hidden sm:inline-flex" />
+            <HamburgerButton
+              open={open}
+              controls="landing-mobile-menu"
+              buttonRef={triggerRef}
+              className="sm:hidden"
+              onToggle={(event) => {
+                setInstant(event.detail === 0)
+                toggle()
+              }}
+            />
+          </div>
         </div>
-      </div>
+      </header>
 
-      {/* Mobile full-screen menu */}
+      {/* Mobile full-screen menu. It lives outside <header> on purpose: the
+        header carries a transform when hidden, and a transformed ancestor
+        becomes the containing block for fixed descendants — which collapsed
+        this panel to zero height (#884). */}
       <div
         id="landing-mobile-menu"
         ref={panelRef}
@@ -196,6 +210,6 @@ export function HeaderMenu() {
           </div>
         </div>
       </div>
-    </header>
+    </>
   )
 }
diff --git a/apps/web/src/ui/landing/hero-section.tsx b/apps/web/src/ui/landing/hero-section.tsx
index e476cead..1843b153 100644
--- a/apps/web/src/ui/landing/hero-section.tsx
+++ b/apps/web/src/ui/landing/hero-section.tsx
@@ -1,15 +1,26 @@
 import { Link } from "@tanstack/react-router"
 import { AnimatedTitle } from "./animated-title"
+import { CountUp } from "./count-up"
 import { FeatureGrid } from "./feature-grid"
 import { useLandingStats } from "./use-landing-stats"
 import { useHeroFirstLoadSequence } from "./hooks/useHeroFirstLoadSequence"
 import { shortFormat, shortFormatUsd } from "./utils/formatters"
 
-function Stat({ label, value }: { label: string; value: string }) {
+function Stat({
+  label,
+  value,
+  format,
+}: {
+  label: string
+  value: number | null
+  format: (value: number) => string
+}) {
   return (
     <div>
       <div className="text-12 text-gmx-slate-400 sm:text-14">{label}</div>
-      <div className="mt-1 text-30 font-medium tracking-tight text-white sm:text-40">{value}</div>
+      <div className="mt-1 text-30 font-medium tracking-tight text-white sm:text-40">
+        <CountUp value={value} format={format} />
+      </div>
     </div>
   )
 }
@@ -68,14 +79,16 @@ export function HeroSection() {
           </div>
 
           <div className="flex gap-9 sm:gap-15">
-            <Stat label="Traders" value={stats.traders === null ? "-" : shortFormat(stats.traders)} />
+            <Stat label="Traders" value={stats.traders} format={shortFormat} />
             <Stat
               label="Open interest"
-              value={stats.openInterest === null ? "-" : shortFormatUsd(stats.openInterest)}
+              value={stats.openInterest}
+              format={shortFormatUsd}
             />
             <Stat
               label="Total volume"
-              value={stats.totalVolume === null ? "-" : shortFormatUsd(stats.totalVolume)}
+              value={stats.totalVolume}
+              format={shortFormatUsd}
             />
           </div>
         </div>
diff --git a/apps/web/src/ui/nav/primitives.tsx b/apps/web/src/ui/nav/primitives.tsx
index 30bcc4d4..dc9185f3 100644
--- a/apps/web/src/ui/nav/primitives.tsx
+++ b/apps/web/src/ui/nav/primitives.tsx
@@ -5,8 +5,10 @@ import type { MouseEvent, Ref } from "react"
 
 // ── Shared classes ──
 
+// #884: the bottom hairline is drawn by .so4-scroll-header::after so it can fade
+// in as a composited layer instead of toggling layout-affecting borders.
 export const navOuterClass =
-  "sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-md backdrop-saturate-150"
+  "sticky top-0 z-50 bg-background/80 backdrop-blur-md backdrop-saturate-150"
 
 export const containerClass =
   "mx-auto flex min-w-0 items-center justify-between gap-2 px-3 sm:px-6 lg:px-8"
diff --git a/apps/web/src/ui/viewport-reveal.test.tsx b/apps/web/src/ui/viewport-reveal.test.tsx
index 43d6343b..23fecb1b 100644
--- a/apps/web/src/ui/viewport-reveal.test.tsx
+++ b/apps/web/src/ui/viewport-reveal.test.tsx
@@ -1,11 +1,48 @@
-import { beforeEach, describe, expect, it, vi } from "vitest"
-import { render, screen } from "@testing-library/react"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import { act, render, screen } from "@testing-library/react"
+
 import { ViewportReveal } from "./viewport-reveal"
-import * as useReducedMotionModule from "@/lib/use-reduced-motion"
+import { supportsViewTimeline } from "@/lib/supports-view-timeline"
+import { useReducedMotion } from "@/lib/use-reduced-motion"
+
+vi.mock("@/lib/supports-view-timeline", () => ({
+  supportsViewTimeline: vi.fn(() => false),
+}))
+
+vi.mock("@/lib/use-reduced-motion", () => ({
+  useReducedMotion: vi.fn(() => false),
+}))
+
+let observerCallback: IntersectionObserverCallback
+let observerInstance: IntersectionObserver
+
+function installObserver() {
+  class MockIntersectionObserver {
+    constructor(callback: IntersectionObserverCallback) {
+      observerCallback = callback
+      observerInstance = this as unknown as IntersectionObserver
+    }
+    observe = vi.fn()
+    unobserve = vi.fn()
+    disconnect = vi.fn()
+  }
+
+  vi.stubGlobal("IntersectionObserver", MockIntersectionObserver)
+}
+
+function revealTarget() {
+  return screen.getByText("Test content").parentElement as HTMLElement
+}
 
 describe("ViewportReveal", () => {
   beforeEach(() => {
-    vi.mocked(useReducedMotionModule.useReducedMotion).mockReturnValue(false)
+    installObserver()
+    vi.mocked(useReducedMotion).mockReturnValue(false)
+    vi.mocked(supportsViewTimeline).mockReturnValue(false)
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
   })
 
   it("renders children", () => {
@@ -14,80 +51,104 @@ describe("ViewportReveal", () => {
         <div>Test content</div>
       </ViewportReveal>
     )
+
     expect(screen.getByText("Test content")).toBeInTheDocument()
   })
 
-  it("starts with opacity-0 when reduced-motion is disabled", () => {
-    const { container } = render(
+  it("uses the observer fallback and reveals after intersection", () => {
+    render(
       <ViewportReveal>
         <div>Test content</div>
       </ViewportReveal>
     )
-    const wrapper = container.firstChild as HTMLElement
-    expect(wrapper).toHaveClass("opacity-0")
-  })
 
-  it("starts with opacity-100 when reduced-motion is enabled", () => {
-    vi.mocked(useReducedMotionModule.useReducedMotion).mockReturnValue(true)
-    const { container } = render(
-      <ViewportReveal>
-        <div>Test content</div>
-      </ViewportReveal>
+    const wrapper = revealTarget()
+    expect(wrapper).toHaveAttribute("data-reveal-mode", "fallback")
+    expect(wrapper).toHaveAttribute("data-revealed", "false")
+
+    act(() =>
+      observerCallback(
+        [
+          {
+            isIntersecting: true,
+            target: wrapper,
+          } as unknown as IntersectionObserverEntry,
+        ],
+        observerInstance
+      )
     )
-    const wrapper = container.firstChild as HTMLElement
-    expect(wrapper).toHaveClass("opacity-100")
+
+    expect(wrapper).toHaveAttribute("data-revealed", "true")
   })
 
-  it("applies custom revealClass when provided", () => {
-    const { container } = render(
-      <ViewportReveal revealClass="scale-100">
-        <div>Test content</div>
-      </ViewportReveal>
+  it("uses the CSS view timeline when supported", () => {
+    vi.mocked(supportsViewTimeline).mockReturnValue(true)
+    const observe = vi.fn()
+    vi.stubGlobal(
+      "IntersectionObserver",
+      class {
+        observe = observe
+        unobserve = vi.fn()
+        disconnect = vi.fn()
+      }
     )
-    const wrapper = container.firstChild as HTMLElement
-    // Initially should have scale-0 (opposite of scale-100)
-    expect(wrapper).toHaveClass("transition-opacity")
-  })
 
-  it("applies custom className to wrapper", () => {
-    const { container } = render(
-      <ViewportReveal className="custom-class">
+    render(
+      <ViewportReveal>
         <div>Test content</div>
       </ViewportReveal>
     )
-    const wrapper = container.firstChild as HTMLElement
-    expect(wrapper).toHaveClass("custom-class")
+
+    expect(revealTarget()).toHaveAttribute("data-reveal-mode", "css")
+    expect(observe).not.toHaveBeenCalled()
   })
 
-  it("includes transition-opacity class", () => {
-    const { container } = render(
+  it("shows content immediately when reduced motion is enabled", () => {
+    vi.mocked(useReducedMotion).mockReturnValue(true)
+
+    render(
       <ViewportReveal>
         <div>Test content</div>
       </ViewportReveal>
     )
-    const wrapper = container.firstChild as HTMLElement
-    expect(wrapper).toHaveClass("transition-opacity")
+
+    const wrapper = revealTarget()
+    expect(wrapper).toHaveAttribute("data-reveal-mode", "reduced")
+    expect(wrapper).toHaveAttribute("data-revealed", "true")
   })
 
-  it("includes duration-base when reduced-motion is disabled", () => {
-    vi.mocked(useReducedMotionModule.useReducedMotion).mockReturnValue(false)
-    const { container } = render(
-      <ViewportReveal>
+  it("applies a custom reveal class once visible", () => {
+    render(
+      <ViewportReveal revealClass="custom-revealed">
         <div>Test content</div>
       </ViewportReveal>
     )
-    const wrapper = container.firstChild as HTMLElement
-    expect(wrapper).toHaveClass("duration-base")
+
+    const wrapper = revealTarget()
+    expect(wrapper).not.toHaveClass("custom-revealed")
+
+    act(() =>
+      observerCallback(
+        [
+          {
+            isIntersecting: true,
+            target: wrapper,
+          } as unknown as IntersectionObserverEntry,
+        ],
+        observerInstance
+      )
+    )
+
+    expect(wrapper).toHaveClass("custom-revealed")
   })
 
-  it("does not include duration-base when reduced-motion is enabled", () => {
-    vi.mocked(useReducedMotionModule.useReducedMotion).mockReturnValue(true)
-    const { container } = render(
-      <ViewportReveal>
+  it("applies a custom className to the wrapper", () => {
+    render(
+      <ViewportReveal className="custom-class">
         <div>Test content</div>
       </ViewportReveal>
     )
-    const wrapper = container.firstChild as HTMLElement
-    expect(wrapper).not.toHaveClass("duration-base")
+
+    expect(revealTarget()).toHaveClass("custom-class")
   })
 })
diff --git a/apps/web/src/ui/viewport-reveal.tsx b/apps/web/src/ui/viewport-reveal.tsx
index 64df04e7..ae283806 100644
--- a/apps/web/src/ui/viewport-reveal.tsx
+++ b/apps/web/src/ui/viewport-reveal.tsx
@@ -1,20 +1,27 @@
-import {  useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import { cn } from "@workspace/ui/lib/utils"
-import type {ReactNode} from "react";
+import type { ReactNode } from "react"
+import { supportsViewTimeline } from "@/lib/supports-view-timeline"
 import { useViewportReveal } from "@/lib/use-viewport-reveal"
 import { useReducedMotion } from "@/lib/use-reduced-motion"
 
 type ViewportRevealProps = {
   children: ReactNode
   className?: string
-  /** CSS class to apply when revealed (default: animation-class) */
+  /** Extra class applied once the content is visible. */
   revealClass?: string
 }
 
+type RevealMode = "pending" | "css" | "fallback" | "reduced"
+
 /**
- * Wrapper component that reveals children when they enter the viewport.
- * Automatically respects reduced-motion preferences. Children remain in
- * document flow even before reveal for accessibility.
+ * Reveals children as they enter the viewport.
+ *
+ * Uses CSS scroll-driven animations (`animation-timeline: view()`) where
+ * supported, so the reveal runs off the main thread. Browsers without view
+ * timelines keep the IntersectionObserver fallback. Reduced motion renders the
+ * content immediately, and the children stay in document flow and in the
+ * accessibility tree either way.
  */
 export function ViewportReveal({
   children,
@@ -22,31 +29,33 @@ export function ViewportReveal({
   revealClass = "opacity-100",
 }: ViewportRevealProps) {
   const reducedMotion = useReducedMotion()
-  const [isRevealed, setIsRevealed] = useState(reducedMotion)
+  const [mode, setMode] = useState<RevealMode>("pending")
+  const [isRevealed, setIsRevealed] = useState(false)
+
+  useEffect(() => {
+    if (reducedMotion) {
+      setMode("reduced")
+      return
+    }
+
+    setMode(supportsViewTimeline() ? "css" : "fallback")
+  }, [reducedMotion])
 
   const ref = useViewportReveal({
     once: true,
     threshold: 0.1,
+    enabled: mode === "fallback",
     onReveal: () => setIsRevealed(true),
   })
 
-  // If reduced-motion is enabled, reveal immediately and don't apply animation
-  useEffect(() => {
-    if (reducedMotion) {
-      setIsRevealed(true)
-    }
-  }, [reducedMotion])
+  const revealed = mode === "reduced" || isRevealed
 
   return (
     <div
       ref={ref}
-      className={cn(
-        "transition-opacity",
-        reducedMotion ? revealClass : isRevealed ? revealClass : "opacity-0",
-        // Use duration-base for reveal animations
-        !reducedMotion && "duration-base",
-        className
-      )}
+      className={cn("so4-view-reveal", revealed && revealClass, className)}
+      data-reveal-mode={mode === "pending" ? undefined : mode}
+      data-revealed={revealed ? "true" : "false"}
     >
       {children}
     </div>
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index 6fc3affb..5d717855 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -206,6 +206,7 @@
     --duration-moderate: 200ms;      /* Emphasis: section reveals, expansions */
     --duration-slow: 300ms;          /* Landing: hero motion, marquees */
     --duration-slowest: 400ms;       /* Landing: extended sequences */
+    --duration-pulse: 1500ms;        /* Loading pulse (motion spec: 1.5s loop) */
 
     /*
      * Motion easing tokens — consistent timing functions across the UI.
@@ -1070,3 +1071,165 @@
     [data-slot="skeleton"]::before { animation: none; display: none; }
 }
 :root[data-reduced-motion="true"] [data-slot="skeleton"]::before { animation: none; display: none; }
+
+/*
+ * Phase 9 UX motion (#884–#887).
+ *
+ * Every rule below is token-driven, compositor-friendly (transform/opacity),
+ * and has an instant fallback for the system preference or the in-app toggle.
+ */
+
+/* #884 — scroll-aware header. */
+.so4-scroll-header {
+    transition: transform var(--duration-moderate) var(--ease-out);
+    will-change: transform;
+}
+.so4-scroll-header[data-hidden="true"] {
+    transform: translateY(-100%);
+}
+/* Hairline + shadow fade in as one composited layer. */
+.so4-scroll-header::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    height: 1px;
+    background: var(--border);
+    box-shadow: 0 8px 24px -20px rgb(0 0 0 / 0.55);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--duration-base) var(--ease-out);
+}
+.so4-scroll-header[data-scrolled="true"]::after {
+    opacity: 1;
+}
+/* Only the landing header is fixed over the hero, so its height can shrink
+   without moving any document content (no CLS). */
+.so4-scroll-header--compact .so4-scroll-header__inner {
+    transition: height var(--duration-moderate) var(--ease-out);
+}
+.so4-scroll-header--compact[data-scrolled="true"] .so4-scroll-header__inner {
+    height: 3.5rem;
+}
+
+/* #885 — scroll-driven section reveals, with the IntersectionObserver path
+   applied by ViewportReveal only when view timelines are unavailable. */
+@keyframes so4-view-reveal-in {
+    from {
+        opacity: 0;
+        transform: translateY(14px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+.so4-view-reveal {
+    opacity: 0;
+    transform: translateY(14px);
+}
+.so4-view-reveal[data-reveal-mode="css"] {
+    animation: so4-view-reveal-in linear both;
+    animation-timeline: view();
+    animation-range: entry 10% entry 90%;
+}
+.so4-view-reveal[data-reveal-mode="fallback"] {
+    transition:
+        opacity var(--duration-moderate) var(--ease-out),
+        transform var(--duration-moderate) var(--ease-out);
+}
+.so4-view-reveal[data-reveal-mode="fallback"][data-revealed="true"],
+.so4-view-reveal[data-reveal-mode="reduced"] {
+    opacity: 1;
+    transform: translateY(0);
+    animation: none;
+    transition: none;
+}
+
+/* #886 — tabular figures keep every in-flight count on the same grid. */
+.so4-count-up {
+    font-variant-numeric: tabular-nums slashed-zero;
+}
+
+/* #887 — wallet connect choreography. */
+@keyframes so4-wallet-row-in {
+    from {
+        opacity: 0;
+        transform: translateY(6px) scale(0.98);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+.so4-wallet-row {
+    animation: so4-wallet-row-in var(--duration-moderate) var(--ease-out) both;
+    animation-delay: calc(var(--wallet-stagger, 0) * var(--duration-fast) * 0.35);
+}
+@keyframes so4-wallet-pulse {
+    0%,
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.55;
+        transform: scale(1.16);
+    }
+}
+.so4-wallet-pulse {
+    animation: so4-wallet-pulse var(--duration-pulse) var(--ease-in-out) infinite;
+}
+@keyframes so4-wallet-pill-in {
+    from {
+        opacity: 0;
+        transform: translateY(2px) scale(0.94);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+.so4-wallet-pill {
+    animation: so4-wallet-pill-in var(--duration-moderate) var(--ease-out) both;
+    transform-origin: inline-start center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .so4-scroll-header,
+    .so4-scroll-header::after,
+    .so4-scroll-header--compact .so4-scroll-header__inner {
+        transition: none;
+    }
+    .so4-view-reveal {
+        opacity: 1;
+        transform: none;
+        animation: none;
+        transition: none;
+    }
+    .so4-wallet-row,
+    .so4-wallet-pulse,
+    .so4-wallet-pill {
+        animation: none;
+        transform: none;
+    }
+}
+:root[data-reduced-motion="true"] .so4-scroll-header,
+:root[data-reduced-motion="true"] .so4-scroll-header::after,
+:root[data-reduced-motion="true"]
+    .so4-scroll-header--compact
+    .so4-scroll-header__inner {
+    transition: none;
+}
+:root[data-reduced-motion="true"] .so4-view-reveal {
+    opacity: 1;
+    transform: none;
+    animation: none;
+    transition: none;
+}
+:root[data-reduced-motion="true"] .so4-wallet-row,
+:root[data-reduced-motion="true"] .so4-wallet-pulse,
+:root[data-reduced-motion="true"] .so4-wallet-pill {
+    animation: none;
+    transform: none;
+}