index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <title>Hypurr Harbor — Hyperliquid mempool, live</title>
  <meta name="description" content="Real-time retro pixel harbor: Hyperliquid mempool transactions are Hypurr kitties boarding block-boats. Streams by Quicknode." />
  <meta property="og:title" content="Hypurr Harbor — the Hyperliquid mempool, live" />
  <meta property="og:description" content="Retro pixel harbor where every cat is a live Hyperliquid transaction and every boat is a block. Powered by Quicknode gRPC streams." />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://www.txharbor.com/" />
  <meta property="og:image" content="https://www.txharbor.com/og.png" />
  <meta property="og:image:width" content="1600" />
  <meta property="og:image:height" content="900" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image" content="https://www.txharbor.com/og.png" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;600;700&family=VT323&display=swap" rel="stylesheet" />
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text y='13' font-size='13'>🐱</text></svg>" />
</head>
<body>
  <div id="splash" aria-hidden="true"><span>🐾</span><span>🐾</span><span>🐾</span> docking…</div>
  <div id="rotate" aria-hidden="true">🐱 turn your phone sideways —<br/>the harbor is wide</div>
  <main id="stage" aria-label="Hypurr Harbor live scene">
    <canvas id="labels"></canvas>
  </main>
  <header id="hud"></header>
  <div id="tip" role="tooltip" hidden></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>