Redesign the website: new homepage with an animated pipeline and a live pipeline while analyzing

CHANGELOG.md

@@ -5,6 +5,7 @@ All notable changes to [`codegraph-engine`](https://www.npmjs.com/package/codegr
 ## Unreleased
 
 ### Added
+- **A proper website around the app.** A new homepage with an animated pipeline (get the code, parse it, link it, label every edge, show the blast radius), a product preview, features, the accuracy results with their caveats, and the CLI commands. Analyzing now shows the same pipeline live, stage by stage, with real progress. Fonts are bundled (no third-party requests), the page works on phones, respects reduced-motion settings and passes an automated accessibility check.
 - **The web app analyzes any repository, in the browser.** Paste a public GitHub repository (or `owner/repo@branch`, or
   a `github.com` link) or drop a project folder; the parser (WebAssembly) runs in a Web Worker and nothing is uploaded.
   Shareable `?repo=owner/repo` links, a "where to start" overview, search (`/`), a file tree, an inspector with the

README.md

@@ -23,7 +23,7 @@ Impact   3 symbols in 6 files  (3 resolved · 0 probable · 0 ambiguous)
   d3  resolved  src/flask/app.py#Flask.__call__
 ```
 
-Every edge is labelled **resolved / probable / ambiguous**, so you can see *how much* of a blast radius is proven vs. guessed, and filter accordingly. Checked against independent oracles on every call site of six repos CodeGraph was never tuned on, not a sample:
+Every edge is labelled **resolved / probable / ambiguous**, so you can see *how much* of a blast radius is proven vs. guessed, and filter accordingly. Checked against independent oracles (the TypeScript compiler, and Jedi for Python) on every call site of six open-source repositories, not a sample. The repositories were chosen before measuring, but fixes the checks prompted are included, so a fresh repository may score a little lower:
 
 | | `resolved` | `probable` | `ambiguous` |
 |---|---|---|---|

docs/ORACLE-EVAL.md

@@ -3,8 +3,15 @@
 The earlier evaluations ([`PRECISION.md`](PRECISION.md), [`EVALUATION.md`](EVALUATION.md)) were labeled by the
 analyzer author's LLM on a few hundred call sites. They were also partly on repos the resolver was tuned against.
 That shows CodeGraph working; it is not independent evidence that it is accurate. This evaluation swaps the labeler
-for the **TypeScript compiler's own type checker**, scores **every** call site in each repo instead of a sample, and
-runs on three repos that were **picked before any result was seen and never used during development**.
+for the **TypeScript compiler's own type checker** (and, for Python, Jedi), and scores **every** call site in each
+repo instead of a sample. The first measurement (the tables under "Results") was on repos that were **picked before
+any result was seen and not used during development**.
+
+**Read the later numbers with this in mind.** The errors that first measurement exposed on those same repos drove
+the fixes described in "Fix 1", "Fix 2" and "Fix 3", and Python's first run drove the return-type change. The
+numbers after each fix are therefore not a blind test: they show that a fix removed the errors it targeted without
+losing correct edges, and they overstate how a fresh repository would score. Run the scripts on a repo you care about
+for a number that isn't tainted by this.
 
 What this is not: evidence of adoption. Nobody outside the project has used or reviewed these results, and the
 human-labeled sample C ([`EVALUATION.md`](EVALUATION.md#human-reviewed-validation-sample-c--pending)) is still

packages/web/package.json

@@ -10,6 +10,8 @@
     "@codegraph/extractors": "*",
     "@codegraph/parser": "*",
     "@dagrejs/dagre": "^1.1.4",
+    "@fontsource-variable/inter": "5.3.0",
+    "@fontsource-variable/jetbrains-mono": "5.3.0",
     "@xyflow/react": "^12.3.0",
     "fflate": "0.8.2",
     "react": "^18.3.1",

packages/web/src/hooks.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useRef, useState, type CSSProperties, type ReactNode, type RefObject } from 'react';
+
+const reducedMotion = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+/** True once the element has scrolled into view (and stays true), for reveal-on-scroll. */
+export function useInView<T extends HTMLElement>(): [RefObject<T>, boolean] {
+  const ref = useRef<T>(null);
+  const [seen, setSeen] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || seen) return;
+    if (typeof IntersectionObserver === 'undefined' || reducedMotion()) return setSeen(true);
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setSeen(true);
+          io.disconnect();
+        }
+      },
+      { threshold: 0.12, rootMargin: '0px 0px -6% 0px' },
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [seen]);
+  return [ref, seen];
+}
+
+/** Fades and lifts its children in when scrolled into view. */
+export function Reveal({ children, delay = 0, className = '' }: { children: ReactNode; delay?: number; className?: string }) {
+  const [ref, seen] = useInView<HTMLDivElement>();
+  return (
+    <div ref={ref} className={`reveal${seen ? ' in' : ''} ${className}`.trim()} style={{ '--d': `${delay}ms` } as CSSProperties}>
+      {children}
+    </div>
+  );
+}

packages/web/src/main.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import '@fontsource-variable/inter';
+import '@fontsource-variable/jetbrains-mono';
 import { App } from './App';
 import './styles.css';