@oharness/server 0.9.3 → 0.11.0

package/dist/page/client/ripple.js

@@ -0,0 +1,247 @@
+/**
+ * The field behind a new session: a grid of dots a click sends a shockwave
+ * through.
+ *
+ * Only while the empty state is on screen. The canvas sits under everything
+ * in #main and takes no pointer, so it can never eat a click meant for the
+ * composer or a starter; it only hears them go by. Nothing animates at rest —
+ * a frame is drawn when a wave is travelling or the pointer moves, and the
+ * loop stops once the last wave has died out, so an idle new tab costs nothing.
+ *
+ * One part of the client script; see ./index.ts for how the parts join.
+ */
+export const RIPPLE = String.raw `
+// --- ripple field ------------------------------------------------------------
+
+(function rippleField() {
+  const host = document.getElementById("main");
+  if (!host || !emptyEl) return;
+  const still = window.matchMedia("(prefers-reduced-motion: reduce)");
+
+  const canvas = document.createElement("canvas");
+  canvas.id = "ripple";
+  canvas.setAttribute("aria-hidden", "true");
+  host.prepend(canvas);
+  const ctx = canvas.getContext("2d");
+
+  const GAP = 24;          // grid pitch, css px
+  const SPEED = 0.38;      // wavefront, px per ms
+  const LIFE = 3200;       // ms a wave travels before it is gone
+  const BAND = 90;         // width of the wavefront's swell
+  const LENS = 120;        // radius the pointer magnifies
+  const TINT = "fg";       // what a wave lights up in: "fg" plain, "brand" lime
+
+  let w = 0, h = 0, dpr = 1;
+  let waves = [];
+  let pointer = null;      // {x, y} inside the canvas, or null
+  let raf = 0;
+  let shown = false;
+  let ink = { fg: "#111", brand: "#5e8c00" };
+
+  function readInk() {
+    const css = getComputedStyle(document.documentElement);
+    ink = {
+      fg: css.getPropertyValue("--fg").trim() || ink.fg,
+      brand: css.getPropertyValue("--brand").trim() || ink.brand,
+    };
+  }
+
+  function fit() {
+    const box = host.getBoundingClientRect();
+    dpr = Math.min(window.devicePixelRatio || 1, 2);
+    w = Math.max(1, Math.round(box.width));
+    h = Math.max(1, Math.round(box.height));
+    canvas.width = w * dpr;
+    canvas.height = h * dpr;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  }
+
+  /** Is the invitation actually in front of someone? */
+  const visible = () => emptyEl.isConnected && emptyEl.offsetParent !== null;
+
+  function kick() {
+    if (!raf) raf = requestAnimationFrame(frame);
+  }
+
+  function frame(now) {
+    raf = 0;
+    waves = waves.filter((wave) => now - wave.t < LIFE);
+    draw(now);
+    if (waves.length) kick();
+  }
+
+  function draw(at) {
+    ctx.clearRect(0, 0, w, h);
+    if (!shown) return;
+    // rAF's stamp is when the frame began, which can trail a wave pushed by a
+    // timer since; time is read here so no wave is ever younger than zero.
+    const now = Math.max(at, performance.now());
+
+    // The dot field: each dot pushed outward by every wave passing it, and lit
+    // by how hard it is being pushed.
+    const ox = (w % GAP) / 2 + GAP / 2;
+    const oy = (h % GAP) / 2 + GAP / 2;
+    ctx.fillStyle = ink.fg;
+    const lit = [];
+    for (let gy = oy; gy < h; gy += GAP) {
+      for (let gx = ox; gx < w; gx += GAP) {
+        let dx = 0, dy = 0, energy = 0;
+        for (const wave of waves) {
+          const age = now - wave.t;
+          const front = age * SPEED;
+          const vx = gx - wave.x, vy = gy - wave.y;
+          const dist = Math.hypot(vx, vy) || 1;
+          const off = dist - front;
+          if (off > BAND || off < -BAND * 3) continue;
+          const fade = 1 - age / LIFE;
+          // One long, low swell at the front — a breath through the grid, not a shake.
+          const env = Math.exp(-(off * off) / (BAND * BAND * 0.35)) * fade * fade;
+          const push = Math.sin(off / 26) * 4.5 * env * wave.power;
+          dx += (vx / dist) * push;
+          dy += (vy / dist) * push;
+          energy += env * wave.power;
+        }
+        let r = 1.05, alpha = 0.13;
+        if (pointer) {
+          const near = Math.hypot(gx - pointer.x, gy - pointer.y);
+          if (near < LENS) {
+            const k = 1 - near / LENS;
+            r += k * k * 1.3;
+            alpha += k * k * 0.22;
+          }
+        }
+        if (energy > 0.06) {
+          lit.push(gx + dx, gy + dy, Math.min(1, energy), r);
+          continue;
+        }
+        ctx.globalAlpha = alpha;
+        ctx.beginPath();
+        ctx.arc(gx + dx, gy + dy, r, 0, 6.2832);
+        ctx.fill();
+      }
+    }
+    // Dots on a wavefront take the brand's lime and swell with it.
+    ctx.fillStyle = ink[TINT];
+    for (let i = 0; i < lit.length; i += 4) {
+      const e = lit[i + 2];
+      ctx.globalAlpha = 0.18 + e * 0.5;
+      ctx.beginPath();
+      ctx.arc(lit[i], lit[i + 1], lit[i + 3] + e * 0.9, 0, 6.2832);
+      ctx.fill();
+    }
+
+    // The fronts themselves: a hairline lime ring with a faint dotted ghost of
+    // the ink riding just outside it, and a soft bloom where the click landed.
+    ctx.lineCap = "round";
+    for (const wave of waves) {
+      const age = now - wave.t;
+      const fade = 1 - age / LIFE;
+      const front = age * SPEED;
+      ctx.globalAlpha = 0.32 * fade * fade * fade * wave.power;
+      ctx.strokeStyle = ink[TINT];
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.arc(wave.x, wave.y, front, 0, 6.2832);
+      ctx.stroke();
+      ctx.globalAlpha = 0.08 * fade * fade * fade * wave.power;
+      ctx.strokeStyle = ink.fg;
+      ctx.lineWidth = 1;
+      ctx.setLineDash([2, 9]);
+      ctx.lineDashOffset = -age / 40;
+      ctx.beginPath();
+      ctx.arc(wave.x, wave.y, front * 1.03 + 4, 0, 6.2832);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      if (age < 420) {
+        const k = 1 - age / 420;
+        const glow = ctx.createRadialGradient(wave.x, wave.y, 0, wave.x, wave.y, 46);
+        glow.addColorStop(0, ink[TINT]);
+        glow.addColorStop(1, "transparent");
+        ctx.globalAlpha = 0.22 * k * k * wave.power;
+        ctx.fillStyle = glow;
+        ctx.beginPath();
+        ctx.arc(wave.x, wave.y, 46, 0, 6.2832);
+        ctx.fill();
+      }
+    }
+    ctx.globalAlpha = 1;
+  }
+
+  function wave(x, y, power) {
+    if (still.matches) return;
+    waves.push({ x, y, t: performance.now(), power });
+    if (waves.length > 28) waves.shift();
+    kick();
+  }
+
+  function local(event) {
+    const box = canvas.getBoundingClientRect();
+    return { x: event.clientX - box.left, y: event.clientY - box.top };
+  }
+
+  // Held down and dragged, the pointer leaves a wake: a small wave every
+  // TRAIL px it travels, so a stroke draws a line of rings behind it.
+  const TRAIL = 40;
+  let drag = null;         // where the last wake wave went out, while held
+
+  host.addEventListener("pointerdown", (event) => {
+    if (!shown || event.button > 0) return;
+    const at = local(event);
+    drag = at;
+    // A stroke begun on bare background is drawing, not selecting: without
+    // this it would sweep the headline and starters into a text selection.
+    const bare = event.target === host || event.target.id === "log" || event.target === emptyEl;
+    if (bare) event.preventDefault();
+    wave(at.x, at.y, 1);
+  });
+  host.addEventListener("pointermove", (event) => {
+    if (!shown) return;
+    const at = local(event);
+    if (event.pointerType === "mouse") pointer = at;
+    if (drag && event.buttons & 1) {
+      const gone = Math.hypot(at.x - drag.x, at.y - drag.y);
+      if (gone >= TRAIL) {
+        drag = at;
+        wave(at.x, at.y, Math.min(0.45, 0.2 + gone / 240));
+      }
+    }
+    kick();
+  });
+  const release = () => { drag = null; };
+  window.addEventListener("pointerup", release);
+  window.addEventListener("pointercancel", release);
+  host.addEventListener("pointerleave", () => {
+    pointer = null;
+    if (shown) kick();
+  });
+
+  // The empty state comes and goes with tab switches and first messages, and
+  // nothing announces it, so look twice a second; on arrival, the brand mark
+  // sends out one wave of its own.
+  function check() {
+    const now = visible();
+    if (now === shown) return;
+    shown = now;
+    canvas.classList.toggle("on", shown);
+    if (!shown) { waves = []; pointer = null; kick(); return; }
+    readInk();
+    fit();
+    const mark = emptyEl.querySelector(".brand-mark");
+    if (mark) {
+      const at = mark.getBoundingClientRect();
+      const box = canvas.getBoundingClientRect();
+      wave(at.left + at.width / 2 - box.left, at.top + at.height / 2 - box.top, 0.7);
+    }
+    kick();
+  }
+  setInterval(check, 500);
+  check();
+
+  new ResizeObserver(() => { if (shown) { fit(); kick(); } }).observe(host);
+  // Theme flips (system or the in-app toggle) change the ink.
+  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => { readInk(); kick(); });
+  new MutationObserver(() => { readInk(); kick(); })
+    .observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
+})();
+`;
+//# sourceMappingURL=ripple.js.map

package/dist/page/client/ripple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.js","sourceRoot":"","sources":["../../../src/page/client/ripple.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyO/B,CAAC"}