From 79627797ff826447f44489f8a64abf1c9535867a Mon Sep 17 00:00:00 2001
From: Vasanth T <vasanth.dev2004@gmail.com>
Date: Tue, 10 Nov 2026 17:30:58 +0530
Subject: [PATCH] feat(bridge): signal board, slide to confirm and a /bridge
 page

A redesign of the bridge panel that leaves the transfer logic alone:
useBridge, the validators and every wallet guard are unchanged.

- signal board: a dot-matrix strip spells the two networks and runs
  lights along the route. What it shows is a pure function of the
  transfer state (lib/bridge/signal.ts); packets move only for a tracked
  pending transfer. Decorative (aria-hidden), canvas, still under
  reduced motion, a dark plate in both themes
- dot numerals (Doto, OFL) for the amount and the estimated output,
  loaded with the lazy panel only
- slide to confirm: for the deposit step alone, a coin can be dragged
  across a rail. Only a release or Enter at the far end confirms
  (lib/bridge/slide.ts); the slide and the button share one guarded
  submit path and the button never goes away
- /bridge: the same panel as a page with the networks, steps, costs and
  limits beside it. The page registers a slot and the header's one
  controller renders into it, so no second bridge hook runs
- shareable links: /bridge?from=&to=&asset=&toAsset= preselects a route
  through the pickers' guarded setters; no amount, ignored whole if any
  value is off (lib/bridge/link.ts)
- sitemap and footer list /bridge; docs/bridge.md section; tests for the
  board states, drag rules, links, the single controller and the shapes
---
 app/src/app/bridge/bridge.module.css          |  27 +++
 app/src/app/bridge/page.tsx                   |  76 +++++++
 app/src/app/metadata.test.ts                  |   1 +
 app/src/components/Footer.tsx                 |   1 +
 .../components/bridge/BridgeDialog.module.css |  11 +-
 app/src/components/bridge/BridgeDialog.tsx    |  88 ++++++--
 app/src/components/bridge/BridgePageSlot.tsx  |  16 ++
 app/src/components/bridge/BridgeProvider.tsx  |  16 +-
 app/src/components/bridge/Signal.module.css   |  46 +++++
 app/src/components/bridge/SignalBoard.tsx     | 101 ++++++++++
 app/src/components/bridge/SlideConfirm.tsx    | 105 ++++++++++
 app/src/components/bridge/bridge-slot.ts      |  25 +++
 app/src/components/bridge/bridge-ui.test.ts   |  60 +++++-
 app/src/components/bridge/dot-font.ts         |   7 +
 app/src/lib/bridge/link.ts                    |  43 ++++
 app/src/lib/bridge/signal.test.ts             | 144 ++++++++++++++
 app/src/lib/bridge/signal.ts                  | 188 ++++++++++++++++++
 app/src/lib/bridge/slide.ts                   |  39 ++++
 app/src/lib/seo.test.ts                       |   2 +-
 app/src/lib/seo.ts                            |   1 +
 docs/bridge.md                                |  13 +-
 21 files changed, 979 insertions(+), 31 deletions(-)
 create mode 100644 app/src/app/bridge/bridge.module.css
 create mode 100644 app/src/app/bridge/page.tsx
 create mode 100644 app/src/components/bridge/BridgePageSlot.tsx
 create mode 100644 app/src/components/bridge/Signal.module.css
 create mode 100644 app/src/components/bridge/SignalBoard.tsx
 create mode 100644 app/src/components/bridge/SlideConfirm.tsx
 create mode 100644 app/src/components/bridge/bridge-slot.ts
 create mode 100644 app/src/components/bridge/dot-font.ts
 create mode 100644 app/src/lib/bridge/link.ts
 create mode 100644 app/src/lib/bridge/signal.test.ts
 create mode 100644 app/src/lib/bridge/signal.ts
 create mode 100644 app/src/lib/bridge/slide.ts

diff --git a/app/src/app/bridge/bridge.module.css b/app/src/app/bridge/bridge.module.css
new file mode 100644
index 00000000..c9dee357
--- /dev/null
+++ b/app/src/app/bridge/bridge.module.css
@@ -0,0 +1,27 @@
+/* /bridge: the panel on the left at a comfortable reading width, the facts beside it; one column on small screens with the panel first. */
+.layout { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); align-items: start; gap: 40px 56px; }
+.facts { display: grid; gap: 32px; min-width: 0; padding-top: 6px; }
+.facts h2 { margin: 0 0 12px; color: var(--color-ink); font-size: 17px; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; }
+
+.networks { display: grid; margin: 0; }
+.networks div { display: grid; grid-template-columns: minmax(96px, 132px) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-line); font-size: 14px; line-height: 1.5; }
+.networks div:last-child { border-bottom: 1px solid var(--color-line); }
+.networks dt { color: var(--color-ink); font-weight: 600; }
+.networks dd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0; color: var(--color-body); }
+.networks dd span { color: var(--color-muted); font-size: 13px; }
+
+/* a real sequence: each step happens after the one before it */
+.steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
+.steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; counter-increment: step; font-size: 14px; line-height: 1.6; }
+.steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--color-line-strong); border-radius: 50%; color: var(--color-ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.steps strong { color: var(--color-ink); font-weight: 600; }
+.steps span { color: var(--color-body); }
+
+.points { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--color-body); font-size: 14px; line-height: 1.6; }
+.points li { position: relative; padding-left: 16px; }
+.points li::before { content: ""; position: absolute; left: 0; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-line-strong); }
+
+@media (max-width: 960px) {
+  .layout { grid-template-columns: minmax(0, 1fr); }
+  .layout > :first-child { max-width: 560px; }
+}
diff --git a/app/src/app/bridge/page.tsx b/app/src/app/bridge/page.tsx
new file mode 100644
index 00000000..f93d02df
--- /dev/null
+++ b/app/src/app/bridge/page.tsx
@@ -0,0 +1,76 @@
+import type { Metadata } from "next";
+import { ArrowLeftRight } from "lucide-react";
+import { pageMetadata } from "@/lib/seo";
+import SectionIntro from "@/components/sections/SectionIntro";
+import shell from "@/components/sections/SectionShell.module.css";
+import BridgePageSlot from "@/components/bridge/BridgePageSlot";
+import { parseBridgeLink } from "@/lib/bridge/link";
+import { BRIDGE_ASSETS, BRIDGE_CHAINS, BRIDGE_DESTINATION_IDS, BRIDGE_FUNDING_IDS } from "@/lib/bridge/types";
+import styles from "./bridge.module.css";
+
+/**
+ * The bridge as a page: the same panel the header opens, with room for the facts beside it. The panel is rendered by
+ * the header's one bridge controller into the slot below (components/bridge/bridge-slot.ts), so this page starts no
+ * second copy. `?from=…&to=…&asset=…&toAsset=…` preselects a route (lib/bridge/link.ts) and nothing more.
+ */
+export const metadata: Metadata = pageMetadata({
+  path: "/bridge",
+  title: "Bridge",
+  description: "Move ETH and dollars between Base, Robinhood Chain and Arc, or fund them from Ethereum, Arbitrum and Optimism. Same wallet, no openlaunch fee.",
+});
+
+const STEPS = [
+  ["Pick a route and an amount", "A live quote appears with the fee, the gas and the least you will receive. Nothing is asked of your wallet yet."],
+  ["Approve, for tokens only", "USDC and USDG need an approval for the exact amount first. It is its own wallet step and moves nothing. ETH skips it."],
+  ["Confirm the deposit", "Slide the coin across or press the button, then confirm in your wallet. This is the one step that sends funds."],
+  ["Watch it arrive", "The board follows the transfer until the provider confirms delivery to the same address on the other network."],
+] as const;
+
+export default async function BridgePage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
+  const link = parseBridgeLink(await searchParams);
+  return (
+    <main className={shell.page}>
+      <SectionIntro
+        eyebrow="Bridge"
+        icon={<ArrowLeftRight />}
+        title="Move funds to where you launch"
+        description="Send ETH and dollars between Base, Robinhood Chain and Arc, or bring them in from Ethereum, Arbitrum and Optimism. They arrive at the same wallet address. openlaunch charges nothing for it."
+      />
+      <div className={styles.layout}>
+        <BridgePageSlot link={link} />
+        <div className={styles.facts}>
+          <section aria-labelledby="bridge-networks">
+            <h2 id="bridge-networks">Networks and tokens</h2>
+            <dl className={styles.networks}>
+              {BRIDGE_DESTINATION_IDS.map((id) => <div key={id}><dt>{BRIDGE_CHAINS[id].name}</dt><dd>{BRIDGE_ASSETS[id].join(", ")}<span>Send and receive</span></dd></div>)}
+              {BRIDGE_FUNDING_IDS.map((id) => <div key={id}><dt>{BRIDGE_CHAINS[id].name}</dt><dd>{BRIDGE_ASSETS[id].join(", ")}<span>Send only</span></dd></div>)}
+            </dl>
+          </section>
+          <section aria-labelledby="bridge-steps">
+            <h2 id="bridge-steps">How a transfer goes</h2>
+            <ol className={styles.steps}>
+              {STEPS.map(([title, body]) => <li key={title}><strong>{title}</strong><span>{body}</span></li>)}
+            </ol>
+          </section>
+          <section aria-labelledby="bridge-costs">
+            <h2 id="bridge-costs">What it costs</h2>
+            <ul className={styles.points}>
+              <li>openlaunch takes no fee on a transfer.</li>
+              <li>The bridge provider, Relay, charges a fee that is shown before you confirm and is already taken out of the amount you receive.</li>
+              <li>Gas on the network you send from is extra.</li>
+              <li>A quote that would cost more than 5% in fees, or lose more than 5% in conversion, is blocked.</li>
+            </ul>
+          </section>
+          <section aria-labelledby="bridge-know">
+            <h2 id="bridge-know">Good to know</h2>
+            <ul className={styles.points}>
+              <li>Funds go from your wallet to Relay&apos;s deposit contract. They never pass through an openlaunch wallet or contract.</li>
+              <li>Relay is a third-party protocol. openlaunch does not operate it and cannot reverse a transfer.</li>
+              <li>A transfer is saved in this browser while it is in progress. Reopen the bridge with the same wallet to pick it up.</li>
+            </ul>
+          </section>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/app/src/app/metadata.test.ts b/app/src/app/metadata.test.ts
index 55231705..b02a4180 100644
--- a/app/src/app/metadata.test.ts
+++ b/app/src/app/metadata.test.ts
@@ -26,6 +26,7 @@ test("every indexable page declares its own canonical path and share card", () =
     ["./feed/page.tsx", "/feed"],
     ["./agents/page.tsx", "/agents"],
     ["./about/page.tsx", "/about"],
+    ["./bridge/page.tsx", "/bridge"],
   ];
   for (const [file, path] of pages) {
     const src = read(file);
diff --git a/app/src/components/Footer.tsx b/app/src/components/Footer.tsx
index 901fe117..8f12e4f4 100644
--- a/app/src/components/Footer.tsx
+++ b/app/src/components/Footer.tsx
@@ -10,6 +10,7 @@ import styles from "./Footer.module.css";
 const EXPLORE = [
   { href: "/", label: "Launchpad" },
   { href: "/rules", label: "How it works" },
+  { href: "/bridge", label: "Bridge" },
   { href: "/about", label: "About openlaunch" },
   { href: "/feed", label: "Community posts" },
   { href: "/me", label: "Your dashboard" },
diff --git a/app/src/components/bridge/BridgeDialog.module.css b/app/src/components/bridge/BridgeDialog.module.css
index 24f2156d..aabd1476 100644
--- a/app/src/components/bridge/BridgeDialog.module.css
+++ b/app/src/components/bridge/BridgeDialog.module.css
@@ -53,7 +53,7 @@
 .reverse { display: inline-flex; align-items: center; justify-content: center; height: 36px; width: 36px; margin-top: 4px; color: var(--color-muted); border: 1px solid var(--color-line); border-radius: 50%; cursor: pointer; transition: transform 180ms cubic-bezier(.16, 1, .3, 1), background 160ms, color 160ms; }
 .amountSection { padding: 23px 0 20px; }
 .amountRow { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
-.amountRow input { display: block; min-width: 0; width: 100%; border: 0; border-radius: 4px; background: transparent; color: var(--color-ink); caret-color: var(--color-brand); font-size: 38px; line-height: 1.35; letter-spacing: -.035em; font-variant-numeric: tabular-nums; font-weight: 500; }
+.amountRow input { display: block; min-width: 0; width: 100%; border: 0; border-radius: 4px; background: transparent; color: var(--color-ink); caret-color: var(--color-brand); font-family: var(--font-dots), var(--font-mono); font-variation-settings: "ROND" 100; font-size: 40px; line-height: 1.3; letter-spacing: 0; font-variant-numeric: tabular-nums; font-weight: 800; }
 .amountRow input::placeholder { color: var(--color-muted); }
 .currency { display: inline-flex; flex-shrink: 0; align-items: center; gap: 5px; font-size: 18px; font-weight: 550; }
 .assetTrigger { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 6px 9px; border: 1px solid var(--color-line-strong); border-radius: 12px; background: var(--color-paper); color: var(--color-ink); font-size: 16px; font-weight: 550; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, transform 120ms ease-out; }
@@ -93,8 +93,8 @@
 .quote { padding: 18px 0 0; border-top: 1px solid var(--color-line); }
 .receiveLabel { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; color: var(--color-body); }
 .estimate { font-size: 11px; color: var(--color-muted); }
-.receiveAmount { margin: 6px 0 18px; font-size: 27px; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
-.receiveAmount span { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: middle; font-size: 16px; color: var(--color-muted); font-weight: 500; }
+.receiveAmount { margin: 6px 0 18px; font-family: var(--font-dots), var(--font-mono); font-variation-settings: "ROND" 100; font-size: 30px; font-weight: 800; line-height: 1.3; letter-spacing: 0; font-variant-numeric: tabular-nums; }
+.receiveAmount span { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: middle; font-family: var(--font-sans); font-size: 16px; color: var(--color-muted); font-weight: 500; }
 .fees { display: grid; gap: 9px; font-size: 12px; }
 .fees > div, .transferDetails > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
 .fees dt, .transferDetails dt { color: var(--color-body); }
@@ -116,6 +116,9 @@
 .primary { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; width: 100%; padding: 12px 16px; border: 1px solid transparent; border-radius: 12px; background: var(--color-brand); color: var(--color-inverse); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 160ms, transform 160ms cubic-bezier(.16, 1, .3, 1); }
 .panel button:disabled { opacity: .55; cursor: not-allowed; }
 .primary:disabled { opacity: 1; background: var(--color-paper); border-color: var(--color-line); color: var(--color-muted); }
+/* beside the slide-to-confirm rail the ordinary button steps back, but stays a full-size, plainly labelled control */
+.secondary { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; width: 100%; margin-top: 8px; padding: 10px 16px; border: 1px solid var(--color-line-strong); border-radius: 12px; background: transparent; color: var(--color-ink); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 160ms ease, transform 160ms cubic-bezier(.16, 1, .3, 1); }
+.secondary:disabled { color: var(--color-muted); cursor: default; }
 .disclaimer { margin-top: 12px; color: var(--color-muted); font-size: 11px; line-height: 1.65; }
 .footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 16px; margin-top: 20px; border-top: 1px solid var(--color-line); font-size: 11px; color: var(--color-muted); }
 .footer a, .explorerLinks a { display: inline-flex; align-items: center; gap: 3px; text-underline-offset: 3px; }
@@ -163,4 +166,4 @@
   .amountRow input { font-size: 34px; }
 }
 @media (max-width: 360px) { .networkTrigger { grid-template-columns: 24px minmax(0, 1fr) 13px; gap: 5px; padding-inline: 4px; } .networkTrigger .networkMark { width: 24px; height: 24px; } .networkTrigger .networkMark img { max-width: 24px; max-height: 24px; } .networkTrigger .networkName { font-size: 13px; } }
-@media (prefers-reduced-motion: reduce) { .panel, .backdrop, .primary, .trigger, .reverse, .networkTrigger, .networkPopup, .assetTrigger { transition: none; } .spinner { animation: none; } }
+@media (prefers-reduced-motion: reduce) { .panel, .backdrop, .primary, .secondary, .trigger, .reverse, .networkTrigger, .networkPopup, .assetTrigger { transition: none; } .spinner { animation: none; } }
diff --git a/app/src/components/bridge/BridgeDialog.tsx b/app/src/components/bridge/BridgeDialog.tsx
index aa742a77..e12872ee 100644
--- a/app/src/components/bridge/BridgeDialog.tsx
+++ b/app/src/components/bridge/BridgeDialog.tsx
@@ -1,19 +1,27 @@
 "use client";
 
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import Image from "next/image";
+import Link from "next/link";
 import { Dialog } from "@base-ui/react/dialog";
 import { Select } from "@base-ui/react/select";
 import { ArrowLeftRight, ArrowRight, ArrowUpRight, Check, ChevronDown, ChevronRight, CircleAlert, CircleDollarSign, Clock3, LoaderCircle, Wallet, X } from "lucide-react";
 import { formatEther, formatUnits, zeroAddress } from "viem";
 import { BRIDGE_ASSETS, BRIDGE_ASSET_NAMES, BRIDGE_CHAINS, BRIDGE_CHAIN_IDS, BRIDGE_DESTINATION_IDS, bridgeCurrency, bridgeTokenAsset, bridgeTransferInputCurrency, isBridgeAssetSupported, isBridgeChainId, isBridgeFundingChain, type BridgeAsset, type BridgeChainId, type BridgeQuoteRejection } from "@/lib/bridge/types";
 import { DISCARD_AFTER_MS } from "@/lib/bridge/client";
+import { bridgeLinkKey, type BridgeLink } from "@/lib/bridge/link";
+import { signalCaption, signalMode } from "@/lib/bridge/signal";
 import { formatFeeWarningPercent } from "@/lib/bridge/fee-display";
 import { shortAddr } from "@/lib/chainPublic";
 import WalletPicker from "../WalletPicker";
 import WalletAvatar from "../WalletAvatar";
 import useBridge from "./useBridge";
+import SignalBoard from "./SignalBoard";
+import SlideConfirm from "./SlideConfirm";
+import { dotFont } from "./dot-font";
 import styles from "./BridgeDialog.module.css";
+import signal from "./Signal.module.css";
 
 type Bridge = ReturnType<typeof useBridge>;
 // Money leaves from any network, funding ones included, but arrives only on a launch chain.
@@ -158,24 +166,55 @@ function FeeLimitNotice({ rejection, inputSymbol, gasSymbol }: { rejection: Brid
   </section>;
 }
 
-export default function BridgeDialog({ open, onOpenChange, restoreFocus }: {
+/**
+ * The bridge's one controller. It shows the panel as the header dialog, or, when the /bridge page has registered its
+ * slot (bridge-slot.ts), inside that page instead: the same hook either way, so a transfer is quoted, sent and tracked
+ * once. `link` is the page's shareable route (lib/bridge/link.ts); it only preselects networks and tokens.
+ */
+export default function BridgeDialog({ open, onOpenChange, restoreFocus, slot = null, link = null }: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   restoreFocus: () => HTMLElement | null;
+  slot?: HTMLElement | null;
+  link?: BridgeLink | null;
 }) {
-  const bridge = useBridge(open);
+  const onPage = slot !== null;
+  const bridge = useBridge(open || onPage);
   const popup = useRef<HTMLDivElement>(null);
   const [connecting, setConnecting] = useState(false);
   const transferring = bridge.tracked !== null;
+  const linkKey = bridgeLinkKey(link);
+  const appliedLink = useRef("");
+
+  // Each link is applied once, through the same guarded setters the pickers use: they refuse while an approval or a
+  // transfer is in progress, so a link can never move a route out from under one.
+  useEffect(() => {
+    if (!link || appliedLink.current === linkKey) return;
+    appliedLink.current = linkKey;
+    bridge.setOriginChainId(link.originChainId);
+    bridge.setDestinationChainId(link.destinationChainId);
+    if (link.originAsset) bridge.setOriginAsset(link.originAsset);
+    if (link.destinationAsset) bridge.setDestinationAsset(link.destinationAsset);
+  }, [bridge, link, linkKey]);
 
   function connect() {
-    onOpenChange(false);
+    if (!onPage) onOpenChange(false);
     setConnecting(true);
   }
 
+  const footer = (
+    <div className={styles.footer}>
+      <a href="https://relay.link" target="_blank" rel="noreferrer">Powered by Relay <ArrowUpRight size={12} aria-hidden /></a>
+      {onPage ? null : <Link href="/bridge" onClick={() => onOpenChange(false)}>Open full page</Link>}
+      <span>0 Openlaunch fee</span>
+    </div>
+  );
+  const content = transferring ? <Transfer bridge={bridge} /> : <BridgeForm bridge={bridge} connect={connect} />;
+
   return (
     <>
-      <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      {onPage ? createPortal(<section className={signal.pagePanel} aria-label="Bridge">{content}{footer}</section>, slot) : null}
+      <Dialog.Root open={open && !onPage} onOpenChange={onOpenChange}>
         <Dialog.Portal>
           <Dialog.Backdrop className={styles.backdrop} />
           <Dialog.Popup ref={popup} initialFocus={popup} finalFocus={connecting ? false : restoreFocus} className={styles.panel} onKeyDown={(event) => { if (event.key === "Escape") event.stopPropagation(); }}>
@@ -184,15 +223,12 @@ export default function BridgeDialog({ open, onOpenChange, restoreFocus }: {
               <Dialog.Close className={styles.close} aria-label="Close bridge"><X size={19} aria-hidden /></Dialog.Close>
             </div>
             <Dialog.Description className={styles.description}>{transferring ? "Your transfer, from departure to arrival." : "Same wallet. A new network."}</Dialog.Description>
-            {transferring ? <Transfer bridge={bridge} /> : <BridgeForm bridge={bridge} connect={connect} />}
-            <div className={styles.footer}>
-              <a href="https://relay.link" target="_blank" rel="noreferrer">Powered by Relay <ArrowUpRight size={12} aria-hidden /></a>
-              <span>0 Openlaunch fee</span>
-            </div>
+            {content}
+            {footer}
           </Dialog.Popup>
         </Dialog.Portal>
       </Dialog.Root>
-      {connecting ? <WalletPicker onClose={() => { setConnecting(false); onOpenChange(true); }} /> : null}
+      {connecting ? <WalletPicker onClose={() => { setConnecting(false); if (!onPage) onOpenChange(true); }} /> : null}
     </>
   );
 }
@@ -219,14 +255,20 @@ export function BridgeForm({ bridge: b, connect }: { bridge: Bridge; connect: ()
     : reviewing && b.approvalRequired ? `Approve ${nativeAmount(b.amount)} ${inputCurrency.symbol}`
     : reviewing ? `Bridge to ${destination.name}` : b.quoteError ? "Retry quote" : !b.canQuote ? "Enter an amount" : "Get quote";
   const error = (!b.quoteRejection && b.quoteError) || b.error || b.storageError || b.approvalError;
+  const mode = signalMode({ phase: b.phase, tracked: false, approvalActive: b.approvalBusy, quoteLoading: b.quoteLoading, reviewing, quoteExpired: needsRefresh, blocked: !!b.quoteRejection || !!b.quoteError });
+  // the deposit, and only the deposit, can also be confirmed by sliding: never an approval, a quote or a refresh
+  const slideReady = !!b.address && reviewing && !b.approvalRequired && !loading && !b.allowanceLoading;
+
+  // the button and the slide share this one path, with the same guards
+  function submit() {
+    if (!b.address) { connect(); return; }
+    if (loading || b.allowanceLoading || !b.canQuote) return;
+    void (reviewing ? b.approvalRequired ? b.approve() : b.confirm() : b.requestQuote());
+  }
 
   return (
-    <form onSubmit={(event) => {
-      event.preventDefault();
-      if (!b.address) { connect(); return; }
-      if (loading || b.allowanceLoading || !b.canQuote) return;
-      void (reviewing ? b.approvalRequired ? b.approve() : b.confirm() : b.requestQuote());
-    }}>
+    <form className={dotFont.variable} onSubmit={(event) => { event.preventDefault(); submit(); }}>
+      <SignalBoard from={b.originChainId} to={b.destinationChainId} mode={mode} caption={signalCaption(mode, destination.name)} />
       <div className={styles.route}>
         <NetworkSelect label="From" chain={b.originChainId} disabled={locked} onChange={b.setOriginChainId} />
         <button type="button" className={styles.reverse} aria-label={b.canReverse ? `Reverse route: ${destination.name} to ${origin.name}` : `${origin.name} only sends funds here`} title={b.canReverse ? undefined : `${origin.name} only sends funds here`} disabled={locked || !b.canReverse} onClick={b.reverseRoute}><ArrowLeftRight size={18} aria-hidden /></button>
@@ -271,7 +313,8 @@ export function BridgeForm({ bridge: b, connect }: { bridge: Bridge; connect: ()
 
       {b.address ? <Recipient address={b.address} /> : null}
       {error ? <p className={styles.error} role="alert"><CircleAlert size={16} aria-hidden /><span>{error}</span></p> : null}
-      <button type="submit" className={styles.primary} disabled={loading || b.allowanceLoading || (!!b.address && !b.canQuote)}>
+      {slideReady ? <SlideConfirm key={b.quote!.requestId} label={`Slide to bridge to ${destination.name}`} front={<AssetMark asset={inputCurrency.symbol} size={26} />} back={convertsAsset ? <AssetMark asset={outputCurrency.symbol} size={26} /> : null} onConfirm={submit} /> : null}
+      <button type="submit" className={slideReady ? styles.secondary : styles.primary} disabled={loading || b.allowanceLoading || (!!b.address && !b.canQuote)}>
         {loading ? <LoaderCircle size={17} className={styles.spinner} aria-hidden /> : !b.address ? <Wallet size={17} aria-hidden /> : null}
         {b.address ? label : "Connect wallet"}
         {!loading && b.address ? <ArrowRight size={17} aria-hidden /> : null}
@@ -291,7 +334,9 @@ function ApprovalProgress({ bridge: b }: { bridge: Bridge }) {
   const needsAttention = uncertain || (!!health && health.kind !== "waiting");
   const [hash, setHash] = useState("");
   const [verifying, setVerifying] = useState(false);
-  return <div className={styles.transfer}>
+  const mode = needsAttention ? "attention" : "approval";
+  return <div className={`${styles.transfer} ${dotFont.variable}`}>
+    <SignalBoard from={approval.chainId} to={null} mode={mode} caption={signalCaption(mode, approvalChain.name)} />
     <div className={styles.transferRoute}><NetworkMark chain={approval.chainId} /><span>{approvalSymbol} approval on {approvalChain.name}</span></div>
     <div className={styles.statusHeading} role="status">
       <span className={styles.statusIcon}>{needsAttention ? <CircleAlert size={26} aria-hidden /> : <LoaderCircle size={26} className={styles.spinner} aria-hidden />}</span>
@@ -338,8 +383,11 @@ export function Transfer({ bridge: b }: { bridge: Bridge }) {
   const title = success ? `Arrived on ${destination.name}` : refund ? "Relay reports a refund" : reverted ? "The deposit reverted" : failed ? "Transfer needs attention" : uncertain ? "Checking your transfer" : waitingForWallet ? "Check your wallet" : "Your transfer is on its way";
   const detail = success ? `Relay has confirmed ${outputCurrency.symbol} delivery to your receiving wallet.` : refund ? "Check your wallets on both networks and Relay’s transfer details before trying again." : reverted ? `The source network rejected the deposit. Your ${inputCurrency.symbol} was not bridged; network gas was still charged.` : failed ? "Relay couldn’t complete this transfer. Check the transfer details for recovery before sending again." : uncertain ? "The wallet response was interrupted. Don’t send again while we check whether your deposit was submitted." : waitingForWallet ? "Review the network, amount and transaction in your wallet. Nothing moves without your confirmation." : "You can close this panel. Reopen Bridge with this wallet to check its status.";
 
+  const mode = signalMode({ phase: b.phase, tracked: true, approvalActive: false, quoteLoading: false, reviewing: false, quoteExpired: false, blocked: false });
+
   return (
-    <div className={styles.transfer}>
+    <div className={`${styles.transfer} ${dotFont.variable}`}>
+      <SignalBoard from={transfer.originChainId} to={transfer.destinationChainId} mode={mode} caption={signalCaption(mode, destination.name)} />
       <div className={styles.transferRoute}><NetworkMark chain={transfer.originChainId} /><span>{origin.name}</span><ArrowRight size={16} aria-hidden /><NetworkMark chain={transfer.destinationChainId} /><span>{destination.name}</span></div>
       <div className={styles.statusHeading} role="status">
         <span className={`${styles.statusIcon} ${success ? styles.success : ""}`}>{success ? <Check size={26} aria-hidden /> : terminal || uncertain ? <CircleAlert size={26} aria-hidden /> : <LoaderCircle size={26} className={styles.spinner} aria-hidden />}</span>
diff --git a/app/src/components/bridge/BridgePageSlot.tsx b/app/src/components/bridge/BridgePageSlot.tsx
new file mode 100644
index 00000000..692453fb
--- /dev/null
+++ b/app/src/components/bridge/BridgePageSlot.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { useCallback } from "react";
+import type { BridgeLink } from "@/lib/bridge/link";
+import { bridgeSlot } from "./bridge-slot";
+import styles from "./Signal.module.css";
+
+/** The /bridge page's place for the panel. The header's bridge controller renders into it (bridge-slot.ts). */
+export default function BridgePageSlot({ link }: { link: BridgeLink | null }) {
+  const attach = useCallback((node: HTMLDivElement | null) => (node ? bridgeSlot.mount(node, link) : undefined), [link]);
+  return (
+    <div ref={attach} className={styles.pageSlot}>
+      <p className={styles.pageSlotWaiting}>Loading the bridge…</p>
+    </div>
+  );
+}
diff --git a/app/src/components/bridge/BridgeProvider.tsx b/app/src/components/bridge/BridgeProvider.tsx
index 5e35c041..68381a9b 100644
--- a/app/src/components/bridge/BridgeProvider.tsx
+++ b/app/src/components/bridge/BridgeProvider.tsx
@@ -1,19 +1,29 @@
 "use client";
 
 import dynamic from "next/dynamic";
-import { createContext, useCallback, useContext, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useRef, useState, useSyncExternalStore } from "react";
 import { ArrowLeftRight } from "lucide-react";
+import { bridgeSlot } from "./bridge-slot";
 import styles from "./BridgeDialog.module.css";
 
 const BridgeDialog = dynamic(() => import("./BridgeDialog"), { ssr: false });
 const BridgeContext = createContext<(() => void) | null>(null);
 
-/** Mounted once for both navigation variants; closing the panel does not stop tracking. */
+/** Mounted once for both navigation variants and for the /bridge page; closing the panel does not stop tracking. */
 export function BridgeProvider({ children }: { children: React.ReactNode }) {
   const [activated, setActivated] = useState(false);
   const [open, setOpen] = useState(false);
   const trigger = useRef<HTMLElement | null>(null);
+  // the /bridge page's slot: while it exists the panel lives in the page, and the dialog stays shut
+  const slot = useSyncExternalStore(bridgeSlot.subscribe, bridgeSlot.getSnapshot, bridgeSlot.getServerSnapshot);
+  if (slot.node && open) setOpen(false);
   const show = useCallback(() => {
+    const page = bridgeSlot.getSnapshot().node;
+    if (page) {
+      page.scrollIntoView({ block: "nearest" });
+      page.querySelector<HTMLElement>("#bridge-amount")?.focus({ preventScroll: true });
+      return;
+    }
     trigger.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     setActivated(true);
     setOpen(true);
@@ -25,7 +35,7 @@ export function BridgeProvider({ children }: { children: React.ReactNode }) {
   return (
     <BridgeContext.Provider value={show}>
       {children}
-      {activated ? <BridgeDialog open={open} onOpenChange={setOpen} restoreFocus={restoreFocus} /> : null}
+      {activated || slot.node ? <BridgeDialog open={open} onOpenChange={setOpen} restoreFocus={restoreFocus} slot={slot.node} link={slot.link} /> : null}
     </BridgeContext.Provider>
   );
 }
diff --git a/app/src/components/bridge/Signal.module.css b/app/src/components/bridge/Signal.module.css
new file mode 100644
index 00000000..de2da574
--- /dev/null
+++ b/app/src/components/bridge/Signal.module.css
@@ -0,0 +1,46 @@
+/* The bridge's "signal" pieces: the LED board, the slide-to-confirm rail and the full-page panel.
+   The board is a dark object in both themes (an LED strip is not a light-mode surface), so its plate and lights are
+   literal colours; everything around it follows the site tokens. */
+
+.board { margin-bottom: 18px; padding: 10px 10px 8px; border: 1px solid #1c1f27; border-radius: 14px; background: #050608; }
+.boardRuler { display: block; height: 0; }
+.boardCanvas { display: block; width: 100%; }
+.caption { margin: 6px 2px 0; min-height: 20px; overflow: hidden; color: #6d9dff; font-family: var(--font-dots), var(--font-mono); font-variation-settings: "ROND" 100; font-size: 13px; font-weight: 800; line-height: 20px; text-align: center; white-space: nowrap; }
+.caption[data-mode="idle"], .caption[data-mode="expired"] { color: #7b8494; }
+.caption[data-mode="arrived"] { color: #3ddc97; }
+.caption[data-mode="refund"], .caption[data-mode="attention"], .caption[data-mode="blocked"] { color: #fbbf24; }
+.caption span { display: inline-block; animation: roll 360ms cubic-bezier(.16, 1, .3, 1) both; }
+@keyframes roll { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: none; } }
+
+.slide { margin-top: 4px; }
+.slideTrack { position: relative; height: 64px; border: 1px solid var(--color-line-strong); border-radius: 32px; background: var(--color-paper); touch-action: none; user-select: none; -webkit-user-select: none; }
+.slideTrack[data-armed] { border-color: var(--color-brand); }
+.slideFill { position: absolute; inset: 0 auto 0 0; border-radius: 32px; background: linear-gradient(90deg, var(--color-brand-soft), color-mix(in srgb, var(--color-brand) 55%, var(--color-brand-soft))); }
+.slideFill[data-settle] { transition: width 420ms cubic-bezier(.34, 1.4, .64, 1); }
+.slideLabel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-left: 58px; color: var(--color-body); font-size: 14px; font-weight: 600; pointer-events: none; }
+.coin { position: absolute; top: 5px; left: 6px; z-index: 1; width: 52px; height: 52px; border-radius: 50%; cursor: grab; perspective: 360px; }
+.coin[data-dragging] { cursor: grabbing; }
+.coin[data-settle] { transition: transform 420ms cubic-bezier(.34, 1.4, .64, 1); }
+.coin:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }
+.coinBody { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
+.coin[data-settle] .coinBody { transition: transform 420ms cubic-bezier(.34, 1.4, .64, 1); }
+.coinFace { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden; background: conic-gradient(from var(--sheen, 20deg), #f3f6fb, #8b96ad, #ffffff, #69738a, #dfe5ef, #9aa5bb, #f3f6fb); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .6), 0 4px 14px rgb(0 0 0 / .35); color: #1a2030; }
+.coinFace::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #0c0e13; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); }
+.coinFace > * { position: relative; color: #e8ecf4; }
+.coinBack { transform: rotateY(180deg); }
+.slideHint { margin: 8px 2px 0; min-height: 18px; color: var(--color-muted); font-size: 12px; line-height: 1.5; }
+
+/* the full-page panel, rendered into /bridge by the header's controller */
+.pageSlot { min-width: 0; scroll-margin-top: 104px; }
+.pageSlotWaiting { display: grid; place-items: center; min-height: 420px; border: 1px solid var(--color-line); border-radius: 20px; background: var(--color-card); color: var(--color-muted); font-size: 13px; }
+.pageSlotWaiting:not(:only-child) { display: none; }
+.pagePanel { min-width: 0; padding: 24px 26px 18px; border: 1px solid var(--color-line); border-radius: 20px; background: var(--color-card); color: var(--color-ink); }
+
+@media (max-width: 520px) {
+  .pagePanel { padding: 20px 18px 16px; border-radius: 18px; }
+  .slideLabel { font-size: 13px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .caption span { animation: none; }
+  .slideFill[data-settle], .coin[data-settle], .coin[data-settle] .coinBody { transition: none; }
+}
diff --git a/app/src/components/bridge/SignalBoard.tsx b/app/src/components/bridge/SignalBoard.tsx
new file mode 100644
index 00000000..bfba6376
--- /dev/null
+++ b/app/src/components/bridge/SignalBoard.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { SIGNAL_CODES, SIGNAL_COLORS, SIGNAL_OK, SIGNAL_ROWS, SIGNAL_WARN, codeLights, routeLight, signalLayout, signalPitch, type SignalMode, type SignalPitch } from "@/lib/bridge/signal";
+import type { BridgeChainId } from "@/lib/bridge/types";
+import styles from "./Signal.module.css";
+
+type Rgb = readonly [number, number, number];
+const rgb = (c: Rgb) => `rgb(${c[0]}, ${c[1]}, ${c[2]})`;
+const blend = (a: Rgb, b: Rgb, t: number): Rgb => [Math.round(a[0] + (b[0] - a[0]) * t), Math.round(a[1] + (b[1] - a[1]) * t), Math.round(a[2] + (b[2] - a[2]) * t)];
+
+/**
+ * The bridge's LED strip: the two networks spelled in dots and a row of route lights between them. Decorative
+ * (aria-hidden): what it shows is computed from the transfer state in lib/bridge/signal.ts, and the panel's own text
+ * says the same thing in words. Drawn on a canvas, animated only while mounted and never under reduced motion.
+ */
+export default function SignalBoard({ from, to, mode, caption }: { from: BridgeChainId; to: BridgeChainId | null; mode: SignalMode; caption: string }) {
+  const canvas = useRef<HTMLCanvasElement>(null);
+  // the board's width is read from a zero-height sibling: sizing the canvas must not re-trigger its own observer
+  const ruler = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    const node = canvas.current;
+    const rule = ruler.current;
+    const context = node?.getContext("2d");
+    if (!node || !rule || !context) return;
+    const still = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const started = performance.now();
+    let frame = 0;
+    let width = 0;
+    let pitch = 6;
+    let chosen: SignalPitch | null = null;
+    let inset = 0;
+    let layout = signalLayout(70, SIGNAL_CODES[from], to === null ? null : SIGNAL_CODES[to]);
+
+    const measure = () => {
+      const next = rule.clientWidth;
+      if (!next || next === width) return;
+      width = next;
+      chosen = signalPitch(width, chosen);
+      pitch = chosen.pitch;
+      const cols = Math.floor(width / pitch);
+      inset = (width - cols * pitch) / 2;
+      layout = signalLayout(cols, SIGNAL_CODES[from], to === null ? null : SIGNAL_CODES[to]);
+      const ratio = Math.min(2, window.devicePixelRatio || 1);
+      const height = SIGNAL_ROWS * pitch;
+      node.style.height = `${height}px`;
+      node.width = Math.round(width * ratio);
+      node.height = Math.round(height * ratio);
+      context.setTransform(ratio, 0, 0, ratio, 0, 0);
+    };
+
+    const paint = (now: number) => {
+      if (!width) return;
+      const seconds = still ? 0 : (now - started) / 1000;
+      const radius = pitch * 0.3;
+      const dot = (x: number, y: number, size: number) => { context.beginPath(); context.arc(inset + x * pitch + pitch / 2, y * pitch + pitch / 2, size, 0, 6.2832); context.fill(); };
+      context.clearRect(0, 0, width, SIGNAL_ROWS * pitch);
+      // the unlit grid breathes slightly so the board reads as powered
+      context.fillStyle = "rgb(142, 162, 200)";
+      for (let y = 0; y < layout.rows; y++) for (let x = 0; x < layout.cols; x++) {
+        context.globalAlpha = 0.07 + (still ? 0 : 0.03 * Math.sin(x * 0.33 + y * 0.52 + seconds * 1.1));
+        dot(x, y, radius * 0.8);
+      }
+      const codes = codeLights(mode, seconds);
+      const fromColor = SIGNAL_COLORS[from];
+      const chainTo = to === null ? fromColor : SIGNAL_COLORS[to];
+      context.fillStyle = rgb(fromColor);
+      for (const [x, y] of layout.from) { context.globalAlpha = Math.min(1, Math.max(0, codes.from)) * (still ? 1 : 0.9 + 0.1 * Math.sin(seconds * 2.2 + x * 0.5)); dot(x, y, radius); }
+      context.fillStyle = rgb(codes.toTone === "ok" ? SIGNAL_OK : codes.toTone === "warn" ? SIGNAL_WARN : chainTo);
+      context.globalAlpha = Math.min(1, Math.max(0, codes.to));
+      for (const [x, y] of layout.to) dot(x, y, radius);
+      const count = layout.path.length;
+      layout.path.forEach(([x, y], index) => {
+        const light = routeLight(mode, seconds, index, count);
+        context.fillStyle = rgb(light.tone === "ok" ? SIGNAL_OK : light.tone === "warn" ? SIGNAL_WARN : blend(fromColor, chainTo, count > 1 ? index / (count - 1) : 0));
+        context.globalAlpha = light.level;
+        dot(x, y, radius * (1 + 0.3 * light.level));
+      });
+      context.globalAlpha = 1;
+    };
+
+    const loop = (now: number) => { paint(now); frame = requestAnimationFrame(loop); };
+    const observer = new ResizeObserver(() => { measure(); if (still) paint(started); });
+    observer.observe(rule);
+    measure();
+    if (still) paint(started);
+    else frame = requestAnimationFrame(loop);
+    return () => { cancelAnimationFrame(frame); observer.disconnect(); };
+  }, [from, to, mode]);
+
+  return (
+    <div className={styles.board} aria-hidden="true">
+      <span ref={ruler} className={styles.boardRuler} />
+      <canvas ref={canvas} className={styles.boardCanvas} />
+      <p className={styles.caption} data-mode={mode}>
+        {[...caption].map((character, index) => <span key={`${caption}:${index}`} style={{ animationDelay: `${index * 16}ms` }}>{character === " " ? " " : character}</span>)}
+      </p>
+    </div>
+  );
+}
diff --git a/app/src/components/bridge/SlideConfirm.tsx b/app/src/components/bridge/SlideConfirm.tsx
new file mode 100644
index 00000000..275f7cec
--- /dev/null
+++ b/app/src/components/bridge/SlideConfirm.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { useEffect, useRef, useState, type CSSProperties, type KeyboardEvent, type PointerEvent, type ReactNode } from "react";
+import { SLIDE_CONFIRM_AT, slideKey, slideProgress, slideRelease, slideTurns } from "@/lib/bridge/slide";
+import styles from "./Signal.module.css";
+
+const COIN = 52;
+const PAD = 6;
+
+/**
+ * Slide to confirm: drag the coin to the far end and let go. The rules live in lib/bridge/slide.ts: only a release (or
+ * Enter) at the end calls `onConfirm`; letting go anywhere else puts the coin back and requests nothing. It is an
+ * extra way to confirm, never the only one: the form keeps its ordinary button beside it. The coin shows the token
+ * being sent and turns to the token received when the two differ.
+ */
+export default function SlideConfirm({ label, front, back, onConfirm }: { label: string; front: ReactNode; back: ReactNode | null; onConfirm: () => void }) {
+  const track = useRef<HTMLDivElement>(null);
+  const grab = useRef(0);
+  // the live drag, read by the handlers: a quick flick can let go before React has re-rendered the last move
+  const live = useRef({ dragging: false, progress: 0 });
+  const [travel, setTravel] = useState(0);
+  const [progress, setProgress] = useState(0);
+  const [dragging, setDragging] = useState(false);
+  const [putBack, setPutBack] = useState(false);
+
+  useEffect(() => {
+    const node = track.current;
+    if (!node) return;
+    const observer = new ResizeObserver(() => setTravel(Math.max(0, node.clientWidth - COIN - PAD * 2)));
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  const armed = progress >= SLIDE_CONFIRM_AT;
+  const offset = progress * travel;
+  const turn = back ? Math.min(1, Math.max(0, (progress - 0.35) / 0.3)) * 180 : 0;
+
+  function place(value: number) {
+    live.current.progress = value;
+    setProgress(value);
+  }
+  function down(event: PointerEvent<HTMLDivElement>) {
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    // capture keeps the drag alive when the pointer leaves the coin; a wallet webview that refuses it still drags inside the coin
+    try { event.currentTarget.setPointerCapture(event.pointerId); } catch { /* not capturable */ }
+    grab.current = event.clientX - event.currentTarget.getBoundingClientRect().left;
+    live.current = { dragging: true, progress: live.current.progress };
+    setDragging(true);
+    setPutBack(false);
+  }
+  function move(event: PointerEvent<HTMLDivElement>) {
+    if (!live.current.dragging || !track.current) return;
+    place(slideProgress(event.clientX, track.current.getBoundingClientRect().left + PAD, grab.current, travel));
+  }
+  function up() {
+    if (!live.current.dragging) return;
+    const at = live.current.progress;
+    live.current.dragging = false;
+    setDragging(false);
+    if (slideRelease(at) === "confirm") { place(1); onConfirm(); return; }
+    setPutBack(at > 0);
+    place(0);
+  }
+  function cancel() {
+    if (!live.current.dragging) return;
+    live.current.dragging = false;
+    setDragging(false);
+    place(0);
+  }
+  function key(event: KeyboardEvent<HTMLDivElement>) {
+    const next = slideKey(live.current.progress, event.key);
+    if (!next) return;
+    event.preventDefault();
+    setPutBack(false);
+    if (next.confirm) onConfirm();
+    else place(next.progress);
+  }
+
+  const hint = armed ? (dragging ? "Let go to confirm." : "Press Enter to confirm.")
+    : dragging ? "Keep going. Let go now and nothing is sent."
+    : putBack ? "Nothing was sent. Drag all the way across to confirm."
+    : progress > 0 ? "Keep going with the right arrow, then press Enter."
+    : "Drag the coin across to confirm, or use the button below.";
+
+  return (
+    <div className={styles.slide}>
+      <div ref={track} className={styles.slideTrack} data-armed={armed || undefined}>
+        <span className={styles.slideFill} data-settle={!dragging || undefined} style={{ width: offset + COIN + PAD * 2 }} />
+        <span className={styles.slideLabel} style={{ opacity: Math.max(0, 1 - progress * 2.4) }}>{label}</span>
+        <div
+          role="slider" tabIndex={0} aria-label={label} aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(progress * 100)}
+          aria-valuetext={armed ? "At the end. Press Enter to confirm." : `${Math.round(progress * 100)} percent across`}
+          className={styles.coin} data-settle={!dragging || undefined} data-dragging={dragging || undefined} style={{ transform: `translateX(${offset}px)` }}
+          onPointerDown={down} onPointerMove={move} onPointerUp={up} onPointerCancel={cancel} onKeyDown={key}
+        >
+          <span className={styles.coinBody} style={{ transform: `rotateZ(${progress * slideTurns(travel, COIN) * 360}deg) rotateY(${turn}deg)`, "--sheen": `${20 + progress * 540}deg` } as CSSProperties}>
+            <span className={`${styles.coinFace} ${styles.coinFront}`}>{front}</span>
+            {back ? <span className={`${styles.coinFace} ${styles.coinBack}`}>{back}</span> : null}
+          </span>
+        </div>
+      </div>
+      <p className={styles.slideHint} aria-live="polite">{hint}</p>
+    </div>
+  );
+}
diff --git a/app/src/components/bridge/bridge-slot.ts b/app/src/components/bridge/bridge-slot.ts
new file mode 100644
index 00000000..b45f0377
--- /dev/null
+++ b/app/src/components/bridge/bridge-slot.ts
@@ -0,0 +1,25 @@
+import type { BridgeLink } from "@/lib/bridge/link";
+
+/**
+ * Where the full-page bridge goes. The bridge has one controller (BridgeProvider, in the header) so a transfer is
+ * tracked once however many places show it. The /bridge page does not start a second one: it registers an empty
+ * element here and the controller renders the panel into it. A tiny module-level store, because the page and the
+ * header are separate React trees.
+ */
+export type BridgeSlot = { node: HTMLElement | null; link: BridgeLink | null };
+const EMPTY: BridgeSlot = { node: null, link: null };
+let current: BridgeSlot = EMPTY;
+const listeners = new Set<() => void>();
+const emit = () => { for (const listener of listeners) listener(); };
+
+export const bridgeSlot = {
+  subscribe(listener: () => void) { listeners.add(listener); return () => { listeners.delete(listener); }; },
+  getSnapshot: () => current,
+  getServerSnapshot: () => EMPTY,
+  /** Registers the page's element; the returned function withdraws it (only if it is still the registered one). */
+  mount(node: HTMLElement, link: BridgeLink | null) {
+    current = { node, link };
+    emit();
+    return () => { if (current.node === node) { current = EMPTY; emit(); } };
+  },
+};
diff --git a/app/src/components/bridge/bridge-ui.test.ts b/app/src/components/bridge/bridge-ui.test.ts
index 31f21dd8..e005bc1f 100644
--- a/app/src/components/bridge/bridge-ui.test.ts
+++ b/app/src/components/bridge/bridge-ui.test.ts
@@ -29,10 +29,66 @@ test("bridge keeps one lazily loaded controller across desktop/mobile and dismis
   assert.match(header, /<BridgeButton compact \/>/);
   assert.match(header, /<BridgeButton block onOpen=\{\(\) => setOpen\(false\)\} \/>/);
   assert.match(provider, /dynamic\(\(\) => import\("\.\/BridgeDialog"\)/);
-  assert.match(provider, /activated \? <BridgeDialog/);
+  // mounted on first use or when the /bridge page registers its slot, and kept mounted after either
+  assert.match(provider, /activated \|\| slot\.node \? <BridgeDialog open=\{open\} onOpenChange=\{setOpen\} restoreFocus=\{restoreFocus\} slot=\{slot\.node\} link=\{slot\.link\} \/>/);
   assert.doesNotMatch(provider, /open \? <BridgeDialog/);
 });
 
+test("the /bridge page shows the same controller's panel instead of starting a second one", () => {
+  const page = read("../../app/bridge/page.tsx");
+  const slot = read("./BridgePageSlot.tsx");
+  const store = read("./bridge-slot.ts");
+  // the page only registers an element; nothing in it or its slot runs the bridge hook
+  assert.match(page, /<BridgePageSlot link=\{link\} \/>/);
+  assert.match(page, /const link = parseBridgeLink\(await searchParams\);/);
+  assert.doesNotMatch(page + slot + store, /useBridge|BridgeDialog|sendTransaction/);
+  assert.match(slot, /bridgeSlot\.mount\(node, link\)/);
+  assert.match(store, /return \(\) => \{ if \(current\.node === node\)/, "a stale page cannot withdraw a newer page's slot");
+  assert.equal((panel.match(/useBridge\(/g) ?? []).length, 1, "one hook call serves the dialog and the page");
+  assert.match(panel, /const bridge = useBridge\(open \|\| onPage\);/);
+  assert.match(panel, /onPage \? createPortal\(<section className=\{signal\.pagePanel\} aria-label="Bridge">\{content\}\{footer\}<\/section>, slot\) : null/);
+  assert.match(panel, /<Dialog\.Root open=\{open && !onPage\}/, "the dialog never opens over the page's own panel");
+  assert.match(provider, /if \(slot\.node && open\) setOpen\(false\);/);
+  assert.match(provider, /page\.querySelector<HTMLElement>\("#bridge-amount"\)\?\.focus/);
+  // a link preselects through the pickers' guarded setters, once, and carries no amount
+  assert.match(panel, /if \(!link \|\| appliedLink\.current === linkKey\) return;/);
+  assert.match(panel, /bridge\.setOriginChainId\(link\.originChainId\);\s+bridge\.setDestinationChainId\(link\.destinationChainId\);/);
+  assert.doesNotMatch(panel, /link\.amount|bridge\.setAmount\(link/);
+});
+
+test("the signal board is decorative and sliding confirms the deposit only", () => {
+  const board = read("./SignalBoard.tsx");
+  const slide = read("./SlideConfirm.tsx");
+  const signalCss = read("./Signal.module.css");
+  // the board says nothing a screen reader needs: the panel's own status text carries it
+  assert.match(board, /<div className=\{styles\.board\} aria-hidden="true">/);
+  assert.match(board, /window\.matchMedia\("\(prefers-reduced-motion: reduce\)"\)\.matches/);
+  assert.match(board, /if \(still\) paint\(started\);\s+else frame = requestAnimationFrame\(loop\);/);
+  assert.match(board, /return \(\) => \{ cancelAnimationFrame\(frame\); observer\.disconnect\(\); \};/);
+  assert.match(board, /observer\.observe\(rule\);/, "sizing the canvas never re-triggers its own observer");
+  assert.doesNotMatch(board + slide, /setInterval|sendTransaction|useBridge/);
+  assert.equal((panel.match(/<SignalBoard /g) ?? []).length, 3, "form, approval and transfer views");
+  // the slide appears for the deposit alone, and runs the very same guarded path as the button
+  assert.match(panel, /const slideReady = !!b\.address && reviewing && !b\.approvalRequired && !loading && !b\.allowanceLoading;/);
+  assert.match(panel, /\{slideReady \? <SlideConfirm key=\{b\.quote!\.requestId\}[^\n]+onConfirm=\{submit\} \/> : null\}/);
+  assert.match(panel, /onSubmit=\{\(event\) => \{ event\.preventDefault\(\); submit\(\); \}\}/);
+  assert.match(panel, /<button type="submit" className=\{slideReady \? styles\.secondary : styles\.primary\}/, "the ordinary button never goes away");
+  assert.equal((panel.match(/b\.confirm\(\)/g) ?? []).length, 1);
+  assert.equal((panel.match(/b\.approve\(\)/g) ?? []).length, 1);
+  // only a release or Enter at the end confirms, read from the live drag, never from movement
+  assert.match(slide, /if \(slideRelease\(at\) === "confirm"\) \{ place\(1\); onConfirm\(\); return; \}/);
+  assert.match(slide, /if \(next\.confirm\) onConfirm\(\);/);
+  assert.equal((slide.match(/onConfirm\(\)/g) ?? []).length, 2);
+  assert.doesNotMatch(slide.slice(slide.indexOf("function move"), slide.indexOf("function up")), /onConfirm/);
+  assert.match(slide, /role="slider" tabIndex=\{0\} aria-label=\{label\} aria-valuemin=\{0\} aria-valuemax=\{100\}/);
+  assert.match(slide, /<p className=\{styles\.slideHint\} aria-live="polite">/);
+  assert.match(signalCss, /\.slideTrack \{[^}]*touch-action: none/);
+  assert.match(signalCss, /prefers-reduced-motion: reduce[\s\S]+\.caption span \{ animation: none; \}/);
+  assert.match(signalCss, /\.coin:focus-visible/);
+  // the dot face loads with the panel only
+  assert.match(read("./dot-font.ts"), /Doto\(\{ subsets: \["latin"\], axes: \["ROND"\], variable: "--font-dots", display: "swap", preload: false \}\)/);
+});
+
 test("bridge review names minimum, separate gas, recipient, risk and expiry", () => {
   for (const content of ["Minimum received", "Source gas", "Receiving wallet", "0.5% slippage", "carries risk", "This quote expired", "Refresh quote", "0 Openlaunch fee"]) assert.ok(panel.includes(content), content);
   assert.match(panel, /reviewing \? b.approvalRequired \? b.approve\(\) : b.confirm\(\) : b.requestQuote\(\)/);
@@ -156,7 +212,7 @@ test("stuck records have a bounded discard path, and the hook avoids APIs missin
 
 test("quotes update without locking typing or automatically submitting wallet actions", () => {
   const hook = read("./useBridge.ts");
-  assert.match(panel, /useBridge\(open\)/);
+  assert.match(panel, /useBridge\(open \|\| onPage\)/);
   assert.match(hook, /autoQuoteEnabled = open && !!request && !sending && !approvalSending && !approvalPending && !tracked/);
   assert.match(hook, /quoteSession.schedule\(\(\) => \{ void requestQuote\(\); \}\)/);
   assert.match(hook, /\[autoQuoteEnabled, amount, walletChainId, requestQuote, quoteSession\]/);
diff --git a/app/src/components/bridge/dot-font.ts b/app/src/components/bridge/dot-font.ts
new file mode 100644
index 00000000..880d47f3
--- /dev/null
+++ b/app/src/components/bridge/dot-font.ts
@@ -0,0 +1,7 @@
+import { Doto } from "next/font/google";
+
+/**
+ * Dot-matrix numerals for the bridge's amounts and board caption (Doto, SIL Open Font Licence). Declared here, not in
+ * app/fonts.ts, so it ships with the lazily loaded bridge panel and is never preloaded on pages that do not open it.
+ */
+export const dotFont = Doto({ subsets: ["latin"], axes: ["ROND"], variable: "--font-dots", display: "swap", preload: false });
diff --git a/app/src/lib/bridge/link.ts b/app/src/lib/bridge/link.ts
new file mode 100644
index 00000000..ef2ce976
--- /dev/null
+++ b/app/src/lib/bridge/link.ts
@@ -0,0 +1,43 @@
+import { BRIDGE_CHAINS, BRIDGE_CHAIN_IDS, isBridgeAssetSupported, isBridgeDestination, type BridgeAsset, type BridgeChainId } from "./types";
+
+/**
+ * Shareable bridge links: /bridge?from=arbitrum&to=base&asset=USDC&toAsset=USDC. A link only preselects a route. It
+ * carries no amount and no address, and opening one never requests a quote signature or a wallet action.
+ */
+export type BridgeLink = { originChainId: BridgeChainId; destinationChainId: BridgeChainId; originAsset?: BridgeAsset; destinationAsset?: BridgeAsset };
+
+const chainByKey = (key: string): BridgeChainId | null => BRIDGE_CHAIN_IDS.find((id) => BRIDGE_CHAINS[id].key === key) ?? null;
+
+/**
+ * Reads a link from the page's query. `to` is required and must be a launch chain; `from` defaults to Base (Ethereum
+ * when Base is the destination). A link with any unknown, repeated or unsupported value is ignored whole, never
+ * applied in part.
+ */
+export function parseBridgeLink(query: Record<string, string | string[] | undefined>): BridgeLink | null {
+  const one = (name: string): string | null | undefined => {
+    const value = query[name];
+    return value === undefined ? undefined : typeof value === "string" ? value : null;
+  };
+  const [from, to, asset, toAsset] = [one("from"), one("to"), one("asset"), one("toAsset")];
+  if (from === null || to === null || asset === null || toAsset === null || to === undefined) return null;
+  const destinationChainId = chainByKey(to);
+  if (destinationChainId === null || !isBridgeDestination(destinationChainId)) return null;
+  const originChainId = from === undefined ? (destinationChainId === 8453 ? 1 : 8453) : chainByKey(from);
+  if (originChainId === null || originChainId === destinationChainId) return null;
+  if (asset !== undefined && !isBridgeAssetSupported(originChainId, asset)) return null;
+  if (toAsset !== undefined && !isBridgeAssetSupported(destinationChainId, toAsset)) return null;
+  return { originChainId, destinationChainId, ...(asset === undefined ? {} : { originAsset: asset }), ...(toAsset === undefined ? {} : { destinationAsset: toAsset }) };
+}
+
+/** The link for a route, for other pages to point at the bridge. */
+export function bridgeLinkPath(link: BridgeLink): string {
+  const query = new URLSearchParams({ from: BRIDGE_CHAINS[link.originChainId].key, to: BRIDGE_CHAINS[link.destinationChainId].key });
+  if (link.originAsset) query.set("asset", link.originAsset);
+  if (link.destinationAsset) query.set("toAsset", link.destinationAsset);
+  return `/bridge?${query}`;
+}
+
+/** Stable identity of a link, so a page applies each one once. */
+export function bridgeLinkKey(link: BridgeLink | null): string {
+  return link ? `${link.originChainId}:${link.destinationChainId}:${link.originAsset ?? ""}:${link.destinationAsset ?? ""}` : "";
+}
diff --git a/app/src/lib/bridge/signal.test.ts b/app/src/lib/bridge/signal.test.ts
new file mode 100644
index 00000000..81b478ca
--- /dev/null
+++ b/app/src/lib/bridge/signal.test.ts
@@ -0,0 +1,144 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { BRIDGE_CHAIN_IDS } from "./types";
+import { SIGNAL_CODES, SIGNAL_COLORS, SIGNAL_MIN_COLS, SIGNAL_ROWS, codeLights, glyphCells, routeLight, signalCaption, signalLayout, signalMode, signalPitch, type SignalMode } from "./signal";
+import { parseBridgeLink, bridgeLinkKey, bridgeLinkPath } from "./link";
+import { SLIDE_CONFIRM_AT, slideKey, slideProgress, slideRelease, slideTurns } from "./slide";
+
+const MODES: SignalMode[] = ["idle", "quoting", "ready", "expired", "blocked", "approval", "wallet", "transit", "arrived", "refund", "attention"];
+const base = { phase: "idle", tracked: false, approvalActive: false, quoteLoading: false, reviewing: false, quoteExpired: false, blocked: false } as const;
+
+test("every bridge network has a board code the dot letters can spell, and its own light colour", () => {
+  for (const id of BRIDGE_CHAIN_IDS) {
+    const code = SIGNAL_CODES[id];
+    assert.match(code, /^[A-Z]{2,4}$/, String(id));
+    const glyph = glyphCells(code);
+    assert.equal(glyph.width, code.length * 6 - 1);
+    assert.ok(glyph.cells.length > code.length * 8, code);
+    for (const [x, y] of glyph.cells) assert.ok(x >= 0 && x < glyph.width && y >= 0 && y < 7, code);
+    assert.equal(SIGNAL_COLORS[id].length, 3);
+  }
+  assert.equal(new Set(BRIDGE_CHAIN_IDS.map((id) => SIGNAL_CODES[id])).size, BRIDGE_CHAIN_IDS.length, "no two networks share a code");
+  assert.throws(() => glyphCells("XYZ"), /no letter/);
+});
+
+test("the board lays the two codes at the edges with a continuous route between them, inside its bounds", () => {
+  for (const cols of [SIGNAL_MIN_COLS, 72, 96]) for (const from of BRIDGE_CHAIN_IDS) for (const to of BRIDGE_CHAIN_IDS) {
+    if (from === to) continue;
+    const layout = signalLayout(cols, SIGNAL_CODES[from], SIGNAL_CODES[to]);
+    assert.equal(layout.rows, SIGNAL_ROWS);
+    for (const [x, y] of [...layout.from, ...layout.to, ...layout.path]) assert.ok(x >= 0 && x < cols && y >= 0 && y < SIGNAL_ROWS, `${cols} ${from}->${to}`);
+    assert.ok(layout.path.length >= 8, `${cols}: a route needs room`);
+    const fromRight = Math.max(...layout.from.map(([x]) => x)), toLeft = Math.min(...layout.to.map(([x]) => x));
+    assert.ok(layout.path[0][0] > fromRight && layout.path.at(-1)![0] < toLeft, "the route never overlaps a code");
+    layout.path.forEach(([x], i) => { if (i) assert.equal(x, layout.path[i - 1][0] + 1); });
+  }
+  // a one-network step (an approval) shows no destination
+  const single = signalLayout(72, "ARC", null);
+  assert.equal(single.to.length, 0);
+  assert.ok(single.path.length > 30);
+});
+
+test("dot spacing holds through a scrollbar's worth of width change, so the board cannot resize itself in a loop", () => {
+  const first = signalPitch(390, null);
+  assert.deepEqual(first, { pitch: 5, width: 390 });
+  // a taller board adds a scrollbar (about 11px); the width it then reports must not change the spacing back
+  assert.equal(signalPitch(401, first), first);
+  assert.equal(signalPitch(379, first), first);
+  assert.deepEqual(signalPitch(468, first), { pitch: 7, width: 468 });
+  assert.equal(signalPitch(280, null).pitch, 4);
+  assert.equal(signalPitch(120, null).pitch, 3);
+  assert.equal(signalPitch(2000, null).pitch, 10);
+  for (const width of [280, 320, 390, 424, 468, 560]) {
+    const { pitch } = signalPitch(width, null);
+    assert.ok(Math.floor(width / pitch) >= SIGNAL_MIN_COLS, `${width}px fits two codes and a route`);
+  }
+});
+
+test("the board follows the transfer state and never shows movement the app cannot stand behind", () => {
+  assert.equal(signalMode(base), "idle");
+  assert.equal(signalMode({ ...base, quoteLoading: true }), "quoting");
+  assert.equal(signalMode({ ...base, reviewing: true }), "ready");
+  assert.equal(signalMode({ ...base, reviewing: true, quoteExpired: true }), "expired");
+  assert.equal(signalMode({ ...base, blocked: true }), "blocked");
+  // a wallet step outranks any quote; only a tracked, pending transfer is "in transit"
+  assert.equal(signalMode({ ...base, reviewing: true, phase: "confirming" }), "wallet");
+  assert.equal(signalMode({ ...base, reviewing: true, phase: "switching" }), "wallet");
+  assert.equal(signalMode({ ...base, reviewing: true, approvalActive: true }), "approval");
+  assert.equal(signalMode({ ...base, tracked: true, phase: "confirming" }), "wallet");
+  assert.equal(signalMode({ ...base, tracked: true, phase: "pending" }), "transit");
+  assert.equal(signalMode({ ...base, tracked: true, phase: "success" }), "arrived");
+  assert.equal(signalMode({ ...base, tracked: true, phase: "refund" }), "refund");
+  for (const phase of ["uncertain", "failure", "idle", "quoting", "review"] as const) assert.equal(signalMode({ ...base, tracked: true, phase }), "attention", phase);
+  for (const phase of ["idle", "quoting", "review", "confirming", "switching", "uncertain", "failure", "refund"] as const) {
+    assert.notEqual(signalMode({ ...base, tracked: false, phase }), "transit", phase);
+    assert.notEqual(signalMode({ ...base, tracked: false, phase }), "arrived", phase);
+  }
+  assert.equal(signalCaption("arrived", "Base"), "Arrived on Base");
+  for (const mode of MODES) assert.ok(signalCaption(mode, "Robinhood").length <= 20, mode);
+});
+
+test("lights stay within range, travel forward in transit, backward on a refund, and rest green on arrival", () => {
+  for (const mode of MODES) for (let i = 0; i < 24; i++) for (const t of [0, 0.37, 1.9, 12.25]) {
+    const light = routeLight(mode, t, i, 24);
+    assert.ok(light.level >= 0 && light.level <= 1, `${mode} ${i} ${t}`);
+    const codes = codeLights(mode, t);
+    assert.ok(codes.from >= 0 && codes.from <= 1 && codes.to >= 0 && codes.to <= 1, mode);
+  }
+  const peak = (mode: SignalMode, t: number) => { let best = 0; for (let i = 1; i < 24; i++) if (routeLight(mode, t, i, 24).level > routeLight(mode, t, best, 24).level) best = i; return best; };
+  // a pulse drags its trail behind it: toward the source when it runs forward, toward the destination on a refund
+  const head = peak("ready", 1.6), back = peak("refund", 0.3);
+  assert.ok(routeLight("ready", 1.6, head - 1, 24).level > routeLight("ready", 1.6, head + 1, 24).level, "a quote's pulse runs source to destination");
+  assert.ok(routeLight("refund", 0.3, back + 1, 24).level > routeLight("refund", 0.3, back - 1, 24).level, "a refund runs back toward the source");
+  assert.deepEqual(routeLight("arrived", 3, 5, 24), { level: 0.9, tone: "ok" });
+  assert.equal(routeLight("refund", 1, 5, 24).tone, "warn");
+  assert.equal(routeLight("attention", 1, 5, 24).tone, "warn");
+  // waiting on the wallet lights only the source end: nothing has left
+  assert.ok(routeLight("wallet", 0.4, 12, 24).level < 0.2 && routeLight("approval", 0.4, 20, 24).level < 0.2);
+  assert.equal(codeLights("arrived", 0).toTone, "ok");
+  assert.ok(codeLights("idle", 0).to < codeLights("arrived", 0).to, "the destination lights fully only on arrival");
+});
+
+test("sliding confirms only by letting go, or pressing Enter, at the far end", () => {
+  assert.equal(slideProgress(160, 100, 10, 100), 0.5);
+  assert.equal(slideProgress(40, 100, 10, 100), 0);
+  assert.equal(slideProgress(900, 100, 10, 100), 1);
+  assert.equal(slideProgress(160, 100, 10, 0), 0);
+  assert.equal(slideProgress(Number.NaN, 100, 10, 100), 0);
+  assert.equal(slideRelease(SLIDE_CONFIRM_AT), "confirm");
+  assert.equal(slideRelease(SLIDE_CONFIRM_AT - 0.01), "reset");
+  assert.equal(slideRelease(0), "reset");
+  // arrows only move the coin, even at the end
+  assert.deepEqual(slideKey(0.9, "ArrowRight"), { progress: 1, confirm: false });
+  assert.deepEqual(slideKey(1, "ArrowRight"), { progress: 1, confirm: false });
+  assert.deepEqual(slideKey(0, "ArrowLeft"), { progress: 0, confirm: false });
+  assert.deepEqual(slideKey(0.3, "End"), { progress: 1, confirm: false });
+  assert.deepEqual(slideKey(0.7, "Home"), { progress: 0, confirm: false });
+  assert.deepEqual(slideKey(0.5, "Enter"), { progress: 0.5, confirm: false });
+  assert.deepEqual(slideKey(1, "Enter"), { progress: 1, confirm: true });
+  assert.deepEqual(slideKey(1, " "), { progress: 1, confirm: true });
+  assert.equal(slideKey(1, "Tab"), null);
+  let position = 0;
+  for (let i = 0; i < 10; i++) position = slideKey(position, "ArrowRight")!.progress;
+  assert.equal(position, 1, "ten steps reach the end without rounding drift");
+  assert.equal(slideTurns(300, 58), 2);
+  assert.equal(slideTurns(40, 58), 1);
+});
+
+test("a bridge link preselects a valid route and is ignored whole when anything in it is off", () => {
+  assert.deepEqual(parseBridgeLink({ from: "arbitrum", to: "base", asset: "USDC", toAsset: "USDC" }), { originChainId: 42161, destinationChainId: 8453, originAsset: "USDC", destinationAsset: "USDC" });
+  assert.deepEqual(parseBridgeLink({ from: "base", to: "robinhood", toAsset: "USDG" }), { originChainId: 8453, destinationChainId: 4663, destinationAsset: "USDG" });
+  // `from` defaults to Base, or Ethereum when Base is the destination
+  assert.deepEqual(parseBridgeLink({ to: "arc" }), { originChainId: 8453, destinationChainId: 5042 });
+  assert.deepEqual(parseBridgeLink({ to: "base" }), { originChainId: 1, destinationChainId: 8453 });
+  for (const query of [
+    {}, { from: "base" }, { to: "ethereum" }, { from: "base", to: "arbitrum" }, { from: "base", to: "base" }, { from: "polygon", to: "base" },
+    { from: "base", to: "robinhood", toAsset: "USDC" }, { from: "arc", to: "base", asset: "ETH" }, { from: "base", to: "arc", asset: "usdc" },
+    { from: ["base", "arc"], to: "robinhood" }, { from: "base", to: ["arc", "robinhood"] }, { from: "Base", to: "arc" }, { from: "8453", to: "arc" }, { from: "__proto__", to: "arc" },
+  ]) assert.equal(parseBridgeLink(query), null, JSON.stringify(query));
+  const link = { originChainId: 10, destinationChainId: 4663, originAsset: "USDC", destinationAsset: "USDG" } as const;
+  assert.equal(bridgeLinkPath(link), "/bridge?from=optimism&to=robinhood&asset=USDC&toAsset=USDG");
+  assert.deepEqual(parseBridgeLink(Object.fromEntries(new URLSearchParams(bridgeLinkPath(link).split("?")[1]))), link);
+  assert.equal(bridgeLinkKey(null), "");
+  assert.notEqual(bridgeLinkKey(link), bridgeLinkKey({ ...link, destinationAsset: "ETH" }));
+});
diff --git a/app/src/lib/bridge/signal.ts b/app/src/lib/bridge/signal.ts
new file mode 100644
index 00000000..265b74a8
--- /dev/null
+++ b/app/src/lib/bridge/signal.ts
@@ -0,0 +1,188 @@
+import type { BridgePhase } from "./client";
+import type { BridgeChainId } from "./types";
+
+/**
+ * The bridge's signal board: a dot-matrix strip that spells the two networks and runs lights along the route between
+ * them. Everything here is pure (which dots exist, how bright each is at a given moment) so the canvas component only
+ * paints, and the board can never say something the transfer state does not.
+ */
+
+/** Board spellings. Five-by-seven letters, so every code must use only the letters in GLYPHS. */
+export const SIGNAL_CODES: Record<BridgeChainId, string> = { 8453: "BASE", 4663: "HOOD", 5042: "ARC", 1: "ETH", 42161: "ARB", 10: "OP" };
+
+/** Light colours per network, chosen to read on the board's dark plate (not brand-exact). */
+export const SIGNAL_COLORS: Record<BridgeChainId, readonly [number, number, number]> = {
+  8453: [61, 124, 255],
+  4663: [204, 255, 0],
+  5042: [196, 208, 226],
+  1: [136, 154, 255],
+  42161: [18, 170, 255],
+  10: [255, 72, 92],
+};
+export const SIGNAL_OK: readonly [number, number, number] = [61, 220, 151];
+export const SIGNAL_WARN: readonly [number, number, number] = [251, 191, 36];
+
+export const SIGNAL_ROWS = 15;
+const GLYPH_WIDTH = 5;
+const GLYPH_TOP = 4;
+const MARGIN = 2;
+
+const GLYPHS: Record<string, readonly string[]> = {
+  A: [".###.", "#...#", "#...#", "#####", "#...#", "#...#", "#...#"],
+  B: ["####.", "#...#", "#...#", "####.", "#...#", "#...#", "####."],
+  C: [".####", "#....", "#....", "#....", "#....", "#....", ".####"],
+  D: ["####.", "#...#", "#...#", "#...#", "#...#", "#...#", "####."],
+  E: ["#####", "#....", "#....", "####.", "#....", "#....", "#####"],
+  H: ["#...#", "#...#", "#...#", "#####", "#...#", "#...#", "#...#"],
+  O: [".###.", "#...#", "#...#", "#...#", "#...#", "#...#", ".###."],
+  P: ["####.", "#...#", "#...#", "####.", "#....", "#....", "#...."],
+  R: ["####.", "#...#", "#...#", "####.", "#.#..", "#..#.", "#...#"],
+  S: [".####", "#....", "#....", ".###.", "....#", "....#", "####."],
+  T: ["#####", "..#..", "..#..", "..#..", "..#..", "..#..", "..#.."],
+};
+
+export type SignalCell = readonly [number, number];
+
+/** The lit dots of a code, left to right with one empty column between letters. */
+export function glyphCells(code: string): { width: number; cells: SignalCell[] } {
+  const cells: SignalCell[] = [];
+  [...code].forEach((letter, index) => {
+    const rows = GLYPHS[letter];
+    if (!rows) throw new Error(`The signal board has no letter "${letter}".`);
+    rows.forEach((row, y) => [...row].forEach((dot, x) => { if (dot === "#") cells.push([index * (GLYPH_WIDTH + 1) + x, y]); }));
+  });
+  return { width: code.length * (GLYPH_WIDTH + 1) - 1, cells };
+}
+
+export type SignalLayout = { cols: number; rows: number; from: SignalCell[]; to: SignalCell[]; path: SignalCell[] };
+
+/**
+ * Where everything sits on a board `cols` dots wide: the source code at the left, the destination at the right (or
+ * nothing, when a step concerns one network only) and a shallow arc of route lights between them.
+ */
+export function signalLayout(cols: number, fromCode: string, toCode: string | null): SignalLayout {
+  const from = glyphCells(fromCode);
+  const to = toCode === null ? null : glyphCells(toCode);
+  const toStart = to ? cols - MARGIN - to.width : cols - MARGIN;
+  const start = MARGIN + from.width + 2;
+  const end = toStart - (to ? 3 : 1);
+  const middle = GLYPH_TOP + 3;
+  const path: SignalCell[] = [];
+  for (let x = start; x <= end; x++) {
+    const along = end === start ? 0 : (x - start) / (end - start);
+    path.push([x, middle - Math.round(Math.sin(Math.PI * along) * 3)]);
+  }
+  return {
+    cols, rows: SIGNAL_ROWS, path,
+    from: from.cells.map(([x, y]) => [MARGIN + x, GLYPH_TOP + y] as const),
+    to: to ? to.cells.map(([x, y]) => [toStart + x, GLYPH_TOP + y] as const) : [],
+  };
+}
+
+export type SignalPitch = { pitch: number; width: number };
+
+/**
+ * Dot spacing (px) for a board `width` px wide. Sticky on purpose: the board's height follows the spacing, and inside
+ * a scrolling dialog a taller board can add a scrollbar, which narrows the board, which would shrink it again. So a
+ * spacing, once chosen, holds until the width moves by more than a scrollbar's worth.
+ */
+export function signalPitch(width: number, previous: SignalPitch | null): SignalPitch {
+  if (previous && Math.abs(width - previous.width) <= 24) return previous;
+  return { pitch: Math.min(10, Math.max(3, Math.floor(width / 66))), width };
+}
+
+/** The narrowest board that still leaves a route between two four-letter codes. */
+export const SIGNAL_MIN_COLS = 2 * (4 * (GLYPH_WIDTH + 1) - 1) + 2 * MARGIN + 12;
+
+export type SignalMode = "idle" | "quoting" | "ready" | "expired" | "blocked" | "approval" | "wallet" | "transit" | "arrived" | "refund" | "attention";
+
+/**
+ * What the board shows, from the transfer state alone. A wallet step always wins over a quote, a tracked transfer over
+ * both, and anything unknown or failed is "attention": the board never shows movement the app cannot stand behind.
+ */
+export function signalMode(state: { phase: BridgePhase; tracked: boolean; approvalActive: boolean; quoteLoading: boolean; reviewing: boolean; quoteExpired: boolean; blocked: boolean }): SignalMode {
+  if (state.tracked) {
+    if (state.phase === "success") return "arrived";
+    if (state.phase === "refund") return "refund";
+    if (state.phase === "pending") return "transit";
+    if (state.phase === "confirming" || state.phase === "switching") return "wallet";
+    return "attention";
+  }
+  if (state.approvalActive) return "approval";
+  if (state.phase === "confirming" || state.phase === "switching") return "wallet";
+  if (state.quoteLoading) return "quoting";
+  if (state.quoteExpired) return "expired";
+  if (state.reviewing) return "ready";
+  if (state.blocked) return "blocked";
+  return "idle";
+}
+
+/** The short line under the board. Decorative: the panel's own status text carries the meaning for screen readers. */
+export function signalCaption(mode: SignalMode, destinationName: string): string {
+  switch (mode) {
+    case "quoting": return "Finding route";
+    case "ready": return "Quote ready";
+    case "expired": return "Quote expired";
+    case "blocked": return "No quote";
+    case "approval": return "Approval step";
+    case "wallet": return "Check wallet";
+    case "transit": return "In transit";
+    case "arrived": return `Arrived on ${destinationName}`;
+    case "refund": return "Refund reported";
+    case "attention": return "Needs attention";
+    default: return "Standing by";
+  }
+}
+
+export type SignalTone = "route" | "ok" | "warn";
+
+const trail = (position: number, index: number, length: number) => {
+  const behind = position - index;
+  return behind >= 0 && behind < length ? 1 - behind / length : 0;
+};
+
+/** Brightness (0 to 1) and colour of route light `index` of `count`, `seconds` into the animation. */
+export function routeLight(mode: SignalMode, seconds: number, index: number, count: number): { level: number; tone: SignalTone } {
+  const span = count + 10;
+  const packets = (amount: number, speed: number, length: number, reverse = false) => {
+    let glow = 0;
+    for (let k = 0; k < amount; k++) {
+      const position = ((seconds * speed + k / amount) % 1) * span - 5;
+      glow = Math.max(glow, trail(position, reverse ? count - 1 - index : index, length));
+    }
+    return glow;
+  };
+  switch (mode) {
+    case "transit": return { level: 0.2 + 0.8 * packets(4, 1.15, 9), tone: "route" };
+    case "ready": return { level: 0.2 + 0.8 * packets(1, 0.28, 8), tone: "route" };
+    case "quoting": {
+      // one light sweeping there and back: looking, not sending
+      const swing = Math.abs(((seconds * 0.9) % 2) - 1) * (count - 1);
+      return { level: 0.16 + 0.84 * Math.max(0, 1 - Math.abs(swing - index) / 4), tone: "route" };
+    }
+    case "wallet":
+    case "approval":
+      // the first lights knock at the source: waiting on the wallet, nothing has left
+      return { level: index < 4 ? 0.3 + 0.6 * (0.5 + 0.5 * Math.sin(seconds * 6 - index)) : 0.14, tone: "route" };
+    case "arrived": return { level: 0.9, tone: "ok" };
+    case "refund": return { level: 0.2 + 0.8 * packets(2, 0.6, 8, true), tone: "warn" };
+    case "attention": return { level: 0.25 + 0.35 * (0.5 + 0.5 * Math.sin(seconds * 3)), tone: "warn" };
+    case "expired": return { level: 0.12, tone: "route" };
+    case "blocked": return { level: 0.1, tone: "warn" };
+    default: return { level: 0.16, tone: "route" };
+  }
+}
+
+/** Brightness of the two codes. The destination only lights fully once funds are reported there. */
+export function codeLights(mode: SignalMode, seconds: number): { from: number; to: number; toTone: "chain" | "ok" | "warn" } {
+  switch (mode) {
+    case "arrived": return { from: 0.55, to: 1, toTone: "ok" };
+    case "transit": return { from: 0.6 + 0.25 * Math.sin(seconds * 9), to: 0.5, toTone: "chain" };
+    case "refund": return { from: 0.9, to: 0.4, toTone: "warn" };
+    case "attention": return { from: 0.8, to: 0.4, toTone: "warn" };
+    case "ready": return { from: 0.95, to: 0.75, toTone: "chain" };
+    case "wallet":
+    case "approval": return { from: 0.7 + 0.3 * Math.sin(seconds * 6), to: 0.4, toTone: "chain" };
+    default: return { from: 0.9, to: 0.45, toTone: "chain" };
+  }
+}
diff --git a/app/src/lib/bridge/slide.ts b/app/src/lib/bridge/slide.ts
new file mode 100644
index 00000000..d8bf5079
--- /dev/null
+++ b/app/src/lib/bridge/slide.ts
@@ -0,0 +1,39 @@
+/**
+ * Slide to confirm: the bridge deposit can be confirmed by dragging a coin across a rail. The rules are pure so the
+ * component cannot drift from them: a deposit is requested only by a release (or Enter) at the far end, never by
+ * movement alone, and anything short of that puts the coin back with nothing requested.
+ */
+
+/** How far across (0 to 1) the coin must be when let go for the release to count as a confirmation. */
+export const SLIDE_CONFIRM_AT = 0.9;
+const KEY_STEP = 0.1;
+
+/** Coin position (0 to 1) for a pointer at `pointerX`, grabbed `grabOffset` px from the coin's left edge. */
+export function slideProgress(pointerX: number, trackLeft: number, grabOffset: number, travel: number): number {
+  if (!(travel > 0) || !Number.isFinite(pointerX)) return 0;
+  return Math.min(1, Math.max(0, (pointerX - trackLeft - grabOffset) / travel));
+}
+
+/** Letting go confirms only at the far end; everywhere else it resets. */
+export function slideRelease(progress: number): "confirm" | "reset" {
+  return progress >= SLIDE_CONFIRM_AT ? "confirm" : "reset";
+}
+
+/**
+ * Keyboard control. Arrows, Home and End only move the coin; Enter or Space confirm, and only once it is at the far
+ * end. Null for any other key, which the browser then handles as usual.
+ */
+export function slideKey(progress: number, key: string): { progress: number; confirm: boolean } | null {
+  const round = (value: number) => Math.round(Math.min(1, Math.max(0, value)) * 10) / 10;
+  if (key === "ArrowRight" || key === "ArrowUp") return { progress: round(progress + KEY_STEP), confirm: false };
+  if (key === "ArrowLeft" || key === "ArrowDown") return { progress: round(progress - KEY_STEP), confirm: false };
+  if (key === "Home") return { progress: 0, confirm: false };
+  if (key === "End") return { progress: 1, confirm: false };
+  if (key === "Enter" || key === " ") return { progress, confirm: slideRelease(progress) === "confirm" };
+  return null;
+}
+
+/** Whole turns a coin `size` px wide makes rolling `travel` px, so it always comes to rest upright. */
+export function slideTurns(travel: number, size: number): number {
+  return Math.max(1, Math.round(travel / (Math.PI * size)));
+}
diff --git a/app/src/lib/seo.test.ts b/app/src/lib/seo.test.ts
index d52ade6f..9cfede01 100644
--- a/app/src/lib/seo.test.ts
+++ b/app/src/lib/seo.test.ts
@@ -41,7 +41,7 @@ test("isCanonicalTokenPath rejects bad chains and addresses", () => {
 
 test("static sitemap covers every indexable route and skips /admin and /me", () => {
   const paths = STATIC_SITEMAP_ROUTES.map((r) => r.path);
-  for (const p of ["/", "/launch", "/base", "/robinhood", "/arc", "/feed", "/rules", "/about", "/agents"]) {
+  for (const p of ["/", "/launch", "/base", "/robinhood", "/arc", "/feed", "/rules", "/about", "/agents", "/bridge"]) {
     assert.ok(paths.includes(p), `missing ${p}`);
   }
   assert.ok(!paths.includes("/admin"), "/admin must stay out of the sitemap");
diff --git a/app/src/lib/seo.ts b/app/src/lib/seo.ts
index 00da023c..b15e4c86 100644
--- a/app/src/lib/seo.ts
+++ b/app/src/lib/seo.ts
@@ -50,6 +50,7 @@ export const STATIC_SITEMAP_ROUTES: StaticRoute[] = [
   ...CHAIN_KEYS.map((chain): StaticRoute => ({ path: chainLandingPath(chain), changeFrequency: "hourly", priority: 0.8 })),
   { path: "/feed", changeFrequency: "hourly", priority: 0.7 },
   { path: "/pairs", changeFrequency: "daily", priority: 0.6 },
+  { path: "/bridge", changeFrequency: "monthly", priority: 0.6 },
   { path: "/rules", changeFrequency: "monthly", priority: 0.6 },
   { path: "/about", changeFrequency: "monthly", priority: 0.6 },
   { path: "/agents", changeFrequency: "monthly", priority: 0.6 },
diff --git a/docs/bridge.md b/docs/bridge.md
index 3d9d9bd0..3c29d0e7 100644
--- a/docs/bridge.md
+++ b/docs/bridge.md
@@ -1,6 +1,6 @@
 # Base, Robinhood and Arc bridge (funded from Ethereum, Arbitrum and Optimism)
 
-The header's **Bridge** action opens a focused funding panel without leaving the current token or launch page. It moves funds between Base (8453), Robinhood Chain (4663), and Arc mainnet (5042), and into them from Ethereum (1), Arbitrum (42161) and Optimism (10), always to the same connected wallet address. The three funding networks send only: nothing is ever bridged to them. Base sends/receives ETH or official USDC; Robinhood sends/receives ETH or USDG (Global Dollar, the chain's main stablecoin and the launch form's default quote there). Arc receives native USDC and sends USDC through its ERC-20 interface. Ethereum, Arbitrum and Optimism send ETH or Circle's native USDC. Relay converts between ETH, USDC and USDG at the reviewed quote. This does not add launched tokens or GITLAWB, change the launch-chain registry, or deploy contracts.
+The header's **Bridge** action opens a focused funding panel without leaving the current token or launch page; `/bridge` shows the same panel as a page. It moves funds between Base (8453), Robinhood Chain (4663), and Arc mainnet (5042), and into them from Ethereum (1), Arbitrum (42161) and Optimism (10), always to the same connected wallet address. The three funding networks send only: nothing is ever bridged to them. Base sends/receives ETH or official USDC; Robinhood sends/receives ETH or USDG (Global Dollar, the chain's main stablecoin and the launch form's default quote there). Arc receives native USDC and sends USDC through its ERC-20 interface. Ethereum, Arbitrum and Optimism send ETH or Circle's native USDC. Relay converts between ETH, USDC and USDG at the reviewed quote. This does not add launched tokens or GITLAWB, change the launch-chain registry, or deploy contracts.
 
 ## Integration
 
@@ -55,6 +55,17 @@ These tests never connect a wallet or submit a transaction.
 
 `/ui-review-bridge` is a development-only visual fixture with disconnected, quote, quoting, high-fee, expired, error, pending, success, uncertain and refund states, plus approval/recovery states. Its synthetic data cannot execute a transaction, and the route returns 404 outside development. The real header action uses the actual integration.
 
+### Signal panel and the /bridge page (2026-11-10)
+
+The panel was redesigned without touching the transfer logic: `useBridge`, the validators and every wallet guard are unchanged.
+
+- **Signal board.** A dot-matrix strip at the top of the form, the approval view and the transfer view spells the two networks (`BASE`, `HOOD`, `ARC`, `ETH`, `ARB`, `OP`) and runs lights along the route. What it shows is a pure function of the transfer state (`lib/bridge/signal.ts`): a sweeping light while a quote loads, a slow pulse for a live quote, lights knocking at the source while the wallet is asked, packets in transit only for a tracked pending transfer, green on a reported arrival, amber and reversed for a refund, amber for anything unknown or failed. It is decorative (`aria-hidden`); the panel's status text carries the same meaning in words. It is drawn on a canvas, stops animating under reduced motion, and stays a dark plate in the light theme.
+- **Dot numerals.** The amount you send and the estimated output are set in Doto (SIL Open Font Licence), loaded through `next/font` with the lazily loaded panel only and never preloaded site-wide.
+- **Slide to confirm.** When, and only when, the next step is the deposit itself, a coin can be dragged across a rail to confirm it. The rules are pure (`lib/bridge/slide.ts`): only letting go, or pressing Enter, at the far end confirms; letting go anywhere else puts the coin back and requests nothing. The slide and the ordinary button call one shared function with the same guards, and the button never goes away. Approvals, quotes and refreshes are never slid. The coin shows the token sent and turns to the token received when they differ.
+- **/bridge.** The same panel as a page, with the networks, steps, costs and limits beside it. The page does not start a second bridge: it registers an empty element (`components/bridge/bridge-slot.ts`) and the header's one controller renders the panel into it, so a transfer is quoted, sent and tracked once. While the page is open the header button focuses the page's panel instead of opening the dialog.
+- **Shareable links.** `/bridge?from=arbitrum&to=base&asset=USDC&toAsset=USDC` preselects a route (`lib/bridge/link.ts`). `to` is required and must be a launch chain; `from` defaults to Base, or Ethereum when Base is the destination. A link carries no amount and no address, is applied once through the pickers' own guarded setters (which refuse during an approval or a transfer), and is ignored whole if any value in it is unknown, repeated or unsupported.
+- Checked in the browser on desktop and phone widths in both themes through the development-only `/ui-review-bridge` fixture and the real panel without a wallet: a half drag resets with "Nothing was sent", a full drag confirms, and the board follows each scene. No wallet signed anything.
+
 ### Funding from Ethereum, Arbitrum and Optimism (2026-11-10)
 
 - The three networks are sources only. A request, quote, saved transfer or status naming one as the destination is refused (server and client), the reverse button is disabled while one is the source, and the destination picker lists the launch chains alone. Picking the destination as the source moves the destination to another launch chain instead of swapping a funding network into it.