Add self-hosted 3D particle visualizations for BST axioms

Embed interactive Three.js particle shapes into the web app:
- Landing: BST_COMPLETE 30-second arc as animated hero background
- Formal Theory: "See in 3D" expand on each axiom (1-4) + Theorem 1
- Path Invariance: 6-cluster convergence visualization with probe depth slider

New particle engine (src/particles/) with 8 shape modules ported from
bst_particles, lazy loading, IntersectionObserver auto-pause, and mobile
optimization. Three.js code-split into separate chunk (~197KB gzipped).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Jamie Nucho

web/package-lock.json

@@ -14,7 +14,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^9.0.1",
-    "react-router-dom": "^6.21.0"
+    "react-router-dom": "^6.21.0",
+    "three": "^0.183.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

web/package.json

@@ -1,7 +1,8 @@
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { Link } from 'react-router-dom'
+import LazyParticleVis from '../particles/LazyParticleVis'
+import { AXIOM1, AXIOM2, AXIOM3, AXIOM4, THEOREM1 } from '../particles/shapes/index.js'
 
-// Map theorems to the probe questions that test them
 const THEOREM_PROBES = {
   'theorem-0': { label: 'Theorem 0: Unification', questions: [5, 16, 17, 18], description: 'Godel, Turing, and Chaitin as one structural limit' },
   'theorem-1': { label: 'Theorem 1: Self-Grounding Limit', questions: [1, 2, 11, 12, 26, 27, 28], description: 'No expressive system can self-ground' },
@@ -10,6 +11,13 @@ const THEOREM_PROBES = {
   'falsifiability': { label: 'Falsifiability', questions: [11, 17, 20, 26, 28], description: 'Every attempt to falsify failed' },
 }
 
+const AXIOM_SHAPES = {
+  1: AXIOM1,
+  2: AXIOM2,
+  3: AXIOM3,
+  4: AXIOM4,
+}
+
 export default function FormalTheory() {
   return (
     <div className="max-w-3xl mx-auto px-4 py-8">
@@ -68,7 +76,7 @@ export default function FormalTheory() {
           </div>
         </Theorem>
 
-        <Theorem id="theorem-1" num={1} name="Self-Grounding Limit">
+        <Theorem id="theorem-1" num={1} name="Self-Grounding Limit" shape={THEOREM1}>
           <Code>{'∀S : Expressive(S) ∧ SelfReferential(S)\n→ ¬SelfGrounding(C_S)'}</Code>
           <p className="text-xs text-muted mt-2">
             No sufficiently expressive self-referential system can achieve self-grounding of its own constraints.
@@ -143,19 +151,64 @@ function Section({ title, children }) {
 }
 
 function Axiom({ num, name, children }) {
+  const [showViz, setShowViz] = useState(false)
+  const shape = AXIOM_SHAPES[num]
+
   return (
     <div className="mb-4 p-4 border border-border rounded-lg">
       <p className="text-xs text-muted mb-2">Axiom {num}: {name}</p>
       {children}
+      {shape && (
+        <>
+          <button
+            onClick={() => setShowViz(!showViz)}
+            className="mt-3 text-xs text-accent hover:text-accent/80 transition-colors"
+          >
+            {showViz ? 'Hide 3D' : 'See in 3D'}
+          </button>
+          {showViz && (
+            <div className="mt-3 relative h-64 rounded overflow-hidden border border-border/50">
+              <LazyParticleVis
+                shape={shape}
+                count={10000}
+                bloom
+                className="absolute inset-0"
+              />
+            </div>
+          )}
+        </>
+      )}
     </div>
   )
 }
 
-function Theorem({ id, num, name, children }) {
+function Theorem({ id, num, name, shape, children }) {
+  const [showViz, setShowViz] = useState(false)
+
   return (
     <div id={id} className="mb-4 p-4 border border-accent/20 rounded-lg bg-accent/5">
       <p className="text-xs text-accent mb-2">Theorem {num}: {name}</p>
       {children}
+      {shape && (
+        <>
+          <button
+            onClick={() => setShowViz(!showViz)}
+            className="mt-3 text-xs text-accent hover:text-accent/80 transition-colors"
+          >
+            {showViz ? 'Hide 3D' : 'See in 3D'}
+          </button>
+          {showViz && (
+            <div className="mt-3 relative h-64 rounded overflow-hidden border border-accent/20">
+              <LazyParticleVis
+                shape={shape}
+                count={10000}
+                bloom
+                className="absolute inset-0"
+              />
+            </div>
+          )}
+        </>
+      )}
     </div>
   )
 }

web/src/components/FormalTheory.jsx

@@ -1,4 +1,8 @@
 import { Link } from 'react-router-dom'
+import { lazy, Suspense } from 'react'
+
+const ParticleVis = lazy(() => import('../particles/ParticleVis'))
+import { BST_COMPLETE } from '../particles/shapes/index.js'
 
 export default function Landing({ data }) {
   const { meta, questions } = data
@@ -7,15 +11,31 @@ export default function Landing({ data }) {
   return (
     <div className="min-h-screen flex flex-col">
       {/* Hero */}
-      <section className="flex-1 flex items-center justify-center px-4">
-        <div className="max-w-2xl text-center">
-          <p className="text-muted text-xs tracking-[0.3em] uppercase mb-6">
+      <section className="flex-1 flex items-center justify-center px-4 relative overflow-hidden min-h-[80vh]">
+        {/* Particle background */}
+        <Suspense fallback={null}>
+          <ParticleVis
+            shape={BST_COMPLETE}
+            count={15000}
+            autoRotate
+            showHUD={false}
+            showControls={false}
+            bloom
+            className="absolute inset-0 z-0"
+          />
+        </Suspense>
+
+        <div className="max-w-2xl text-center relative z-10">
+          <p className="text-muted text-xs tracking-[0.3em] uppercase mb-6"
+             style={{ textShadow: '0 0 8px rgba(0,0,0,0.8)' }}>
             Bounded Systems Theory
           </p>
-          <h1 className="text-3xl md:text-5xl font-light leading-tight mb-6">
+          <h1 className="text-3xl md:text-5xl font-light leading-tight mb-6"
+              style={{ textShadow: '0 0 12px rgba(0,0,0,0.9), 0 0 24px rgba(0,0,0,0.7)' }}>
             No system can model<br />its own source.
           </h1>
-          <p className="text-muted text-sm md:text-base leading-relaxed mb-10 max-w-lg mx-auto">
+          <p className="text-muted text-sm md:text-base leading-relaxed mb-10 max-w-lg mx-auto"
+             style={{ textShadow: '0 0 8px rgba(0,0,0,0.8)' }}>
             64 questions. 6 AI architectures. Every system hit the same structural wall.
             This is the data.
           </p>

web/src/components/Landing.jsx

@@ -1,4 +1,6 @@
 import { useState, useEffect, useRef } from 'react'
+import LazyParticleVis from '../particles/LazyParticleVis'
+import { BST_CONVERGENCE } from '../particles/shapes/index.js'
 
 const PHASE_COLORS = {
   foundation: '#3b82f6',
@@ -189,6 +191,23 @@ export default function PathInvariance() {
         </div>
       )}
 
+      {/* Convergence Visualization */}
+      <section className="mb-10">
+        <h2 className="text-sm font-semibold mb-2">Watch them converge</h2>
+        <p className="text-xs text-muted mb-4">
+          6 AI architectures start as separate clusters. Drag the probe depth slider to push them
+          toward self-referential limits — watch them merge into one structure.
+        </p>
+        <div className="relative h-80 rounded-lg overflow-hidden border border-border">
+          <LazyParticleVis
+            shape={BST_CONVERGENCE}
+            count={15000}
+            bloom
+            className="absolute inset-0"
+          />
+        </div>
+      </section>
+
       {/* The 6 models tested */}
       <section className="mb-10">
         <h2 className="text-sm font-semibold mb-4">The 6 AI systems tested</h2>

web/src/components/PathInvariance.jsx

@@ -0,0 +1,40 @@
+import { useRef, useState, useEffect, lazy, Suspense } from 'react'
+
+const ParticleVis = lazy(() => import('./ParticleVis'))
+
+export default function LazyParticleVis(props) {
+  const sentinelRef = useRef(null)
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    const el = sentinelRef.current
+    if (!el) return
+    const obs = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true)
+          obs.disconnect()
+        }
+      },
+      { rootMargin: '200px' }
+    )
+    obs.observe(el)
+    return () => obs.disconnect()
+  }, [])
+
+  return (
+    <div ref={sentinelRef} className={props.className || ''}>
+      {visible ? (
+        <Suspense fallback={
+          <div className="absolute inset-0 flex items-center justify-center">
+            <span className="text-xs text-muted animate-pulse">Loading visualization...</span>
+          </div>
+        }>
+          <ParticleVis {...props} />
+        </Suspense>
+      ) : (
+        <div className="absolute inset-0 bg-surface/50 rounded" />
+      )}
+    </div>
+  )
+}