@parley-im/parley 0.0.0-stage → 0.1.0

package/web/ended.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex, nofollow">
+<title>This parley has ended</title>
+<link rel="icon" href="/static/icon.svg">
+<link rel="stylesheet" href="/static/app.css">
+</head>
+<body>
+<div class="lost">
+  <div>
+    <span class="mark" aria-hidden="true"><svg viewBox="4 4 24 24"><g fill="currentColor" stroke="none"><circle cx="8" cy="10" r="2.2"/><rect x="12" y="8" width="12" height="4" rx="2"/><rect x="6" y="14" width="20" height="4" rx="2" opacity=".7"/><rect x="6" y="20" width="13" height="4" rx="2" opacity=".7"/></g></svg></span>
+    <h1>This parley has ended</h1>
+    <p>Thanks for the feedback. The conversation isn't available here anymore.</p>
+  </div>
+</div>
+</body>
+</html>

package/web/home.js

@@ -0,0 +1,552 @@
+// parley.im's front page, without a word on it. An agent in the middle checks
+// in with people, one and then another, hears them out and writes down what
+// it hears. When the page fills up it boils it down, sends it off and starts
+// again, forever. Every line is a line of text with the letters taken out.
+(() => {
+  const canvas = document.getElementById("field");
+  const ctx = canvas && canvas.getContext("2d");
+  if (!ctx) return;
+
+  const still = matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const rand = (a, b) => a + Math.random() * (b - a);
+  const pick = (list) => list[Math.floor(Math.random() * list.length)];
+  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
+  const ease = (t) => (t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2);
+  const toward = (v, to, rate, dt) => v + (to - v) * (1 - Math.exp(-rate * dt));
+
+  // Word lengths in characters, about as often as English uses them.
+  const LENGTHS = [1, 2, 2, 3, 3, 3, 4, 4, 4, 5, 5, 6, 6, 7, 8, 9, 11];
+  function sentence(max, fill) {
+    const limit = Math.max(3, Math.round(max * fill));
+    const ws = [];
+    for (let n = 0; ; ) {
+      const w = pick(LENGTHS);
+      if (n + w > limit) break;
+      ws.push(w);
+      n += w + 1;
+    }
+    return ws.length ? ws : [3];
+  }
+  const span = (ws) => ws.reduce((n, w) => n + w + 1, -1);
+
+  const VISIBLE = 5; // lines a person's pane shows
+  let W = 0, H = 0, S = 1, CW = 4, BAR = 3, GAP = 10, PAD = 10;
+  let narrow = null, clock = 0, color = {};
+  let cx = 0, cy = 0, doc = null, people = [], packets = [], ripples = [], lifts = [], nextAsk = 0;
+
+  function readColors() {
+    const css = getComputedStyle(document.documentElement);
+    const v = (name) => css.getPropertyValue(name).trim();
+    color = { bg: v("--bg"), text: v("--text"), faint: v("--faint"), line: v("--line-strong"), accent: v("--accent") };
+  }
+
+  // ---------- the cast ----------
+
+  function build() {
+    const count = narrow ? 6 : W < 1000 ? 8 : 10;
+    people = Array.from({ length: count }, (_, i) => ({
+      angle: -Math.PI / 2 + ((i + (narrow ? 0 : 0.5)) / count) * Math.PI * 2 + rand(-0.14, 0.14),
+      reach: rand(0.82, 1),
+      bend: (i % 2 ? 1 : -1) * rand(0.1, 0.22),
+      phase: rand(0, 100),
+      chars: narrow ? 18 : 24,
+      lines: [],
+      scroll: 0,
+      state: "idle",
+      wait: rand(0.2, 3),
+      speed: rand(14, 30),
+      pause: 0,
+      plan: [],
+      busy: 0,
+    }));
+    doc = { chars: narrow ? 28 : 42, max: narrow ? 7 : 9, phase: "gather", t: 0, lines: [], queue: [], wait: 0, h: 0, titleY: null, title: { w: [], tw: [] } };
+    morph(doc.title, sentence(doc.chars * 0.55, rand(0.6, 1)));
+    doc.title.w = doc.title.tw.slice();
+    packets = [];
+    ripples = [];
+    lifts = [];
+    nextAsk = 0.4;
+  }
+
+  function place() {
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    W = window.innerWidth;
+    H = window.innerHeight;
+    canvas.width = Math.round(W * dpr);
+    canvas.height = Math.round(H * dpr);
+    canvas.style.width = `${W}px`;
+    canvas.style.height = `${H}px`;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+    const top = (document.querySelector(".topbar")?.getBoundingClientRect().bottom ?? 0) + 6;
+    const wasNarrow = narrow;
+    narrow = W < 600;
+    S = narrow ? clamp(W / 400, 0.82, 1.05) : clamp(Math.min(W, H - top) / 720, 0.82, 1.3);
+    CW = 4 * S;
+    BAR = 3.2 * S;
+    GAP = 10 * S;
+    PAD = 10 * S;
+    if (narrow !== wasNarrow || people.length !== (narrow ? 6 : W < 1000 ? 8 : 10)) build();
+
+    const x0 = 12, x1 = W - 12, y0 = top, y1 = H - 18;
+    cx = W / 2;
+    cy = (y0 + y1) / 2;
+    doc.w = doc.chars * CW + PAD * 2 + 9 * S;
+    const docBox = { x: cx, y: cy, w: doc.w, h: (doc.max + 1.7) * GAP + PAD * 2 };
+    const pw = people[0].chars * CW + PAD * 2 + 9 * S;
+    const ph = VISIBLE * GAP + PAD * 1.2;
+    const ry = (y1 - y0 - ph) / 2;
+    const rx = Math.min((x1 - x0 - pw) / 2, ry * 1.9);
+    for (const p of people) {
+      p.w = pw;
+      p.h = ph;
+      p.x = cx + Math.cos(p.angle) * rx * p.reach;
+      p.y = cy + Math.sin(p.angle) * ry * p.reach;
+    }
+    // Nudge panes apart where they'd overlap each other or the notes in the middle.
+    const margin = 12 * S;
+    for (let k = 0; k < 80; k++) {
+      for (const p of people) {
+        shove(p, docBox, margin, 1);
+        for (const q of people) if (q !== p) shove(p, q, margin, 0.5);
+        p.x = clamp(p.x, x0 + pw / 2, x1 - pw / 2);
+        p.y = clamp(p.y, y0 + ph / 2, y1 - ph / 2);
+      }
+    }
+  }
+
+  function shove(p, o, margin, share) {
+    const dx = p.x - o.x, dy = p.y - o.y;
+    const ox = (p.w + o.w) / 2 + margin - Math.abs(dx);
+    const oy = (p.h + o.h) / 2 + margin - Math.abs(dy);
+    if (ox <= 0 || oy <= 0) return;
+    if (ox < oy) p.x += (Math.sign(dx) || 1) * ox * share;
+    else p.y += (Math.sign(dy) || 1) * oy * share;
+  }
+
+  // A line that can be rewritten in place: its words ease toward new lengths.
+  function morph(line, ws) {
+    const n = Math.max(line.w.length, ws.length);
+    line.w = Array.from({ length: n }, (_, i) => line.w[i] ?? 0);
+    line.tw = Array.from({ length: n }, (_, i) => ws[i] ?? 0);
+  }
+
+  // ---------- what happens ----------
+
+  function ask(p) {
+    p.state = "asked";
+    const question = sentence(Math.round(p.chars * 0.85), rand(0.45, 1));
+    ripples.push({ t: 0 });
+    send(p, "out", [question], () => {
+      const count = pick([1, 2, 2, 3, 3, 4]);
+      p.plan = Array.from({ length: count }, (_, i) => sentence(p.chars, i === count - 1 ? rand(0.3, 0.8) : rand(0.8, 1)));
+      p.lines.push({ ws: question, shown: 0, kind: "q", sent: false, dim: 0 });
+      p.lines.push({ ws: p.plan.shift(), shown: 0, kind: "a", sent: false, dim: 0 });
+      p.state = "reading";
+      p.wait = rand(0.5, 1.8);
+    });
+  }
+
+  function send(p, dir, payload, arrive) {
+    const d = Math.hypot(p.x - cx, p.y - cy);
+    packets.push({ p, dir, payload, arrive, t: 0, dur: clamp(d / (230 * S), 0.8, 2.2) });
+  }
+
+  function stepPerson(p, dt) {
+    for (const l of p.lines) {
+      if (l.kind === "q") l.shown += 80 * dt;
+      l.dim = toward(l.dim, l.sent ? 1 : 0, 2.5, dt);
+    }
+    if (p.state === "idle") p.wait -= dt;
+    else if (p.state === "reading") {
+      p.wait -= dt;
+      if (p.wait <= 0) p.state = "typing";
+    } else if (p.state === "typing") {
+      const l = p.lines[p.lines.length - 1];
+      if (p.pause > 0) p.pause -= dt;
+      else {
+        l.shown += p.speed * dt;
+        if (Math.random() < dt * 0.8) p.pause = rand(0.15, 0.9);
+      }
+      if (l.shown >= span(l.ws)) {
+        l.shown = span(l.ws);
+        if (p.plan.length) p.lines.push({ ws: p.plan.shift(), shown: 0, kind: "a", sent: false, dim: 0 });
+        else {
+          p.state = "sending";
+          p.wait = 0.4;
+        }
+      }
+    } else if (p.state === "sending") {
+      p.wait -= dt;
+      if (p.wait <= 0) {
+        const mine = p.lines.filter((l) => !l.sent);
+        for (const l of mine) l.sent = true;
+        p.state = "idle";
+        p.wait = rand(1.5, 5);
+        send(p, "in", mine.filter((l) => l.kind === "a").map((l) => l.ws), (payload) => hear(payload));
+      }
+    }
+    const talking = p.state !== "idle" || packets.some((k) => k.p === p);
+    p.busy = toward(p.busy, talking ? 1 : 0, 4, dt);
+    // Scroll so the newest line shows, and forget lines long gone.
+    p.scroll = toward(p.scroll, Math.max(0, p.lines.length - VISIBLE), 6, dt);
+    while (p.lines.length > VISIBLE + 3 && p.scroll >= 3) {
+      p.lines.shift();
+      p.scroll -= 1;
+    }
+  }
+
+  // An answer reaches the middle: a line or two goes into the notes, and
+  // something already there may get rewritten in light of it.
+  function hear(payload) {
+    const d = doc;
+    if (d.phase !== "gather") return d.queue.push(payload);
+    const adds = Math.max(1, Math.round(payload.length * rand(0.4, 0.8)));
+    for (let i = 0; i < adds; i++) {
+      const ws = sentence(d.chars, rand(0.5, 1));
+      const at = Math.random() < 0.55 ? d.lines.length : Math.floor(rand(0, d.lines.length + 1));
+      d.lines.splice(at, 0, { w: ws.slice(), tw: ws, shown: 0, a: 0, heat: 1, y: null, keep: false, into: null });
+    }
+    const settled = d.lines.filter((l) => l.heat < 0.3);
+    if (settled.length && Math.random() < 0.7) {
+      const l = pick(settled);
+      morph(l, sentence(d.chars, rand(0.5, 1)));
+      l.heat = 0.6;
+    }
+    if (d.lines.length > d.max) condense();
+  }
+
+  // Too much to hold: everything folds into three lines.
+  function condense() {
+    const d = doc;
+    const n = d.lines.length;
+    const keys = [0, Math.floor((n - 1) / 2), n - 1];
+    keys.forEach((i) => {
+      const l = d.lines[i];
+      morph(l, sentence(d.chars, rand(0.85, 1)));
+      l.keep = true;
+      l.heat = 1;
+      l.shown = Infinity;
+    });
+    d.lines.forEach((l, i) => {
+      if (l.keep) return;
+      const nearest = keys.reduce((best, k) => (Math.abs(k - i) < Math.abs(best - i) ? k : best));
+      l.into = d.lines[nearest];
+      morph(l, []);
+    });
+    d.phase = "condense";
+    d.t = 0;
+  }
+
+  function stepDoc(dt) {
+    const d = doc;
+    d.t += dt;
+    for (const l of [d.title, ...d.lines]) for (let i = 0; i < l.w.length; i++) l.w[i] = toward(l.w[i], l.tw[i], 5, dt);
+    for (const l of d.lines) {
+      l.shown += 90 * dt;
+      l.a = toward(l.a, l.into ? 0 : 1, l.into ? 2.5 : 6, dt);
+      if (!l.keep) l.heat = toward(l.heat, 0, 0.8, dt);
+    }
+    if (d.phase === "gather") {
+      d.wait -= dt;
+      if (d.queue.length && d.wait <= 0) {
+        hear(d.queue.shift());
+        d.wait = 0.5;
+      }
+    } else if (d.phase === "condense" && d.t > 1.6) {
+      d.lines = d.lines.filter((l) => !l.into);
+      d.phase = "hold";
+      d.t = 0;
+    } else if (d.phase === "hold" && d.t > 1.2) {
+      // Sent off: the summary rises out of the notes, and they start over.
+      lifts.push({ lines: d.lines.map((l) => ({ ws: l.tw.slice(), y: l.y })), t: 0 });
+      d.lines = [];
+      morph(d.title, []);
+      d.phase = "rest";
+      d.t = 0;
+    } else if (d.phase === "rest" && d.t > 1.4) {
+      morph(d.title, sentence(d.chars * 0.55, rand(0.6, 1)));
+      d.phase = "gather";
+      d.t = 0;
+    }
+    const live = d.lines.filter((l) => !l.into);
+    const block = 1.7 * GAP + live.length * GAP;
+    const top = cy - block / 2;
+    d.titleY = d.titleY == null ? top + GAP / 2 : toward(d.titleY, top + GAP / 2, 6, dt);
+    live.forEach((l, i) => {
+      const ty = top + 1.7 * GAP + GAP / 2 + i * GAP;
+      l.y = l.y == null ? ty : toward(l.y, ty, 7, dt);
+    });
+    for (const l of d.lines) if (l.into) l.y = toward(l.y, l.into.y, 5, dt);
+    d.h = d.h ? toward(d.h, block, 6, dt) : block;
+  }
+
+  function step(dt) {
+    clock += dt;
+    nextAsk -= dt;
+    if (nextAsk <= 0) {
+      nextAsk = rand(0.5, 1.6);
+      const free = people.filter((p) => p.state === "idle" && p.wait <= 0);
+      const busy = people.filter((p) => p.state !== "idle").length;
+      if (doc.phase === "gather" && free.length && busy < Math.ceil(people.length * 0.6)) ask(pick(free));
+    }
+    for (const p of people) stepPerson(p, dt);
+    for (const k of packets) {
+      k.t += dt / k.dur;
+      if (k.t >= 1) k.arrive(k.payload);
+    }
+    packets = packets.filter((k) => k.t < 1);
+    for (const r of ripples) r.t += dt;
+    ripples = ripples.filter((r) => r.t < 1);
+    for (const l of lifts) l.t += dt;
+    lifts = lifts.filter((l) => l.t < 2.6);
+    stepDoc(dt);
+  }
+
+  // ---------- drawing ----------
+
+  function bar(x, y, w, h) {
+    if (ctx.roundRect) ctx.roundRect(x, y, w, h, h / 2);
+    else ctx.rect(x, y, w, h);
+  }
+
+  // A line of words from (x, y), the first `shown` characters of it. Returns
+  // where the typing has got to.
+  function words(ws, x, y, shown = Infinity, k = 1, tall = 1) {
+    const c = CW * k, h = BAR * k * tall;
+    let left = shown, end = x;
+    ctx.beginPath();
+    for (const w of ws) {
+      if (left <= 0) break;
+      const len = Math.min(w, left);
+      if (len > 0.05) bar(x, y - h / 2, len * c, h);
+      end = x + len * c;
+      x += (w + Math.min(1, w)) * c;
+      left -= w + 1;
+    }
+    ctx.fill();
+    return end;
+  }
+
+  function curve(p) {
+    const px = p.x + Math.sin(clock * 0.23 + p.phase) * 3 * S;
+    const py = p.y + Math.cos(clock * 0.19 + p.phase * 1.3) * 3 * S;
+    const dx = px - cx, dy = py - cy;
+    return { ax: cx, ay: cy, bx: (cx + px) / 2 - dy * p.bend, by: (cy + py) / 2 + dx * p.bend, px, py };
+  }
+  const at = (c, t) => {
+    const u = 1 - t;
+    return [u * u * c.ax + 2 * u * t * c.bx + t * t * c.px, u * u * c.ay + 2 * u * t * c.by + t * t * c.py];
+  };
+
+  function draw() {
+    ctx.clearRect(0, 0, W, H);
+    const curves = new Map(people.map((p) => [p, curve(p)]));
+
+    // Threads from the middle to everyone.
+    ctx.lineWidth = Math.max(1, S);
+    for (const p of people) {
+      const c = curves.get(p);
+      ctx.beginPath();
+      ctx.moveTo(c.ax, c.ay);
+      ctx.quadraticCurveTo(c.bx, c.by, c.px, c.py);
+      ctx.setLineDash([1.2 * S, 5 * S]);
+      ctx.globalAlpha = 0.9;
+      ctx.strokeStyle = color.line;
+      ctx.stroke();
+      if (p.busy > 0.02) {
+        ctx.setLineDash([]);
+        ctx.globalAlpha = p.busy * 0.4;
+        ctx.strokeStyle = color.faint;
+        ctx.stroke();
+      }
+    }
+    ctx.setLineDash([]);
+
+    // Panes, cut out of the grid.
+    ctx.fillStyle = color.bg;
+    ctx.globalAlpha = 1;
+    ctx.beginPath();
+    for (const p of people) {
+      const c = curves.get(p);
+      bar(c.px - p.w / 2, c.py - p.h / 2, p.w, p.h);
+    }
+    ctx.fill();
+    ctx.beginPath();
+    ctx.roundRect ? ctx.roundRect(cx - doc.w / 2, cy - doc.h / 2 - PAD, doc.w, doc.h + PAD * 2, 8 * S) : ctx.rect(cx - doc.w / 2, cy - doc.h / 2 - PAD, doc.w, doc.h + PAD * 2);
+    ctx.fill();
+
+    drawDoc();
+    for (const p of people) drawPerson(p, curves.get(p));
+    for (const k of packets) drawPacket(k, curves.get(k.p));
+    for (const l of lifts) drawLift(l);
+    ctx.globalAlpha = 1;
+  }
+
+  function drawDoc() {
+    const d = doc;
+    const left = cx - d.w / 2 + PAD;
+    const x = left + 9 * S;
+    // The agent: a dot that pulses while it's thinking things over.
+    const thinking = d.phase === "condense" || d.phase === "hold";
+    const r = 2.8 * S * (thinking ? 1 + 0.25 * Math.sin(clock * 7) : 1);
+    ctx.globalAlpha = 1;
+    ctx.fillStyle = color.accent;
+    ctx.beginPath();
+    ctx.arc(left + 2.5 * S, d.titleY, r, 0, Math.PI * 2);
+    ctx.fill();
+    for (const ring of ripples) {
+      ctx.globalAlpha = (1 - ring.t) * 0.55;
+      ctx.strokeStyle = color.accent;
+      ctx.lineWidth = S;
+      ctx.beginPath();
+      ctx.arc(left + 2.5 * S, d.titleY, 3 * S + ease(ring.t) * 16 * S, 0, Math.PI * 2);
+      ctx.stroke();
+    }
+    ctx.globalAlpha = 0.95;
+    words(d.title.w, x, d.titleY, Infinity, 1, 1.35);
+
+    for (const l of d.lines) {
+      if (l.y == null) continue;
+      if (l.heat < 0.99) {
+        ctx.globalAlpha = l.a * (1 - l.heat) * 0.82;
+        ctx.fillStyle = color.text;
+        words(l.w, x, l.y, l.shown);
+      }
+      if (l.heat > 0.01) {
+        ctx.globalAlpha = l.a * l.heat;
+        ctx.fillStyle = color.accent;
+        words(l.w, x, l.y, l.shown);
+      }
+    }
+  }
+
+  function drawPerson(p, c) {
+    const x = c.px - p.w / 2, y = c.py - p.h / 2;
+    const top = y + PAD * 0.6 + GAP / 2;
+    // Someone: a ring that fills in while they're talking with the agent.
+    const dot = [x + PAD + 2.5 * S, top];
+    ctx.globalAlpha = 1;
+    ctx.strokeStyle = color.faint;
+    ctx.lineWidth = Math.max(1, S);
+    ctx.beginPath();
+    ctx.arc(dot[0], dot[1], 2.4 * S, 0, Math.PI * 2);
+    ctx.stroke();
+    if (p.busy > 0.02) {
+      ctx.globalAlpha = p.busy;
+      ctx.fillStyle = color.text;
+      ctx.fill();
+    }
+
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(x, y + PAD * 0.25, p.w, p.h - PAD * 0.5);
+    ctx.clip();
+    const lx = x + PAD + 9 * S;
+    p.lines.forEach((l, j) => {
+      const v = j - p.scroll;
+      if (v < -1 || v > VISIBLE) return;
+      const ly = top + v * GAP;
+      const fade = clamp(v + 1, 0, 1);
+      if (l.kind === "q") {
+        ctx.globalAlpha = fade * (0.9 - 0.45 * l.dim);
+        ctx.fillStyle = color.accent;
+      } else {
+        ctx.globalAlpha = fade * (0.78 - 0.45 * l.dim);
+        ctx.fillStyle = color.text;
+      }
+      const end = words(l.ws, lx, ly, l.shown);
+      const last = j === p.lines.length - 1;
+      if (last && (p.state === "reading" || p.state === "typing")) {
+        const blink = p.state === "reading" || p.pause > 0 ? (Math.sin(clock * 8) > -0.3 ? 0.85 : 0.1) : 0.85;
+        ctx.globalAlpha = fade * blink;
+        ctx.fillStyle = color.text;
+        ctx.fillRect(l.shown > 0 ? end + 1.5 * S : lx, ly - BAR * 1.15, 1.4 * S, BAR * 2.3);
+      }
+    });
+    ctx.restore();
+  }
+
+  function drawPacket(k, c) {
+    const e = ease(clamp(k.t, 0, 1));
+    const out = k.dir === "out";
+    const head = out ? e : 1 - e;
+    const tail = out ? Math.max(0, head - 0.24) : Math.min(1, head + 0.24);
+    const fade = Math.min(1, k.t / 0.1, (1 - k.t) / 0.1);
+    const ink = out ? color.accent : color.text;
+    ctx.strokeStyle = ink;
+    ctx.lineWidth = 1.3 * S;
+    const steps = 12;
+    for (let i = 0; i < steps; i++) {
+      const [x0, y0] = at(c, tail + ((head - tail) * i) / steps);
+      const [x1, y1] = at(c, tail + ((head - tail) * (i + 1)) / steps);
+      ctx.globalAlpha = fade * ((i + 1) / steps) * 0.8;
+      ctx.beginPath();
+      ctx.moveTo(x0, y0);
+      ctx.lineTo(x1, y1);
+      ctx.stroke();
+    }
+    // What's being carried, in miniature.
+    const [hx, hy] = at(c, head);
+    const k2 = 0.55;
+    const wide = Math.max(...k.payload.map(span)) * CW * k2;
+    const tallness = k.payload.length * GAP * k2 * 0.8;
+    const bx = hx - wide / 2, by = hy - tallness / 2;
+    ctx.globalAlpha = fade * 0.9;
+    ctx.fillStyle = color.bg;
+    ctx.beginPath();
+    bar(bx - 3 * S, by - 2.5 * S, wide + 6 * S, tallness + 5 * S);
+    ctx.fill();
+    ctx.globalAlpha = fade;
+    ctx.fillStyle = ink;
+    k.payload.forEach((ws, i) => words(ws, bx, by + (i + 0.5) * GAP * k2 * 0.8, Infinity, k2));
+  }
+
+  function drawLift(l) {
+    const t = clamp(l.t / 2.6, 0, 1);
+    const rise = ease(t) * 54 * S;
+    const x = cx - doc.w / 2 + PAD + 9 * S;
+    ctx.fillStyle = color.accent;
+    ctx.globalAlpha = (1 - t) ** 1.6;
+    for (const line of l.lines) words(line.ws, x, line.y - rise);
+  }
+
+  // ---------- running ----------
+
+  let last = 0;
+  function frame(now) {
+    const dt = Math.min(0.05, last ? (now - last) / 1000 : 1 / 60);
+    last = now;
+    step(dt);
+    draw();
+    requestAnimationFrame(frame);
+  }
+
+  // Without motion: run it for a while and show one moment of it.
+  function snapshot() {
+    for (let i = 0; i < 30 * 24; i++) step(1 / 30);
+    draw();
+  }
+
+  readColors();
+  place();
+  matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+    readColors();
+    if (still) draw();
+  });
+  let pending = false;
+  window.addEventListener("resize", () => {
+    if (pending) return;
+    pending = true;
+    requestAnimationFrame(() => {
+      pending = false;
+      place();
+      if (still) snapshot();
+    });
+  });
+  if (still) snapshot();
+  else {
+    for (let i = 0; i < 45; i++) step(1 / 30); // start with something already moving
+    requestAnimationFrame(frame);
+  }
+})();

package/web/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="#5b4cdb"/><circle cx="8" cy="10" r="2.2" fill="#fff"/><rect x="12" y="8" width="12" height="4" rx="2" fill="#fff"/><rect x="6" y="14" width="20" height="4" rx="2" fill="#fff" fill-opacity=".7"/><rect x="6" y="20" width="13" height="4" rx="2" fill="#fff" fill-opacity=".7"/></svg>

package/web/markdown.js

@@ -0,0 +1,87 @@
+// A small Markdown renderer: paragraphs, headings, lists, code, links,
+// emphasis, blockquotes and tables. Everything is HTML-escaped first, so only
+// the tags built here can appear; raw HTML shows as text.
+(function () {
+  const escape = (s) => s.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
+
+  function inline(s) {
+    const codes = [];
+    s = s.replace(/`([^`\n]+)`/g, (_, code) => `\u0000${codes.push(code) - 1}\u0000`);
+    s = escape(s);
+    s = s.replace(/\[([^\]\n]+)\]\((https?:\/\/[^\s)]+)\)/g, (_, text, href) => `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`);
+    s = s.replace(/(^|[\s(])(https?:\/\/[^\s<)]+[^\s<).,!?:;'"])/g, (_, pre, href) => `${pre}<a href="${href}" target="_blank" rel="noopener noreferrer">${href}</a>`);
+    s = s.replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>");
+    s = s.replace(/(^|[^*\w])\*([^*\n]+)\*(?!\w)/g, "$1<em>$2</em>");
+    s = s.replace(/(^|[^_\w])_([^_\n]+)_(?!\w)/g, "$1<em>$2</em>");
+    s = s.replace(/\u0000(\d+)\u0000/g, (_, i) => `<code>${escape(codes[Number(i)])}</code>`);
+    return s;
+  }
+
+  const LIST = /^\s*([-*•]|\d+[.)])\s+/;
+  const QUOTE = /^\s*>\s?/;
+  const DIVIDER = /^\s*\|?\s*:?-{2,}:?\s*(\|\s*:?-{2,}:?\s*)*\|?\s*$/;
+  const isTableStart = (lines, i) => lines[i].includes("|") && i + 1 < lines.length && DIVIDER.test(lines[i + 1]) && lines[i + 1].includes("-");
+  const cells = (line) => line.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((c) => c.trim());
+  const startsBlock = (lines, i) => /^```/.test(lines[i]) || /^#{1,6}\s+/.test(lines[i]) || LIST.test(lines[i]) || QUOTE.test(lines[i]) || isTableStart(lines, i);
+
+  function render(text) {
+    const out = [];
+    const lines = String(text ?? "").replace(/\r\n?/g, "\n").split("\n");
+    let i = 0;
+    while (i < lines.length) {
+      const line = lines[i];
+      if (/^```/.test(line)) {
+        const body = [];
+        i++;
+        while (i < lines.length && !/^```/.test(lines[i])) body.push(lines[i++]);
+        i++;
+        out.push(`<pre><code>${escape(body.join("\n"))}</code></pre>`);
+        continue;
+      }
+      if (isTableStart(lines, i)) {
+        const head = cells(line);
+        const align = cells(lines[i + 1]).map((c) => (/^:-+:$/.test(c) ? "center" : /-+:$/.test(c) ? "right" : ""));
+        const style = (k) => (align[k] ? ` style="text-align:${align[k]}"` : "");
+        i += 2;
+        const rows = [];
+        while (i < lines.length && lines[i].includes("|") && lines[i].trim()) rows.push(cells(lines[i++]));
+        const th = head.map((c, k) => `<th${style(k)}>${inline(c)}</th>`).join("");
+        const tb = rows.map((r) => `<tr>${head.map((_, k) => `<td${style(k)}>${inline(r[k] ?? "")}</td>`).join("")}</tr>`).join("");
+        out.push(`<div class="table-wrap"><table><thead><tr>${th}</tr></thead><tbody>${tb}</tbody></table></div>`);
+        continue;
+      }
+      if (QUOTE.test(line)) {
+        const body = [];
+        while (i < lines.length && QUOTE.test(lines[i])) body.push(lines[i++].replace(QUOTE, ""));
+        out.push(`<blockquote>${render(body.join("\n"))}</blockquote>`);
+        continue;
+      }
+      if (LIST.test(line)) {
+        const ordered = /^\s*\d+[.)]\s+/.test(line);
+        const items = [];
+        while (i < lines.length && LIST.test(lines[i])) {
+          let item = lines[i++].replace(LIST, "");
+          while (i < lines.length && /^\s{2,}\S/.test(lines[i]) && !LIST.test(lines[i])) item += " " + lines[i++].trim();
+          items.push(`<li>${inline(item)}</li>`);
+        }
+        out.push(ordered ? `<ol>${items.join("")}</ol>` : `<ul>${items.join("")}</ul>`);
+        continue;
+      }
+      if (/^#{1,6}\s+/.test(line)) {
+        out.push(`<h4>${inline(line.replace(/^#{1,6}\s+/, ""))}</h4>`);
+        i++;
+        continue;
+      }
+      if (!line.trim()) {
+        i++;
+        continue;
+      }
+      const para = [];
+      while (i < lines.length && lines[i].trim() && !startsBlock(lines, i)) para.push(lines[i++]);
+      out.push(`<p>${para.map(inline).join("<br>")}</p>`);
+    }
+    return out.join("");
+  }
+
+  window.renderMarkdown = render;
+})();

package/web/missing.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex, nofollow">
+<title>Link not found</title>
+<link rel="icon" href="/static/icon.svg">
+<link rel="stylesheet" href="/static/app.css">
+</head>
+<body>
+<div class="lost">
+  <div>
+    <span class="mark" aria-hidden="true"><svg viewBox="4 4 24 24"><g fill="currentColor" stroke="none"><circle cx="8" cy="10" r="2.2"/><rect x="12" y="8" width="12" height="4" rx="2"/><rect x="6" y="14" width="20" height="4" rx="2" opacity=".7"/><rect x="6" y="20" width="13" height="4" rx="2" opacity=".7"/></g></svg></span>
+    <h1>This link doesn't lead anywhere</h1>
+    <p>Check that you have the whole link, or ask whoever sent it for a fresh one.</p>
+  </div>
+</div>
+</body>
+</html>