site(math): Life in Glyph — gallery of four Claude × Glyph showcases (#72)

## Summary

Adds **three new "Draw Me ___" pages** plus a **gallery index** that
ties them together with the existing Orion page. Each new page follows
the same prompt-as-product template: the English prompt → hero animation
→ three-act narrative → JSON spec + Glyph-rendered SVG → four "your
turn" prompt templates.

Together the four pages exercise four of Glyph's six data shapes,
turning the series into a tour of the grammar:

| Page | Glyph shape | Math |
|------|-------------|------|
| 🚀 [Orion](https://seanhanca.github.io/glyph/math/draw-me.html) |
`function` (parametric) | Three-phase ternary x(t), y(t) |
| ❤️
[Heartbeat](https://seanhanca.github.io/glyph/math/draw-me-heartbeat.html)
| `trajectory` (ODE) | FitzHugh-Nagumo 1961 |
| 🐆
[Leopard](https://seanhanca.github.io/glyph/math/draw-me-leopard.html) |
`pde-solve` (RD) | Gray-Scott 1952/1993 |
| 🌻
[Sunflower](https://seanhanca.github.io/glyph/math/draw-me-sunflower.html)
| `recurrence` | Vogel 1979 phyllotaxis |

## New pages

- `site/math/draw-me-heartbeat.html` — beating heart icon + ECG trace
- `site/math/draw-me-leopard.html` — leopard silhouette + 30 spots
emerging in stagger over 8 seconds
- `site/math/draw-me-sunflower.html` — sunflower silhouette + 200 seeds
blooming at the golden angle (generated in-page from the same formula
the Glyph spec compiles)
- `site/math/life-in-glyph.html` — gallery index with 2×2 grid of cards
(each shows the prompt + thumbnail + grammar tag) plus a grammar-tour
table

## New byte-locked fixtures

Locked in CI across all 6 matrix cells:
- `heartbeat.json` — `trajectory` ODE, 2000 samples
- `leopard-spots.json` — `pde-solve` RD, 32×32 grid, 400 steps
- `sunflower-seeds.json` — `recurrence`, 800 seeds at golden angle

## README

New "Life in Glyph" section between "See it in action" and "How it
works" with a 2×2 table of all four pages, thumbnails, prompt previews,
and Glyph-shape tags.

## Cross-page nav

- `joy.html` hero CTA now points at the gallery (was: just Orion)
- `draw-me.html` CTA updated to link to the gallery + the three new
pages
- Each new page has a breadcrumb back to `life-in-glyph.html` and a
bottom nav linking the three siblings

## Test plan

- [x] 3 new fixture tests pass (snapshots locked)
- [x] Full vitest pass: 662/662 (was 659)
- [x] Lint clean (only the pre-existing mcp/server.test.ts warning)
- [x] HTML/SVG tag balance verified for all 4 new pages
- [x] Playground bundle already current (no schema change)

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

Co-authored-by: seanhanca <infraservice@livepeer.org>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 3 people

README.md

@@ -163,6 +163,55 @@ Every image below is a real fixture in this repo, locked at byte-identity in CI.
 
 ---
 
+## Life in Glyph
+
+Four hand-crafted showcases of what one English prompt + an AI agent + Glyph produce together. Each page picks a subject anyone can recognize, walks the reader through **prompt → JSON spec → byte-locked SVG → animated page**, and ends with prompt templates you can adapt for your own ideas.
+
+**Gallery:** [`seanhanca.github.io/glyph/math/life-in-glyph.html`](https://seanhanca.github.io/glyph/math/life-in-glyph.html)
+
+<table>
+<tr>
+<td width="50%" valign="top">
+  <a href="https://seanhanca.github.io/glyph/math/draw-me.html">
+    <img alt="Orion's journey — Earth, Moon, spacecraft path" src="https://raw.githubusercontent.com/seanhanca/glyph/main/packages/core/__fixtures__/math/orion-journey.svg" width="100%">
+  </a>
+  <h4>🚀 <a href="https://seanhanca.github.io/glyph/math/draw-me.html">Orion's journey to the Moon</a></h4>
+  <sub><code>data.shape: "function"</code> · NASA Artemis I, 25 days, three phases</sub><br><br>
+  <sub><b>Prompt:</b> "Draw me NASA's Artemis I Orion spacecraft journey to the Moon and back. Show the outbound transit, a wide retrograde orbit, and the return arc. Beautiful for a 5-year-old, meaningful for a 70-year-old."</sub>
+</td>
+<td width="50%" valign="top">
+  <a href="https://seanhanca.github.io/glyph/math/draw-me-heartbeat.html">
+    <img alt="Heartbeat — FitzHugh-Nagumo trace" src="https://raw.githubusercontent.com/seanhanca/glyph/main/packages/core/__fixtures__/math/heartbeat.svg" width="100%">
+  </a>
+  <h4>❤️ <a href="https://seanhanca.github.io/glyph/math/draw-me-heartbeat.html">A heartbeat at rest</a></h4>
+  <sub><code>data.shape: "trajectory"</code> · FitzHugh-Nagumo relaxation oscillator (1961)</sub><br><br>
+  <sub><b>Prompt:</b> "Draw me a heartbeat — a resting human heart at 60 BPM. Use FitzHugh-Nagumo so the trace has the real spike-and-recover rhythm. Beautiful for a child, meaningful for a grandparent."</sub>
+</td>
+</tr>
+<tr>
+<td width="50%" valign="top">
+  <a href="https://seanhanca.github.io/glyph/math/draw-me-leopard.html">
+    <img alt="Leopard's spots — Gray-Scott reaction-diffusion" src="https://raw.githubusercontent.com/seanhanca/glyph/main/packages/core/__fixtures__/math/leopard-spots.svg" width="100%">
+  </a>
+  <h4>🐆 <a href="https://seanhanca.github.io/glyph/math/draw-me-leopard.html">How the leopard got his spots</a></h4>
+  <sub><code>data.shape: "pde-solve"</code> · Gray-Scott reaction-diffusion · Turing 1952, Kipling 1902</sub><br><br>
+  <sub><b>Prompt:</b> "Draw me how the leopard got his spots. Use Gray-Scott reaction-diffusion at F = k = 0.062. Start from a single seed, run 400 steps, let the pattern emerge."</sub>
+</td>
+<td width="50%" valign="top">
+  <a href="https://seanhanca.github.io/glyph/math/draw-me-sunflower.html">
+    <img alt="Sunflower seeds — golden-angle phyllotaxis" src="https://raw.githubusercontent.com/seanhanca/glyph/main/packages/core/__fixtures__/math/sunflower-seeds.svg" width="100%">
+  </a>
+  <h4>🌻 <a href="https://seanhanca.github.io/glyph/math/draw-me-sunflower.html">A sunflower's secret math</a></h4>
+  <sub><code>data.shape: "recurrence"</code> · Vogel's golden-angle phyllotaxis (1979)</sub><br><br>
+  <sub><b>Prompt:</b> "Draw me how a sunflower packs its seeds. Each seed n at radius √n, angle n × 137.5° (the golden angle). 200 seeds. Show why this angle and only this angle works."</sub>
+</td>
+</tr>
+</table>
+
+> Each page ends with four prompt templates ("your turn — prompts to try") across different domains, so you can adapt the pattern to your own subject — a zebra's stripes, a pine cone's spirals, a different mission, a different oscillator.
+
+---
+
 ## How it works
 
 ```

packages/core/__fixtures__/math/heartbeat.json

@@ -0,0 +1,30 @@
+{
+  "version": "glyph/0.1",
+  "title": "Heartbeat — FitzHugh-Nagumo relaxation oscillator (life-in-glyph)",
+  "data": {
+    "trajectory": {
+      "shape": "trajectory",
+      "dxdt": "x - x*x*x/3 - y + 0.5",
+      "dydt": "0.08*(x + 0.7 - 0.8*y)",
+      "initial": { "x": -1.2, "y": -0.6 },
+      "time": { "min": 0, "max": 200, "samples": 2000 }
+    }
+  },
+  "layers": [
+    {
+      "mark": "line",
+      "encoding": {
+        "x": {
+          "field": "t",
+          "type": "quantitative",
+          "scale": { "domain": [0, 200] }
+        },
+        "y": {
+          "field": "x",
+          "type": "quantitative",
+          "scale": { "domain": [-2.5, 2.5] }
+        }
+      }
+    }
+  ]
+}

packages/core/__fixtures__/math/heartbeat.svg

@@ -0,0 +1,52 @@
+/**
+ * Glyph spec for a resting heartbeat — FitzHugh-Nagumo relaxation
+ * oscillator (Richard FitzHugh, 1961). Powers the "Life in Glyph"
+ * gallery's `draw-me-heartbeat.html` showcase.
+ *
+ * The 2D ODE:
+ *   dV/dt = V - V³/3 - W + I    (membrane potential, fast variable)
+ *   dW/dt = ε(V + a - bW)        (recovery variable, slow)
+ *
+ * with I=0.5, a=0.7, b=0.8, ε=0.08 — the classic FHN parameters
+ * that produce the spike-and-recover pattern. We map V → trajectory.x
+ * and W → trajectory.y. The plot shows V(t), the membrane potential,
+ * which traces an ECG-like rhythm.
+ *
+ * Determinism gate: byte-identical SVG. RK4 + clampSamplerPrecision
+ * keep the cross-platform libm drift below the SVG layer.
+ */
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+import { type CompileFieldInfo, compileSpec } from "../../src/compiler/compile.js";
+import { renderSvg } from "../../src/render/svg.js";
+import { parseSpec } from "../../src/spec/parse.js";
+
+const fixtureUrl = new URL("./heartbeat.json", import.meta.url);
+const fixturePath = fileURLToPath(fixtureUrl);
+
+const schema: CompileFieldInfo[] = [
+  { name: "x", type: "DOUBLE" },
+  { name: "y", type: "DOUBLE" },
+];
+
+function buildAnchorRows(): ReadonlyArray<ReadonlyArray<number>> {
+  return [
+    [0, -2.5],
+    [200, 2.5],
+  ];
+}
+
+describe("math examples — heartbeat (life-in-glyph)", () => {
+  it("renders the FitzHugh-Nagumo membrane-potential trace deterministically", async () => {
+    const raw = JSON.parse(readFileSync(fixturePath, "utf8"));
+    const spec = parseSpec(raw);
+    const rows = buildAnchorRows();
+    const svg = renderSvg(compileSpec({ spec, rows, schema }));
+    const svg2 = renderSvg(compileSpec({ spec, rows, schema }));
+    expect(svg2).toBe(svg);
+    const pathCount = (svg.match(/<path /g) ?? []).length;
+    expect(pathCount).toBeGreaterThanOrEqual(1);
+    await expect(svg).toMatchFileSnapshot("./heartbeat.svg");
+  });
+});

packages/core/__fixtures__/math/heartbeat.test.ts

@@ -0,0 +1,40 @@
+{
+  "version": "glyph/0.1",
+  "title": "Leopard spots — Gray-Scott reaction-diffusion (life-in-glyph)",
+  "data": {
+    "pde_solve": {
+      "shape": "pde-solve",
+      "kind": "reaction-diffusion",
+      "domain": { "x": [-1, 1], "y": [-1, 1] },
+      "grid": { "rows": 32, "cols": 32 },
+      "initial": "0",
+      "initial_U": "1",
+      "initial_V": "exp(-25*(x*x + y*y))*0.4",
+      "params": { "Du": 1.0, "Dv": 0.5, "F": 0.062, "k": 0.062 },
+      "boundary": "periodic",
+      "steps": 400,
+      "dt": 0.0008
+    }
+  },
+  "layers": [
+    {
+      "mark": "heatmap",
+      "encoding": {
+        "x": {
+          "field": "x",
+          "type": "quantitative",
+          "scale": { "domain": [-1, 1] }
+        },
+        "y": {
+          "field": "y",
+          "type": "quantitative",
+          "scale": { "domain": [-1, 1] }
+        },
+        "color": {
+          "field": "u",
+          "type": "quantitative"
+        }
+      }
+    }
+  ]
+}

packages/core/__fixtures__/math/leopard-spots.json

@@ -0,0 +1,55 @@
+/**
+ * Glyph spec for "How the Leopard Got His Spots" — Gray-Scott
+ * reaction-diffusion (Alan Turing, *The Chemical Basis of
+ * Morphogenesis*, 1952; Pearson, *Complex patterns in a simple
+ * system*, 1993).  Powers the "Life in Glyph" gallery's
+ * `draw-me-leopard.html` showcase.
+ *
+ * The leopard-spots regime sits at F = k = 0.062 in the (F, k)
+ * parameter space — small isolated nuclei grow and then divide,
+ * locking into a hexagonal spot pattern. Compared with the v2
+ * `rd-spots` fixture this uses a 32×32 grid (more spot detail),
+ * 400 steps (well into the pattern-locked regime), and a slightly
+ * tighter Gaussian seed.
+ *
+ * Determinism gate: byte-identical SVG. The per-cell precision
+ * clamp in pde-solve keeps the libm boundary closed.
+ */
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+import { type CompileFieldInfo, compileSpec } from "../../src/compiler/compile.js";
+import { renderSvg } from "../../src/render/svg.js";
+import { parseSpec } from "../../src/spec/parse.js";
+
+const fixtureUrl = new URL("./leopard-spots.json", import.meta.url);
+const fixturePath = fileURLToPath(fixtureUrl);
+
+const schema: CompileFieldInfo[] = [
+  { name: "x", type: "DOUBLE" },
+  { name: "y", type: "DOUBLE" },
+];
+
+function buildAnchorRows(): ReadonlyArray<ReadonlyArray<number>> {
+  return [
+    [-1, -1],
+    [1, 1],
+  ];
+}
+
+describe("math examples — leopard-spots (life-in-glyph)", () => {
+  it("renders the Gray-Scott spot pattern deterministically", async () => {
+    const raw = JSON.parse(readFileSync(fixturePath, "utf8"));
+    const spec = parseSpec(raw);
+    const rows = buildAnchorRows();
+    const svg = renderSvg(compileSpec({ spec, rows, schema }));
+    const svg2 = renderSvg(compileSpec({ spec, rows, schema }));
+    expect(svg2).toBe(svg);
+    const rectCount = (svg.match(/<rect /g) ?? []).length;
+    // 32×32 grid = 1024 cells. Some may be deduped at the renderer
+    // level if they share styles, but we expect close to 1024.
+    expect(rectCount).toBeGreaterThanOrEqual(1024);
+    expect(rectCount).toBeLessThanOrEqual(1100);
+    await expect(svg).toMatchFileSnapshot("./leopard-spots.svg");
+  });
+});

packages/core/__fixtures__/math/leopard-spots.svg

@@ -0,0 +1,33 @@
+{
+  "version": "glyph/0.1",
+  "title": "Sunflower seeds — golden-angle phyllotaxis (life-in-glyph)",
+  "data": {
+    "recurrence": {
+      "shape": "recurrence",
+      "state": ["x", "y"],
+      "initial": { "x": 0, "y": 0 },
+      "step": {
+        "x": "sqrt(n + 1) * cos((n + 1) * 2.39996322972865332)",
+        "y": "sqrt(n + 1) * sin((n + 1) * 2.39996322972865332)"
+      },
+      "steps": 800
+    }
+  },
+  "layers": [
+    {
+      "mark": "point",
+      "encoding": {
+        "x": {
+          "field": "x",
+          "type": "quantitative",
+          "scale": { "domain": [-32, 32] }
+        },
+        "y": {
+          "field": "y",
+          "type": "quantitative",
+          "scale": { "domain": [-32, 32] }
+        }
+      }
+    }
+  ]
+}

packages/core/__fixtures__/math/leopard-spots.test.ts

@@ -0,0 +1,58 @@
+/**
+ * Glyph spec for sunflower phyllotaxis — Helmut Vogel's 1979 model
+ * for the golden-angle seed packing observed in *Helianthus annuus*,
+ * pine cones, pineapples, and aloe rosettes. Powers the "Life in
+ * Glyph" gallery's `draw-me-sunflower.html` showcase.
+ *
+ * Each seed n is placed at:
+ *   r(n) = sqrt(n)
+ *   θ(n) = n · golden_angle    where golden_angle = π · (3 − √5)
+ *                                              ≈ 137.50776° ≈ 2.39996 rad
+ *
+ * This is the angle that maximises packing density — any rational
+ * multiple of π gives radial stripes; only the irrational golden
+ * angle fills the disc evenly. Expressed as a Glyph `recurrence`
+ * with `n` driving each step.
+ *
+ * Determinism gate: byte-identical SVG. cos/sin precision clamps
+ * in the recurrence shape keep cross-platform libm drift below the
+ * SVG layer.
+ */
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+import { type CompileFieldInfo, compileSpec } from "../../src/compiler/compile.js";
+import { renderSvg } from "../../src/render/svg.js";
+import { parseSpec } from "../../src/spec/parse.js";
+
+const fixtureUrl = new URL("./sunflower-seeds.json", import.meta.url);
+const fixturePath = fileURLToPath(fixtureUrl);
+
+const schema: CompileFieldInfo[] = [
+  { name: "x", type: "DOUBLE" },
+  { name: "y", type: "DOUBLE" },
+];
+
+function buildAnchorRows(): ReadonlyArray<ReadonlyArray<number>> {
+  return [
+    [-32, -32],
+    [32, 32],
+  ];
+}
+
+describe("math examples — sunflower-seeds (life-in-glyph)", () => {
+  it("renders the golden-angle phyllotaxis pattern deterministically", async () => {
+    const raw = JSON.parse(readFileSync(fixturePath, "utf8"));
+    const spec = parseSpec(raw);
+    const rows = buildAnchorRows();
+    const svg = renderSvg(compileSpec({ spec, rows, schema }));
+    const svg2 = renderSvg(compileSpec({ spec, rows, schema }));
+    expect(svg2).toBe(svg);
+    // 800 steps + the initial (0,0) seed = 801 rows. The point mark
+    // emits one <circle> per row; some at the origin may collapse
+    // but the bulk should be unique.
+    const circleCount = (svg.match(/<circle /g) ?? []).length;
+    expect(circleCount).toBeGreaterThanOrEqual(700);
+    await expect(svg).toMatchFileSnapshot("./sunflower-seeds.svg");
+  });
+});