feat: Add live code examples across all documentation

Pages with interactive code blocks:
- /docs/concepts/trinity-identity - φ² + 1/φ² = 3 verification
- /docs/api/vsa - VSA bind/similarity operations
- /docs/api/hybrid - Memory comparison packed vs unpacked
- /docs/math-foundations/formulas - All formula verification
- /docs/getting-started/quickstart - Ternary vector demo

All examples are editable in browser with instant results.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

Author: gHashTag

docsite/docs/api/hybrid.md

@@ -42,3 +42,59 @@ vector.ensureUnpacked(); // Compute efficient
 |----------|-------|-------------|
 | `MAX_TRITS` | 59049 | Maximum dimension |
 | `SIMD_WIDTH` | 32 | Parallel trits |
+
+## Memory Comparison
+
+```jsx live
+function MemoryDemo() {
+  const [trits, setTrits] = React.useState(1000);
+
+  // Storage calculations
+  const binaryBits = trits * 2;          // 2 bits per trit (naive)
+  const packedBits = trits * 1.585;      // log2(3) bits per trit
+  const unpackedBits = trits * 8;        // 1 byte per trit
+
+  const savings = ((binaryBits - packedBits) / binaryBits * 100).toFixed(1);
+
+  return (
+    <div style={{fontFamily: 'monospace'}}>
+      <div>
+        <label>Trits: </label>
+        <input
+          type="range"
+          min="100"
+          max="10000"
+          value={trits}
+          onChange={(e) => setTrits(Number(e.target.value))}
+        />
+        <span> {trits}</span>
+      </div>
+      <table style={{marginTop: '1rem', width: '100%'}}>
+        <thead>
+          <tr><th>Mode</th><th>Bits</th><th>Bytes</th></tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Binary (2 bit)</td>
+            <td>{binaryBits}</td>
+            <td>{(binaryBits/8).toFixed(0)}</td>
+          </tr>
+          <tr style={{color: '#16a34a', fontWeight: 'bold'}}>
+            <td>Packed (1.58 bit)</td>
+            <td>{packedBits.toFixed(0)}</td>
+            <td>{(packedBits/8).toFixed(0)}</td>
+          </tr>
+          <tr>
+            <td>Unpacked (8 bit)</td>
+            <td>{unpackedBits}</td>
+            <td>{(unpackedBits/8).toFixed(0)}</td>
+          </tr>
+        </tbody>
+      </table>
+      <div style={{marginTop: '0.5rem'}}>
+        <b>Packed savings vs binary: {savings}%</b>
+      </div>
+    </div>
+  );
+}
+```

docsite/docs/api/vsa.md

@@ -81,3 +81,41 @@ Cyclic right shift for sequence encoding.
 ```zig
 const shifted = vsa.permute(&vector, 3);
 ```
+
+## Try It Live
+
+```jsx live
+function VSADemo() {
+  // Ternary vectors: {-1, 0, +1}
+  const vecA = [1, -1, 0, 1, -1, 1, 0, -1];
+  const vecB = [-1, 1, 1, 0, -1, 1, -1, 0];
+
+  // Bind: element-wise multiplication
+  const bind = (a, b) => a.map((v, i) => v * b[i]);
+
+  // Similarity: dot product normalized
+  const similarity = (a, b) => {
+    const dot = a.reduce((s, v, i) => s + v * b[i], 0);
+    return (dot / a.length).toFixed(3);
+  };
+
+  // Hamming distance: count differences
+  const hamming = (a, b) => a.filter((v, i) => v !== b[i]).length;
+
+  const bound = bind(vecA, vecB);
+  const selfBound = bind(vecA, vecA);
+
+  return (
+    <div style={{fontFamily: 'monospace', fontSize: '14px'}}>
+      <div><b>Vector A:</b> [{vecA.join(', ')}]</div>
+      <div><b>Vector B:</b> [{vecB.join(', ')}]</div>
+      <hr/>
+      <div><b>bind(A, B):</b> [{bound.join(', ')}]</div>
+      <div><b>bind(A, A):</b> [{selfBound.join(', ')}] (all +1 = self-inverse)</div>
+      <hr/>
+      <div><b>similarity(A, B):</b> {similarity(vecA, vecB)}</div>
+      <div><b>hamming(A, B):</b> {hamming(vecA, vecB)} differences</div>
+    </div>
+  );
+}
+```

docsite/docs/getting-started/quickstart.md

@@ -71,6 +71,50 @@ zig test src/vsa.zig
 ./bin/vibee chat --model path/to/model.gguf
 ```
 
+## Try It Now
+
+No installation needed — experiment with ternary vectors in your browser:
+
+```jsx live
+function TernaryDemo() {
+  const [dim, setDim] = React.useState(8);
+
+  // Generate random ternary vector {-1, 0, +1}
+  const randomTernary = (n) =>
+    Array.from({length: n}, () => Math.floor(Math.random() * 3) - 1);
+
+  const [vecA, setVecA] = React.useState(randomTernary(8));
+  const [vecB, setVecB] = React.useState(randomTernary(8));
+
+  const regenerate = () => {
+    setVecA(randomTernary(dim));
+    setVecB(randomTernary(dim));
+  };
+
+  // VSA operations
+  const bind = (a, b) => a.map((v, i) => v * b[i]);
+  const similarity = (a, b) => {
+    const dot = a.reduce((s, v, i) => s + v * b[i], 0);
+    return dot / Math.sqrt(a.length);
+  };
+
+  const bound = bind(vecA, vecB);
+  const sim = similarity(vecA, vecB).toFixed(3);
+
+  return (
+    <div style={{fontFamily: 'monospace'}}>
+      <button onClick={regenerate}>Generate New Vectors</button>
+      <div style={{marginTop: '1rem'}}>
+        <div><b>A:</b> [{vecA.join(', ')}]</div>
+        <div><b>B:</b> [{vecB.join(', ')}]</div>
+        <div><b>bind(A,B):</b> [{bound.join(', ')}]</div>
+        <div><b>similarity:</b> {sim}</div>
+      </div>
+    </div>
+  );
+}
+```
+
 ## Next Steps
 
 - [Installation Guide](/docs/getting-started/installation) — Detailed setup

docsite/docs/math-foundations/formulas.md

@@ -395,3 +395,79 @@ pub fn verifyCMBSpectralIndex() f64 {
     // Returns ~0.96490
 }
 ```
+
+## Try It Live
+
+Verify the formulas interactively:
+
+```jsx live
+function FormulaVerifier() {
+  const PI = Math.PI;
+  const PHI = (1 + Math.sqrt(5)) / 2;
+  const E = Math.E;
+
+  const formulas = [
+    {
+      name: 'Trinity Identity',
+      formula: 'φ² + 1/φ² = 3',
+      calc: PHI**2 + 1/(PHI**2),
+      expected: 3,
+    },
+    {
+      name: 'Fine Structure (1/α)',
+      formula: '4π³ + π² + π',
+      calc: 4*PI**3 + PI**2 + PI,
+      expected: 137.036,
+    },
+    {
+      name: 'Proton/Electron Mass',
+      formula: '6π⁵',
+      calc: 6 * PI**5,
+      expected: 1836.15,
+    },
+    {
+      name: 'Koide Q',
+      formula: '2/3',
+      calc: 2/3,
+      expected: 0.666656,
+    },
+    {
+      name: 'CMB Spectral Index',
+      formula: '94/π⁴',
+      calc: 94 / PI**4,
+      expected: 0.9649,
+    },
+    {
+      name: 'E8 Dimension',
+      formula: '3⁵ + 5',
+      calc: 3**5 + 5,
+      expected: 248,
+    },
+  ];
+
+  return (
+    <table style={{width: '100%', fontSize: '14px'}}>
+      <thead>
+        <tr>
+          <th>Constant</th>
+          <th>Formula</th>
+          <th>Calculated</th>
+          <th>Expected</th>
+          <th>Match</th>
+        </tr>
+      </thead>
+      <tbody>
+        {formulas.map((f, i) => (
+          <tr key={i}>
+            <td>{f.name}</td>
+            <td><code>{f.formula}</code></td>
+            <td>{f.calc.toFixed(6)}</td>
+            <td>{f.expected}</td>
+            <td>{Math.abs(f.calc - f.expected) < 0.01 ? '✓' : '~'}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+```