diff --git a/deploy/site/ambient.js b/deploy/site/ambient.js
index bcb2f47..5f5552b 100644
--- a/deploy/site/ambient.js
+++ b/deploy/site/ambient.js
@@ -1,10 +1,111 @@
+(() => {
+  function randomFrom(sequence) {
+    let seed = Number(BigInt.asUintN(32, sequence ^ (sequence >> 32n)));
+    return () => {
+      seed = Math.imul(seed ^ seed >>> 16, 0x21f0aaad);
+      seed = Math.imul(seed ^ seed >>> 15, 0x735a2d97);
+      seed ^= seed >>> 15;
+      return (seed >>> 0) / 4294967296;
+    };
+  }
+  function createCurrent() {
+    return { sequence: 0n, strokes: [], from: 0, to: 0, at: 0 };
+  }
+  function position(current, now) {
+    const t = Math.max(0, Math.min(1, (now - current.at) / 5000));
+    return current.from + (current.to - current.from) * t;
+  }
+  function receive(current, sequence, now) {
+    if (sequence <= 0n || sequence === current.sequence) return false;
+    const fresh = current.sequence === 0n || sequence < current.sequence;
+    const random = randomFrom(sequence);
+    const delta = fresh ? 0 : Number(sequence - current.sequence > 5000n ? 5000n : sequence - current.sequence);
+    current.from = fresh ? 0 : position(current, now);
+    current.to = current.from + delta / 50000;
+    current.at = now;
+    current.sequence = sequence;
+    if (fresh) current.strokes = [];
+    const count = fresh ? 42 : Math.min(6, Math.ceil(delta / 300));
+    for (let i = 0; i < count; i++) {
+      current.strokes.push({
+        x: (fresh ? random() * 1.3 - .15 : -.2 + random() * .3) - current.from,
+        y: .05 + random() * .9,
+        length: .12 + random() * .24,
+        bend: (random() - .5) * .035,
+        thickness: .7 + random() * 2,
+        pigment: random() < .18 ? '133,111,77' : '81,110,122',
+        opacity: .05 + random() * .09,
+      });
+    }
+    current.strokes = current.strokes.filter(stroke => stroke.x + current.from < 1.1).slice(-80);
+    return true;
+  }
+  if (typeof module !== 'undefined') module.exports = { createCurrent, position, receive };
+  if (typeof document === 'undefined') return;
+  const canvas = document.querySelector('canvas[data-current]');
+  if (!canvas) return;
+  const context = canvas.getContext('2d');
+  if (!context) return;
+  const current = createCurrent();
+  const reduced = matchMedia('(prefers-reduced-motion: reduce)');
+  let width = 0, height = 0, frame = 0, last = 0;
+  function paint(now) {
+    const phase = reduced.matches ? current.to : position(current, now);
+    context.clearRect(0, 0, width, height);
+    for (const stroke of current.strokes) {
+      const x = (stroke.x + phase) * width;
+      const y = stroke.y * height;
+      const length = stroke.length * width;
+      const bend = (stroke.bend + Math.sin(phase * 3 + stroke.y * 8) * .004) * Math.min(height, 800);
+      const thickness = stroke.thickness;
+      context.beginPath();
+      context.moveTo(x, y);
+      context.bezierCurveTo(x + length * .28, y + bend, x + length * .64, y - bend, x + length, y);
+      context.bezierCurveTo(x + length * .68, y - bend + thickness, x + length * .3, y + bend + thickness, x, y);
+      context.fillStyle = `rgba(${stroke.pigment},${stroke.opacity})`;
+      context.fill();
+      context.beginPath();
+      context.moveTo(x + length * .12, y + thickness * .35);
+      context.bezierCurveTo(x + length * .28, y + bend, x + length * .64, y - bend, x + length * .85, y);
+      context.strokeStyle = `rgba(${stroke.pigment},${stroke.opacity * .4})`;
+      context.lineWidth = .45;
+      context.stroke();
+    }
+  }
+  function animate(now) {
+    frame = 0;
+    if (document.hidden) return;
+    if (now - last >= 50) { paint(now); last = now; }
+    if (!reduced.matches && now < current.at + 5000) frame = requestAnimationFrame(animate);
+    else paint(now);
+  }
+  function wake() {
+    if (!frame && !document.hidden) frame = requestAnimationFrame(animate);
+  }
+  function resize() {
+    const ratio = Math.min(devicePixelRatio || 1, 2);
+    width = canvas.clientWidth; height = canvas.clientHeight;
+    canvas.width = Math.round(width * ratio); canvas.height = Math.round(height * ratio);
+    context.setTransform(ratio, 0, 0, ratio, 0, 0);
+    paint(performance.now());
+  }
+  addEventListener('stream-sequence', event => {
+    if (receive(current, BigInt(event.detail), performance.now())) wake();
+  });
+  addEventListener('resize', resize);
+  document.addEventListener('visibilitychange', wake);
+  reduced.addEventListener('change', wake);
+  resize();
+})();
+
 // the window: what drifts past IS the firehose. every light is born from a
 // real event on the live websocket (posts filter, ~20KB/s); depth is blur.
 // budget: sprite-cached discs (no per-frame gradients), 30fps, socket closed
 // while the tab is hidden, poll-only fallback if websockets fail.
 (() => {
+  if (typeof document === 'undefined') return;
   const cv = document.getElementById("depth");
-  if (!cv) return;
+  if (!cv || cv.hasAttribute('data-current')) return;
   const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
   const ctx = cv.getContext("2d");
   let W, H, dpr;
diff --git a/deploy/site/index.html b/deploy/site/index.html
index 6a78a8f..e63467e 100644
--- a/deploy/site/index.html
+++ b/deploy/site/index.html
@@ -19,7 +19,7 @@
 :root{--bg:#050607;--ink:#b6c2c9;--dim:#7d8992;--faint:#39424a;--hot:#e2ebf0;--water:#6f9cb0}
 *{margin:0;padding:0;box-sizing:border-box}
 html,body{background:var(--bg);color:var(--ink);font:14px/1.65 ui-monospace,"SF Mono",Menlo,Consolas,monospace}
-body{isolation:isolate;min-height:100vh;background:#080d12}
+body{isolation:isolate;min-height:100vh;background:linear-gradient(155deg,#091214,#080d12 55%,#0c100e)}
 a{color:inherit;text-decoration:none}
 .wrap{max-width:78ch;margin:0 auto;padding:0 2ch;display:flex;flex-direction:column;min-height:100vh}
 header{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:1.7rem 0 1.9rem}
@@ -51,12 +51,12 @@ footer a:hover{color:var(--hot);border-bottom-color:var(--water)}
 @media (max-width:640px){#river{font-size:11px}.wrap{padding:0 1.5ch}
   footer{gap:.45rem 2ch}#stats{flex-basis:100%;text-align:center}}
 footer .icon{width:11px;height:11px;vertical-align:-1px;margin-right:.6ch}
-#depth{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.65}
+#depth{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.55}
 .wrap{position:relative}
 </style>
 </head>
 <body>
-<canvas id="depth" data-points aria-hidden="true"></canvas>
+<canvas id="depth" data-current aria-hidden="true"></canvas>
 <div class="wrap">
 <header>
   <a class="brand" href="/">~&nbsp;&nbsp;s t r e a m&nbsp;&nbsp;~</a>
@@ -81,6 +81,7 @@ footer .icon{width:11px;height:11px;vertical-align:-1px;margin-right:.6ch}
   <a href="https://tangled.org/zat.dev/stream">source</a>
 </footer>
 </div>
+<script src="/ambient.js?v=current-1"></script>
 <script>
 const $ = (id) => document.getElementById(id);
 const fittedLines = document.querySelectorAll('.ep .p, .ep .d, .tag');
@@ -148,6 +149,7 @@ async function fetchStatus(){
   // math (or persisting it) makes the next real read look like a delta of
   // the entire relay sequence space — the '503M/s' artifact
   if (upN > 0n) {
+    dispatchEvent(new CustomEvent('stream-sequence', { detail: upN.toString() }));
     noteRate(upN);
     saveCont(upN);
     _prevSeq = upN;
@@ -165,11 +167,11 @@ async function fetchStatus(){
 
 (() => {
   const W = 72, ROWS = 4;
-  let seq = 0n, drift = 0;
+  let seq = 0n;
   function mulberry(a){return()=>{a|=0;a=a+0x6D2B79F5|0;let t=Math.imul(a^a>>>15,1|a);t=t+Math.imul(t^t>>>7,61|t)^t;return((t^t>>>14)>>>0)/4294967296}}
   const glyphs = ["~","~","~","~","≈","≈","·"];
   function draw(){
-    const seed = Number(seq % 2147483647n) + drift;
+    const seed = Number(seq % 2147483647n);
     let out = "";
     for(let r=0;r<ROWS;r++){
       const rand = mulberry(seed*31+r*7919);
@@ -178,7 +180,6 @@ async function fetchStatus(){
     }
     $("river").textContent = out;
   }
-  setInterval(()=>{drift=(drift+1)%1024;draw()},900);
   async function tick(){
     try{
       const { g } = await fetchStatus();
@@ -197,6 +198,5 @@ async function fetchStatus(){
 })();
 
 </script>
-<script src="/ambient.js?v=points-1"></script>
 </body>
 </html>
diff --git a/tests/glass-current.test.cjs b/tests/glass-current.test.cjs
new file mode 100644
index 0000000..5a66488
--- /dev/null
+++ b/tests/glass-current.test.cjs
@@ -0,0 +1,53 @@
+const { test } = require('node:test');
+const assert = require('node:assert/strict');
+const { createCurrent, receive, position } = require('../deploy/site/ambient.js');
+
+test('the same network observations produce the same glass', () => {
+  const a = createCurrent(), b = createCurrent();
+  for (const field of [a, b]) {
+    receive(field, 33773500000n, 0);
+    receive(field, 33773501300n, 5000);
+  }
+  assert.deepEqual(a, b);
+  const other = createCurrent();
+  receive(other, 33773500001n, 0);
+  assert.notDeepEqual(a.strokes[0], other.strokes[0]);
+});
+
+test('wall-clock time alone cannot generate flow or strokes', () => {
+  const field = createCurrent();
+  receive(field, 1000n, 0);
+  const before = structuredClone(field);
+  assert.equal(position(field, 60000), 0);
+  assert.equal(receive(field, 1000n, 60000), false);
+  assert.deepEqual(field, before);
+});
+
+test('observed event counts advance the current and then settle', () => {
+  const field = createCurrent();
+  receive(field, 1000n, 0);
+  receive(field, 2000n, 5000);
+  assert.equal(position(field, 5000), 0);
+  assert.equal(position(field, 7500), .01);
+  assert.equal(position(field, 10000), .02);
+  assert.equal(position(field, 60000), .02);
+  const target = field.to;
+  receive(field, 2000n, 60000);
+  assert.equal(field.to, target);
+});
+
+test('zero, resets and large catch-up jumps do not manufacture runaway motion', () => {
+  const field = createCurrent();
+  assert.equal(receive(field, 0n, 0), false);
+  assert.equal(field.strokes.length, 0);
+  receive(field, 100n, 100);
+  receive(field, 999999999999n, 5100);
+  assert.equal(field.to, .1);
+  receive(field, 10n, 10100);
+  assert.equal(field.to, 0);
+  const fresh = createCurrent();
+  receive(fresh, 10n, 10100);
+  assert.deepEqual(field, fresh);
+  for (let i = 1n; i <= 1000n; i++) receive(field, 10n + i * 1000n, Number(i) * 5000);
+  assert.ok(field.strokes.length <= 80);
+});