feat(website): animated DAG as the landing hero

website/src/app/(home)/data.tsx

@@ -1,4 +1,5 @@
 import type { LandingData } from 'light-landing-page';
+import { DagHero } from '@/components/diagrams';
 
 const BASE = '/light-process';
 
@@ -45,10 +46,9 @@ export const lightProcessData: LandingData = {
       { k: 'License', v: <>AGPL-3.0 <span className="sub">copyleft</span></> },
     ],
     banner: {
-      src: `${BASE}/banner.webp`,
-      alt: 'Several glowing spheres linked by light into a directed graph above an isolated dark grid, the visual metaphor for a container DAG.',
-      captionLeft: 'Fig. 01 - Many cells, one graph, one grid.',
-      captionRight: 'light-process / visual',
+      node: <DagHero />,
+      captionLeft: 'Fig. 01 - ingest fans out; score routes the result.',
+      captionRight: 'light-process / graph',
     },
   },
   primitives: {

website/src/components/diagrams/DagHero.tsx

@@ -0,0 +1,110 @@
+import styles from './diagrams.module.css';
+
+/*
+ * The landing hero: a wider, cinematic cut of the DAG, tuned to fill the
+ * shared landing's 16/5 hero-banner box (viewBox ratio matches exactly). It
+ * carries no frame of its own - the landing supplies the corners, the bottom
+ * gradient and the caption. Pure CSS animation, no client JS, so it survives
+ * static export and is safe to pass across the RSC boundary. Same visual
+ * language as the docs diagrams; this is the flagship instance.
+ */
+
+type NodeDef = {
+  id: string;
+  x: number;
+  y: number;
+  label: string;
+  sub: string;
+  pulse: string;
+};
+
+const W = 150;
+const H = 52;
+
+const NODES: NodeDef[] = [
+  { id: 'ingest', x: 48, y: 124, label: 'ingest', sub: 'node:24', pulse: 'pulse' },
+  { id: 'transform', x: 280, y: 62, label: 'transform', sub: 'python', pulse: 'pulseB' },
+  { id: 'validate', x: 280, y: 186, label: 'validate', sub: 'node:24', pulse: 'pulseC' },
+  { id: 'score', x: 512, y: 124, label: 'score', sub: 'python', pulse: 'pulseB' },
+  { id: 'report', x: 744, y: 62, label: 'report', sub: 'node:24', pulse: 'pulse' },
+  { id: 'store', x: 744, y: 186, label: 'store', sub: 'python', pulse: 'pulseC' },
+];
+
+function center(n: NodeDef) {
+  return { cx: n.x + W / 2, cy: n.y + H / 2 };
+}
+
+export function DagHero() {
+  const byId = Object.fromEntries(NODES.map((n) => [n.id, n]));
+  const edge = (from: string, to: string) => {
+    const a = center(byId[from]);
+    const b = center(byId[to]);
+    const x1 = byId[from].x + W;
+    const y1 = a.cy;
+    const x2 = byId[to].x;
+    const y2 = b.cy;
+    const mx = (x1 + x2) / 2;
+    return `M ${x1} ${y1} C ${mx} ${y1}, ${mx} ${y2}, ${x2} ${y2}`;
+  };
+
+  const EDGES: [string, string][] = [
+    ['ingest', 'transform'],
+    ['ingest', 'validate'],
+    ['transform', 'score'],
+    ['validate', 'score'],
+    ['score', 'report'],
+    ['score', 'store'],
+  ];
+
+  return (
+    <div className={styles.heroFill}>
+      <svg
+        className={styles.heroSvg}
+        viewBox="0 0 960 300"
+        preserveAspectRatio="xMidYMid meet"
+        role="img"
+        aria-label="A directed graph of containers: ingest fans out to transform and validate, both feed score, which routes to report and store."
+      >
+        <defs>
+          <marker id="hero-arrow" viewBox="0 0 8 8" refX="6.5" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+            <path className={styles.arrowLive} d="M0 0 L8 4 L0 8 z" />
+          </marker>
+        </defs>
+
+        {EDGES.map(([from, to]) => (
+          <g key={`${from}-${to}`}>
+            <path className={styles.edge} d={edge(from, to)} markerEnd="url(#hero-arrow)" />
+            <path className={styles.edgeLive} d={edge(from, to)} />
+          </g>
+        ))}
+
+        {/* a couple of condition tags, kept sparse for the hero */}
+        <text className={styles.tag} x={232} y={96}>
+          when ok:true
+        </text>
+        <text className={styles.tag} x={604} y={92}>
+          score &gt; 0.8
+        </text>
+
+        {NODES.map((n) => (
+          <g key={n.id}>
+            <rect
+              className={`${styles.node} ${styles[n.pulse]}`}
+              x={n.x}
+              y={n.y}
+              width={W}
+              height={H}
+              rx={3}
+            />
+            <text className={styles.label} x={n.x + 18} y={n.y + 24}>
+              {n.label}
+            </text>
+            <text className={styles.sub} x={n.x + 18} y={n.y + 41}>
+              {n.sub}
+            </text>
+          </g>
+        ))}
+      </svg>
+    </div>
+  );
+}

website/src/components/diagrams/diagrams.module.css

@@ -7,7 +7,8 @@
  * the landing CSS variables are not in scope inside the docs.
  */
 
-.figure {
+.figure,
+.heroFill {
   --d-ink: #050608;
   --d-ink-2: #0a0c10;
   --d-line: #1a1d24;
@@ -19,7 +20,9 @@
   --d-halo-soft: #7fddff;
   --d-amber: #ffb855;
   --d-ember: #ff6b35;
+}
 
+.figure {
   position: relative;
   margin: 1.75rem 0;
   padding: 1.4rem 1.4rem 1rem;
@@ -62,6 +65,20 @@
   height: auto;
 }
 
+/* Hero variant: fills the landing's hero-banner box (16/5). It carries no
+   chrome of its own - the landing supplies the frame, corner brackets, bottom
+   gradient and caption. Tokens come from the shared .figure/.heroFill block. */
+.heroFill {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.heroSvg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 .caption {
   margin-top: 0.9rem;
   display: flex;

website/src/components/diagrams/index.ts

@@ -1,3 +1,4 @@
 export { Architecture } from './Architecture';
 export { Dag } from './Dag';
+export { DagHero } from './DagHero';
 export { NetworkServices } from './NetworkServices';