diff --git a/app/package-lock.json b/app/package-lock.json
index f6ee7dd..32a0401 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -14,6 +14,7 @@
         "@number-flow/react": "^0.6.2",
         "@tanstack/react-query": "^5.91.3",
         "clsx": "^2.1.1",
+        "d3-force": "^3.0.0",
         "lightweight-charts": "^5.2.1",
         "lucide-react": "^1.42.0",
         "motion": "^13.2.0",
@@ -30,6 +31,7 @@
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
+        "@types/d3-force": "^3.0.10",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -2808,6 +2810,13 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
@@ -4018,6 +4027,47 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
diff --git a/app/package.json b/app/package.json
index fc1afe1..c253c11 100644
--- a/app/package.json
+++ b/app/package.json
@@ -18,6 +18,7 @@
     "@number-flow/react": "^0.6.2",
     "@tanstack/react-query": "^5.91.3",
     "clsx": "^2.1.1",
+    "d3-force": "^3.0.0",
     "lightweight-charts": "^5.2.1",
     "lucide-react": "^1.42.0",
     "motion": "^13.2.0",
@@ -34,6 +35,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@types/d3-force": "^3.0.10",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
diff --git a/app/src/app/(home)/loading.tsx b/app/src/app/(home)/loading.tsx
index 9d91e2e..1dc8a34 100644
--- a/app/src/app/(home)/loading.tsx
+++ b/app/src/app/(home)/loading.tsx
@@ -3,7 +3,7 @@ import { Sk, SkPost, SkRow } from "@/components/Skeleton";
 /** Home skeleton: hero + totals, list header, rows, side column. Same grid as page.tsx so nothing shifts. */
 export default function Loading() {
   return (
-    <main className="relative mx-auto max-w-6xl px-4 pb-16 space-y-8" aria-busy="true" aria-label="loading">
+    <main className="bb-mid bb-page relative pb-16 space-y-8" aria-busy="true" aria-label="loading">
       <section className="pt-10 sm:pt-14 pb-2 grid lg:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)] gap-x-8 gap-y-8 xl:gap-x-12 lg:gap-y-0 lg:grid-rows-[min-content_1fr]">
         <div className="min-w-0 lg:col-start-1 lg:row-start-1">
           <div className="space-y-2">
diff --git a/app/src/app/(home)/page.tsx b/app/src/app/(home)/page.tsx
index 42c563c..a1e9ba6 100644
--- a/app/src/app/(home)/page.tsx
+++ b/app/src/app/(home)/page.tsx
@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import Link from "next/link";
 import { cookies } from "next/headers";
 import LaunchHero from "@/components/launchpad/LaunchHero";
 import LaunchList from "@/components/launchpad/LaunchList";
@@ -15,8 +14,11 @@ import { dbConfigured } from "@/lib/db";
 import { isFilter } from "@/lib/launchpad/search";
 import { nowMs } from "@/lib/launchpad/time";
 import { inRiverWindow, riverCoverage } from "@/lib/launchpad/river";
-import { LAYOUT_COOKIE, parseLayout } from "@/lib/launchpad/list-layout";
 import TrendingStrip from "@/components/launchpad/TrendingStrip";
+import WhyFree from "@/components/launchpad/WhyFree";
+import HeroBackdrop from "@/components/launchpad/HeroBackdrop";
+import { MagicCard } from "@/components/vendor/magic-card";
+import { LAYOUT_COOKIE, parseLayout } from "@/lib/launchpad/list-layout";
 
 export const dynamic = "force-dynamic";
 // Title and description come from the root layout; ?sort= / ?chain= / ?window= / ?view= are all this one page.
@@ -32,6 +34,7 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
   const chain = visibleChainOr(sp.chain);
   const filter = isFilter(sp.filter) ? sp.filter : null;
   const usd = await ethUsd();
+  const layout = parseLayout((await cookies()).get(LAYOUT_COOKIE)?.value);
   const listOpts = { sort, window, chain, filter, limit: PAGE_SIZE, ethUsd: usd };
   const [page, feed, fresh, posts, fetchedTrending] = await Promise.all([
     listLaunchesPage(listOpts),
@@ -42,32 +45,29 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
   ]);
   const trending = fetchedTrending ?? trendingFrom(page.items); // the default view's first page doubles as the strip's candidates
   const now = nowMs();
-  const layout = parseLayout((await cookies()).get(LAYOUT_COOKIE)?.value);
 
   return (
-    <main className="relative mx-auto max-w-6xl space-y-8 px-4 pb-16">
-      <LaunchHero configured={LAUNCHPAD_CONFIGURED} />
-      <LiveRiver initial={feed.filter((item) => inRiverWindow(item, now))} serverNow={now} coveredSince={riverCoverage(feed, RIVER_SEED, now)} lastActivityAt={feed[0] ? new Date(feed[0].at).getTime() : 0} />
-      <TrendingStrip initial={trending} />
-      <div className="grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_17rem]">
-        <LaunchList initial={page.items} initialHasMore={page.hasMore} initialSort={sort} initialWindow={window} initialChain={chain} initialFilter={filter} initialView={sp.view === "watchlist" ? "watchlist" : "market"} initialLayout={layout} hasDb={dbConfigured()} serverNow={now} />
-        <aside aria-label="New launches and community" className="grid min-w-0 gap-4 md:grid-cols-2 xl:sticky xl:top-24 xl:grid-cols-1">
-          <JustLaunched initial={fresh.items} serverNow={now} />
-          <div className="min-w-0 space-y-4">
-            <PostsFeed initial={posts} compact />
-            <section aria-labelledby="free-heading" className="rounded-2xl border border-line bg-paper p-4">
-              <h2 id="free-heading" className="text-sm font-semibold text-ink">Why it&apos;s free</h2>
-              <p className="mt-2 text-pretty text-xs leading-relaxed text-muted">No fee address in the factory. No platform cut in the locker. On every chain.</p>
-              <dl className="mt-4 divide-y divide-line border-y border-line text-xs">
-                <div className="flex items-center justify-between gap-3 py-2.5"><dt className="text-muted">Platform fee</dt><dd className="font-mono font-bold text-up tnum">$0</dd></div>
-                <div className="flex items-center justify-between gap-3 py-2.5"><dt className="text-muted">Trading fee</dt><dd className="font-mono text-ink tnum">0 / 1 / 3%</dd></div>
-              </dl>
-              <p className="mt-3 text-pretty text-[11px] leading-relaxed text-muted">Creators choose the trading fee. It goes in full to their beneficiaries, or is burned.</p>
-              <a href="https://github.com/Gitlawb/openlaunch/tree/main/contracts/src" target="_blank" rel="noopener noreferrer" className="mt-3 inline-flex min-h-8 items-center text-xs font-medium text-body underline decoration-line-strong underline-offset-4 hover:text-ink">Read the contracts ↗</a>
-              <div className="mt-3 border-t border-line pt-3"><Link href="/agents" className="inline-flex min-h-8 items-center text-xs font-medium text-brand hover:underline underline-offset-4">Agents can launch too →</Link></div>
-            </section>
-          </div>
-        </aside>
+    <main className="bb-mid relative pb-16">
+      {/* the hero and the river share one full-bleed band; it clips its own backdrop so nothing widens the page */}
+      <div className="relative isolate overflow-hidden">
+        <HeroBackdrop />
+        <div className="bb-page space-y-8 pb-4">
+          <LaunchHero configured={LAUNCHPAD_CONFIGURED} />
+          <LiveRiver initial={feed.filter((item) => inRiverWindow(item, now))} recent={feed} serverNow={now} coveredSince={riverCoverage(feed, RIVER_SEED, now)} lastActivityAt={feed[0] ? new Date(feed[0].at).getTime() : 0} />
+        </div>
+      </div>
+      <div className="bb-page mt-6 space-y-8">
+        <TrendingStrip initial={trending} />
+        <div className="grid items-start gap-x-8 gap-y-6 xl:grid-cols-[minmax(0,1fr)_19rem]">
+          <MagicCard className="min-w-0 rounded-2xl"><LaunchList frame="rounded-[inherit]" initial={page.items} initialHasMore={page.hasMore} initialSort={sort} initialWindow={window} initialChain={chain} initialFilter={filter} initialView={sp.view === "watchlist" ? "watchlist" : "market"} initialLayout={layout} hasDb={dbConfigured()} serverNow={now} /></MagicCard>
+          <aside aria-label="New launches and community" className="grid min-w-0 gap-4 md:grid-cols-2 xl:sticky xl:top-24 xl:grid-cols-1">
+            <JustLaunched initial={fresh.items} serverNow={now} />
+            <div className="min-w-0 space-y-4">
+              <PostsFeed initial={posts} compact />
+              <WhyFree />
+            </div>
+          </aside>
+        </div>
       </div>
     </main>
   );
diff --git a/app/src/components/launchpad/HeroBackdrop.tsx b/app/src/components/launchpad/HeroBackdrop.tsx
new file mode 100644
index 0000000..cd9a7e2
--- /dev/null
+++ b/app/src/components/launchpad/HeroBackdrop.tsx
@@ -0,0 +1,14 @@
+import { FlickeringGrid } from "@/components/vendor/flickering-grid";
+
+/**
+ * Behind the home hero and the river: a flickering grid (grey on light, blue on dark) fading out from the top, with no colour wash
+ * over it. Decorative only; it sits in a clipped band so it never widens the page.
+ */
+export default function HeroBackdrop() {
+  return (
+    <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10">
+      <FlickeringGrid className="absolute inset-0 [mask-image:radial-gradient(ellipse_75%_65%_at_50%_0%,#000_35%,transparent_100%)]" squareSize={3} gridGap={8} flickerChance={0.18} maxOpacity={0.24} color="var(--color-glow)" />
+      <div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-b from-transparent to-paper" />
+    </div>
+  );
+}
diff --git a/app/src/components/launchpad/JustLaunched.tsx b/app/src/components/launchpad/JustLaunched.tsx
index 7986170..e586362 100644
--- a/app/src/components/launchpad/JustLaunched.tsx
+++ b/app/src/components/launchpad/JustLaunched.tsx
@@ -2,18 +2,25 @@
 
 import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { MagicCard } from "@/components/vendor/magic-card";
 import TokenAvatar from "./TokenAvatar";
 import { useLive } from "./LiveProvider";
 import type { LaunchRow as L } from "@/lib/launchpad/queries";
+import { ArrowUpRight } from "lucide-react";
 import { CHAIN_SHORT } from "@/lib/chainPublic";
+import { capDisplay } from "@/lib/launchpad/market-cap";
 import { ago } from "@/lib/launchpad/time";
 import { launchKey } from "@/lib/launchpad/list-state";
 import { feedKey } from "@/lib/launchpad/river";
 import { setPendingToken } from "@/lib/launchpad/token-transition";
 import { JUST_LAUNCHED_SIZE } from "@/lib/launchpad/paging";
+import { ChainCorner } from "./ChainLogo";
 
 /** At most one refetch per this window; a burst of trades on a fresh token costs one request, not one per poll. */
 const MIN_GAP_MS = 10_000;
+/** A launch younger than this rings its logo: it is the news. */
+const FRESH_MS = 10 * 60_000;
 
 /**
  * The newest launches and whether each has had its first trade. Rows come from the market read model, so the
@@ -24,6 +31,7 @@ export default function JustLaunched({ initial, serverNow }: { initial: L[]; ser
   const [rows, setRows] = useState(initial);
   const [now, setNow] = useState(serverNow);
   const shown = useRef(initial);
+  const reduced = useReducedMotion();
 
   useEffect(() => {
     const seen = new Set<string>();
@@ -68,35 +76,57 @@ export default function JustLaunched({ initial, serverNow }: { initial: L[]; ser
   }, [subscribe]);
 
   return (
-    <section aria-labelledby="fresh-heading" className="overflow-hidden rounded-2xl border border-line bg-paper">
+    <MagicCard className="rounded-2xl">
+    <section aria-labelledby="fresh-heading" className="overflow-hidden rounded-[inherit]">
       <div className="flex min-h-14 items-center justify-between gap-3 border-b border-line px-4">
-        <h2 id="fresh-heading" className="text-sm font-semibold text-ink">Just launched</h2>
-        <span className="text-[11px] text-muted">Newest first</span>
+        <h2 id="fresh-heading" className="flex items-center gap-2 text-sm font-semibold text-ink">
+          {/* the list follows the shared live poll */}
+          <span aria-hidden="true" className="relative flex size-2">
+            <span className="absolute inset-0 animate-ping rounded-full bg-up opacity-50 motion-reduce:hidden" />
+            <span className="relative size-2 rounded-full bg-up" />
+          </span>
+          Just launched
+        </h2>
+        <Link href="/?sort=new#launches" className="inline-flex min-h-8 items-center gap-0.5 text-[11px] font-medium text-muted transition-colors hover:text-ink motion-reduce:transition-none">See all<ArrowUpRight size={12} aria-hidden="true" /></Link>
       </div>
       {rows.length === 0 ? (
         <div className="px-4 py-8"><p className="text-sm text-ink">No launches yet.</p><p className="mt-1 text-xs leading-relaxed text-muted">New tokens show here the moment they launch.</p></div>
       ) : (
-        <ol aria-label="Newest launches" className="divide-y divide-line">
+        <ol aria-label="Newest launches" className="relative py-1.5">
+          {/* the log's spine, running behind the logos (each logo's ring cuts it) */}
+          <span aria-hidden="true" className="absolute top-9 bottom-9 left-[35px] w-px bg-line" />
+          {/* a new launch springs in at the top; rows already on screen just slide down */}
+          <AnimatePresence initial={false}>
           {rows.map((l) => {
             const trades = l.buys + l.sells;
+            const fresh = now - new Date(l.block_time).getTime() < FRESH_MS;
             return (
-              <li key={launchKey(l)}>
-                <Link href={`/t/${l.chain}/${l.token}`} onClick={() => setPendingToken({ chain: l.chain, token: l.token, name: l.name, symbol: l.symbol, image: l.image_url })} className="flex min-w-0 items-center gap-3 px-4 py-3 transition-colors hover:bg-card motion-reduce:transition-none">
-                  <TokenAvatar chain={l.chain} token={l.token} symbol={l.symbol} image={l.image_url} size={32} className="shrink-0 rounded-lg" />
+              <motion.li key={launchKey(l)} layout={reduced ? false : "position"} initial={reduced ? false : { opacity: 0, scale: 0.96, y: -8 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={reduced ? undefined : { opacity: 0 }} transition={{ type: "spring", stiffness: 380, damping: 34 }}>
+                <Link href={`/t/${l.chain}/${l.token}`} onClick={() => setPendingToken({ chain: l.chain, token: l.token, name: l.name, symbol: l.symbol, image: l.image_url })} title={`${l.name} on ${CHAIN_SHORT[l.chain]}`} className="group flex min-w-0 items-center gap-3 px-4 py-2.5 transition-colors hover:bg-ink/[0.03] motion-reduce:transition-none">
+                  <span className="relative shrink-0 rounded-[13px] bg-card p-0.5">
+                    {/* under ten minutes old: a soft ring says this one is the news */}
+                    {fresh ? <span aria-hidden="true" className="absolute inset-0 animate-ping rounded-[13px] ring-2 ring-up/50 motion-reduce:hidden" /> : null}
+                    <TokenAvatar chain={l.chain} token={l.token} symbol={l.symbol} image={l.image_url} size={34} className="shrink-0 rounded-xl" />
+                    <ChainCorner chain={l.chain} />
+                  </span>
                   <div className="min-w-0 flex-1">
-                    <p className="truncate text-[13px] font-semibold text-ink">{l.name}</p>
-                    <p className="mt-0.5 truncate text-[11px] text-muted"><span className="font-mono text-body">{l.symbol}</span> on {CHAIN_SHORT[l.chain]}</p>
-                  </div>
-                  <div className="shrink-0 text-right text-[11px]">
-                    <time dateTime={l.block_time} title={new Date(l.block_time).toUTCString()} className="block font-mono text-muted tnum" suppressHydrationWarning>{ago(l.block_time, now)} ago</time>
-                    <span className={`mt-0.5 block ${trades ? "text-up" : "text-muted"}`}>{trades ? <><span className="font-mono tnum">{trades}</span> {trades === 1 ? "trade" : "trades"}</> : "No trades yet"}</span>
+                    <p className="flex min-w-0 items-baseline justify-between gap-2">
+                      <span className="truncate text-[13px] font-semibold text-ink">{l.name}</span>
+                      <time dateTime={l.block_time} title={new Date(l.block_time).toUTCString()} className={`shrink-0 font-mono text-[11px] tnum ${fresh ? "text-up" : "text-muted"}`} suppressHydrationWarning>{ago(l.block_time, now)} ago</time>
+                    </p>
+                    <p className="mt-0.5 flex min-w-0 items-baseline justify-between gap-2 text-[11px]">
+                      <span className="truncate text-muted"><span className="font-mono text-body">{l.symbol}</span><span aria-hidden="true"> · </span><span className="sr-only">, market cap </span><span className="font-mono tnum">{capDisplay(l.fdv_quote, l.quote_usd, { key: l.quote_key, symbol: l.quote_symbol, decimals: l.quote_decimals }).compact}</span></span>
+                      <span className={`shrink-0 ${trades ? "text-up" : "text-muted"}`}>{trades ? <><span className="font-mono tnum">{trades}</span> {trades === 1 ? "trade" : "trades"}</> : "No trades yet"}</span>
+                    </p>
                   </div>
                 </Link>
-              </li>
+              </motion.li>
             );
           })}
+          </AnimatePresence>
         </ol>
       )}
     </section>
+    </MagicCard>
   );
 }
diff --git a/app/src/components/launchpad/LaunchHero.tsx b/app/src/components/launchpad/LaunchHero.tsx
index 2561e8f..cb2104f 100644
--- a/app/src/components/launchpad/LaunchHero.tsx
+++ b/app/src/components/launchpad/LaunchHero.tsx
@@ -1,42 +1,65 @@
 import Link from "next/link";
-import { ArrowUpRight } from "lucide-react";
-import { btn } from "@/components/ui";
+import type { CSSProperties } from "react";
+import { ArrowRight, ArrowUpRight, Play, Rocket, Scale, ShieldCheck } from "lucide-react";
 import LaunchMechanism from "./LaunchMechanism";
 import HeroCtaLink from "./HeroCtaLink";
 import { BRAND_GITHUB } from "@/lib/brand";
+import { AnimatedShinyText } from "@/components/vendor/animated-shiny-text";
+import { BorderBeam } from "@/components/vendor/border-beam";
+import { ChainLogoStack } from "./ChainLogo";
+import { VISIBLE_CHAINS } from "@/lib/launchpad/config";
+
+const rise = (ms: number) => ({ "--d": `${ms}ms` }) as CSSProperties;
+const proof = "inline-flex min-h-9 items-center gap-2 rounded-full border border-line bg-card/70 px-3.5 text-xs font-medium text-body backdrop-blur transition-[color,border-color,background-color,transform] duration-150 hover:border-line-strong hover:bg-card hover:text-ink active:scale-[0.98] motion-reduce:transition-colors motion-reduce:active:scale-100";
+
+/** GitHub's mark (lucide has no brand icons), for the link to the source. */
+function GithubMark() {
+  return (
+    <svg viewBox="0 0 16 16" width={14} height={14} fill="currentColor" aria-hidden="true" className="shrink-0 text-ink">
+      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+    </svg>
+  );
+}
 
 /**
- * First viewport of the home page. Left: the promise and the one filled CTA.
- * Right: the network's real totals as one plain sentence, with the breakdown a tap away.
- * The live river sits directly below, so the proof is the market itself.
+ * First viewport of the home page. Left: the promise and the one filled CTA, rising in on first paint (pure CSS,
+ * so it is all there before any script). Right: the network's real totals as one sentence in a glass card with a
+ * travelling border. The flickering grid and glow behind it live in HeroBackdrop.
  */
 export default function LaunchHero({ configured }: { configured: boolean }) {
   return (
-    <section className="relative grid gap-x-14 gap-y-9 pt-10 pb-2 sm:pt-14 lg:grid-cols-[minmax(0,1fr)_minmax(0,24rem)] lg:items-end">
+    <section className="relative grid gap-x-14 gap-y-10 pt-12 pb-4 sm:pt-16 lg:grid-cols-[minmax(0,1fr)_minmax(0,25rem)] lg:items-center">
       <div className="min-w-0">
-        <h1 className="font-display font-bold leading-[1.02] tracking-[-0.04em] text-ink text-[32px] min-[400px]:text-[36px] min-[480px]:text-[44px] sm:text-[56px] lg:text-[52px] xl:text-[64px]">
-          Launch a token.
-          <br />
-          We take nothing.
+        <Link href="/rules#launchpad" style={rise(0)} className="bb-rise group inline-flex max-w-full items-center gap-2 rounded-full border border-line bg-card/70 py-1 pr-3 pl-1.5 text-xs backdrop-blur hover:border-line-strong">
+          <ChainLogoStack chains={VISIBLE_CHAINS} size={18} />
+          <AnimatedShinyText className="truncate"><span className="sm:hidden">Free on Base, Robinhood Chain &amp; Arc</span><span className="hidden sm:inline">Free to launch on Base, Robinhood Chain and Arc</span></AnimatedShinyText>
+          <ArrowRight size={12} aria-hidden="true" className="shrink-0 text-muted transition-transform group-hover:translate-x-0.5 motion-reduce:transition-none" />
+        </Link>
+        <h1 className="mt-6 font-display font-bold leading-[1.04] tracking-[-0.04em] text-ink text-[32px] min-[400px]:text-[36px] min-[480px]:text-[44px] sm:text-[56px] lg:text-[50px] xl:text-[64px]">
+          <span style={rise(80)} className="bb-rise block">Launch a token.</span>
+          <span style={rise(180)} className="bb-rise block text-dim">We take nothing.</span>
         </h1>
-        <p className="mt-6 max-w-[34rem] text-base leading-relaxed text-body text-pretty sm:text-lg">
+        <p style={rise(280)} className="bb-rise mt-6 max-w-[34rem] text-[15px] leading-relaxed text-body text-pretty sm:text-lg">
           {/* the brand as a plain word, once, above the fold: the title and footer alone read as a domain */}
           <Link href="/about" className="font-semibold text-ink hover:text-brand underline decoration-line-strong underline-offset-4">openlaunch</Link> is the free, open-source launchpad on Base, Robinhood Chain and Arc. One transaction: your token, a Uniswap v4 pool, and a liquidity position locked forever. 100% of the supply goes into the pool at launch. You only pay gas.
         </p>
-        <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-6">
+        <div style={rise(380)} className="bb-rise mt-8 flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-6">
           {/* the header watches this id: while it is on screen the header CTA stays quiet (one filled blue per screen) */}
-          <HeroCtaLink id="hero-cta" href="/launch" className={`${btn.primary} min-h-12 w-full px-7 text-[15px] sm:w-auto`}>
+          <HeroCtaLink id="hero-cta" href="/launch" className="bb-sheen group relative inline-flex min-h-13 w-full items-center justify-center gap-3 overflow-hidden rounded-2xl bg-brand py-2 pr-7 pl-2.5 text-[15px] font-semibold text-inverse shadow-[inset_0_1px_0_rgb(255_255_255/0.22),0_14px_34px_-14px_var(--color-glow)] transition-[transform,background-color,box-shadow] duration-200 hover:-translate-y-0.5 hover:bg-brand-strong hover:shadow-[inset_0_1px_0_rgb(255_255_255/0.22),0_20px_40px_-14px_var(--color-glow)] active:translate-y-0 active:scale-[0.98] motion-reduce:transition-colors motion-reduce:hover:translate-y-0 sm:w-auto">
+            {/* the rocket lifts off on hover */}
+            <span aria-hidden="true" className="grid size-9 place-items-center rounded-xl bg-inverse/15 transition-transform duration-300 ease-out group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:-rotate-12 motion-reduce:transition-none"><Rocket size={17} strokeWidth={2.2} /></span>
             Launch a token
           </HeroCtaLink>
-          <Link href="/rules#launchpad" className="text-center text-sm font-medium text-brand underline-offset-4 hover:underline sm:text-left">
+          <Link href="/rules#launchpad" className="group inline-flex min-h-13 items-center justify-center gap-3 rounded-2xl border border-line-strong bg-card/70 py-2 pr-6 pl-2.5 text-[15px] font-semibold text-ink backdrop-blur transition-[transform,border-color,background-color] duration-200 hover:-translate-y-0.5 hover:border-ink/40 hover:bg-card active:translate-y-0 active:scale-[0.98] motion-reduce:transition-colors motion-reduce:hover:translate-y-0">
+            <span aria-hidden="true" className="grid size-9 place-items-center rounded-xl bg-ink text-inverse transition-transform duration-300 ease-out group-hover:scale-110 motion-reduce:transition-none"><Play size={14} fill="currentColor" strokeWidth={0} className="translate-x-px" /></span>
             See how it works
           </Link>
         </div>
-        {/* the proofs: quiet, linkable, one line */}
-        <ul className="mt-6 flex flex-wrap gap-x-5 gap-y-1 text-xs text-muted">
-          <li>MIT licensed</li>
-          <li><a href={BRAND_GITHUB} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 underline decoration-line-strong underline-offset-2 hover:text-ink">Source on GitHub<ArrowUpRight size={12} aria-hidden="true" /></a></li>
-          <li><Link href="/rules#contracts" className="underline decoration-line-strong underline-offset-2 hover:text-ink">Verified contracts</Link></li>
+        {/* the proofs: three small chips, each one a place to check the claim */}
+        <ul style={rise(460)} className="bb-rise mt-6 flex flex-wrap gap-2">
+          <li><a href={`${BRAND_GITHUB}/blob/main/LICENSE`} target="_blank" rel="noreferrer" className={proof}><Scale size={14} aria-hidden="true" className="text-muted" />MIT licensed</a></li>
+          <li><a href={BRAND_GITHUB} target="_blank" rel="noreferrer" className={proof}><GithubMark />Source on GitHub<ArrowUpRight size={12} aria-hidden="true" className="text-muted" /></a></li>
+          <li><Link href="/rules#contracts" className={proof}><ShieldCheck size={14} aria-hidden="true" className="text-up" />Verified contracts</Link></li>
         </ul>
         {!configured ? (
           <p className="mt-5 inline-block rounded-xl border border-warm/30 bg-warm-soft px-3 py-2 text-sm text-warm-ink">
@@ -44,8 +67,13 @@ export default function LaunchHero({ configured }: { configured: boolean }) {
           </p>
         ) : null}
       </div>
-      <div className="min-w-0 lg:pb-1">
-        <LaunchMechanism />
+      <div style={rise(320)} className="bb-rise relative min-w-0">
+        {/* a soft glow behind the panel lifts it off the grid */}
+        <div aria-hidden="true" className="pointer-events-none absolute -inset-10 -z-10 rounded-[4rem] bg-[radial-gradient(closest-side,var(--color-glow),transparent)] opacity-30 blur-2xl" />
+        <div className="relative rounded-3xl border border-line bg-card/80 p-6 shadow-card backdrop-blur-xl sm:p-7">
+          <BorderBeam size={150} duration={11} />
+          <LaunchMechanism />
+        </div>
       </div>
     </section>
   );
diff --git a/app/src/components/launchpad/LaunchMechanism.tsx b/app/src/components/launchpad/LaunchMechanism.tsx
index e5a5a62..864b260 100644
--- a/app/src/components/launchpad/LaunchMechanism.tsx
+++ b/app/src/components/launchpad/LaunchMechanism.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { ArrowUpRight, ChevronDown } from "lucide-react";
+import { Popover } from "@base-ui/react/popover";
 import { useLive } from "./LiveProvider";
 import LiveNumber, { COMPACT_USD } from "../LiveNumber";
 import { GitlawbMark } from "./GitlawbBadge";
@@ -10,8 +11,10 @@ import { GITLAWB_DECIMALS, GITLAWB_SYMBOL } from "@/lib/launchpad/gitlawb";
 import { TWIG_DECIMALS, TWIG_SYMBOL } from "@/lib/launchpad/twig";
 import { BRAND_GITHUB } from "@/lib/brand";
 import { CHAIN_KEYS, CHAIN_SHORT, chainList } from "@/lib/chainPublic";
+import { VISIBLE_CHAINS } from "@/lib/launchpad/config";
+import { ChainLogoStack } from "./ChainLogo";
 
-/** The network's real totals, read as one sentence. The full breakdown sits behind a toggle. */
+/** The network's real totals as a live panel: the launch count large, four tiles under it. The full breakdown sits behind a toggle. */
 export default function LaunchMechanism() {
   const { live } = useLive();
   const t = live.totals;
@@ -26,26 +29,59 @@ export default function LaunchMechanism() {
   const twigBurned = t.twig_burned ?? "0";
   const twigBurnedExact = `${fmtUnitsExact(twigBurned, TWIG_DECIMALS)} ${TWIG_SYMBOL}`;
   return <div>
-    <p className="text-pretty text-lg leading-relaxed text-body sm:text-xl">
-      <Fig>{count(t.launches)}</Fig> tokens launched. <Fig>{count(t.trades)}</Fig> trades worth <Fig title={usdNote ?? fmtUsd(t.volume_usd)}>{usd(t.volume_usd, true)}</Fig>. <Fig title={usdNote ?? fmtUsd(t.fees_to_creators_usd)} accent>{usd(t.fees_to_creators_usd, true)}</Fig> in trading fees to the wallets creators chose. <Fig>$0</Fig> to us.
+    <div className="flex items-center justify-between gap-3">
+      <p className="flex items-center gap-2 text-xs font-medium text-body">
+        {/* the totals follow the shared live poll */}
+        <span aria-hidden="true" className="relative flex size-2"><span className="absolute inset-0 animate-ping rounded-full bg-up opacity-50 motion-reduce:hidden" /><span className="relative size-2 rounded-full bg-up" /></span>
+        Live across <ChainLogoStack chains={VISIBLE_CHAINS} size={16} />
+      </p>
+      <span className="text-[11px] text-muted">All time</span>
+    </div>
+    <p className="mt-5">
+      <span className="block font-mono text-5xl font-bold tracking-[-0.04em] text-ink tnum">{count(t.launches)}</span>
+      <span className="mt-1.5 block text-sm text-muted">tokens launched</span>
     </p>
-    <details className="group mt-3">
-      <summary className="flex min-h-9 w-fit cursor-pointer list-none items-center gap-1.5 text-xs text-muted hover:text-ink [&::-webkit-details-marker]:hidden">The numbers across {chainList("&", CHAIN_SHORT)}<ChevronDown size={13} aria-hidden="true" className="group-open:rotate-180" /></summary>
-      <dl className="mt-2 grid grid-cols-2 gap-x-5 gap-y-3 border-t border-dashed border-line-strong py-4 text-xs">
-        {CHAIN_KEYS.map((k) => <div key={k}><dt className="text-muted">{CHAIN_SHORT[k]} launches</dt><dd className="mt-1 font-mono text-ink tnum">{count(t.by_chain[k]?.launches ?? 0)}</dd></div>)}
-        <div><dt className="text-muted">All-time trades</dt><dd className="mt-1 font-mono text-ink tnum">{count(t.trades)}</dd></div>
-        <div><dt className="text-muted">All-time volume</dt><dd className="mt-1 font-mono text-ink tnum" title={usdNote}>{usd(t.volume_usd)}</dd></div>
-        <div><dt className="text-muted">Fees to recipients</dt><dd className="mt-1 font-mono text-up tnum" title={usdNote}>{usd(t.fees_to_creators_usd)}</dd></div>
-        <div><dt className="text-muted">Fees burned</dt><dd className="mt-1 font-mono text-warm-ink tnum" title={usdNote}>{usd(t.fees_burned_usd)}</dd></div>
-        <div className="col-span-2"><dt className="flex items-center gap-1.5 text-muted" title="Sent to 0x…dEaD by GITLAWB-quoted launches on Base and Robinhood Chain"><GitlawbMark size={14} />GITLAWB burned</dt><dd className="mt-1 font-mono text-warm-ink tnum" title={gitlawbBurnedExact}>{fmtQuote(t.gitlawb_burned, GITLAWB_DECIMALS, GITLAWB_SYMBOL)}</dd></div>
-        {BigInt(twigBurned) > 0n ? <div className="col-span-2"><dt className="flex items-center gap-1.5 text-muted" title="Sent to 0x…dEaD by TWIG-quoted launches on Base"><TwigMark size={14} />TWIG burned</dt><dd className="mt-1 font-mono text-warm-ink tnum" title={twigBurnedExact}>{fmtQuote(twigBurned, TWIG_DECIMALS, TWIG_SYMBOL)}</dd></div> : null}
-      </dl>
-      <p className="text-pretty text-[11px] leading-relaxed text-muted">Creators choose a 0%, 1% or 3% trading fee. It goes to their named recipients or is burned. The platform takes none: no fee address in the factory, no platform cut in the locker.</p>
-      <a href={`${BRAND_GITHUB}/tree/main/contracts/src`} target="_blank" rel="noreferrer" className="mt-1 inline-flex min-h-9 items-center gap-1 text-xs font-medium text-ink underline decoration-line-strong underline-offset-4 hover:decoration-ink">Read the contracts<ArrowUpRight size={12} aria-hidden="true" /></a>
-    </details>
+    {/* hairlines between the tiles come from the gap over a line-coloured grid */}
+    <dl className="mt-5 grid grid-cols-2 gap-px overflow-hidden rounded-2xl border border-line bg-line">
+      <Tile k="trades">{count(t.trades)}</Tile>
+      <Tile k="traded" title={usdNote ?? fmtUsd(t.volume_usd)}>{usd(t.volume_usd, true)}</Tile>
+      <Tile k="in fees to the wallets creators chose" title={usdNote ?? fmtUsd(t.fees_to_creators_usd)} accent>{usd(t.fees_to_creators_usd, true)}</Tile>
+      <Tile k="to us" accent>$0</Tile>
+    </dl>
+    {/* the breakdown opens over the page, so the hero never shifts when it opens or closes */}
+    <Popover.Root>
+      <Popover.Trigger className="group mt-3 flex min-h-9 w-fit cursor-pointer items-center gap-1.5 text-xs text-muted transition-colors hover:text-ink data-[popup-open]:text-ink motion-reduce:transition-none">
+        The numbers across {chainList("&", CHAIN_SHORT)}
+        <ChevronDown size={13} aria-hidden="true" className="transition-transform duration-200 group-data-[popup-open]:rotate-180 motion-reduce:transition-none" />
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Positioner side="bottom" align="start" sideOffset={8} collisionPadding={12} className="z-50">
+          <Popover.Popup className="w-[min(24rem,calc(100vw-2rem))] origin-(--transform-origin) rounded-2xl border border-line bg-raised p-5 shadow-dialog outline-none transition-[opacity,transform] duration-150 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 motion-reduce:transition-none">
+            <Popover.Title className="text-sm font-semibold text-ink">The numbers across {chainList("&", CHAIN_SHORT)}</Popover.Title>
+            <dl className="mt-3 grid grid-cols-2 gap-x-5 gap-y-3 border-t border-dashed border-line-strong pt-4 text-xs">
+              {CHAIN_KEYS.map((k) => <div key={k}><dt className="text-muted">{CHAIN_SHORT[k]} launches</dt><dd className="mt-1 font-mono text-ink tnum">{count(t.by_chain[k]?.launches ?? 0)}</dd></div>)}
+              <div><dt className="text-muted">All-time trades</dt><dd className="mt-1 font-mono text-ink tnum">{count(t.trades)}</dd></div>
+              <div><dt className="text-muted">All-time volume</dt><dd className="mt-1 font-mono text-ink tnum" title={usdNote}>{usd(t.volume_usd)}</dd></div>
+              <div><dt className="text-muted">Fees to recipients</dt><dd className="mt-1 font-mono text-up tnum" title={usdNote}>{usd(t.fees_to_creators_usd)}</dd></div>
+              <div><dt className="text-muted">Fees burned</dt><dd className="mt-1 font-mono text-warm-ink tnum" title={usdNote}>{usd(t.fees_burned_usd)}</dd></div>
+              <div className="col-span-2"><dt className="flex items-center gap-1.5 text-muted" title="Sent to 0x…dEaD by GITLAWB-quoted launches on Base and Robinhood Chain"><GitlawbMark size={14} />GITLAWB burned</dt><dd className="mt-1 font-mono text-warm-ink tnum" title={gitlawbBurnedExact}>{fmtQuote(t.gitlawb_burned, GITLAWB_DECIMALS, GITLAWB_SYMBOL)}</dd></div>
+              {BigInt(twigBurned) > 0n ? <div className="col-span-2"><dt className="flex items-center gap-1.5 text-muted" title="Sent to 0x…dEaD by TWIG-quoted launches on Base"><TwigMark size={14} />TWIG burned</dt><dd className="mt-1 font-mono text-warm-ink tnum" title={twigBurnedExact}>{fmtQuote(twigBurned, TWIG_DECIMALS, TWIG_SYMBOL)}</dd></div> : null}
+            </dl>
+            <p className="mt-4 text-pretty text-[11px] leading-relaxed text-muted">Creators choose a 0%, 1% or 3% trading fee. It goes to their named recipients or is burned. The platform takes none: no fee address in the factory, no platform cut in the locker.</p>
+            <a href={`${BRAND_GITHUB}/tree/main/contracts/src`} target="_blank" rel="noreferrer" className="mt-2 inline-flex min-h-9 items-center gap-1 text-xs font-medium text-ink underline decoration-line-strong underline-offset-4 hover:decoration-ink">Read the contracts<ArrowUpRight size={12} aria-hidden="true" /></a>
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
   </div>;
 }
 
-function Fig({ children, title, accent = false }: { children: React.ReactNode; title?: string; accent?: boolean }) {
-  return <span title={title} className={`whitespace-nowrap font-mono font-bold tracking-[-0.03em] tnum ${accent ? "text-up" : "text-ink"}`}>{children}</span>;
+/** One total: the figure large, what it counts under it (the label stays first for assistive tech). */
+function Tile({ children, k, title, accent = false }: { children: React.ReactNode; k: string; title?: string; accent?: boolean }) {
+  return (
+    <div title={title} className="flex flex-col-reverse justify-end bg-card/95 px-3.5 py-3">
+      <dt className="mt-0.5 text-pretty text-[11px] leading-snug text-muted">{k}</dt>
+      <dd className={`whitespace-nowrap font-mono text-xl font-bold tracking-[-0.03em] tnum ${accent ? "text-up" : "text-ink"}`}>{children}</dd>
+    </div>
+  );
 }
diff --git a/app/src/components/launchpad/LiveBubbles.module.css b/app/src/components/launchpad/LiveBubbles.module.css
new file mode 100644
index 0000000..1cb3c27
--- /dev/null
+++ b/app/src/components/launchpad/LiveBubbles.module.css
@@ -0,0 +1,131 @@
+/*
+ * The bubble map. Places come from a d3-force layout run to rest on each update (no timer); the glide to a new place,
+ * the slow float, the arrival pulse and the sparks are all CSS, so the page runs no per-frame script.
+ * The heights mirror ESTIMATED in LiveBubbles.tsx.
+ */
+.field {
+  position: relative;
+  height: 300px;
+  overflow: hidden;
+  border-radius: 18px;
+  background:
+    radial-gradient(60% 75% at 50% 50%, color-mix(in oklab, var(--color-ink) 5%, transparent), transparent 72%),
+    radial-gradient(circle, color-mix(in oklab, var(--color-ink) 10%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px;
+}
+@media (min-width: 640px) {
+  .field { height: 320px; }
+}
+
+.bubble {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: calc(var(--r) * 2px);
+  height: calc(var(--r) * 2px);
+  translate: calc(var(--x) * 1px - var(--r) * 1px) calc(var(--y) * 1px - var(--r) * 1px);
+  transition: translate 1.2s cubic-bezier(0.22, 1, 0.36, 1), width 1.2s cubic-bezier(0.22, 1, 0.36, 1), height 1.2s cubic-bezier(0.22, 1, 0.36, 1);
+  outline: none;
+}
+.bubble:hover { z-index: 2; }
+
+/* a glass orb in the colour of the side that led: a soft highlight, a tinted body, a ring and a glow that deepen with the lead */
+.orb {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  border-radius: 9999px;
+  text-align: center;
+  background:
+    radial-gradient(circle at 32% 24%, rgb(255 255 255 / 0.16), transparent 40%),
+    radial-gradient(circle at 50% 58%, color-mix(in oklab, var(--tone) calc(16% + var(--k) * 26%), transparent), color-mix(in oklab, var(--tone) 5%, transparent) 76%);
+  border: 1.5px solid color-mix(in oklab, var(--tone) calc(30% + var(--k) * 45%), transparent);
+  box-shadow: 0 0 calc(var(--r) * 0.7px) calc(var(--r) * -0.12px) color-mix(in oklab, var(--tone) calc(var(--k) * 45%), transparent);
+  animation: float var(--float) ease-in-out var(--float-delay) infinite alternate;
+  transition: scale 0.25s ease;
+}
+.bubble:hover .orb { scale: 1.07; }
+@keyframes float {
+  from { translate: 0 -3px; }
+  to { translate: 0 3px; }
+}
+
+.logo { position: relative; display: grid; flex-shrink: 0; }
+.symbol {
+  max-width: 82%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-ink);
+  font-size: clamp(10px, calc(var(--r) * 0.22px), 15px);
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+}
+.value {
+  color: color-mix(in oklab, var(--tone) 82%, var(--color-ink));
+  font-size: clamp(9px, calc(var(--r) * 0.18px), 13px);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.15;
+}
+.bubble[data-side="even"] .value { color: var(--color-body); }
+
+/* a ring that leaves the bubble when a trade lands */
+.pulse {
+  position: absolute;
+  inset: -1px;
+  border: 2px solid var(--tone);
+  border-radius: inherit;
+  pointer-events: none;
+  animation: pulse 0.9s ease-out forwards;
+}
+@keyframes pulse {
+  from { opacity: 0.85; scale: 1; }
+  to { opacity: 0; scale: 1.5; }
+}
+
+/* a launch that arrives live pops in, then floats like the rest */
+.born { animation: born 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both, float var(--float) ease-in-out var(--float-delay) infinite alternate; }
+@keyframes born {
+  from { scale: 0.2; opacity: 0; }
+  to { scale: 1; opacity: 1; }
+}
+
+/* a buy flies into its bubble, a sell flies out of it */
+.spark {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 6px;
+  height: 6px;
+  margin: -3px 0 0 -3px;
+  border-radius: 9999px;
+  background: var(--tone);
+  box-shadow: 0 0 10px 1px var(--tone);
+  opacity: 0;
+  pointer-events: none;
+  animation: spark-in 0.9s cubic-bezier(0.3, 0.6, 0.35, 1) forwards;
+}
+.spark[data-side="sell"] { animation-name: spark-out; }
+@keyframes spark-in {
+  0% { translate: var(--dx) var(--dy); opacity: 0; }
+  25% { opacity: 1; }
+  100% { translate: 0 0; opacity: 0; }
+}
+@keyframes spark-out {
+  0% { translate: 0 0; opacity: 1; }
+  100% { translate: var(--dx) var(--dy); opacity: 0; }
+}
+
+.empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; padding: 16px; text-align: center; }
+
+@media (prefers-reduced-motion: reduce) {
+  .bubble { transition: none; }
+  .orb, .born { animation: none; }
+  .pulse, .spark { display: none; }
+  .bubble:hover .orb { scale: 1; }
+}
diff --git a/app/src/components/launchpad/LiveBubbles.tsx b/app/src/components/launchpad/LiveBubbles.tsx
new file mode 100644
index 0000000..955be7d
--- /dev/null
+++ b/app/src/components/launchpad/LiveBubbles.tsx
@@ -0,0 +1,209 @@
+"use client";
+
+import Link from "next/link";
+import { memo, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { forceCollide, forceSimulation, forceX, forceY, type SimulationNodeDatum } from "d3-force";
+import TokenAvatar from "./TokenAvatar";
+import { ChainCorner } from "./ChainLogo";
+import { BUBBLE_MAX, bubbleLean, bubbleRadii, bubbleVolume, type BubbleLean, type BubbleToken } from "@/lib/launchpad/bubbles";
+import { feedKey, riverUsd, type RiverEntry } from "@/lib/launchpad/river";
+import { CHAIN_SHORT } from "@/lib/chainPublic";
+import { ago } from "@/lib/launchpad/time";
+import { setPendingToken } from "@/lib/launchpad/token-transition";
+import styles from "./LiveBubbles.module.css";
+
+/** Layout before the field is measured: the server render and the first client paint must agree. Heights mirror LiveBubbles.module.css. */
+const ESTIMATED = { w: 760, h: 320 };
+/** The newest live trades that fly a spark at once. */
+const SPARKS = 14;
+const CARD_W = 236;
+const TONE: Record<BubbleLean["side"], string> = { buy: "var(--color-up)", sell: "var(--color-down)", even: "var(--color-muted)", new: "var(--color-brand)" };
+
+type Node = SimulationNodeDatum & { id: string; r: number };
+type Placed = { x: number; y: number; r: number };
+type Spark = { key: string; side: "buy" | "sell"; dx: number; dy: number };
+
+const idOf = (entry: RiverEntry) => `${entry.item.chain}:${entry.item.token.toLowerCase()}`;
+
+/** A stable number in [0, 1) from a string: seeds a bubble's first place, its float rhythm and a spark's angle. */
+function hash01(s: string, salt = 0): number {
+  let h = 2166136261 ^ salt;
+  for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); }
+  return ((h >>> 0) % 10_000) / 10_000;
+}
+
+/**
+ * Lay the bubbles out with d3-force, run to rest right here: the simulation is stopped at once and ticked by hand, so
+ * no animation timer ever runs. Each bubble starts from a place seeded by its own id, so the same tokens always settle
+ * the same way and an update moves a bubble only as far as the data changed; CSS glides it there.
+ */
+function layout(tokens: readonly BubbleToken[], radii: readonly number[], w: number, h: number): Map<string, Placed> {
+  const nodes: Node[] = tokens.map((t, i) => ({ id: t.id, r: radii[i], x: w / 2 + (hash01(t.id, 1) - 0.5) * w * 0.7, y: h / 2 + (hash01(t.id, 2) - 0.5) * h * 0.6 }));
+  const sim = forceSimulation(nodes)
+    .force("x", forceX<Node>(w / 2).strength(0.045))
+    .force("y", forceY<Node>(h / 2).strength(0.11))
+    .force("collide", forceCollide<Node>((n) => n.r + 4).strength(1).iterations(3))
+    .stop();
+  for (let i = 0; i < 240; i++) {
+    sim.tick();
+    // the field's walls: a bubble never leaves it
+    for (const n of nodes) {
+      n.x = Math.min(w - n.r - 2, Math.max(n.r + 2, n.x ?? w / 2));
+      n.y = Math.min(h - n.r - 2, Math.max(n.r + 2, n.y ?? h / 2));
+    }
+  }
+  return new Map(nodes.map((n) => [n.id, { x: n.x ?? w / 2, y: n.y ?? h / 2, r: n.r }]));
+}
+
+/**
+ * The tokens traded or launched in the window, as bubbles: area for the dollars traded, colour for the side that led.
+ * A live trade flies a spark into its bubble (a buy) or out of it (a sell) and the bubble pulses; a live launch pops
+ * in. Decorative for assistive tech, like the river: the list view carries the same events as links.
+ */
+export default function LiveBubbles({ tokens, entries, now, complete }: { tokens: readonly BubbleToken[]; entries: readonly RiverEntry[]; now: number; complete: boolean }) {
+  const field = useRef<HTMLDivElement>(null);
+  const [size, setSize] = useState<{ w: number; h: number } | null>(null);
+  const [hover, setHover] = useState<string | null>(null);
+
+  useEffect(() => {
+    const el = field.current;
+    if (!el) return;
+    const observer = new ResizeObserver(([entry]) => setSize({ w: Math.round(entry.contentRect.width), h: Math.round(entry.contentRect.height) }));
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const { w, h } = size ?? ESTIMATED;
+  const compact = w < 520;
+  const shown = useMemo(() => tokens.slice(0, compact ? BUBBLE_MAX.compact : BUBBLE_MAX.wide), [tokens, compact]);
+  const radii = useMemo(() => bubbleRadii(shown, w * h, compact ? { min: 15, max: 60 } : { min: 17, max: 84 }), [shown, w, h, compact]);
+  const placed = useMemo(() => layout(shown, radii, w, h), [shown, radii, w, h]);
+
+  // what arrived live (never the first paint): the newest arrival per token pulses its bubble, a fresh launch pops in,
+  // and the newest few trades each fly a spark. Entries come newest first.
+  const live = useMemo(() => {
+    const pulse = new Map<string, string>();
+    const born = new Set<string>();
+    const sparks = new Map<string, Spark[]>();
+    let flying = 0;
+    for (const entry of entries) {
+      if (!entry.fresh) continue;
+      const id = idOf(entry);
+      const key = feedKey(entry.item);
+      if (!pulse.has(id)) pulse.set(id, key);
+      if (entry.item.kind === "launch") { born.add(id); continue; }
+      if (flying >= SPARKS) continue;
+      flying += 1;
+      const angle = hash01(key, 5) * Math.PI * 2;
+      const r = placed.get(id)?.r ?? 20;
+      const reach = r + 30;
+      sparks.set(id, [...(sparks.get(id) ?? []), { key, side: entry.item.is_buy ? "buy" : "sell", dx: Math.round(Math.cos(angle) * reach), dy: Math.round(Math.sin(angle) * reach) }]);
+    }
+    return { pulse, born, sparks };
+  }, [entries, placed]);
+
+  const hovered = hover ? shown.find((t) => t.id === hover) : undefined;
+  const at = hovered ? placed.get(hovered.id) : undefined;
+
+  return (
+    // the card lives outside the clipped field, so it can open past the field's edge instead of being cut off
+    <div className="relative">
+      <div ref={field} aria-hidden="true" className={styles.field}>
+        {shown.map((t) => {
+          const p = placed.get(t.id);
+          return p ? <Bubble key={t.id} t={t} p={p} pulse={live.pulse.get(t.id) ?? null} born={live.born.has(t.id)} sparks={live.sparks.get(t.id) ?? []} onEnter={setHover} onLeave={(id) => setHover((cur) => (cur === id ? null : cur))} /> : null;
+        })}
+        {shown.length === 0 ? (
+          <div className={styles.empty}>
+            <p className="text-sm font-medium text-ink">Nothing traded or launched in the last 24 hours</p>
+            <p className="text-xs text-muted">New ones show up here as they happen.</p>
+          </div>
+        ) : null}
+      </div>
+      <AnimatePresence>
+        {hovered && at ? <BubbleCard key={hovered.id} t={hovered} p={at} w={w} h={h} now={now} complete={complete} /> : null}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+const Bubble = memo(function Bubble({ t, p, pulse, born, sparks, onEnter, onLeave }: { t: BubbleToken; p: Placed; pulse: string | null; born: boolean; sparks: Spark[]; onEnter: (id: string) => void; onLeave: (id: string) => void }) {
+  const lean = bubbleLean(t);
+  const roomy = p.r >= 34;
+  const trades = t.buys + t.sells;
+  const value = bubbleVolume(t) > 0 ? riverUsd(bubbleVolume(t)) : trades ? `${trades} ${trades === 1 ? "trade" : "trades"}` : "New";
+  const style = {
+    "--x": p.x, "--y": p.y, "--r": p.r, "--tone": TONE[lean.side],
+    "--k": lean.side === "even" ? 0.2 : lean.strength,
+    "--float": `${5 + hash01(t.id, 3) * 4}s`, "--float-delay": `-${(hash01(t.id, 4) * 6).toFixed(2)}s`,
+  } as CSSProperties;
+  return (
+    <Link
+      href={`/t/${t.chain}/${t.token}`}
+      prefetch={false}
+      tabIndex={-1}
+      onClick={() => setPendingToken({ chain: t.chain, token: t.token, name: t.name, symbol: t.symbol, image: t.image_url })}
+      onPointerEnter={(e) => { if (e.pointerType === "mouse") onEnter(t.id); }}
+      onPointerLeave={() => onLeave(t.id)}
+      className={styles.bubble}
+      data-side={lean.side}
+      style={style}
+    >
+      <span className={`${styles.orb} ${born ? styles.born : ""}`}>
+        {/* keyed by the arrival, so each new trade replays the ring */}
+        {pulse ? <span key={pulse} className={styles.pulse} /> : null}
+        <span className={styles.logo}>
+          <TokenAvatar chain={t.chain} token={t.token} symbol={t.symbol} image={t.image_url} size={Math.round(roomy ? Math.min(46, p.r * 0.58) : p.r * 1.3)} className="rounded-full" />
+          {roomy ? <ChainCorner chain={t.chain} size={Math.round(Math.min(15, p.r * 0.2))} /> : null}
+        </span>
+        {roomy ? <><span className={styles.symbol}>{t.symbol}</span><span className={styles.value}>{value}</span></> : null}
+      </span>
+      {sparks.map((s) => <span key={s.key} className={styles.spark} data-side={s.side} style={{ "--dx": `${s.dx}px`, "--dy": `${s.dy}px`, "--tone": s.side === "buy" ? "var(--color-up)" : "var(--color-down)" } as CSSProperties} />)}
+    </Link>
+  );
+});
+
+/** What a bubble holds, on hover: both sides in dollars, the trade count, and when it last moved. */
+function BubbleCard({ t, p, w, h, now, complete }: { t: BubbleToken; p: Placed; w: number; h: number; now: number; complete: boolean }) {
+  const reduced = useReducedMotion();
+  const below = p.y < h * 0.45;
+  const left = Math.min(Math.max(p.x, CARD_W / 2 + 6), w - CARD_W / 2 - 6);
+  const from = { opacity: 0, scale: 0.92, y: below ? -6 : 6 };
+  const trades = t.buys + t.sells;
+  return (
+    <div aria-hidden="true" className="pointer-events-none absolute z-20" style={{ left, top: below ? p.y + p.r + 10 : p.y - p.r - 10, width: CARD_W, transform: `translate(-50%, ${below ? "0" : "-100%"})` }}>
+      <motion.div
+        initial={reduced ? false : from}
+        animate={{ opacity: 1, scale: 1, y: 0 }}
+        exit={reduced ? { opacity: 0, transition: { duration: 0 } } : { ...from, transition: { duration: 0.12 } }}
+        transition={{ type: "spring", stiffness: 420, damping: 28 }}
+        style={{ transformOrigin: below ? "50% 0%" : "50% 100%" }}
+        className="rounded-2xl border border-line bg-raised p-3 shadow-dialog"
+      >
+        <div className="flex items-center gap-2.5">
+          <span className="relative shrink-0">
+            <TokenAvatar chain={t.chain} token={t.token} symbol={t.symbol} image={t.image_url} size={32} className="rounded-full" />
+            <ChainCorner chain={t.chain} size={13} />
+          </span>
+          <span className="min-w-0 flex-1">
+            <span className="block truncate text-[13px] font-semibold leading-tight text-ink">{t.name}</span>
+            <span className="block truncate text-[11px] leading-tight text-muted">{t.symbol} on {CHAIN_SHORT[t.chain]}</span>
+          </span>
+          <span className="shrink-0 self-start font-mono text-[10px] text-muted" suppressHydrationWarning>{ago(new Date(t.lastAt).toISOString(), now)}</span>
+        </div>
+        {trades ? (
+          <dl className="mt-2.5 grid grid-cols-2 gap-2 border-t border-line pt-2.5 text-[11px]">
+            <div><dt className="text-muted">Bought</dt><dd className="font-mono text-[13px] font-semibold text-up">{riverUsd(t.bought)}</dd></div>
+            <div><dt className="text-muted">Sold</dt><dd className="font-mono text-[13px] font-semibold text-down-ink">{riverUsd(t.sold)}</dd></div>
+          </dl>
+        ) : null}
+        <p className="mt-2 text-[11px] text-muted">
+          {trades ? `${trades.toLocaleString("en-US")} ${trades === 1 ? "trade" : "trades"} ${complete ? "in this window" : "in view"}` : "Launched, no trades yet"}
+          {t.unpriced ? `, ${t.unpriced} with no dollar price` : ""}
+          {trades && t.launched ? ". Launched in this window" : ""}
+        </p>
+      </motion.div>
+    </div>
+  );
+}
diff --git a/app/src/components/launchpad/LiveRiver.module.css b/app/src/components/launchpad/LiveRiver.module.css
index b1df456..a3f50fe 100644
--- a/app/src/components/launchpad/LiveRiver.module.css
+++ b/app/src/components/launchpad/LiveRiver.module.css
@@ -5,26 +5,36 @@
  */
 .field {
   --s: 0.75;
+  --h: 168px;
   position: relative;
-  height: 150px;
+  height: var(--h);
   overflow: hidden;
-  container-type: inline-size;
+  /* the past dissolves at the far edge instead of being cut off */
+  mask-image: linear-gradient(90deg, transparent, #000 56px);
 }
 @media (min-width: 640px) {
-  .field { --s: 1; height: 220px; }
+  .field { --s: 1; --h: 240px; }
 }
 
-.line { position: absolute; inset-inline: 0; top: 50%; height: 1px; background: var(--color-line-strong); }
-.tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-line); }
+/* the time track: its right edge is now. It stops short of the field's edge so the newest mark is drawn whole. */
+.lane { position: absolute; inset: 0 24px 0 0; container-type: inline-size; }
 
-.axis { position: relative; height: 14px; margin-top: 6px; color: var(--color-muted); font: 10.5px/14px var(--font-mono); font-variant-numeric: tabular-nums; }
-.axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
-.axis .now { transform: translateX(-100%); color: var(--color-body); }
-.axis .compactHide { display: none; }
-@media (min-width: 640px) {
-  .axis .compactHide { display: inline; }
+/* one column of dots per minute, rows centred on the line */
+.grid {
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(circle, var(--color-line-strong) 1px, transparent 1.5px);
+  background-size: calc(100cqw / 30) 24px;
+  background-position: calc(100% + 100cqw / 60) 50%;
 }
 
+.line { position: absolute; inset-inline: 0; top: 50%; height: 1px; background: var(--color-line-strong); }
+.tick { position: absolute; top: calc(50% - 3px); width: 1px; height: 7px; background: var(--color-line-strong); }
+.now { position: absolute; top: 0; bottom: 0; left: 100%; border-left: 1px dashed var(--color-line-strong); }
+/* the hovered mark's moment, down to the axis */
+.cross { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--color-muted); opacity: 0.6; }
+.nowDot { position: absolute; left: 100%; top: 50%; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 9999px; background: var(--color-up); box-shadow: 0 0 0 3px var(--color-card); }
+
 .mark {
   --d: calc(var(--r) * var(--s) * 2px);
   position: absolute;
@@ -36,7 +46,7 @@
   animation: drift 1800s linear both;
   animation-delay: var(--delay);
 }
-.mark:hover, .mark:focus-visible { z-index: 3; }
+.mark:hover { z-index: 3; }
 @keyframes drift {
   0% { transform: translateX(0); opacity: 1; }
   85% { opacity: 1; }
@@ -45,13 +55,33 @@
 
 .buy { color: var(--color-up); }
 .sell { color: var(--color-down); }
-.launch { color: var(--color-brand); }
+.launch { color: var(--color-ink); }
+:global(.dark) .launch { color: var(--color-brand); }
 
-.dot { display: block; width: 100%; height: 100%; border-radius: 9999px; background: currentColor; opacity: 0.88; transition: opacity 120ms ease-out; }
-.mark:hover .dot { opacity: 1; }
+/* a trade stands on a stem from the line, so how far it reaches reads at a glance */
+.mark[data-side]::before {
+  content: "";
+  position: absolute;
+  left: calc(50% - 0.5px);
+  width: 1px;
+  background: currentColor;
+  opacity: 0.4;
+  z-index: -1;
+}
+.mark[data-side="up"]::before { top: 50%; height: calc((0.5 - var(--y)) * var(--h)); transform-origin: 50% 100%; }
+.mark[data-side="down"]::before { bottom: 50%; height: calc((var(--y) - 0.5) * var(--h)); transform-origin: 50% 0; }
+/* and touches it with a small foot */
+.mark[data-side]::after { content: ""; position: absolute; left: calc(50% - 1.5px); width: 3px; height: 3px; border-radius: 9999px; background: currentColor; opacity: 0.75; }
+.mark[data-side="up"]::after { top: calc(50% + (0.5 - var(--y)) * var(--h) - 1.5px); }
+.mark[data-side="down"]::after { bottom: calc(50% + (var(--y) - 0.5) * var(--h) - 1.5px); }
 
-.avatar { display: block; width: 22px; height: 22px; border-radius: 9999px; transform: scale(var(--s)); transform-origin: 0 0; box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 3px currentColor; }
-.avatar > * { border-radius: 9999px; }
+.dot { display: block; width: 100%; height: 100%; border-radius: 9999px; background: currentColor; box-shadow: 0 0 0 2px var(--color-card); }
+/* on black, each mark carries a faint halo of its own colour */
+:global(.dark) .dot { box-shadow: 0 0 0 2px var(--color-card), 0 0 14px -2px color-mix(in srgb, currentColor 70%, transparent); }
+:global(.dark) .avatar { box-shadow: 0 0 18px -2px color-mix(in srgb, currentColor 60%, transparent); }
+/* the token's own image, ringed in the trade's colour */
+.avatar { display: block; width: 100%; height: 100%; border-radius: 9999px; background: var(--color-card); outline: 2px solid currentColor; outline-offset: 1.5px; }
+.avatar > * { width: 100% !important; height: 100% !important; border: 0 !important; border-radius: 9999px !important; font-size: calc(var(--d) * 0.45) !important; }
 .lock {
   position: absolute; right: -6px; bottom: -5px;
   display: grid; place-items: center; width: 15px; height: 15px;
@@ -60,39 +90,68 @@
   transform: scale(var(--s));
 }
 
-/* labels: shown at rest only where lib/launchpad/river.ts found room, and always on hover */
+.dot, .avatar { transition: transform 160ms ease-out, opacity 160ms ease-out; }
+.mark::before, .mark::after, .lock { transition: opacity 160ms ease-out; }
+.mark:hover .dot, .mark:hover .avatar { transform: scale(1.18); }
+.mark:hover::before { opacity: 0.85; }
+/* pointing at one token fades the rest, so its other trades stand out */
+.field[data-hovering] .mark:not([data-match]) .dot,
+.field[data-hovering] .mark:not([data-match]) .avatar,
+.field[data-hovering] .mark:not([data-match]) .lock,
+.field[data-hovering] .mark:not([data-match])::before,
+.field[data-hovering] .mark:not([data-match])::after { opacity: 0.16; }
+.field[data-hovering] .mark:not([data-match]) .label { visibility: hidden; }
+
+/* labels: shown at rest only where lib/launchpad/river.ts found room */
 .label {
-  position: absolute; top: 50%; right: calc(100% + 5px);
-  transform: translateY(-50%);
-  padding: 0 4px; border-radius: 4px;
-  background: color-mix(in srgb, var(--color-paper) 84%, transparent);
-  color: var(--color-body);
-  font: 500 11px/15px var(--font-mono); font-variant-numeric: tabular-nums;
-  white-space: nowrap; pointer-events: none;
+  position: absolute;
+  padding: 0 6px;
+  border-radius: 9999px;
+  background: var(--color-raised);
+  box-shadow: 0 0 0 1px var(--color-line), 0 1px 2px rgb(15 23 42 / 0.06);
+  font: 600 10.5px/16px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  pointer-events: none;
   opacity: 0;
 }
-.launchLabel { right: auto; left: 50%; top: auto; transform: translateX(-50%); color: var(--color-ink); font-family: var(--font-sans); font-weight: 600; font-size: 12px; }
-.launchLabel[data-side="up"] { bottom: calc(100% + 8px); }
-.launchLabel[data-side="down"] { top: calc(100% + 10px); }
+.sell .label { color: var(--color-down-ink); }
+.launch .label { color: var(--color-ink); font-size: 11px; letter-spacing: 0.02em; }
+.label[data-place="above"] { left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); }
+.label[data-place="below"] { left: 50%; top: calc(100% + 6px); transform: translateX(-50%); }
+.label[data-place="left"] { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
 .label[data-compact="true"] { opacity: 1; }
 @media (min-width: 640px) {
   .label[data-compact="true"] { opacity: 0; }
   .label[data-wide="true"] { opacity: 1; }
 }
-.mark:hover .label, .mark:focus-visible .label { opacity: 1; color: var(--color-ink); }
 
-/* one ring when a real event lands; never on the first paint */
-.ping .dot, .ping .avatar { animation: ping 1s ease-out; }
+/* a real arrival grows out of the line, pops in and rings once; never on the first paint */
+.ping::before { animation: stem 420ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
+.ping::after { animation: pop 240ms ease-out backwards; }
+.ping .dot, .ping .avatar { animation: pop 520ms cubic-bezier(0.3, 1.5, 0.5, 1) 120ms backwards, ping 1.4s ease-out 260ms; }
+@keyframes stem { from { transform: scaleY(0); } to { transform: scaleY(1); } }
+@keyframes pop { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
 @keyframes ping {
-  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); }
-  100% { box-shadow: 0 0 0 16px transparent; }
+  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
+  100% { box-shadow: 0 0 0 18px transparent; }
 }
 
 .empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; padding: 0 16px; text-align: center; }
 
+.axis { position: relative; height: 14px; margin: 8px 24px 0 0; color: var(--color-muted); font: 10.5px/14px var(--font-mono); font-variant-numeric: tabular-nums; }
+.axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
+.axis .nowLabel { color: var(--color-ink); }
+.axis .crossLabel { z-index: 1; padding: 0 6px; border-radius: 9999px; background: var(--color-ink); color: var(--color-inverse); }
+.axis .compactHide { display: none; }
+@media (min-width: 640px) {
+  .axis .compactHide { display: inline; }
+}
+
 /* reduced motion: a still timeline, re-placed every few seconds from the render clock */
 @media (prefers-reduced-motion: reduce) {
   .mark { animation: none; transform: translateX(calc(var(--age) * -100cqw)); opacity: var(--fade); }
   .ping .dot, .ping .avatar { animation: none; }
-  .dot { transition: none; }
+  .ping::before, .ping::after { animation: none; }
+  .dot, .avatar, .mark::before, .mark::after, .lock { transition: none; }
 }
diff --git a/app/src/components/launchpad/LiveRiver.tsx b/app/src/components/launchpad/LiveRiver.tsx
index 100c2a1..2872ef9 100644
--- a/app/src/components/launchpad/LiveRiver.tsx
+++ b/app/src/components/launchpad/LiveRiver.tsx
@@ -1,47 +1,69 @@
 "use client";
 
 import Link from "next/link";
-import { useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
-import { List, LockKeyhole, Waves } from "lucide-react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
+import { AnimatePresence, motion, useMotionValue, useReducedMotion, useSpring, useTransform, type MotionValue } from "motion/react";
+import { Bubbles, List, LockKeyhole, Waves } from "lucide-react";
 import { useLive } from "./LiveProvider";
 import TokenAvatar from "./TokenAvatar";
 import { TapeList } from "./LaunchTape";
+import RiverFeed from "./RiverFeed";
+import LiveBubbles from "./LiveBubbles";
 import { ToggleGroup, ToggleGroupItem } from "@/components/vendor/toggle-group";
 import type { FeedItem } from "@/lib/launchpad/queries";
-import { RIVER_TICKS, RIVER_WINDOW_MS, feedKey, initialRiver, layoutRiver, mergeRiver, pruneRiver, riverSummary, riverUsd, type RiverMark } from "@/lib/launchpad/river";
-import { fmtQuote } from "@/lib/launchpad/math";
-import { CHAIN_LABELS, CHAIN_SHORT } from "@/lib/chainPublic";
+import { RIVER_TICKS, RIVER_WINDOW_MS, feedKey, inRiverWindow, initialRiver, layoutRiver, mergeRiver, pruneRiver, riverFlow, riverSummary, type RiverMark } from "@/lib/launchpad/river";
+import { BUBBLE_HISTORY_MS, aggregateBubbles, bubbleSummary, bubbleWindow, bubbleWindowLabel } from "@/lib/launchpad/bubbles";
+import { fmtQuote, fmtUsd } from "@/lib/launchpad/math";
+import { CHAIN_LABELS, CHAIN_SHORT, shortAddr, type ChainKey } from "@/lib/chainPublic";
 import { VISIBLE_CHAINS } from "@/lib/launchpad/config";
 import { ago } from "@/lib/launchpad/time";
 import { setPendingToken } from "@/lib/launchpad/token-transition";
 import styles from "./LiveRiver.module.css";
+import { ShineBorder } from "@/components/vendor/shine-border";
+import { ChainCorner, ChainLogoStack } from "./ChainLogo";
+import LiveNumber, { COMPACT_USD } from "../LiveNumber";
 
 /** Re-places marks under reduced motion and drops the ones that left the window. */
 const CLOCK_MS = 10_000;
-/** Label fitting before the field is measured: the server render and the first client paint must agree. */
-const ESTIMATED_WIDTH = { wide: 1086, compact: 343 };
+/** Label fitting before the time track is measured: the server render and the first client paint must agree. */
+const ESTIMATED_WIDTH = { wide: 760, compact: 302 };
+const CARD_W = 252;
 const NAMES = VISIBLE_CHAINS.map((k) => CHAIN_LABELS[k]);
 const WHERE = NAMES.length <= 1 ? (NAMES[0] ?? "") : `${NAMES.slice(0, -1).join(", ")} and ${NAMES[NAMES.length - 1]}`;
 const newestAt = (items: readonly FeedItem[], from = 0) => items.reduce((max, item) => Math.max(max, new Date(item.at).getTime() || 0), from);
 
+/** The mark under a mouse pointer, in the stage's coordinates; drives the card and the same-token highlight. */
+type Hover = { key: string; token: string; chain: ChainKey; x: number; top: number; bottom: number; below: boolean; stage: number };
+
 /**
- * The last half hour of real launches and trades, flowing right to left. Fed by the page's one poller;
- * nothing here fetches. The drawing is decorative for assistive tech: the list view carries the same
- * events as links.
+ * The last half hour of real launches and trades, flowing right to left, with the newest few beside it. Fed by the
+ * page's one poller; nothing here fetches. The drawing is decorative for assistive tech: the list view carries the
+ * same events as links.
  */
-export default function LiveRiver({ initial, serverNow, coveredSince = null, lastActivityAt = 0 }: { initial: FeedItem[]; serverNow: number; coveredSince?: number | null; lastActivityAt?: number }) {
+export default function LiveRiver({ initial, recent: seed = initial, serverNow, coveredSince = null, lastActivityAt = 0 }: { initial: FeedItem[]; recent?: FeedItem[]; serverNow: number; coveredSince?: number | null; lastActivityAt?: number }) {
   const { subscribe } = useLive();
   const [entries, setEntries] = useState(() => initialRiver(initial, serverNow));
+  // the bubble map and the Latest column look back up to a day, so a quiet half hour never leaves them empty
+  const [recent, setRecent] = useState(() => initialRiver(seed, serverNow, BUBBLE_HISTORY_MS));
   const [now, setNow] = useState(serverNow);
   const [lastAt, setLastAt] = useState(() => newestAt(initial, lastActivityAt));
   const [width, setWidth] = useState<number | null>(null);
-  const [view, setView] = useState<"river" | "list">("river");
+  const [view, setView] = useState<"bubbles" | "river" | "list">("bubbles");
+  const [hover, setHover] = useState<Hover | null>(null);
   const field = useRef<HTMLDivElement>(null);
+  const lane = useRef<HTMLDivElement>(null);
+  const stage = useRef<HTMLDivElement>(null);
+  const body = useRef<HTMLDivElement>(null);
+  // the list takes the drawing's exact height, so switching views never moves the page
+  const [bodyHeight, setBodyHeight] = useState<number | null>(null);
+  const centre = useRef(0);
+  const tilt = useMotionValue(0);
 
   useEffect(() => subscribe((snap) => {
     const feed = snap.feed ?? [];
     const t = Date.now();
     setEntries((cur) => mergeRiver(cur, feed, t));
+    setRecent((cur) => mergeRiver(cur, feed, t, BUBBLE_HISTORY_MS));
     setLastAt((cur) => newestAt(feed, cur));
   }), [subscribe]);
 
@@ -50,12 +72,13 @@ export default function LiveRiver({ initial, serverNow, coveredSince = null, las
       const t = Date.now();
       setNow(t);
       setEntries((cur) => pruneRiver(cur, t));
+      setRecent((cur) => pruneRiver(cur, t, BUBBLE_HISTORY_MS));
     }, CLOCK_MS);
     return () => clearInterval(clock);
   }, []);
 
   useEffect(() => {
-    const el = field.current;
+    const el = lane.current;
     if (!el) return;
     const observer = new ResizeObserver(([entry]) => setWidth(Math.round(entry.contentRect.width)));
     observer.observe(el);
@@ -63,78 +86,212 @@ export default function LiveRiver({ initial, serverNow, coveredSince = null, las
   }, [view]);
 
   const marks = useMemo(() => layoutRiver(entries, width === null ? ESTIMATED_WIDTH : { wide: width, compact: width }), [entries, width]);
-  const fresh = useMemo(() => new Set(entries.filter((e) => e.fresh).map((e) => feedKey(e.item))), [entries]);
+  const fresh = useMemo(() => new Set(recent.filter((e) => e.fresh).map((e) => feedKey(e.item))), [recent]);
+  // the bubble map's window: the shortest that holds enough activity, so a quiet market still shows its last movers
+  const windowMs = useMemo(() => bubbleWindow(recent.map((e) => e.item), now), [recent, now]);
+  const inView = useMemo(() => recent.filter((e) => inRiverWindow(e.item, now, windowMs)), [recent, now, windowMs]);
+  const tokens = useMemo(() => aggregateBubbles(inView.map((e) => e.item), now, windowMs), [inView, now, windowMs]);
+  const flow = useMemo(() => riverFlow(view === "river" ? entries : inView), [view, entries, inView]);
   const tickLeft = (minutes: number) => `${(1 - (minutes * 60_000) / RIVER_WINDOW_MS) * 100}%`;
   // a cut-off seed claims no window total until the window has moved past its oldest event
   const complete = coveredSince === null || now - RIVER_WINDOW_MS >= coveredSince;
+  const bubblesComplete = coveredSince === null || now - windowMs >= coveredSince;
+
+  const onEnter = useCallback((m: RiverMark, el: HTMLElement) => {
+    const box = stage.current?.getBoundingClientRect();
+    if (!box) return;
+    const r = el.getBoundingClientRect();
+    centre.current = r.left + r.width / 2;
+    tilt.jump(0);
+    // the card opens away from the nearer edge: below a mark in the top of the field, above the rest
+    setHover({ key: m.key, token: m.item.token, chain: m.item.chain, x: r.left + r.width / 2 - box.left, top: r.top - box.top, bottom: r.bottom - box.top, below: r.top + r.height / 2 - box.top < box.height * 0.4, stage: box.width });
+  }, [tilt]);
+  const onLeave = useCallback((key: string) => setHover((h) => (h?.key === key ? null : h)), []);
+
+  const hovered = hover ? marks.find((m) => m.key === hover.key) : undefined;
+  const sameToken = hovered ? entries.filter((e) => e.item.kind === "swap" && e.item.token === hovered.item.token && e.item.chain === hovered.item.chain).length : 0;
 
   return (
-    <section aria-labelledby="river-heading" className="-mx-4 border-y border-line px-4 py-4 sm:mx-0 sm:px-0">
-      <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
-        <h2 id="river-heading" className="flex items-center gap-2.5 text-sm font-medium text-ink">
-          <span aria-hidden="true" className="bb-beacon relative h-2 w-2 shrink-0 rounded-full bg-up" />
-          Live on {WHERE}
-        </h2>
-        <div className="flex items-center gap-3">
-          <p className="font-mono text-[11px] text-muted tnum">{riverSummary(entries, complete)}</p>
-          <ToggleGroup aria-label="Activity view" value={[view]} onValueChange={(values) => { const next = values[0]; if (next === "river" || next === "list") setView(next); }}>
-            <ToggleGroupItem value="river" aria-label="Show as a river" title="Show as a river" className="px-2.5"><Waves size={14} aria-hidden="true" /></ToggleGroupItem>
-            <ToggleGroupItem value="list" aria-label="Show as a list" title="Show as a list" className="px-2.5"><List size={14} aria-hidden="true" /></ToggleGroupItem>
+    <section aria-labelledby="river-heading" className="relative rounded-3xl border border-line bg-card/70 p-4 shadow-card backdrop-blur-xl sm:p-6">
+      <ShineBorder duration={18} />
+      <div className="flex items-start justify-between gap-4">
+        <div className="min-w-0">
+          <h2 id="river-heading" className="group flex items-start gap-2.5 text-[15px] font-semibold leading-snug tracking-tight text-ink">
+            <span className="mt-0.5"><ChainLogoStack chains={VISIBLE_CHAINS} size={17} /></span>
+            <span className="text-pretty">Live on {WHERE}</span>
+          </h2>
+          <p className="mt-1 text-xs text-muted tnum">{view === "river" ? riverSummary(entries, complete) : bubbleSummary(tokens, windowMs, bubblesComplete)}</p>
+          <Flow bought={flow.bought} sold={flow.sold} unpriced={flow.unpriced} className="mt-2.5 flex w-full lg:hidden" />
+        </div>
+        <div className="flex shrink-0 items-center gap-4">
+          <Flow bought={flow.bought} sold={flow.sold} unpriced={flow.unpriced} className="hidden lg:flex" />
+          <ToggleGroup aria-label="Activity view" value={[view]} onValueChange={(values) => {
+            const next = values[0];
+            if (next !== "bubbles" && next !== "river" && next !== "list") return;
+            if (next === "list" && body.current) setBodyHeight(body.current.offsetHeight);
+            setView(next);
+          }}>
+            <ToggleGroupItem value="bubbles" aria-label="Show as bubbles" title="Show as bubbles" className="px-2.5"><Bubbles size={14} aria-hidden="true" /><span className="hidden sm:inline">Bubbles</span></ToggleGroupItem>
+            <ToggleGroupItem value="river" aria-label="Show as a river" title="Show as a river" className="px-2.5"><Waves size={14} aria-hidden="true" /><span className="hidden sm:inline">River</span></ToggleGroupItem>
+            <ToggleGroupItem value="list" aria-label="Show as a list" title="Show as a list" className="px-2.5"><List size={14} aria-hidden="true" /><span className="hidden sm:inline">List</span></ToggleGroupItem>
           </ToggleGroup>
         </div>
       </div>
-      {view === "river" ? (
-        <>
-          <p className="sr-only">A drawing of the last 30 minutes of trades and launches. Choose Show as a list for the same events as links.</p>
-          <div ref={field} aria-hidden="true" className={`${styles.field} mt-3`}>
-            {RIVER_TICKS.map((m) => <span key={m} className={styles.tick} style={{ left: tickLeft(m) }} />)}
-            <span className={styles.line} />
-            {/* oldest first, so the newest mark paints on top */}
-            {[...marks].reverse().map((m) => <Mark key={m.key} m={m} now={now} />)}
-            {entries.length === 0 ? (
-              <div className={styles.empty}>
-                <p className="mx-auto w-fit bg-paper px-2 text-sm font-medium text-ink">Quiet for the last 30 minutes</p>
-                <p className="mx-auto w-fit bg-paper px-2 text-xs text-muted">{lastAt ? `The last trade or launch was ${ago(new Date(lastAt).toISOString(), now)} ago. ` : ""}New ones flow in from the right.</p>
-              </div>
-            ) : null}
+      {view === "bubbles" ? (
+        <div ref={body} className="grid gap-x-6 gap-y-5 pt-5 lg:grid-cols-[minmax(0,1fr)_17rem]">
+          <div className="min-w-0">
+            <p className="sr-only">A bubble for each token traded or launched in the last {bubbleWindowLabel(windowMs)}, sized by the dollars traded. Choose Show as a list for the same events as links.</p>
+            <LiveBubbles tokens={tokens} entries={recent} now={now} complete={bubblesComplete} />
+            <ul aria-hidden="true" className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-muted">
+              <li>Bigger bubble, more dollars traded</li>
+              <li className="flex items-center gap-1.5"><span className="size-2 rounded-full bg-up" />More bought</li>
+              <li className="flex items-center gap-1.5"><span className="size-2 rounded-full bg-down" />More sold</li>
+              <li className="flex items-center gap-1.5"><span className="size-2 rounded-full bg-brand" />Launched, no trades yet</li>
+            </ul>
           </div>
-          <div aria-hidden="true" className={styles.axis}>
-            {RIVER_TICKS.map((m) => <span key={m} className={m % 10 ? styles.compactHide : undefined} style={{ left: tickLeft(m) }}>{m} min ago</span>)}
-            <span className={styles.now} style={{ left: "100%" }}>now</span>
+          <RiverFeed entries={recent} now={now} />
+        </div>
+      ) : view === "river" ? (
+        <div ref={body} className="grid gap-x-6 gap-y-5 pt-5 lg:grid-cols-[minmax(0,1fr)_17rem]">
+          <div className="min-w-0">
+            <p className="sr-only">A drawing of the last 30 minutes of trades and launches. Choose Show as a list for the same events as links.</p>
+            <div ref={stage} className="relative" onPointerMove={(e) => { if (hover) tilt.set(e.clientX - centre.current); }}>
+              <div ref={field} aria-hidden="true" className={styles.field} data-hovering={hover ? "" : undefined}>
+                <span className={styles.line} />
+                {hover ? <span className={styles.cross} style={{ left: hover.x }} /> : null}
+                <div ref={lane} className={styles.lane}>
+                  <span className={styles.grid} />
+                  {RIVER_TICKS.map((m) => <span key={m} className={styles.tick} style={{ left: tickLeft(m) }} />)}
+                  <span className={styles.now} />
+                  <span className={`${styles.nowDot} bb-beacon`} />
+                  {/* oldest first, so the newest mark paints on top */}
+                  {[...marks].reverse().map((m) => <Mark key={m.key} m={m} now={now} match={hover !== null && m.item.token === hover.token && m.item.chain === hover.chain} onEnter={onEnter} onLeave={onLeave} />)}
+                </div>
+                {entries.length === 0 ? (
+                  <div className={styles.empty}>
+                    <p className="mx-auto w-fit rounded-md bg-card px-2 text-sm font-medium text-ink">Quiet for the last 30 minutes</p>
+                    <p className="mx-auto w-fit rounded-md bg-card px-2 text-xs text-muted">{lastAt ? `The last trade or launch was ${ago(new Date(lastAt).toISOString(), now)} ago. ` : ""}New ones flow in from the right.</p>
+                  </div>
+                ) : null}
+              </div>
+              <AnimatePresence>
+                {hover && hovered ? <MarkCard key={hover.key} hover={hover} mark={hovered} now={now} trades={sameToken} complete={complete} tilt={tilt} /> : null}
+              </AnimatePresence>
+            </div>
+            <div aria-hidden="true" className={styles.axis}>
+              {RIVER_TICKS.map((m) => <span key={m} className={m % 10 ? styles.compactHide : undefined} style={{ left: tickLeft(m) }}>{m} min ago</span>)}
+              <span className={styles.nowLabel} style={{ left: "100%" }}>now</span>
+              {hover && hovered ? <span className={styles.crossLabel} style={{ left: hover.x }}>{minutesAgo(now - hovered.at)}</span> : null}
+            </div>
+            <ul aria-hidden="true" className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-muted">
+              <li className="flex items-center gap-1.5"><span className="size-2 rounded-full bg-up" />Buys stand above the line</li>
+              <li className="flex items-center gap-1.5"><span className="size-2 rounded-full bg-down" />Sells hang below it</li>
+              <li className="flex items-center gap-1.5"><LockKeyhole size={11} className="text-ink" />Launches sit on it</li>
+              <li>Bigger and taller means more dollars</li>
+            </ul>
           </div>
-          <p className="mt-3 text-pretty text-[11px] leading-relaxed text-muted">Buys rise above the line and sells sit below it. New launches land on the line with a lock. A bigger dot is a bigger trade.</p>
-        </>
+          <RiverFeed entries={recent} now={now} />
+        </div>
       ) : (
-        <TapeList items={entries.map((e) => e.item)} now={now} fresh={fresh} label="Trades and launches in the last 30 minutes" className="mt-3 max-h-80 rounded-xl border border-line" />
+        <div className="pt-5" style={{ height: bodyHeight ?? undefined }}>
+          <TapeList items={inView.map((e) => e.item)} now={now} fresh={fresh} label={`Trades and launches in the last ${bubbleWindowLabel(windowMs)}`} className={`rounded-xl border border-line ${bodyHeight ? "h-full" : "max-h-80"}`} />
+        </div>
       )}
     </section>
   );
 }
 
-function Mark({ m, now }: { m: RiverMark; now: number }) {
+/** The hovered mark's place on the time axis, in the axis's own words. */
+function minutesAgo(ms: number): string {
+  const m = Math.floor(Math.max(0, ms) / 60_000);
+  return m < 1 ? "just now" : `${m} min ago`;
+}
+
+/** Dollars bought against dollars sold in view, as one split bar. Hidden until a priced trade arrives. */
+function Flow({ bought, sold, unpriced, className }: { bought: number; sold: number; unpriced: number; className: string }) {
+  const total = bought + sold;
+  if (total <= 0) return null;
+  const note = `Dollar value of the priced trades in view.${unpriced ? ` ${unpriced} with no dollar price ${unpriced === 1 ? "is" : "are"} left out.` : ""}`;
+  return (
+    <div title={note} className={`items-center gap-2.5 text-[11px] font-medium tnum ${className}`}>
+      <span className="shrink-0 whitespace-nowrap text-right text-up lg:w-[5.75rem]"><LiveNumber value={bought} format={COMPACT_USD} /> bought</span>
+      <span aria-hidden="true" className="flex h-1.5 min-w-12 flex-1 gap-0.5 lg:w-28 lg:flex-none">
+        <span className="h-full rounded-full bg-up transition-[width] duration-500 ease-out motion-reduce:transition-none" style={{ width: `${(bought / total) * 100}%` }} />
+        <span className="h-full flex-1 rounded-full bg-down" />
+      </span>
+      <span className="shrink-0 whitespace-nowrap text-down-ink lg:w-[5.75rem]"><LiveNumber value={sold} format={COMPACT_USD} /> sold</span>
+    </div>
+  );
+}
+
+const Mark = memo(function Mark({ m, now, match, onEnter, onLeave }: { m: RiverMark; now: number; match: boolean; onEnter: (m: RiverMark, el: HTMLElement) => void; onLeave: (key: string) => void }) {
   const { item } = m;
   const age = Math.min(1, Math.max(0, (now - m.at) / RIVER_WINDOW_MS));
   const style = { "--y": m.y, "--r": m.r, "--nudge": `${m.nudge}px`, "--delay": `-${m.ageAtSeen}ms`, "--age": age, "--fade": age > 0.85 ? (1 - age) / 0.15 : 1 } as CSSProperties;
-  const amount = item.kind === "swap" ? (item.usd !== null ? riverUsd(item.usd) : fmtQuote(item.quote_wei, item.quote_decimals, item.quote_symbol)) : "";
-  const title = item.kind === "launch" ? `${item.symbol} launched on ${CHAIN_SHORT[item.chain]}` : `${item.is_buy ? "Bought" : "Sold"} ${amount} of ${item.symbol} on ${CHAIN_SHORT[item.chain]}`;
   const tone = m.kind === "launch" ? styles.launch : m.kind === "buy" ? styles.buy : styles.sell;
   return (
     <Link
       href={`/t/${item.chain}/${item.token}`}
       prefetch={false}
       tabIndex={-1}
-      title={title}
       onClick={() => setPendingToken({ chain: item.chain, token: item.token, name: item.name, symbol: item.symbol, image: item.image_url })}
+      onPointerEnter={(e) => { if (e.pointerType === "mouse") onEnter(m, e.currentTarget); }}
+      onPointerLeave={() => onLeave(m.key)}
       className={`${styles.mark} ${tone} ${m.fresh ? styles.ping : ""}`}
+      data-side={m.kind === "buy" ? "up" : m.kind === "sell" ? "down" : undefined}
+      data-match={match ? "" : undefined}
       style={style}
     >
-      {m.kind === "launch" ? (
-        <>
-          <span className={styles.avatar}><TokenAvatar chain={item.chain} token={item.token} symbol={item.symbol} image={item.image_url} size={22} className="rounded-full" /></span>
-          <span className={styles.lock}><LockKeyhole size={8} strokeWidth={2.4} /></span>
-        </>
-      ) : <span className={styles.dot} />}
-      {m.label ? <span className={`${styles.label} ${m.kind === "launch" ? styles.launchLabel : ""}`} data-side={m.side} data-wide={m.showLabel.wide} data-compact={m.showLabel.compact}>{m.label}</span> : null}
+      {m.logo ? <span className={styles.avatar}><TokenAvatar chain={item.chain} token={item.token} symbol={item.symbol} image={item.image_url} size={Math.round(m.r * 2)} /></span> : <span className={styles.dot} />}
+      {m.kind === "launch" ? <span className={styles.lock}><LockKeyhole size={8} strokeWidth={2.4} /></span> : null}
+      {m.label ? <span className={styles.label} data-place={m.place} data-wide={m.showLabel.wide} data-compact={m.showLabel.compact}>{m.label}</span> : null}
     </Link>
   );
+});
+
+/** What a mark stands for, on hover. It springs out of the mark and leans a little with the pointer. */
+function MarkCard({ hover, mark, now, trades, complete, tilt }: { hover: Hover; mark: RiverMark; now: number; trades: number; complete: boolean; tilt: MotionValue<number> }) {
+  const reduced = useReducedMotion();
+  const lean = useSpring(useTransform(tilt, [-40, 40], [-5, 5], { clamp: true }), { stiffness: 220, damping: 18 });
+  const { item } = mark;
+  const left = Math.min(Math.max(hover.x, CARD_W / 2 + 4), hover.stage - CARD_W / 2 - 4);
+  const from = { opacity: 0, scale: 0.9, y: hover.below ? -8 : 8 };
+  const side = item.kind === "launch" ? { word: "Launch", pill: "bg-ink text-inverse" } : item.is_buy ? { word: "Buy", pill: "bg-up-soft text-up" } : { word: "Sell", pill: "bg-down-soft text-down-ink" };
+  return (
+    <div aria-hidden="true" className="pointer-events-none absolute z-20" style={{ left, top: hover.below ? hover.bottom + 10 : hover.top - 10, width: CARD_W, transform: `translate(-50%, ${hover.below ? "0" : "-100%"})` }}>
+      <motion.div
+        initial={reduced ? false : from}
+        animate={{ opacity: 1, scale: 1, y: 0 }}
+        exit={reduced ? { opacity: 0, transition: { duration: 0 } } : { ...from, transition: { duration: 0.12 } }}
+        transition={{ type: "spring", stiffness: 420, damping: 26 }}
+        style={{ rotate: reduced ? 0 : lean, transformOrigin: hover.below ? "50% 0%" : "50% 100%" }}
+        className="rounded-2xl border border-line bg-raised p-3 shadow-dialog"
+      >
+        <div className="flex items-center gap-2.5">
+          <span className="relative shrink-0">
+            <TokenAvatar chain={item.chain} token={item.token} symbol={item.symbol} image={item.image_url} size={32} className="rounded-full" />
+            <ChainCorner chain={item.chain} size={13} />
+          </span>
+          <span className="min-w-0 flex-1">
+            <span className="block truncate text-[13px] font-semibold leading-tight text-ink">{item.name}</span>
+            <span className="block truncate text-[11px] leading-tight text-muted">{item.symbol} on {CHAIN_SHORT[item.chain]}</span>
+          </span>
+          <span className="shrink-0 self-start font-mono text-[10px] text-muted tnum">{ago(item.at, now)}</span>
+        </div>
+        <div className="mt-2.5 flex items-center gap-2 border-t border-line pt-2.5">
+          <span className={`rounded-full px-1.5 py-px text-[10px] font-semibold ${side.pill}`}>{side.word}</span>
+          {item.kind === "swap" ? (
+            <>
+              <span className="text-[15px] font-semibold tracking-tight text-ink tnum">{item.usd !== null ? fmtUsd(item.usd) : fmtQuote(item.quote_wei, item.quote_decimals, item.quote_symbol)}</span>
+              {item.usd !== null ? <span className="min-w-0 truncate text-[11px] text-muted tnum">{fmtQuote(item.quote_wei, item.quote_decimals, item.quote_symbol)}</span> : null}
+            </>
+          ) : <span className="text-[13px] font-medium text-ink">{item.lp_fee / 10_000}% trading fee</span>}
+        </div>
+        <p className="mt-1.5 truncate text-[11px] text-muted">
+          {item.kind === "launch" ? "Liquidity locked forever" : item.is_dev ? <span className="text-warm-ink">Traded by the creator</span> : item.trader ? `Trader ${shortAddr(item.trader)}` : null}
+        </p>
+        {item.kind === "swap" && trades > 1 ? <p className="mt-0.5 text-[11px] text-muted">{trades} trades {complete ? "in the last 30 minutes" : "in view"}</p> : null}
+      </motion.div>
+    </div>
+  );
 }
diff --git a/app/src/components/launchpad/Posts.tsx b/app/src/components/launchpad/Posts.tsx
index 69f8d90..e0bf2a9 100644
--- a/app/src/components/launchpad/Posts.tsx
+++ b/app/src/components/launchpad/Posts.tsx
@@ -2,7 +2,8 @@
 
 import Link from "next/link";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useAccount, useConfig } from "wagmi";
+import { useConfig } from "wagmi";
+import { useHydratedAccount } from "@/lib/useHydratedAccount";
 import { getWalletClient } from "wagmi/actions";
 import WalletAvatar from "@/components/WalletAvatar";
 import ChainBadge from "./ChainBadge";
@@ -15,7 +16,8 @@ import { ago, nowMs } from "@/lib/launchpad/time";
 import { CHAINS, CHAIN_SHORT, shortAddr, type ChainKey } from "@/lib/chainPublic";
 import { friendlyError } from "@/lib/errors";
 import ConnectWallet from "@/components/ConnectWallet";
-import { ChevronDown, MessageSquare } from "lucide-react";
+import { ArrowUpRight, ChevronDown, MessageSquare } from "lucide-react";
+import { MagicCard } from "@/components/vendor/magic-card";
 
 function nonce(): string {
   const b = new Uint8Array(16);
@@ -41,7 +43,7 @@ async function signed(config: ReturnType<typeof useConfig>, chain: ChainKey, mes
  * reply level. Report and (for the creator) mute are signatures too.
  */
 export default function TokenComments({ chain, token, symbol, launcher, embedded = false }: { chain: ChainKey; token: string; symbol: string; launcher: string; embedded?: boolean }) {
-  const { address, isConnected } = useAccount();
+  const { address, isConnected } = useHydratedAccount();
   const config = useConfig();
   const { subscribe } = useLive();
   const [posts, setPosts] = useState<PostRow[]>([]);
@@ -267,6 +269,12 @@ function PostItem({ p, now, canReply, onReply, onReport }: { p: PostRow; now: nu
 
 /** The human feed (home column + /feed): latest top-level posts across tokens. */
 const COMPACT_LIMIT = 5;
+/** The home column's tag badge: the same three standings as TagChip, in sentence case. */
+const TAG_BADGE: Record<Exclude<PostRow["tag"], null>, { label: string; className: string }> = {
+  creator: { label: "Creator", className: "bg-brand-soft text-brand" },
+  whale: { label: "Whale", className: "bg-warm-soft text-warm-ink" },
+  holder: { label: "Holder", className: "bg-up-soft text-up" },
+};
 
 export function PostsFeed({ initial, compact = false }: { initial: PostRow[]; compact?: boolean }) {
   const { subscribe } = useLive();
@@ -305,8 +313,8 @@ export function PostsFeed({ initial, compact = false }: { initial: PostRow[]; co
     }
   };
   const shown = compact ? posts.slice(0, COMPACT_LIMIT) : posts;
-  return (
-    <section className={`rounded-2xl border border-line overflow-hidden ${compact ? "bg-paper" : "bg-card"}`}>
+  const feed = (
+    <section className={compact ? "overflow-hidden rounded-[inherit]" : "rounded-2xl border border-line overflow-hidden bg-card"}>
       <div className={`px-4 ${compact ? "min-h-14" : "h-11"} flex items-center justify-between gap-2 ${compact && collapsed ? "" : "border-b border-line"}`}>
         <h2 className="text-sm font-semibold text-ink flex items-center gap-2">
           {compact ? <MessageSquare size={14} aria-hidden="true" className="text-muted" /> : null}
@@ -315,8 +323,8 @@ export function PostsFeed({ initial, compact = false }: { initial: PostRow[]; co
         </h2>
         {compact ? (
           <div className="flex items-center gap-2">
-            <Link href="/feed" className="inline-flex min-h-10 items-center text-[11px] text-muted hover:text-ink">
-              View all ↗
+            <Link href="/feed" className="inline-flex min-h-10 items-center gap-0.5 text-[11px] font-medium text-muted transition-colors hover:text-ink motion-reduce:transition-none">
+              View all<ArrowUpRight size={12} aria-hidden="true" />
             </Link>
             <button
               type="button"
@@ -325,7 +333,7 @@ export function PostsFeed({ initial, compact = false }: { initial: PostRow[]; co
               aria-controls="home-posts"
               aria-label={collapsed ? "Show posts" : "Hide posts"}
               title={collapsed ? "Show posts" : "Hide posts"}
-              className="h-10 w-10 inline-flex items-center justify-center rounded-lg text-muted hover:text-ink hover:bg-card"
+              className="h-10 w-10 inline-flex items-center justify-center rounded-lg text-muted transition-colors hover:text-ink hover:bg-ink/[0.05] motion-reduce:transition-none"
             >
               <ChevronDown size={14} className={`transition-transform motion-reduce:transition-none ${collapsed ? "-rotate-90" : ""}`} aria-hidden="true" />
             </button>
@@ -337,13 +345,19 @@ export function PostsFeed({ initial, compact = false }: { initial: PostRow[]; co
       <ul id="home-posts" className="divide-y divide-line" hidden={compact && collapsed}>
         {shown.length === 0 ? <li className={`px-4 py-6 ${compact ? "" : "text-center"}`}><p className="text-xs font-medium text-ink">The conversation starts on a token page.</p><p className="mt-1.5 text-pretty text-xs leading-relaxed text-muted">No posts yet. Holders, traders and creators can join with a wallet signature.</p></li> : null}
         {shown.map((p) => (
-          <li key={p.id} className="px-4 py-3">
-            <Link href={`/t/${p.chain}/${p.token}#comments`} className="flex items-start gap-2.5 min-w-0">
+          <li key={p.id} className={compact ? "" : "px-4 py-3"}>
+            <Link href={`/t/${p.chain}/${p.token}#comments`} className={`flex items-start gap-2.5 min-w-0 ${compact ? "px-4 py-3 transition-colors hover:bg-ink/[0.03] motion-reduce:transition-none" : ""}`}>
               <WalletAvatar address={p.wallet} />
               <div className="min-w-0 flex-1">
                 {compact ? <>
-                  <div className="flex min-w-0 items-center justify-between gap-2 text-[11px]"><span className="truncate font-mono text-ink" title={p.wallet}>{shortAddr(p.wallet)}</span><time dateTime={p.created_at} className="shrink-0 font-mono text-muted tnum" suppressHydrationWarning>{now ? ago(p.created_at, now) : ""}</time></div>
-                  <p className="mt-0.5 truncate text-[10px] text-muted">On {p.symbol || shortAddr(p.token)} · {CHAIN_SHORT[p.chain]}{p.tag ? ` · ${p.tag}` : ""}</p>
+                  <div className="flex min-w-0 items-center gap-2 text-[11px]">
+                    <span className="truncate font-code text-ink" title={p.wallet}>{shortAddr(p.wallet)}</span>
+                    {p.tag ? <span className={`shrink-0 rounded-md px-1.5 py-px text-[10px] font-semibold ${TAG_BADGE[p.tag].className}`}>{TAG_BADGE[p.tag].label}</span> : null}
+                    <time dateTime={p.created_at} className="ml-auto shrink-0 text-muted tnum" suppressHydrationWarning>{now ? ago(p.created_at, now) : ""}</time>
+                  </div>
+                  {/* a speech bubble that points back at the wallet; long links wrap instead of running out of the card */}
+                  <div className="mt-1.5 rounded-xl rounded-tl-sm bg-ink/[0.045] px-3 py-2"><p className="line-clamp-3 whitespace-pre-wrap text-[13px] leading-relaxed text-ink [overflow-wrap:anywhere]">{p.body}</p></div>
+                  <p className="mt-1.5 truncate text-[11px] text-muted">on <span className="font-medium text-body">${p.symbol || shortAddr(p.token)}</span> · {CHAIN_SHORT[p.chain]}</p>
                 </> : <div className="flex items-center gap-1.5 text-[11px] text-muted font-mono min-w-0">
                   <span className="text-ink shrink-0" title={p.wallet}>{shortAddr(p.wallet)}</span>
                   <ChainBadge chain={p.chain} className="shrink-0" />
@@ -351,7 +365,7 @@ export function PostsFeed({ initial, compact = false }: { initial: PostRow[]; co
                   <span className="truncate font-sans">on {p.symbol || shortAddr(p.token)}</span>
                   <span className="ml-auto shrink-0" suppressHydrationWarning>{now ? ago(p.created_at, now) : ""}</span>
                 </div>}
-                <p className={`mt-0.5 text-[13px] text-ink whitespace-pre-wrap break-words ${compact ? "line-clamp-3" : ""}`}>{p.body}</p>
+                {compact ? null : <p className="mt-0.5 text-[13px] text-ink whitespace-pre-wrap break-words">{p.body}</p>}
               </div>
             </Link>
           </li>
@@ -359,4 +373,6 @@ export function PostsFeed({ initial, compact = false }: { initial: PostRow[]; co
       </ul>
     </section>
   );
+  // the home column sits among the other sidebar cards, with the same frame and pointer light
+  return compact ? <MagicCard className="rounded-2xl">{feed}</MagicCard> : feed;
 }
diff --git a/app/src/components/launchpad/RiverFeed.tsx b/app/src/components/launchpad/RiverFeed.tsx
new file mode 100644
index 0000000..f16e33f
--- /dev/null
+++ b/app/src/components/launchpad/RiverFeed.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import Link from "next/link";
+import TokenAvatar from "./TokenAvatar";
+import { ChainCorner } from "./ChainLogo";
+import { AnimatedList, AnimatedListItem } from "@/components/vendor/animated-list";
+import type { FeedItem } from "@/lib/launchpad/queries";
+import { feedKey, riverUsd, type RiverEntry } from "@/lib/launchpad/river";
+import { fmtQuote } from "@/lib/launchpad/math";
+import { CHAIN_SHORT } from "@/lib/chainPublic";
+import { ago } from "@/lib/launchpad/time";
+import { setPendingToken } from "@/lib/launchpad/token-transition";
+
+/** Cards the column holds; the list clips to what its fixed height shows, so an arrival never changes the section's size. */
+const LATEST = 4;
+
+/** The newest events beside the river, as real links. A new one springs in at the top. */
+export default function RiverFeed({ entries, now }: { entries: readonly RiverEntry[]; now: number }) {
+  const latest = entries.slice(0, LATEST);
+  return (
+    <div className="min-w-0">
+      <h3 className="text-xs font-medium text-muted">Latest</h3>
+      {latest.length === 0 ? (
+        <p className="mt-2 grid h-[7.25rem] place-content-center rounded-xl border border-dashed border-line-strong px-4 text-center text-xs text-muted sm:h-[3.375rem] lg:h-[15rem]">New trades and launches show up here as they happen.</p>
+      ) : (
+        // phones show two, tablets one row of two, the desktop column four
+        <AnimatedList aria-label="Latest trades and launches" className="mt-2 h-[7.25rem] overflow-hidden sm:grid sm:h-[3.375rem] sm:grid-cols-2 lg:flex lg:h-[15rem] max-lg:[&>li:nth-child(n+3)]:hidden">
+          {latest.map(({ item }) => (
+            <AnimatedListItem key={feedKey(item)}>
+              <FeedCard item={item} now={now} />
+            </AnimatedListItem>
+          ))}
+        </AnimatedList>
+      )}
+    </div>
+  );
+}
+
+function FeedCard({ item, now }: { item: FeedItem; now: number }) {
+  const buy = item.kind === "swap" && item.is_buy;
+  const verb = item.kind === "launch" ? "Launched" : buy ? "Bought" : "Sold";
+  const tone = item.kind === "launch" ? "text-ink" : buy ? "text-up" : "text-down-ink";
+  const amount = item.kind === "launch" ? item.symbol : item.usd !== null ? riverUsd(item.usd) : fmtQuote(item.quote_wei, item.quote_decimals, item.quote_symbol);
+  const detail = item.kind === "launch" ? `${item.lp_fee / 10_000}% fee, on ${CHAIN_SHORT[item.chain]}` : `${item.symbol} on ${CHAIN_SHORT[item.chain]}`;
+  return (
+    <Link
+      href={`/t/${item.chain}/${item.token}`}
+      prefetch={false}
+      onClick={() => setPendingToken({ chain: item.chain, token: item.token, name: item.name, symbol: item.symbol, image: item.image_url })}
+      className="flex h-[3.375rem] items-center gap-3 rounded-xl border border-line bg-paper/60 px-3 transition-colors hover:border-line-strong hover:bg-paper motion-reduce:transition-none"
+    >
+      <span className="relative shrink-0">
+        <TokenAvatar chain={item.chain} token={item.token} symbol={item.symbol} image={item.image_url} size={30} className="rounded-full" />
+        <ChainCorner chain={item.chain} size={13} />
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="flex items-baseline gap-1.5 text-[13px] leading-tight">
+          <span className={`font-medium ${tone}`}>{verb}</span>
+          <span className="truncate font-semibold text-ink tnum">{amount}</span>
+        </span>
+        <span className="mt-0.5 block truncate text-[11px] leading-tight text-muted">
+          {detail}
+          {item.kind === "swap" && item.is_dev ? <span className="text-warm-ink">, by the creator</span> : null}
+        </span>
+      </span>
+      <time dateTime={item.at} title={new Date(item.at).toUTCString()} className="shrink-0 self-start pt-0.5 font-mono text-[10px] text-muted tnum" suppressHydrationWarning>{ago(item.at, now)}</time>
+    </Link>
+  );
+}
diff --git a/app/src/components/launchpad/TrendingStrip.tsx b/app/src/components/launchpad/TrendingStrip.tsx
index f3ef431..a0d3556 100644
--- a/app/src/components/launchpad/TrendingStrip.tsx
+++ b/app/src/components/launchpad/TrendingStrip.tsx
@@ -1,8 +1,11 @@
 "use client";
 
 import Link from "next/link";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type CSSProperties } from "react";
+import { useReducedMotion } from "motion/react";
+import { ChevronLeft, ChevronRight, Crown, Flame } from "lucide-react";
 import TokenAvatar from "./TokenAvatar";
+import ChangeChip from "./ChangeChip";
 import { QuoteBrandBadge, hasQuoteBrandBadge } from "./MuseworldBadge";
 import { useLive } from "./LiveProvider";
 import type { LaunchRow } from "@/lib/launchpad/queries";
@@ -11,16 +14,27 @@ import { CHAIN_SHORT } from "@/lib/chainPublic";
 import { stickyKing } from "@/lib/launchpad/ranking";
 import { launchKey, refreshInPlace } from "@/lib/launchpad/list-state";
 import { setPendingToken } from "@/lib/launchpad/token-transition";
+import { BorderBeam } from "@/components/vendor/border-beam";
+import { ChainCorner } from "./ChainLogo";
 
 type Snap = { window: "1h" | "24h"; items: LaunchRow[] };
+/** How far one arrow press moves the rail: most of a view, so the next cards land where the eye already is. */
+const PAGE = 0.85;
 
-/** One row of chips: existing on-chain ranking and two-poll leader hold, with chain-scoped identity. */
+/**
+ * The trending leaderboard: a rail of cards you can swipe or page with arrows, each with its rank, its numbers and
+ * why it ranks (different wallets trading, then trades). The leader holds the crown across polls (stickyKing). Live
+ * updates wait while a pointer or focus is on the rail, so a card never moves out from under a click.
+ */
 export default function TrendingStrip({ initial }: { initial: Snap }) {
   const { subscribe } = useLive();
+  const reduced = useReducedMotion();
   const [snap, setSnap] = useState(initial);
   const [crown, setCrown] = useState({ king: initial.items[0] ? launchKey(initial.items[0]) : null, streak: { token: null as string | null, n: 0 } });
+  const [edges, setEdges] = useState({ start: true, end: false });
   const active = useRef({ pointer: false, focus: false });
   const pending = useRef<Snap | null>(null);
+  const rail = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     function apply(next: Snap) {
@@ -48,41 +62,109 @@ export default function TrendingStrip({ initial }: { initial: Snap }) {
     return () => { unsubscribe(); clearInterval(timer); };
   }, [subscribe]);
 
+  // which ends of the rail still hide cards: the arrows and the edge fades follow
+  function measure(el: HTMLElement | null) {
+    if (!el) return;
+    const next = edgesOf(el);
+    setEdges((cur) => (cur.start === next.start && cur.end === next.end ? cur : next));
+  }
+  useEffect(() => {
+    const el = rail.current;
+    if (!el) return;
+    const observer = new ResizeObserver(() => {
+      const next = edgesOf(el);
+      setEdges((cur) => (cur.start === next.start && cur.end === next.end ? cur : next));
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  function page(direction: 1 | -1) {
+    const el = rail.current;
+    if (el) el.scrollBy({ left: direction * el.clientWidth * PAGE, behavior: reduced ? "auto" : "smooth" });
+  }
+
   const leader = snap.items.find((row) => launchKey(row) === crown.king);
   const items = leader ? [leader, ...snap.items.filter((row) => launchKey(row) !== crown.king)] : snap.items;
   const heading = snap.window === "1h" ? "Trending this hour" : "Trending today";
+  const span = snap.window === "1h" ? "this hour" : "today";
+  // an edge fades only while cards hide past it
+  const mask = { maskImage: `linear-gradient(to right, ${edges.start ? "#000" : "transparent"}, #000 28px, #000 calc(100% - 28px), ${edges.end ? "#000" : "transparent"})` } as CSSProperties;
 
   return (
-    <section aria-labelledby="trending-heading" className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
-      <h2 id="trending-heading" className="shrink-0 text-sm font-semibold text-ink" title="Ranked by distinct wallets other than the launcher, then trades, volume and holders (log-scaled), with a boost for young tokens. The hourly window needs two such wallets; the daily window needs one.">{heading}</h2>
+    <section aria-labelledby="trending-heading" className="min-w-0">
+      <div className="mb-3 flex items-end justify-between gap-4">
+        <div className="min-w-0">
+          <h2 id="trending-heading" className="flex items-center gap-2 text-sm font-semibold text-ink"><Flame size={15} aria-hidden="true" className="text-warm" />{heading}</h2>
+          <p className="mt-0.5 text-[11px] text-muted">Ranked by different wallets trading, then trades and volume</p>
+        </div>
+        {items.length > 0 ? (
+          <div className="hidden shrink-0 items-center gap-1 sm:flex">
+            <button type="button" onClick={() => page(-1)} disabled={edges.start} aria-label="Show earlier trending tokens" className={arrow}><ChevronLeft size={16} aria-hidden="true" /></button>
+            <button type="button" onClick={() => page(1)} disabled={edges.end} aria-label="Show more trending tokens" className={arrow}><ChevronRight size={16} aria-hidden="true" /></button>
+          </div>
+        ) : null}
+      </div>
       {items.length === 0 ? (
         <p className="text-xs text-muted">A quiet window. Tokens show here once enough different wallets trade them.</p>
       ) : (
-        <ol aria-label="Trending tokens" className="-mx-4 flex min-w-0 gap-2 overflow-x-auto px-4 pb-1 bb-scroll sm:mx-0 sm:px-0 sm:pb-0" onPointerEnter={(e) => { if (e.pointerType === "mouse") active.current.pointer = true; }} onPointerLeave={() => { active.current.pointer = false; }} onFocusCapture={() => { active.current.focus = true; }} onBlurCapture={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) active.current.focus = false; }}>
-          {items.map((row, index) => {
-            const trades = snap.window === "1h" ? row.trades_1h : row.trades_24h;
-            // `relative`: the chips hold sr-only (absolutely positioned) labels; without a positioned ancestor inside
-            // the scroller they resolve against <main> and stretch the whole page sideways on phones
-            return (
-              <li key={launchKey(row)} className="relative shrink-0">
-                <Link
-                  href={`/t/${row.chain}/${row.token}`}
-                  onClick={() => setPendingToken({ chain: row.chain, token: row.token, name: row.name, symbol: row.symbol, image: row.image_url })}
-                  title={`${row.name} on ${CHAIN_SHORT[row.chain]}, paired with ${row.quote_symbol}`}
-                  className={`flex h-10 items-center gap-2 rounded-full border bg-card py-1 pl-1 pr-3.5 text-[13px] whitespace-nowrap transition-colors hover:border-muted motion-reduce:transition-none ${index === 0 ? "border-line-strong" : "border-line"}`}
-                >
-                  <span className="sr-only">Number {index + 1}: </span>
-                  <TokenAvatar chain={row.chain} token={row.token} symbol={row.symbol} image={row.image_url} size={30} className="shrink-0 rounded-full" />
-                  <span className="max-w-[9rem] truncate font-semibold text-ink">{row.name}</span>
-                  {hasQuoteBrandBadge(row.quote_key) ? <QuoteBrandBadge quoteKey={row.quote_key} /> : null}
-                  <span className="font-mono text-ink tnum"><span className="sr-only">market cap </span>{capDisplay(row.fdv_quote, row.quote_usd, { key: row.quote_key, symbol: row.quote_symbol, decimals: row.quote_decimals }).compact}</span>
-                  <span className="text-xs text-muted"><span className="font-mono tnum">{trades}</span> {trades === 1 ? "trade" : "trades"}</span>
-                </Link>
-              </li>
-            );
-          })}
-        </ol>
+        <div
+          ref={rail}
+          onScroll={(e) => measure(e.currentTarget)}
+          style={mask}
+          className="-mx-4 snap-x snap-mandatory overflow-x-auto scroll-px-4 px-4 py-1 [scrollbar-width:none] motion-reduce:scroll-auto sm:mx-0 sm:scroll-px-0 sm:px-0 [&::-webkit-scrollbar]:hidden"
+          onPointerEnter={(e) => { if (e.pointerType === "mouse") active.current.pointer = true; }}
+          onPointerLeave={() => { active.current.pointer = false; }}
+          onFocusCapture={() => { active.current.focus = true; }}
+          onBlurCapture={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) active.current.focus = false; }}
+        >
+          <ol aria-label="Trending tokens" className="flex w-max gap-3">
+            {items.map((row, index) => {
+              const trades = snap.window === "1h" ? row.trades_1h : row.trades_24h;
+              const wallets = snap.window === "1h" ? row.traders_1h_ex : row.traders_24h_ex;
+              const king = index === 0 && leader !== undefined;
+              // `relative`: the cards hold sr-only (absolutely positioned) labels; without a positioned ancestor inside
+              // the scroller they resolve against <main> and stretch the whole page sideways on phones
+              return (
+                <li key={launchKey(row)} className="relative w-[15.5rem] shrink-0 snap-start">
+                  <Link
+                    href={`/t/${row.chain}/${row.token}`}
+                    onClick={() => setPendingToken({ chain: row.chain, token: row.token, name: row.name, symbol: row.symbol, image: row.image_url })}
+                    title={`${row.name} on ${CHAIN_SHORT[row.chain]}, paired with ${row.quote_symbol}`}
+                    className={`relative flex h-full flex-col overflow-hidden rounded-2xl border bg-card p-3.5 transition-[border-color,translate] duration-200 hover:-translate-y-0.5 hover:border-line-strong motion-reduce:transition-none motion-reduce:hover:translate-y-0 ${king ? "border-warm/35" : "border-line"}`}
+                  >
+                    {/* the leader's card: a slow amber beam on its border, the crown beside its name */}
+                    {king ? <BorderBeam size={90} duration={9} colorFrom="var(--color-warm)" colorTo="var(--color-warm)" /> : null}
+                    <span className="sr-only">Number {index + 1}{king ? ", leading" : ""}: </span>
+                    <span className="flex min-w-0 items-center gap-3">
+                      <span aria-hidden="true" className={`w-5 shrink-0 text-center text-xl font-bold tracking-tight tnum ${king ? "text-warm" : index < 3 ? "text-ink" : "text-faint"}`}>{index + 1}</span>
+                      <span className="relative shrink-0"><TokenAvatar chain={row.chain} token={row.token} symbol={row.symbol} image={row.image_url} size={38} className="rounded-xl" /><ChainCorner chain={row.chain} size={14} /></span>
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate text-sm font-semibold text-ink">{row.name}</span>
+                        {/* the pair rides on the ticker line, so the name keeps its room: a brand's badge, or the quote's symbol */}
+                        <span className="flex h-5 min-w-0 items-center gap-1.5 text-[11px] text-muted"><span className="truncate"><span className="font-mono">{row.symbol}</span> · {CHAIN_SHORT[row.chain]}{hasQuoteBrandBadge(row.quote_key) ? null : ` · ${row.quote_symbol}`}</span><QuoteBrandBadge quoteKey={row.quote_key} /></span>
+                      </span>
+                      {king ? <Crown size={15} aria-hidden="true" className="shrink-0 self-start text-warm" /> : null}
+                    </span>
+                    <span className="mt-3 flex items-center justify-between gap-2">
+                      <span className="min-w-0 truncate font-mono text-[15px] font-bold tracking-tight text-ink tnum"><span className="sr-only">market cap </span>{capDisplay(row.fdv_quote, row.quote_usd, { key: row.quote_key, symbol: row.quote_symbol, decimals: row.quote_decimals }).compact}</span>
+                      <span className="shrink-0"><span className="sr-only">change since launch </span><ChangeChip v={row.change_from_launch} /></span>
+                    </span>
+                    {/* why it ranks: the different wallets first, then the trades */}
+                    <span className="mt-1.5 block truncate text-[11px] text-muted"><b className="font-semibold text-body tnum">{wallets.toLocaleString("en-US")}</b> {wallets === 1 ? "wallet" : "wallets"} · <span className="tnum">{trades.toLocaleString("en-US")}</span> {trades === 1 ? "trade" : "trades"} {span}</span>
+                  </Link>
+                </li>
+              );
+            })}
+          </ol>
+        </div>
       )}
     </section>
   );
 }
+
+/** Whether the rail sits at its start, and at its end. */
+function edgesOf(el: HTMLElement): { start: boolean; end: boolean } {
+  return { start: el.scrollLeft <= 4, end: el.scrollLeft + el.clientWidth >= el.scrollWidth - 4 };
+}
+
+const arrow = "grid size-8 place-items-center rounded-full border border-line bg-card text-muted transition-colors hover:border-line-strong hover:text-ink disabled:pointer-events-none disabled:opacity-35 motion-reduce:transition-none";
diff --git a/app/src/components/launchpad/WhyFree.tsx b/app/src/components/launchpad/WhyFree.tsx
new file mode 100644
index 0000000..fb96153
--- /dev/null
+++ b/app/src/components/launchpad/WhyFree.tsx
@@ -0,0 +1,73 @@
+import Link from "next/link";
+import { ArrowRight, ArrowUpRight, Check } from "lucide-react";
+import { ChainLogoStack } from "./ChainLogo";
+import { VISIBLE_CHAINS } from "@/lib/launchpad/config";
+import { MagicCard } from "@/components/vendor/magic-card";
+
+const CONTRACTS = "https://github.com/Gitlawb/openlaunch/tree/main/contracts/src";
+
+/**
+ * The home sidebar's case for the price: a $0 platform fee, where a trading fee goes (all of it to the creator's
+ * wallets or burned, none to openlaunch), the fees a creator can pick, and the two contract facts behind it, each one
+ * checkable in the source.
+ */
+export default function WhyFree() {
+  return (
+    <MagicCard className="rounded-2xl">
+      <section aria-labelledby="free-heading" className="p-4">
+        <div className="flex items-center justify-between gap-3">
+          <h2 id="free-heading" className="text-sm font-semibold text-ink">Why it&apos;s free</h2>
+          <ChainLogoStack chains={VISIBLE_CHAINS} size={16} />
+        </div>
+        <p className="mt-3 flex items-baseline gap-2">
+          <span className="text-4xl font-bold tracking-tight text-up tnum">$0</span>
+          <span className="text-sm font-medium text-ink">platform fee</span>
+        </p>
+        <p className="mt-1 text-pretty text-xs leading-relaxed text-muted">On every launch and every trade, on every chain.</p>
+
+        {/* where a trading fee goes, as the two shares it can have */}
+        <div className="mt-4 rounded-xl border border-line bg-paper/60 p-3">
+          <p className="text-[11px] font-medium text-body">Where a trading fee goes</p>
+          <FeeShare label="The creator's wallets, or burned" pct={100} />
+          <FeeShare label="openlaunch" pct={0} />
+        </div>
+
+        <div className="mt-3">
+          <div className="flex items-center justify-between gap-2 text-[11px]">
+            <span className="text-body">Trading fee</span>
+            <span className="flex gap-1">{["0%", "1%", "3%"].map((fee) => <span key={fee} className="rounded-md border border-line bg-card px-1.5 py-px font-mono text-[11px] text-ink tnum">{fee}</span>)}</span>
+          </div>
+          <p className="mt-1 text-[11px] text-muted">Picked by the creator at launch</p>
+        </div>
+
+        <ul className="mt-4 space-y-2 text-xs text-body">
+          {["No fee address in the factory", "No platform cut in the locker"].map((fact) => (
+            <li key={fact} className="flex items-center gap-2"><span className="grid size-4 shrink-0 place-items-center rounded-full bg-up-soft text-up"><Check size={10} strokeWidth={3} aria-hidden="true" /></span>{fact}</li>
+          ))}
+        </ul>
+
+        <div className="mt-4 grid grid-cols-2 gap-2 border-t border-line pt-3">
+          <a href={CONTRACTS} target="_blank" rel="noopener noreferrer" className={`${action} text-body hover:text-ink`}>Read the contracts<ArrowUpRight size={12} aria-hidden="true" /></a>
+          <Link href="/agents" className={`${action} text-brand hover:border-brand/40`}>Agents launch too<ArrowRight size={12} aria-hidden="true" /></Link>
+        </div>
+      </section>
+    </MagicCard>
+  );
+}
+
+/** One share of a trading fee: its label, its percent, and a bar that fills to it. */
+function FeeShare({ label, pct }: { label: string; pct: number }) {
+  return (
+    <div className="mt-2.5">
+      <div className="flex items-baseline justify-between gap-2 text-[11px]">
+        <span className="truncate text-muted">{label}</span>
+        <span className={`shrink-0 font-mono font-semibold tnum ${pct ? "text-up" : "text-ink"}`}>{pct}%</span>
+      </div>
+      <div aria-hidden="true" className="mt-1 h-1.5 overflow-hidden rounded-full bg-line">
+        <span className="block h-full rounded-full bg-up" style={{ width: `${pct}%` }} />
+      </div>
+    </div>
+  );
+}
+
+const action = "inline-flex min-h-9 items-center justify-center gap-1 whitespace-nowrap rounded-lg border border-line px-2 text-[11px] font-medium transition-colors hover:border-line-strong motion-reduce:transition-none";
diff --git a/app/src/components/launchpad/home-floor.test.ts b/app/src/components/launchpad/home-floor.test.ts
index 0a02f06..554ff5f 100644
--- a/app/src/components/launchpad/home-floor.test.ts
+++ b/app/src/components/launchpad/home-floor.test.ts
@@ -9,9 +9,12 @@ import test from "node:test";
 const read = (file: string) => readFileSync(new URL(file, import.meta.url), "utf8").replaceAll("\r\n", "\n");
 const river = read("./LiveRiver.tsx");
 const riverCss = read("./LiveRiver.module.css");
+const feed = read("./RiverFeed.tsx");
 const rail = read("./JustLaunched.tsx");
 const list = read("./LaunchList.tsx");
 const home = read("../../app/(home)/page.tsx");
+const chainLanding = read("./ChainLanding.tsx");
+const beam = read("../vendor/border-beam.tsx");
 
 test("the river draws from the shared poll and never fetches or animates from script", () => {
   assert.match(river, /useLive\(\)/);
@@ -27,7 +30,8 @@ test("river marks never prefetch a token page each, and the drawing has a list f
   assert.match(river, /tabIndex=\{-1\}/);
   assert.match(river, /ref=\{field\} aria-hidden="true"/);
   assert.match(river, /aria-label="Show as a list"/);
-  assert.match(river, /<TapeList items=\{entries\.map\(\(e\) => e\.item\)\}/);
+  // the list carries the same events as the default bubble map: the window it chose, as links
+  assert.match(river, /<TapeList items=\{inView\.map\(\(e\) => e\.item\)\}/);
 });
 
 test("reduced motion holds the river still and drops the arrival ping", () => {
@@ -36,6 +40,18 @@ test("reduced motion holds the river still and drops the arrival ping", () => {
   assert.match(still, /\.ping \.dot, \.ping \.avatar \{ animation: none; \}/);
 });
 
+test("the latest column is real links in a fixed-height list, so an arrival never resizes the section", () => {
+  // the column reads the day-long history in both drawings, so a quiet half hour never empties it
+  assert.equal((river.match(/<RiverFeed entries=\{recent\} now=\{now\} \/>/g) ?? []).length, 2);
+  assert.match(feed, /<AnimatedList aria-label="Latest trades and launches" className="[^"]*\bh-\[7\.25rem\][^"]*\boverflow-hidden\b[^"]*\blg:h-\[15rem\]/);
+  assert.match(feed, /prefetch=\{false\}/);
+});
+
+test("the hover card is part of the drawing: hidden from assistive tech and only opened by a mouse", () => {
+  assert.match(river, /if \(e\.pointerType === "mouse"\) onEnter\(m, e\.currentTarget\)/);
+  assert.match(river, /<div aria-hidden="true" className="pointer-events-none absolute z-20"/);
+});
+
 test("a cut-off seed never claims a 30-minute total", () => {
   assert.match(home, /coveredSince=\{riverCoverage\(feed, RIVER_SEED, now\)\}/);
   assert.match(river, /riverSummary\(entries, complete\)/);
@@ -49,6 +65,29 @@ test("the Just launched rail re-reads the market model only when an event says i
   assert.match(rail, /trades \? .*"No trades yet"/s);
 });
 
+test("cards keep the star outside the card link, and the layout comes from the visitor's cookie on the server", () => {
+  assert.match(list, /<LaunchCard [^\n]*\/>\n\s*\{\/\* outside the card's link: saving never navigates \*\/\}\n\s*<div [^>]*><WatchButton overlay token=/);
+  assert.match(home, /const layout = parseLayout\(\(await cookies\(\)\)\.get\(LAYOUT_COOKIE\)\?\.value\);/);
+  assert.match(home, /initialLayout=\{layout\}/);
+  assert.match(list, /document\.cookie = layoutCookie\(next\);/);
+});
+
+test("the market list starts its clock at the server's render time, so hydration sees the same tiers and filters", () => {
+  assert.match(list, /const \[now, setNow\] = useState\(serverNow\);/);
+  assert.doesNotMatch(list, /useState\(\(\) => Date\.now\(\)\)/, "a render-time Date.now() differs between the server and the browser");
+  for (const [page, src] of [["home", home], ["chain landing", chainLanding]] as const) {
+    assert.match(src, /const now = nowMs\(\);/, page);
+    assert.match(src, /<LaunchList [^\n]*serverNow=\{now\}/, page);
+  }
+});
+
+test("the border beam renders the same markup on the server and the browser; reduced motion only hides it", () => {
+  // the server cannot know the visitor's motion setting, so returning nothing for it breaks hydration (React #418)
+  assert.doesNotMatch(beam, /if \(reduced\) return null/);
+  assert.match(beam, /motion-reduce:hidden/);
+  assert.match(beam, /animate=\{reduced \? undefined : /);
+});
+
 test("the watchlist star sits outside the row link, and the tab survives a back navigation", () => {
   assert.match(list, /<LaunchRow [^\n]*\/>\n\s*\{\/\* outside the row's link: saving never navigates \*\/\}\n\s*<div [^>]*><WatchButton token=/);
   assert.match(list, /if \(v === "watchlist"\) p\.set\("view", "watchlist"\);/);
@@ -56,3 +95,25 @@ test("the watchlist star sits outside the row link, and the tab survives a back
   assert.match(list, /setListParams\(view === "market" \? \{ \.\.\.selection, limit \} : null\)/, "the shared poll skips the market list while the watchlist is open");
   assert.match(list, /request\.delete\("view"\);/, "the list API never receives the view");
 });
+
+test("the bubble map lays out once per update with no animation timer, and stays decorative like the river", () => {
+  const bubbles = read("./LiveBubbles.tsx");
+  const bubblesCss = read("./LiveBubbles.module.css");
+  // d3-force is stopped at once and ticked by hand: no frame loop, no fetch; CSS does every move
+  assert.match(bubbles, /forceSimulation\(nodes\)[\s\S]*?\.stop\(\);/);
+  assert.match(bubbles, /sim\.tick\(\);/);
+  assert.doesNotMatch(bubbles, /\bfetch\s*\(|requestAnimationFrame|\.restart\(\)|alphaTarget/);
+  assert.match(bubblesCss, /transition: translate 1\.2s/);
+  // decorative for assistive tech; the list view carries the same events as links
+  assert.match(bubbles, /<div ref=\{field\} aria-hidden="true" className=\{styles\.field\}>/);
+  assert.match(bubbles, /prefetch=\{false\}/);
+  assert.match(bubbles, /tabIndex=\{-1\}/);
+  // reduced motion: no float, no glide, no pulse, no sparks
+  const still = bubblesCss.slice(bubblesCss.indexOf("@media (prefers-reduced-motion: reduce)"));
+  assert.match(still, /\.bubble \{ transition: none; \}/);
+  assert.match(still, /\.orb, \.born \{ animation: none; \}/);
+  assert.match(still, /\.pulse, \.spark \{ display: none; \}/);
+  // the bubble map is the default view, and the page hands it the whole seed so a quiet half hour is never blank
+  assert.match(river, /useState<"bubbles" \| "river" \| "list">\("bubbles"\)/);
+  assert.match(read("../../app/(home)/page.tsx"), /recent=\{feed\}/);
+});
diff --git a/app/src/components/launchpad/launch-machine.test.ts b/app/src/components/launchpad/launch-machine.test.ts
index f80925e..7fb1c78 100644
--- a/app/src/components/launchpad/launch-machine.test.ts
+++ b/app/src/components/launchpad/launch-machine.test.ts
@@ -40,8 +40,9 @@ test("hero metrics preserve shared live totals without inventing per-chain dolla
   assert.match(metrics, /fmtUnitsExact\(t\.gitlawb_burned, GITLAWB_DECIMALS\)/, "the title carries every digit of the raw amount (no float, no rounding)");
   assert.doesNotMatch(metrics, /fmtUsd\([^)]*gitlawb/i, "the GITLAWB burn is never priced in USD");
   assert.doesNotMatch(metrics, /by_chain\.\w+\.gitlawb_burned/, "no per-chain split for the GITLAWB burn");
-  const details = metrics.indexOf("<details");
-  assert.ok(details >= 0 && metrics.indexOf(">GITLAWB burned<") > details, "the GITLAWB burn stays behind the breakdown toggle");
+  // the breakdown opens as a popover over the page (no layout shift); the GITLAWB burn stays inside it
+  const popup = metrics.indexOf("<Popover.Popup");
+  assert.ok(popup >= 0 && metrics.indexOf(">GITLAWB burned<") > popup, "the GITLAWB burn stays behind the breakdown toggle");
   assert.match(metrics, /All-time volume/);
   assert.match(metrics, /Fees to recipients/);
   assert.doesNotMatch(metrics, /volume_quote_eth|volume_quote_usdg|\bfetch\s*\(|\bsetInterval\s*\(/);
diff --git a/app/src/lib/launchpad/bubbles.test.ts b/app/src/lib/launchpad/bubbles.test.ts
new file mode 100644
index 0000000..eb0387a
--- /dev/null
+++ b/app/src/lib/launchpad/bubbles.test.ts
@@ -0,0 +1,80 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import type { FeedItem } from "./queries.ts";
+import { BUBBLE_ENOUGH, BUBBLE_HISTORY_MS, BUBBLE_WINDOWS_MS, aggregateBubbles, bubbleLean, bubbleRadii, bubbleSummary, bubbleVolume, bubbleWindow, bubbleWindowLabel, type BubbleToken } from "./bubbles.ts";
+
+const NOW = Date.UTC(2026, 9, 5, 12, 0, 0);
+const ago = (minutes: number) => new Date(NOW - minutes * 60_000).toISOString();
+let n = 0;
+const swap = (token: string, minutes: number, is_buy: boolean, usd: number | null, chain: FeedItem["chain"] = "base"): FeedItem => ({
+  kind: "swap", chain, at: ago(minutes), tx_hash: `0x${(++n).toString(16).padStart(64, "0")}`, log_index: 0, token, name: `Token ${token}`, symbol: token.toUpperCase().slice(2, 6),
+  trader: null, is_buy, is_dev: false, quote_wei: "1", quote_key: "eth", quote_symbol: "ETH", quote_decimals: 18, usd, image_url: null,
+});
+const launch = (token: string, minutes: number): FeedItem => ({
+  kind: "launch", chain: "base", at: ago(minutes), tx_hash: `0x${(++n).toString(16).padStart(64, "0")}`, token, name: `Token ${token}`, symbol: token.toUpperCase().slice(2, 6), launcher: "0x1", lp_fee: 0, quote_key: "eth", image_url: null,
+});
+
+test("totals per token: priced dollars by side, every trade counted, unpriced ones never valued", () => {
+  const items = [swap("0xaa", 1, true, 100), swap("0xaa", 2, false, 40), swap("0xAA", 3, true, null), swap("0xbb", 4, true, 10), launch("0xcc", 5)];
+  const [a, b, c] = aggregateBubbles(items, NOW, BUBBLE_WINDOWS_MS[0]);
+  assert.equal(a.id, "base:0xaa", "one bubble per token, whatever the address case");
+  assert.deepEqual([a.bought, a.sold, a.buys, a.sells, a.unpriced, a.launched], [100, 40, 2, 1, 1, false]);
+  assert.equal(bubbleVolume(a), 140);
+  assert.equal(b.id, "base:0xbb");
+  assert.equal(c.id, "base:0xcc");
+  assert.equal(c.launched, true);
+  assert.equal(c.buys + c.sells, 0);
+});
+
+test("the same token on two chains is two bubbles, and only the window counts", () => {
+  const items = [swap("0xaa", 1, true, 5, "base"), swap("0xaa", 1, true, 5, "robinhood"), swap("0xaa", 45, true, 500, "base")];
+  const held = aggregateBubbles(items, NOW, BUBBLE_WINDOWS_MS[0]);
+  assert.deepEqual(held.map((b) => b.id).sort(), ["base:0xaa", "robinhood:0xaa"]);
+  assert.equal(held.find((b) => b.id === "base:0xaa")!.bought, 5, "the 45-minute-old trade is outside 30 minutes");
+});
+
+test("the window widens only until it holds enough activity, and stops at a day", () => {
+  const busy = Array.from({ length: BUBBLE_ENOUGH.events }, (_, i) => swap("0xaa", 1 + i, true, 1));
+  assert.equal(bubbleWindow(busy, NOW), 30 * 60_000);
+  const manyTokens = Array.from({ length: BUBBLE_ENOUGH.tokens }, (_, i) => swap(`0x${i}`, 20, true, 1));
+  assert.equal(bubbleWindow(manyTokens, NOW), 30 * 60_000);
+  const quiet = Array.from({ length: BUBBLE_ENOUGH.events }, (_, i) => swap("0xaa", 9 * 60 + i, true, 1));
+  assert.equal(bubbleWindow(quiet, NOW), 24 * 3_600_000, "nine hours quiet: the day window holds them");
+  const twoHours = Array.from({ length: BUBBLE_ENOUGH.events }, (_, i) => swap("0xaa", 100 + i, true, 1));
+  assert.equal(bubbleWindow(twoHours, NOW), 3 * 3_600_000);
+  assert.equal(bubbleWindow([], NOW), BUBBLE_HISTORY_MS);
+});
+
+test("the lean follows the priced dollars, falls back to counts, reads even inside a tenth, and new without trades", () => {
+  const base: BubbleToken = { id: "base:0x", chain: "base", token: "0x", name: "x", symbol: "X", image_url: null, bought: 0, sold: 0, buys: 0, sells: 0, unpriced: 0, launched: true, lastAt: NOW };
+  assert.deepEqual(bubbleLean(base), { side: "new", strength: 1 });
+  assert.equal(bubbleLean({ ...base, bought: 90, sold: 10, buys: 3, sells: 1 }).side, "buy");
+  assert.equal(bubbleLean({ ...base, bought: 90, sold: 10, buys: 3, sells: 1 }).strength, 0.8);
+  assert.equal(bubbleLean({ ...base, bought: 10, sold: 90, buys: 9, sells: 1 }).side, "sell", "dollars decide, not the number of trades");
+  assert.equal(bubbleLean({ ...base, bought: 52, sold: 48, buys: 1, sells: 1 }).side, "even");
+  assert.equal(bubbleLean({ ...base, buys: 3, sells: 1, unpriced: 4 }).side, "buy", "no dollar price: counts decide");
+});
+
+test("radii: area follows dollars, zero-dollar tokens sit at the small end, and every radius stays in bounds", () => {
+  const t = (id: string, bought: number): BubbleToken => ({ id, chain: "base", token: id, name: id, symbol: id, image_url: null, bought, sold: 0, buys: bought ? 1 : 0, sells: 0, unpriced: 0, launched: !bought, lastAt: NOW });
+  const tokens = [t("a", 400), t("b", 100), t("c", 0)];
+  const [ra, rb, rc] = bubbleRadii(tokens, 800 * 300, { min: 10, max: 200 });
+  assert.ok(Math.abs(ra / rb - 2) < 1e-9, "four times the dollars, twice the radius");
+  assert.equal(rc, rb, "a launch with no trade is drawn like the smallest priced token, never larger");
+  const covered = [ra, rb, rc].reduce((sum, r) => sum + Math.PI * r * r, 0);
+  assert.ok(Math.abs(covered / (800 * 300) - 0.4) < 1e-9, "the bubbles cover the asked share of the field");
+  const clamped = bubbleRadii([t("a", 1e9), t("b", 1)], 800 * 300, { min: 14, max: 80 });
+  assert.equal(clamped[0], 80);
+  assert.equal(clamped[1], 14);
+  assert.deepEqual(bubbleRadii([], 1000, { min: 1, max: 2 }), []);
+});
+
+test("labels and the summary say what is held, and a cut-off seed never claims the whole window", () => {
+  assert.equal(bubbleWindowLabel(30 * 60_000), "30 minutes");
+  assert.equal(bubbleWindowLabel(60 * 60_000), "hour");
+  assert.equal(bubbleWindowLabel(6 * 3_600_000), "6 hours");
+  const held = aggregateBubbles([swap("0xaa", 1, true, 5), swap("0xaa", 2, false, 5), swap("0xbb", 3, true, 5), launch("0xcc", 4)], NOW, 30 * 60_000);
+  assert.equal(bubbleSummary(held, 30 * 60_000, true), "3 tokens, 3 trades and 1 launch in the last 30 minutes");
+  assert.equal(bubbleSummary(held, 30 * 60_000, false), "3 tokens in the latest 3 trades and 1 launch");
+  assert.equal(bubbleSummary([], 30 * 60_000, true), "Nothing traded or launched in the last 24 hours");
+});
diff --git a/app/src/lib/launchpad/bubbles.ts b/app/src/lib/launchpad/bubbles.ts
new file mode 100644
index 0000000..a95ba72
--- /dev/null
+++ b/app/src/lib/launchpad/bubbles.ts
@@ -0,0 +1,135 @@
+import type { FeedItem } from "./queries";
+
+/**
+ * The home page bubble map: every token traded or launched recently, one bubble each. A bubble's area follows the
+ * dollars traded and its colour follows which side led. Pure, so the window choice, the totals and the sizes are
+ * testable without a browser. Nothing here guesses: an unpriced trade is counted, never given a dollar value.
+ */
+
+/** Windows the map can show, shortest first; it takes the first one that holds enough activity to be worth drawing. */
+export const BUBBLE_WINDOWS_MS = [30 * 60_000, 60 * 60_000, 3 * 3_600_000, 6 * 3_600_000, 24 * 3_600_000] as const;
+/** The longest look back, and how long the page keeps an event for the map and the Latest column. */
+export const BUBBLE_HISTORY_MS = BUBBLE_WINDOWS_MS[BUBBLE_WINDOWS_MS.length - 1];
+/** A window is wide enough once it holds this many tokens, or this many events. */
+export const BUBBLE_ENOUGH = { tokens: 6, events: 12 } as const;
+/** Most bubbles drawn at once, per field size; the rest are the smallest and stay in the list view. */
+export const BUBBLE_MAX = { wide: 26, compact: 14 } as const;
+const FUTURE_SKEW_MS = 60_000; // a server clock slightly ahead must not drop the newest trade
+
+export type BubbleToken = {
+  /** chain:token, lower-cased: one bubble per token per chain. */
+  id: string;
+  chain: FeedItem["chain"];
+  token: string;
+  name: string;
+  symbol: string;
+  image_url: string | null;
+  /** Dollars of priced buys and sells in the window. */
+  bought: number;
+  sold: number;
+  buys: number;
+  sells: number;
+  /** Trades with no dollar price: counted, never valued. */
+  unpriced: number;
+  /** Launched inside the window. */
+  launched: boolean;
+  /** The newest event's time, in ms. */
+  lastAt: number;
+};
+
+export type BubbleLean = { side: "buy" | "sell" | "even" | "new"; strength: number };
+
+const atMs = (item: FeedItem) => new Date(item.at).getTime();
+const inside = (item: FeedItem, now: number, windowMs: number) => {
+  const age = now - atMs(item);
+  return Number.isFinite(age) && age >= -FUTURE_SKEW_MS && age <= windowMs;
+};
+const idOf = (item: FeedItem) => `${item.chain}:${item.token.toLowerCase()}`;
+
+/** Priced dollars traded, both sides. */
+export function bubbleVolume(b: BubbleToken): number {
+  return b.bought + b.sold;
+}
+
+/** The shortest window that holds enough activity; the longest one when even that stays thin. */
+export function bubbleWindow(items: readonly FeedItem[], now: number): number {
+  for (const windowMs of BUBBLE_WINDOWS_MS) {
+    const held = items.filter((item) => inside(item, now, windowMs));
+    const tokens = new Set(held.map(idOf)).size;
+    if (tokens >= BUBBLE_ENOUGH.tokens || held.length >= BUBBLE_ENOUGH.events) return windowMs;
+  }
+  return BUBBLE_HISTORY_MS;
+}
+
+/** Per-token totals inside the window, biggest dollar volume first (then the busiest, then the newest). */
+export function aggregateBubbles(items: readonly FeedItem[], now: number, windowMs: number): BubbleToken[] {
+  const byId = new Map<string, BubbleToken>();
+  for (const item of items) {
+    if (!inside(item, now, windowMs)) continue;
+    const id = idOf(item);
+    const at = atMs(item);
+    let bubble = byId.get(id);
+    if (!bubble) {
+      bubble = { id, chain: item.chain, token: item.token, name: item.name, symbol: item.symbol, image_url: item.image_url, bought: 0, sold: 0, buys: 0, sells: 0, unpriced: 0, launched: false, lastAt: at };
+      byId.set(id, bubble);
+    }
+    bubble.lastAt = Math.max(bubble.lastAt, at);
+    if (item.kind === "launch") { bubble.launched = true; continue; }
+    if (item.is_buy) bubble.buys += 1;
+    else bubble.sells += 1;
+    if (item.usd === null || !Number.isFinite(item.usd) || item.usd < 0) bubble.unpriced += 1;
+    else if (item.is_buy) bubble.bought += item.usd;
+    else bubble.sold += item.usd;
+  }
+  return [...byId.values()].sort((a, b) => bubbleVolume(b) - bubbleVolume(a) || (b.buys + b.sells) - (a.buys + a.sells) || b.lastAt - a.lastAt || a.id.localeCompare(b.id));
+}
+
+/**
+ * Which side led and by how much (0 to 1): the net share of the priced dollars, or of the trades when none was
+ * priced. Inside a tenth either way it reads as even. A token with a launch and no trade yet is new.
+ */
+export function bubbleLean(b: BubbleToken): BubbleLean {
+  const trades = b.buys + b.sells;
+  if (trades === 0) return { side: "new", strength: 1 };
+  const total = bubbleVolume(b);
+  const net = total > 0 ? (b.bought - b.sold) / total : (b.buys - b.sells) / trades;
+  if (Math.abs(net) < 0.1) return { side: "even", strength: Math.abs(net) };
+  return { side: net > 0 ? "buy" : "sell", strength: Math.min(1, Math.abs(net)) };
+}
+
+/**
+ * Radii in px. Area follows the dollars traded; a token with none (a launch, or only unpriced trades) takes the
+ * smallest priced token's weight, so it is drawn at the small end and never larger than a real trade. Scaled so the
+ * bubbles cover about `fill` of the field, then clamped to [min, max].
+ */
+export function bubbleRadii(tokens: readonly BubbleToken[], area: number, { min, max, fill = 0.4 }: { min: number; max: number; fill?: number }): number[] {
+  if (!tokens.length || !(area > 0)) return tokens.map(() => min);
+  const priced = tokens.map(bubbleVolume).filter((v) => v > 0);
+  const floor = priced.length ? Math.min(...priced) : 1;
+  const weights = tokens.map((t) => Math.max(bubbleVolume(t), floor));
+  const k = Math.sqrt((fill * area) / (Math.PI * weights.reduce((sum, w) => sum + w, 0)));
+  return weights.map((w) => Math.min(max, Math.max(min, k * Math.sqrt(w))));
+}
+
+/** "30 minutes", "hour", "3 hours": the window, as it reads after "the last". */
+export function bubbleWindowLabel(windowMs: number): string {
+  const minutes = Math.round(windowMs / 60_000);
+  if (minutes < 60) return `${minutes} minutes`;
+  const hours = Math.round(minutes / 60);
+  return hours === 1 ? "hour" : `${hours} hours`;
+}
+
+/**
+ * The line under the title. A cut-off seed (the newest events only) never claims the whole window: it says what it
+ * holds instead, like the river does.
+ */
+export function bubbleSummary(tokens: readonly BubbleToken[], windowMs: number, complete: boolean): string {
+  if (!tokens.length) return "Nothing traded or launched in the last 24 hours";
+  const trades = tokens.reduce((sum, t) => sum + t.buys + t.sells, 0);
+  const launches = tokens.filter((t) => t.launched).length;
+  const count = (n: number, one: string, many: string) => `${n.toLocaleString("en-US")} ${n === 1 ? one : many}`;
+  const activity = [trades ? count(trades, "trade", "trades") : null, launches ? count(launches, "launch", "launches") : null].filter(Boolean).join(" and ");
+  return complete
+    ? `${count(tokens.length, "token", "tokens")}, ${activity} in the last ${bubbleWindowLabel(windowMs)}`
+    : `${count(tokens.length, "token", "tokens")} in the latest ${activity}`;
+}
diff --git a/app/src/lib/launchpad/river.test.ts b/app/src/lib/launchpad/river.test.ts
index 5a04c11..6382395 100644
--- a/app/src/lib/launchpad/river.test.ts
+++ b/app/src/lib/launchpad/river.test.ts
@@ -1,7 +1,7 @@
 import { test } from "node:test";
 import assert from "node:assert/strict";
 import type { FeedItem } from "./queries";
-import { COMPACT_SCALE, RIVER_HEIGHT, RIVER_WINDOW_MS, feedKey, inRiverWindow, initialRiver, layoutRiver, mergeRiver, pruneRiver, riverCoverage, riverSummary, riverUsd, type RiverEntry } from "./river.ts";
+import { COMPACT_SCALE, LABEL_MAX, LOGO_MIN_R, RIVER_HEIGHT, RIVER_WINDOW_MS, feedKey, inRiverWindow, initialRiver, layoutRiver, mergeRiver, pruneRiver, riverCoverage, riverFlow, riverSummary, riverUsd, type RiverEntry } from "./river.ts";
 
 const NOW = Date.parse("2026-10-04T16:48:00Z");
 const iso = (msAgo: number) => new Date(NOW - msAgo).toISOString();
@@ -172,17 +172,17 @@ test("a burst in one lane stacks instead of overlapping, and arrivals never move
   assert.equal(lone.nudge, 0);
 });
 
-test("labels show where they fit: the bigger of two colliding trades wins, small ones wait for hover", () => {
+test("labels show where they fit: the bigger of two colliding trades wins, small ones wait for the hover card", () => {
   const big = swap({ ago: 60_000, usd: 400, symbol: "BIG" });
   const near = swap({ ago: 61_000, usd: 380, symbol: "NEAR", token: "0x5b3c2cd87083ea5c4436525dca6213740405b69e" });
   const tiny = swap({ ago: 10 * 60_000, usd: 8, symbol: "TINY" });
   const marks = only([big, near, tiny]);
-  const by = (s: string) => marks.find((m) => m.label?.startsWith(s))!;
-  assert.equal(by("BIG").label, "BIG $400");
+  const by = (s: string) => marks.find((m) => m.item.symbol === s)!;
+  assert.equal(by("BIG").label, "$400", "the token's image names it; the label is the amount");
   assert.equal(by("BIG").showLabel.wide, true);
   assert.equal(by("NEAR").showLabel.wide, false, "it would overlap BIG");
   assert.equal(by("TINY").showLabel.wide, false, "under the $20 floor");
-  assert.equal(by("TINY").label, "TINY $8.00", "still labelled on hover");
+  assert.equal(by("TINY").label, "$8.00", "the figure is still there for the hover card");
 });
 
 test("launch labels try their side, then the other; a phone shows the mark without the name", () => {
@@ -190,12 +190,44 @@ test("launch labels try their side, then the other; a phone shows the mark witho
   const second = launch({ ago: 61_000, symbol: "TWO", token: "0x0000000000000000000000000000000000000004" });
   const marks = only([first, second]);
   assert.ok(marks.every((m) => m.showLabel.wide), "two launches a second apart both get names");
-  assert.notEqual(marks[0].side, marks[1].side, "one above the line, one below");
+  assert.notEqual(marks[0].place, marks[1].place, "one above the line, one below");
   assert.ok(marks.every((m) => !m.showLabel.compact));
 });
 
 test("labels near the far edge give way rather than spill out of the field", () => {
   const edge = swap({ ago: RIVER_WINDOW_MS - 5_000, usd: 500, symbol: "OLD" });
-  const [m] = only([edge, swap({ ago: 0, usd: 1 })]).filter((x) => x.label?.startsWith("OLD"));
+  const [m] = only([edge, swap({ ago: 0, usd: 1 })]).filter((x) => x.item.symbol === "OLD");
   assert.equal(m.showLabel.wide, false);
 });
+
+test("small trades draw as dots; bigger ones and every launch carry the token's image", () => {
+  const [l, big, small, unpriced] = only([launch({ ago: 10_000 }), swap({ ago: 60_000, usd: 500 }), swap({ ago: 5 * 60_000, usd: 3 }), swap({ ago: 9 * 60_000, usd: null })]);
+  assert.equal(l.logo, true);
+  assert.equal(big.logo, true);
+  assert.ok(big.r >= LOGO_MIN_R);
+  assert.equal(small.logo, false);
+  assert.equal(unpriced.logo, false, "an unpriced trade stays a small dot");
+});
+
+test("a label sits beyond its mark: above a buy, below a sell, never across the line", () => {
+  const [buy, sell] = only([swap({ ago: 60_000, usd: 300, symbol: "UP" }), swap({ ago: 8 * 60_000, buy: false, usd: 300, symbol: "DOWN" })]);
+  assert.equal(buy.showLabel.wide, true);
+  assert.equal(buy.place, "above");
+  assert.equal(sell.showLabel.wide, true);
+  assert.equal(sell.place, "below");
+});
+
+test("only a handful of labels show at rest, and a phone shows a subset of the wide ones in the same places", () => {
+  const busy = Array.from({ length: 14 }, (_, i) => swap({ ago: (i + 1) * 2 * 60_000, buy: i % 2 === 0, usd: 200 + i * 10, symbol: `T${i}`, token: `0x${(i + 1).toString(16).padStart(40, "0")}` }));
+  const marks = only(busy);
+  assert.ok(marks.filter((m) => m.showLabel.wide).length <= LABEL_MAX.wide);
+  assert.ok(marks.filter((m) => m.showLabel.compact).length <= LABEL_MAX.compact);
+  assert.ok(marks.some((m) => m.showLabel.wide), "a quiet field still names its biggest trades");
+  assert.ok(marks.every((m) => !m.showLabel.compact || m.showLabel.wide), "nothing on a phone that the wide layout did not place");
+});
+
+test("the flow meter adds up priced buys and sells and counts the unpriced ones instead of guessing", () => {
+  const flow = riverFlow(entries([swap({ ago: 1_000, usd: 120 }), swap({ ago: 2_000, usd: 30 }), swap({ ago: 3_000, buy: false, usd: 50 }), swap({ ago: 4_000, usd: null }), launch({ ago: 5_000 })]));
+  assert.deepEqual(flow, { bought: 150, sold: 50, unpriced: 1 });
+  assert.deepEqual(riverFlow([]), { bought: 0, sold: 0, unpriced: 0 });
+});
diff --git a/app/src/lib/launchpad/river.ts b/app/src/lib/launchpad/river.ts
index d25cd85..bf0cc9f 100644
--- a/app/src/lib/launchpad/river.ts
+++ b/app/src/lib/launchpad/river.ts
@@ -3,8 +3,8 @@ import type { FeedItem } from "./queries";
 /**
  * The home page river: the last half hour of real launches and trades, newest at the right edge.
  * Time runs along x and is drawn by CSS (every mark drifts at the same speed), so this module only
- * decides what x cannot: which events are in the window, how high each one sits, how big it is,
- * and which labels fit without colliding. Pure, so the layout is testable without a browser.
+ * decides what x cannot: which events are in the window, how far each one stands from the line, how
+ * big it is, and which labels fit without colliding. Pure, so the layout is testable without a browser.
  */
 export const RIVER_WINDOW_MS = 30 * 60_000;
 /** Gridlines, in minutes ago. */
@@ -12,19 +12,33 @@ export const RIVER_TICKS = [5, 10, 15, 20, 25] as const;
 /** Upper bound on marks held at once. The live poll delivers the newest 24 every five seconds. */
 export const RIVER_MAX_ITEMS = 240;
 /** Field heights in px. The compact field (phones) scales marks by COMPACT_SCALE. */
-export const RIVER_HEIGHT = { wide: 220, compact: 150 } as const;
+export const RIVER_HEIGHT = { wide: 240, compact: 168 } as const;
 export const COMPACT_SCALE = 0.75;
-/** A trade must be at least this many dollars to carry a label at rest; smaller ones label on hover. */
+/** A trade must be at least this many dollars to show its amount at rest; smaller ones show it on hover. */
 export const LABEL_MIN_USD = { wide: 20, compact: 90 } as const;
+/** At most this many labels at rest, so the field reads as tokens rather than text. */
+export const LABEL_MAX = { wide: 6, compact: 2 } as const;
+/** A trade at least this big (radius in px, wide field) carries the token's own image; smaller ones are plain dots. */
+export const LOGO_MIN_R = 8;
 
-const LAUNCH_R = 11;
+const LAUNCH_R = 12;
 const CLUSTER_MS = 12_000; // marks closer than this in the same lane stack instead of overlapping
 const MAX_STACK = 4;
-const LABEL_H = 15;
-const CHAR_W = 6.7; // 11px monospace
+const LABEL_H = 16;
+const LABEL_GAP = 6; // clear of the ring around a logo
+const RING = { logo: 3.5, dot: 2 }; // the ring each mark draws past its radius
+const CHAR_W = 6.4; // 10.5px tabular figures
+const NAME_CHAR_W = 7.4; // 11px semibold capitals
+const LABEL_PAD = 12;
+/** Room past now before the field ends (the `.lane` inset in LiveRiver.module.css): the newest mark and its label fit in it. */
+const TRACK_END = 24;
+/** The far edge fades out over this many px (the `.field` mask in LiveRiver.module.css); no label starts inside it. */
+const FADE_W = 56;
 const FUTURE_SKEW_MS = 60_000; // a server clock slightly ahead must not drop the newest trade
 
 export type RiverKind = "launch" | "buy" | "sell";
+/** Where a label sits: beyond its mark (above a buy, below a sell, either side of the line for a launch) or to its left. */
+export type RiverPlace = "above" | "below" | "left";
 /** A feed item plus when this client first saw it. `fresh` marks arrivals after the first paint (they ping). */
 export type RiverEntry = { item: FeedItem; seenAt: number; fresh: boolean };
 export type RiverMark = {
@@ -41,11 +55,12 @@ export type RiverMark = {
   r: number;
   /** Stacked marks fan out to the left by this many px so a burst never hides behind its first trade. */
   nudge: number;
-  /** "WAIFU $54" for a priced trade, the symbol for a launch, null for an unpriced trade. */
+  /** Whether the mark shows the token's image (launches, and trades of LOGO_MIN_R and up) or is a plain dot. */
+  logo: boolean;
+  /** "$54" for a priced trade, the symbol for a launch, null for an unpriced trade. */
   label: string | null;
-  /** Launch labels sit above or below the line. */
-  side: "up" | "down";
-  /** Whether the label shows at rest in each field size. Hidden labels still show on hover. */
+  place: RiverPlace;
+  /** Whether the label shows at rest in each field size. */
   showLabel: { wide: boolean; compact: boolean };
 };
 
@@ -58,9 +73,10 @@ function atMs(item: FeedItem): number {
   return new Date(item.at).getTime();
 }
 
-export function inRiverWindow(item: FeedItem, now: number): boolean {
+/** Inside the window (the river's half hour by default; the bubble map keeps a longer one). */
+export function inRiverWindow(item: FeedItem, now: number, windowMs: number = RIVER_WINDOW_MS): boolean {
   const age = now - atMs(item);
-  return Number.isFinite(age) && age >= -FUTURE_SKEW_MS && age <= RIVER_WINDOW_MS;
+  return Number.isFinite(age) && age >= -FUTURE_SKEW_MS && age <= windowMs;
 }
 
 function ordered(entries: RiverEntry[]): RiverEntry[] {
@@ -68,9 +84,9 @@ function ordered(entries: RiverEntry[]): RiverEntry[] {
 }
 
 /** First paint: everything already in the window, none of it fresh. */
-export function initialRiver(items: readonly FeedItem[], now: number): RiverEntry[] {
+export function initialRiver(items: readonly FeedItem[], now: number, windowMs: number = RIVER_WINDOW_MS): RiverEntry[] {
   const byKey = new Map<string, RiverEntry>();
-  for (const item of items) if (inRiverWindow(item, now)) byKey.set(feedKey(item), { item, seenAt: now, fresh: false });
+  for (const item of items) if (inRiverWindow(item, now, windowMs)) byKey.set(feedKey(item), { item, seenAt: now, fresh: false });
   return ordered([...byKey.values()]);
 }
 
@@ -78,11 +94,11 @@ export function initialRiver(items: readonly FeedItem[], now: number): RiverEntr
  * Fold a poll into the river. Known events keep when they were first seen (so they never jump) but take the
  * newer payload (a price that arrived late); unknown ones are fresh. Anything older than the window drops out.
  */
-export function mergeRiver(current: readonly RiverEntry[], incoming: readonly FeedItem[], now: number): RiverEntry[] {
+export function mergeRiver(current: readonly RiverEntry[], incoming: readonly FeedItem[], now: number, windowMs: number = RIVER_WINDOW_MS): RiverEntry[] {
   const byKey = new Map<string, RiverEntry>();
-  for (const entry of current) if (inRiverWindow(entry.item, now)) byKey.set(feedKey(entry.item), entry);
+  for (const entry of current) if (inRiverWindow(entry.item, now, windowMs)) byKey.set(feedKey(entry.item), entry);
   for (const item of incoming) {
-    if (!inRiverWindow(item, now)) continue;
+    if (!inRiverWindow(item, now, windowMs)) continue;
     const key = feedKey(item);
     const known = byKey.get(key);
     byKey.set(key, known ? { ...known, item } : { item, seenAt: now, fresh: true });
@@ -91,12 +107,12 @@ export function mergeRiver(current: readonly RiverEntry[], incoming: readonly Fe
 }
 
 /** Drop marks that have left the window. Returns the same array when nothing changed. */
-export function pruneRiver(current: RiverEntry[], now: number): RiverEntry[] {
-  const kept = current.filter((entry) => inRiverWindow(entry.item, now));
+export function pruneRiver(current: RiverEntry[], now: number, windowMs: number = RIVER_WINDOW_MS): RiverEntry[] {
+  const kept = current.filter((entry) => inRiverWindow(entry.item, now, windowMs));
   return kept.length === current.length ? current : kept;
 }
 
-/** Dollar labels sized for a 11px mark: "$5.20", "$54", "$1.2K". */
+/** Dollar labels sized for a small pill: "$5.20", "$54", "$1.2K". */
 export function riverUsd(v: number): string {
   if (!Number.isFinite(v) || v <= 0) return "$0";
   if (v < 0.01) return "<$0.01";
@@ -132,6 +148,20 @@ export function riverSummary(entries: readonly RiverEntry[], complete = true): s
   return complete ? `${parts.join(" and ")} in the last 30 minutes` : `Latest ${parts.join(" and ")}`;
 }
 
+/** Dollars bought and sold across the trades held. A trade with no dollar price is counted, never guessed. */
+export function riverFlow(entries: readonly RiverEntry[]): { bought: number; sold: number; unpriced: number } {
+  let bought = 0;
+  let sold = 0;
+  let unpriced = 0;
+  for (const { item } of entries) {
+    if (item.kind !== "swap") continue;
+    if (item.usd === null || !Number.isFinite(item.usd)) unpriced += 1;
+    else if (item.is_buy) bought += item.usd;
+    else sold += item.usd;
+  }
+  return { bought, sold, unpriced };
+}
+
 function kindOf(item: FeedItem): RiverKind {
   return item.kind === "launch" ? "launch" : item.is_buy ? "buy" : "sell";
 }
@@ -143,18 +173,18 @@ function magnitude(item: FeedItem): number {
   return Math.min(4, Math.max(0, Math.log10(1 + Math.max(0, item.usd))));
 }
 
-function hashSide(token: string): "up" | "down" {
+function hashSide(token: string): "above" | "below" {
   let h = 0;
   for (let i = 0; i < token.length; i++) h = (h * 31 + token.charCodeAt(i)) | 0;
-  return (h & 1) === 0 ? "up" : "down";
+  return (h & 1) === 0 ? "above" : "below";
 }
 
 type Rect = { left: number; right: number; top: number; bottom: number };
 const overlaps = (a: Rect, b: Rect) => a.left < b.right && b.left < a.right && a.top < b.bottom && b.top < a.bottom;
 
 /**
- * Lay out every mark. `width` is the field width in px for each size (measured on the client, estimated on the
- * server); it only affects which labels fit, since relative x between two marks is width × Δt / window.
+ * Lay out every mark. `width` is the time track's width in px for each size (measured on the client, estimated on
+ * the server); it only affects which labels fit, since relative x between two marks is width × Δt / window.
  */
 export function layoutRiver(entries: readonly RiverEntry[], width: { wide: number; compact: number }): RiverMark[] {
   const H = RIVER_HEIGHT.wide;
@@ -179,23 +209,26 @@ export function layoutRiver(entries: readonly RiverEntry[], width: { wide: numbe
     const j = stack.get(key) ?? 0;
     const ageAtSeen = Math.max(0, entry.seenAt - at);
     if (kind === "launch") {
-      return { key, item, kind, at, ageAtSeen, fresh: entry.fresh, y: 0.5, r: LAUNCH_R, nudge: j * 8, label: item.symbol, side: hashSide(item.token), showLabel: { wide: false, compact: false } };
+      return { key, item, kind, at, ageAtSeen, fresh: entry.fresh, y: 0.5, r: LAUNCH_R, nudge: j * 8, logo: true, label: item.symbol, place: hashSide(item.token), showLabel: { wide: false, compact: false } };
     }
     const mag = magnitude(item);
-    const r = 3 + mag * 3.2;
-    const off = Math.min(mid - r - 4, Math.max(r + 6, 16 + mag * 20 + j * 9));
+    const r = 4 + mag * 3.6;
+    // the stem's length follows the dollars too, so a whale stands tall even when its dot is half hidden
+    const off = Math.min(mid - r - RING.logo, Math.max(r + 8, 20 + mag * 18 + j * 10));
     const usd = item.kind === "swap" ? item.usd : null;
     return {
       key, item, kind, at, ageAtSeen, fresh: entry.fresh,
       y: (kind === "buy" ? mid - off : mid + off) / H,
       r, nudge: j * 7,
-      label: usd !== null && Number.isFinite(usd) ? `${item.symbol} ${riverUsd(usd)}` : null,
-      side: kind === "buy" ? "up" : "down",
+      logo: r >= LOGO_MIN_R,
+      label: usd !== null && Number.isFinite(usd) ? riverUsd(usd) : null,
+      place: kind === "buy" ? "above" : "below",
       showLabel: { wide: false, compact: false },
     };
   });
 
-  // labels: launches first (newest first), then trades by size; a label shows only where it collides with none shown
+  // labels: launches first (newest first), then trades by size. One shows only where it stays inside the field and
+  // clear of the line, of every other mark and of every label already shown. A phone keeps the wide placement or drops it.
   const newest = marks.reduce((max, m) => Math.max(max, m.at), 0);
   const priority = [...marks].sort((a, b) =>
     (a.kind === "launch" ? 0 : 1) - (b.kind === "launch" ? 0 : 1) ||
@@ -204,29 +237,42 @@ export function layoutRiver(entries: readonly RiverEntry[], width: { wide: numbe
     const W = width[size];
     const scale = size === "compact" ? COMPACT_SCALE : 1;
     const h = RIVER_HEIGHT[size];
+    const xOf = (m: RiverMark) => W * (1 - (newest - m.at) / RIVER_WINDOW_MS) - m.nudge;
+    const bodies = marks.map((m) => {
+      const x = xOf(m);
+      const y = m.y * h;
+      const r = m.r * scale + (m.logo ? RING.logo : RING.dot);
+      return { key: m.key, rect: { left: x - r, right: x + r, top: y - r, bottom: y + r } };
+    });
+    const line: Rect = { left: 0, right: W + TRACK_END, top: h / 2 - 1, bottom: h / 2 + 1 };
     const placed: Rect[] = [];
     for (const m of priority) {
+      if (placed.length >= LABEL_MAX[size]) break;
       if (!m.label) continue;
       if (m.kind !== "launch" && usdOf(m) < LABEL_MIN_USD[size]) continue;
       if (m.kind === "launch" && size === "compact") continue; // a phone shows the mark and the lock; the name is one tap away
-      const x = W * (1 - (newest - m.at) / RIVER_WINDOW_MS) - m.nudge;
+      if (size === "compact" && !m.showLabel.wide) continue;
+      const x = xOf(m);
       const y = m.y * h;
-      const r = m.r * scale;
-      const w = m.label.length * CHAR_W + 8;
-      const candidates: { rect: Rect; side: "up" | "down" }[] = m.kind === "launch"
-        ? [m.side, m.side === "up" ? "down" as const : "up" as const].map((side) => ({
-          side,
-          rect: side === "up"
-            ? { left: x - w / 2, right: x + w / 2, top: y - r - 8 - LABEL_H, bottom: y - r - 8 }
-            : { left: x - w / 2, right: x + w / 2, top: y + r + 10, bottom: y + r + 10 + LABEL_H },
-        }))
-        // a trade's label sits to the left of its dot, pointing back in time, so the newest one is never cut off
-        : [{ side: m.side, rect: { left: x - r - 5 - w, right: x - r - 5, top: y - LABEL_H / 2, bottom: y + LABEL_H / 2 } }];
-      const fit = candidates.find((c) => c.rect.left >= 0 && c.rect.top >= 0 && c.rect.bottom <= h && !placed.some((p) => overlaps(p, c.rect)));
+      const r = m.r * scale + (m.logo ? RING.logo : RING.dot);
+      const w = m.label.length * (m.kind === "launch" ? NAME_CHAR_W : CHAR_W) + LABEL_PAD;
+      const rect = (place: RiverPlace): Rect =>
+        place === "above" ? { left: x - w / 2, right: x + w / 2, top: y - r - LABEL_GAP - LABEL_H, bottom: y - r - LABEL_GAP }
+        : place === "below" ? { left: x - w / 2, right: x + w / 2, top: y + r + LABEL_GAP, bottom: y + r + LABEL_GAP + LABEL_H }
+        // to the left of the mark, pointing back in time, so the newest one is never cut off
+        : { left: x - r - LABEL_GAP - w, right: x - r - LABEL_GAP, top: y - LABEL_H / 2, bottom: y + LABEL_H / 2 };
+      const order: RiverPlace[] = size === "compact" ? [m.place]
+        : m.kind === "launch" ? [m.place, m.place === "above" ? "below" : "above"]
+        : [m.place, "left"];
+      const fit = order.map((place) => ({ place, at: rect(place) })).find(({ at }) =>
+        at.left >= FADE_W && at.right <= W + TRACK_END && at.top >= 0 && at.bottom <= h &&
+        (m.kind === "launch" || !overlaps(line, at)) &&
+        !placed.some((p) => overlaps(p, at)) &&
+        !bodies.some((b) => b.key !== m.key && overlaps(b.rect, at)));
       if (!fit) continue;
-      placed.push(fit.rect);
+      placed.push(fit.at);
       m.showLabel[size] = true;
-      if (size === "wide") m.side = fit.side;
+      if (size === "wide") m.place = fit.place;
     }
   }
   return marks;