Homepage hero: faint agent-chat backdrop, rare halftone field

web/app/landing.module.css

@@ -1935,6 +1935,12 @@
   background: var(--agent-tools-band-bg);
 }
 
+/* The homepage hero's wash is a flat vertical fade: the animated backdrop
+   carries the hero, so no highlight competes with it. */
+.homeLanding::before {
+  background: linear-gradient(180deg, #10273a 0%, #13314a 52%, #0d2638 100%);
+}
+
 /* Lift the page content above the hero wash. Targeted at the two content
    siblings by name so the sticky nav (and the keyboard skip link that now
    precedes it) keep their own positioning. */
@@ -2054,10 +2060,10 @@
   margin-top: 18px;
 }
 
-/* The byte stream behind the hero. Pinned to the hero box so it never moves
+/* The animated backdrop behind the hero. Pinned to the hero box so it never moves
    the fold; the mask fades it at the edges and quiets it behind the headline
    and description so the copy stays legible. */
-.heroSection > .heroStream {
+.heroSection > .heroBackdrop {
   position: absolute;
   inset: 0;
   z-index: 0;
@@ -6610,7 +6616,7 @@
     font-size: 1rem;
   }
 
-  .heroSection > .heroStream {
+  .heroSection > .heroBackdrop {
     mask-image:
       linear-gradient(180deg, transparent 4%, #000 16%, #000 86%, transparent 100%),
       radial-gradient(ellipse 70% 26% at 50% 36%, rgba(0, 0, 0, 0.2) 55%, #000 100%);

web/components/brand-icons.tsx

@@ -65,6 +65,20 @@ const OPEN_CLAW_PATHS = [
   'M9.046 8.16a.527.527 0 100-1.056.527.527 0 000 1.055zM15.376 8.16a.527.527 0 100-1.055.527.527 0 000 1.054z',
 ];
 
+/**
+ * The mono marks' path data, all in lobehub's 0 0 24 24 frame, for drawing them
+ * where SVG can't go (a canvas). Fill each path with the evenodd rule.
+ */
+export const BRAND_MARK_PATHS = {
+  claudeCode: [CLAUDE_CODE_PATH],
+  codex: [CODEX_PATH],
+  openCode: [OPEN_CODE_PATH],
+  cursor: [CURSOR_PATH],
+  grok: [GROK_PATH],
+  muse: [MUSE_PATH],
+  hermesAgent: HERMES_AGENT_PATHS,
+} as const;
+
 function ClaudeCodeMono(props: IconProps) {
   return (
     <IconSvg title="Claude Code" {...props}>

web/components/homepage/HeroBackdrop.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { HeroGhostChat } from './HeroGhostChat';
+import { HeroHalftone } from './HeroHalftone';
+
+/** Share of page loads that get the halftone field instead of the agent chat. */
+const HALFTONE_SHARE = 0.1;
+
+/**
+ * The hero's animated backdrop: usually the faint agent chat, now and then the
+ * halftone message field. Picked after mount, and nothing renders until then,
+ * so the server render and hydration agree and only the chosen backdrop mounts.
+ */
+export function HeroBackdrop() {
+  const [backdrop, setBackdrop] = useState<'chat' | 'halftone' | null>(null);
+
+  useEffect(() => {
+    setBackdrop(Math.random() < HALFTONE_SHARE ? 'halftone' : 'chat');
+  }, []);
+
+  if (backdrop === 'halftone') return <HeroHalftone />;
+  if (backdrop === 'chat') return <HeroGhostChat />;
+  return null;
+}