blockyard 0.0.9 → 0.1.0

package/public/js/details3d.js

@@ -14,11 +14,11 @@
 //  3. Zero dependencies, no CDN.
 
 import { packBlock, packExact, vbytesPerUnit, vsizeForSide } from './blockpack.js';
-import { planTransition, frameAt, fitToBox, project, fxFront, TRANSITION, SLAB_H, TILE_H, surfaceNormal, cellTops } from './blockscene3d.js';
+import { planTransition, frameAt, fitToBox, project, fxFront, TRANSITION, SLAB_H, TILE_H, surfaceNormal, cellTops, fxHash } from './blockscene3d.js';
 // THE AGENTS (agents.js): the effects that are something happening rather than a pattern.
 // This module keeps three seams and nothing else -- build here in startFx, frame in fxNow,
 // draw in paintFrame -- so fifty agents do not become fifty `if`s in the renderer.
-import { AGENTS, isAgent, rng } from './agents.js';
+import { AGENTS, isAgent, rng, lensFlare, saucerAbove } from './agents.js';
 
 const STATE = new WeakMap();
 
@@ -145,10 +145,14 @@ function sizeCanvas(canvas, maxDpr = Infinity) {
 // and one toggle in settings.js (the `effects` and `marketEffects` groups), and the lists are checked against each other
 // by a test, so an effect cannot ship without a switch or a switch without an effect.
 const FX_MS = {
-  ripple: 5200, outline: 4400, tide: 5200, cascade: 5600, twinkle: 3800, scan: 4200,
+  ripple: 5200, outline: 4400, tide: 5200, cascade: 5600, twinkle: 3800, scan: 16800,   // 8400 -> 16800: top-down it pans OUT AND BACK, so two traversals at the same unhurried speed   // scan 4200 -> 6000 -> 8400: the sweep now starts and ends off-panel, so the span grew and the duration follows it (below)
+  xray: 6500,                                  // the board goes x-ray behind a sweeping front, and develops back
   lightcycle: 6500, ball: 5600, pulse: 9000,   // pulse 7000 -> 9000 (2026-09-14: "make it a bit slower")
   bulge: 16000,                                // a sphere rolling through the price line; half speed (was 8000)
-  shockwave: 4200, nova: 5200, firework: 5600, flare: 3600, wave: 6000, quake: 3200,
+  breathe: 9000,                               // the price line breathes: three slow swells between the wire and the pulse's heat
+  saber: 8000,                                 // the price line ignites as a light saber, hums, and retracts
+  blackhole: 26000,                            // the chart collapses into a black hole and is let go again
+  shockwave: 4200, nova: 5200, firework: 5600, flare: 16000, wave: 6000, quake: 3200,   // flare 3600 -> 8000 -> 16000 (2026-09-15: it is a supernova now, and the cloud disperses slowly)
   rain: 6400, sparkle: 4600, checker: 4400, radar: 6000, vortex: 6400, powerup: 5000, combo: 4800, aurora: 7200, plasma: 6400,
   // THE AGENTS (agents.js): effects that are a thing MOVING rather than a pattern over the board.
   // Longer than the fields, because something that travels needs time to be watched -- a field
@@ -162,10 +166,38 @@ const FX_MS = {
   // stormball replaced portal (2026-09-14); slow on purpose -- it drifts across the whole view
   boulderdash: 6400, stormball: 11000,};
 export const FX_KINDS = Object.keys(FX_MS);
+// the price board's own lengths, where they differ: ball lightning crosses it at a third of the
+// block board's speed -- 11 s there; a third slower (16.5 s, operator 2026-09-15: "cut the speed
+// by 33% now that it's slower"), then 40% slower again (27.5 s: "Slow it down movement by 40%")
+// THE DURATION FOLLOWS THE SPAN, or widening the travel speeds up the picture (operator,
+// 2026-09-15: "why does it transit the market view so quick? I didn't ask for that"). When the
+// sweep was made to start and end beyond the panel, the distance grew but the clock did not, so
+// the part you actually watch -- the crossing of the board -- got 1.52x faster on Markets and
+// 1.40x on Block space. These restore the crossing to the speed it had: measured, 9145 ms and
+// 8400 ms for the two boards. Markets needs the longer one because its panel is wide and its board
+// is shallow, so proportionally more of the journey happens off-screen.
+// ...and then slower still on Markets (operator, 2026-09-15: "It's still way too fast on the
+// markets display. Slow it down at least 50%"). 9150 restored the pacing the effect had BEFORE the
+// travel change, which turns out not to have been slow enough either -- restoring a speed is not
+// the same as it being right. 14600 makes the on-screen crossing 8451 ms against 5297, i.e. 60%
+// slower, which clears the "at least 50%" asked for.
+// AN EFFECT'S SIZE ON A SMALL BOARD (2026-09-15, the Kiosk): a radius in grid units, capped at a
+// share of the board's width, so the same effect on a small panel never covers it
+export function boundedRadius(units, share, gridW) { return Math.min(units, share * gridW); }
+// effects that read as the same thing: never one right after the other
+const FX_KIN = { scan: ['tractor'], tractor: ['scan'] };
+export const MARKET_MS = { stormball: 27500, firework: 14000, flare: 24000, scan: 29200 };   // and a fireworks display of five shells, each with its smoke, needs the time
 // The longest a refresh will ever wait for an effect to finish, plus a second of slack. Taken from
 // the table rather than written as a number, so culling or adding an effect cannot leave the cap
 // shorter than the effect it is meant to outlast. See the deferral in render3d.
 const FX_DEFER_MAX = Math.max(...Object.values(FX_MS)) + 1000;
+// A BREATH BETWEEN AN EFFECT AND THE REFRESH IT HELD BACK (operator, 2026-09-15, of the black
+// hole: "snapping into place on last frame to drop in"): the parked layout took the stage on the
+// very frame the effect ended, so the board's cubes were seen arriving home and, in the same
+// instant, lifting off for the refresh -- one motion read as the other's last frame. The layout
+// now waits a moment and a half after the effect, with the board whole and still
+const FX_REST_MS = 1500;
+const fxResting = (st, t) => st.fxEndedAt != null && t - st.fxEndedAt < FX_REST_MS;
 // THE PULSE RIDES THE PRICE LINE (operator, 2026-09-12: "the energy pulse effect needs to run
 // across the yellow line, not through space on an invisible grid ... travel the yellow line from
 // one end to the other leaving a electric blue tint on the yellow line that starts fading back to
@@ -209,9 +241,12 @@ const hash01 = (n) => { const x = Math.sin(n * 12.9898) * 43758.5453; return x -
 // where they stand (cascade, twinkle, the flare), or is the price line's own (pulse, bulge, ball
 // lightning). The rest -- riders and walkers, the field patterns, anything that falls down the
 // depth or turns in place, anything that moves a tile -- stays on the block board.
-const ON_CANDLES = new Set(['ripple', 'outline', 'tide', 'cascade', 'twinkle', 'scan', 'pulse', 'bulge', 'firework', 'flare', 'wave', 'stormball']);
+const ON_CANDLES = new Set(['ripple', 'outline', 'tide', 'cascade', 'twinkle', 'scan', 'xray', 'pulse', 'bulge', 'breathe', 'saber', 'blackhole', 'firework', 'flare', 'wave', 'stormball']);
 // effects that are drawn on the price line and nowhere else: never offered to a board of blocks
-const LINE_ONLY = new Set(['pulse', 'bulge']);
+// the black hole is back on the price board only (operator, 2026-09-15, after a day of it hovering
+// over the block board: "still snapping into place. Just remove the black hole effect from block
+// space if you can't fix it")
+const LINE_ONLY = new Set(['pulse', 'bulge', 'breathe', 'saber', 'blackhole']);
 // EACH BOARD ITS OWN LIST (operator, 2026-09-14: "I want the markets tab to have a separate effects
 // list ... the Block Space effects specific to that panel, and settings specific to market panel"):
 // settings.js keeps one group of switches per list (`effects` for the block board, `marketEffects`
@@ -258,7 +293,7 @@ function startFx(st, kind, now) {
     const tiles = st.restTiles || [];
     agent = spec.build({ st, seed, W, H, tiles, tops: cellTops(tiles, W, H), rnd: rng(seed) });
   }
-  st.fx = { kind, t0: now, ms: FX_MS[kind] ?? 4500, x: origin.x, y: origin.y, dx: d[0], dy: d[1], rank, seed, agent,
+  st.fx = { kind, t0: now, ms: (onPriceBoard(st) ? MARKET_MS[kind] : null) ?? FX_MS[kind] ?? 4500, x: origin.x, y: origin.y, dx: d[0], dy: d[1], rank, seed, agent,
     // `paths`/`crashes` stay on the record because drawCycles reads view.fx.cycles, which the
     // agent's frame() produces from them; nothing outside agents.js builds them any more.
     paths: agent?.paths ?? null, crashes: agent?.crashes ?? null };
@@ -281,6 +316,95 @@ function fxNow(st, t) {
     const reach = Math.hypot(Math.max(f.x, st.gridW - f.x), Math.max(f.y, st.gridH - f.y));
     Object.assign(out, { x: f.x, y: f.y, r: reach * (1 - Math.pow(1 - u, 2)), w: 2.2 + 2.4 * u });
   }
+  // THE FIREWORKS LIGHT THEIR SURROUNDINGS IN THEIR OWN COLOUR (operator, 2026-09-15: "emissive
+  // colored lighting illuminating the explosion area in the explosion color"): every live shell is a
+  // head at its burst point, in its colour, as wide as the shell has spread, fading as it dies
+  if (f.kind === 'firework') {
+    const price = (st.axes?.line?.length ?? 0) > 1;
+    const heads = [];
+    for (const sh of fireworkShells(f.seed, st.gridW, st.gridH, price, 1, price ? (st.axes?.zTop ?? 34) : 16)) {
+      const v = (u - sh.t0) / sh.life;
+      if (!(v > 0.2 && v < 1.15)) continue;
+      const s2 = Math.min(1, (v - 0.2) / 0.8);
+      const spread = 1 - Math.exp(-3.4 * s2);
+      heads.push({ x: sh.bx, y: sh.by, color: sh.cols[0], alpha: Math.pow(Math.max(0, 1 - s2), 1.2) * (v < 0.28 ? 1 : 0.85), r: (price ? 7 : 8) * sh.size * (0.5 + 0.9 * spread) });
+    }
+    out.heads = heads;
+  }
+  // THE BLACK HOLE (2026-09-15): where it sits on the chart, how big its horizon is this frame,
+  // and -- through a head that HIDES -- which candles it has swallowed; the tiles near it glow the
+  // disk's orange. Everything the renderer needs rides on `out.blackhole`.
+  if (f.kind === 'blackhole' && st.axes?.line?.length > 1) {
+    const line = st.axes.line;
+    // IT CROSSES (operator, 2026-09-15: "get the black hole effect on the market display to slowly
+    // move from one side to the other"): from a fifth of the way in on one side to a fifth from
+    // the other, the way the front effects go (f.dx), easing in and out so it is still while it
+    // opens and while it closes; the candles' orbits ride along with it
+    // ...AND IT STOPS BEFORE IT LETS GO (operator, 2026-09-15: "the front faces of the lowest
+    // blocks just snap into place instead of dropping"): the crossing ran to 0.9 while the release
+    // began at 0.82, so a cube was let go not by the release curve but by the hole moving out of
+    // reach of it -- dropped in a few frames as the hole passed. The crossing is done by 0.8 now,
+    // and the release is the only thing that lets anything go
+    const travel = u < 0.1 ? 0 : u > 0.8 ? 1 : (() => { const t = (u - 0.1) / 0.7; return t * t * (3 - 2 * t); })();
+    const dir = (f.dx || 0) !== 0 ? Math.sign(f.dx) : hash01(f.seed + 5) < 0.5 ? 1 : -1;
+    const xa = st.gridW * (dir > 0 ? 0.18 : 0.82), xb = st.gridW * (dir > 0 ? 0.82 : 0.18);
+    const hx = xa + (xb - xa) * travel;
+    let hy, hz, lo = 0, hi = 0;
+    if (line) {
+      // THROUGH SPACE, NOT ALONG THE LINE (operator, 2026-09-15: "I don't want the black hole
+      // moving along the yellow line. I want it moving through space from point A to point B, and
+      // have everything warp around it ... riding the line hides that amazing effect"): a straight
+      // run from one height to another, both drawn from the seed inside the line's own range, so
+      // the hole crosses the line's path rather than sitting on it and the line is seen bending
+      // round the shadow as it passes
+      lo = Infinity; hi = -Infinity; for (const p of line) { lo = Math.min(lo, p.z); hi = Math.max(hi, p.z); }
+      const R = Math.max(1, hi - lo);
+      const za = lo + R * (0.15 + 0.85 * hash01(f.seed + 6)), zb = lo + R * (0.15 + 0.85 * hash01(f.seed + 7));
+      hz = za + (zb - za) * travel;
+      hy = st.axes.y ?? st.gridH / 2;
+    }
+    // ...AND ALL THE WAY HOME BEFORE THE END (operator, 2026-09-15: "still snapping into place on
+    // last frame to drop in"): the release curve reached zero only at u = 1, so on the last frame
+    // a cube was still a few pixels off home at nine tenths size, and the effect's end put it
+    // there in one step. It is a smoothstep now, done by 0.97 -- zero speed as it arrives -- and
+    // the last three hundredths draw nothing at all
+    const growIn = u < 0.22 ? Math.pow(u / 0.22, 1.6) : 1;
+    const growOut = u <= 0.82 ? 1 : u >= 0.97 ? 0 : (() => { const t = 1 - (u - 0.82) / 0.15; return t * t * (3 - 2 * t); })();
+    const grow = growIn * growOut;
+    const rs = boundedRadius(2.3, 0.047, st.gridW) * grow;                 // the horizon, in grid units (4.8 on 2026-09-15 -- "double the size" -- then 3.4: "obscuring too much" -- then 2.3: "shrink up the black hole by 33%"), and never more than 4.7% of the board
+    out.blackhole = { x: hx, y: hy, z: hz, rs, grow, lo, hi };
+    // SWALLOWED SMOOTHLY (operator, 2026-09-15: "the candles just blinking out of existence looks
+    // bad"): not `hide`, which is a threshold, but `scale: 0`, which fxAt applies by reach -- a
+    // candle shrinks toward nothing as it nears the horizon and grows back as the hole recedes
+    const reach = 1.5;
+    // LIFTED OUT WHOLE, NOT SHEARED, on the block board (operator, 2026-09-15: "too much bad
+    // shearing of the blocks around the black hole on the block space page. instead of stretching,
+    // can it just lift the blocks out?"): no corner lean there (lean 0 -- buildScene's orbit
+    // carries the cube toward the hole as one piece, its own shape, and it shrinks away into it).
+    // Not `lift` either: that extrudes a cube into a column from the floor, which read as an even
+    // longer stretch
+    // ...and `shrink` on the block board: the scale alone flattens a cube into a plate (it is a
+    // height override), and a plate sliding toward the hole was the "shearing"; shrunk in
+    // footprint as well it stays a cube, a smaller one, all the way in
+    // LET GO SMOOTHLY (operator, 2026-09-15: "The boxes are snapping into view when they come to
+    // rest on the board"): the release used to come from the head's reach shrinking with the
+    // hole, which let go of the outer cubes gently and the ones right under it all at once in the
+    // last frames -- they stayed on their rings at nothing, then popped home full size. The reach
+    // now holds its full size through the release and `release` (growOut) fades the pull and the
+    // scale themselves, so every cube glides home and grows back over the whole last fifth
+    const R = boundedRadius(2.3, 0.047, st.gridW) * reach;
+    out.heads = grow > 0.02 ? [{ x: hx, y: hy, z: hz, color: [255, 160, 60], alpha: grow, r: R * growIn, rPeak: R, scale: 0, pull: 1, release: growOut, lean: line ? 1 : 0, shrink: !line }] : [];
+  }
+  // THE PULSE LIGHTS WHAT IT PASSES (operator, 2026-09-15: "interfering with the affected areas"):
+  // its head is a light on the board, so the candles under it glow warm as it goes by (fxAt's
+  // heads branch, as the agents do)
+  if (f.kind === 'pulse' && st.axes?.line?.length > 1) {
+    const line = st.axes.line, headAt = u / PULSE_TRAVEL;
+    const k = Math.max(0, Math.min(1, headAt)) * (line.length - 1), i = Math.min(line.length - 2, Math.floor(k)), fr = k - i;
+    const x = line[i].x + (line[i + 1].x - line[i].x) * fr;
+    const fade = headAt <= 1 ? 1 : Math.max(0, 1 - (headAt - 1) / 0.34);
+    out.heads = [{ x, y: st.axes.y ?? st.gridH / 2, color: [255, 225, 150], alpha: fade, r: 3.2 }];
+  }
   // AN AGENT'S FRAME comes from its own spec (agents.js). Everything it publishes lands on the
   // frame object: `heads` (how it lights the cubes -- fxAt's heads branch), plus whatever its
   // draw reads, such as `cycles` for the light walls or `ball` for the plasma ball.
@@ -312,7 +436,18 @@ export function chooseIdleFx(kinds, st, now, rnd = Math.random, noRepeat = 12) {
   if (!kinds.length) return null;
   const recent = st.recentFx ?? (st.recentFx = []);
   const window = Math.max(0, Math.min(Math.floor(noRepeat), kinds.length - 1));
-  const blocked = new Set(recent.slice(recent.length - window));
+  // FROM THE START, NOT FROM THE END (operator, 2026-09-15: "I keep seeing the same effect being
+  // played before new ones"). This was `recent.slice(recent.length - window)`, and while fewer
+  // effects had played than the window is wide that index was negative -- which slice counts from
+  // the END: nine plays under a window of eleven blocked only the last two. The rule was weakest
+  // right after the page opened, which is exactly when anyone is watching. Measured before the
+  // fix on the Markets list: a repeat at the tenth pick; after it: every effect plays once before
+  // any comes round again.
+  const blocked = new Set(recent.slice(Math.max(0, recent.length - window)));
+  // KINDS THAT LOOK ALIKE SHARE THE WINDOW (operator, 2026-09-15: "I just saw the UFO effect get
+  // triggered twice in a row on the block space" -- the scan's searchlight and the tractor beam
+  // fly the same saucer, so one after the other read as a repeat though the rule saw two kinds)
+  for (const k of [...blocked]) for (const kin of FX_KIN[k] ?? []) blocked.add(kin);
   let pool = kinds.filter((k) => !blocked.has(k));
   if (!pool.length) {
     // every kind is inside the window: the ones played least recently
@@ -757,6 +892,1003 @@ function chargeTrail(ctx, segs, lw, now, seedBase = 0, pale = false) {
   ctx.lineWidth = lw;
 }
 
+// A FIREWORKS DISPLAY (operator, 2026-09-15: "the fireworks effect doesn't work at all on the
+// market screen", then "Make the fireworks much more impressive with further effects. Make them
+// Arc. instead of just going straight up. Add the nebula smoke effect that fades out as it
+// disperses ... Make a visually stunning fireworks display for the markets page"). The effect
+// only ever LIT tiles -- fxAt's ring over the cubes was the picture on the block board, and on
+// eight rows of candles it was a candle blinking. Every shell is drawn now, on both boards:
+//   * the LAUNCH is an arc, not a line: the rocket leaves the floor to one side and climbs a
+//     parabola to its burst point, a comet with a glowing tail and exhaust sparks falling behind;
+//   * the BURST is a white flash and a shockwave ring racing out and thinning;
+//   * the SHELL is one of four kinds by turn -- peony (round, two colours), chrysanthemum (long
+//     glittering trails that crackle white late), willow (heavy droop under gravity, long
+//     trails), ring (a hoop that keeps its shape as it falls) -- sixty to ninety sparks, each a
+//     curved trail of the last few positions, slowing and pulled down, twinkling, fading;
+//   * the SMOKE is a nebula: soft gradient blobs that leave the burst outward, growing, drifting
+//     up, in the shell's colour gone grey, and fade as they disperse -- on after the sparks;
+//   * up to ten shells on the price board, five on the block board (fireworkShells), overlapping,
+//     of every size, at every height of the picture, each lighting the candles under it in its
+//     own colour. Deterministic in fx.seed, as every effect is, so it replays and can be tested;
+//     only the twinkle reads the clock.
+const SHELL_COLS = [[[255, 170, 110], [255, 235, 160]], [[140, 220, 255], [220, 245, 255]], [[220, 160, 255], [255, 200, 240]], [[130, 255, 190], [235, 255, 220]], [[255, 120, 150], [255, 210, 120]], [[255, 215, 90], [255, 250, 210]], [[120, 200, 255], [255, 140, 200]]];
+
+// THE SHELLS OF A DISPLAY, from the seed: where and when each bursts, how big, what kind, what
+// colour. Shared by the drawing (drawFireworks) and the lighting (fxNow's heads), so the candles
+// glow in a shell's own colour exactly where and when it bursts. Up to ten on the price board
+// (operator, 2026-09-15: "have more than 1 firework going off at a time. 10 max. Vary the size ...
+// vary the height. Use the entire vertical viewport"), five on the block board; each launches at
+// its own moment in the first half of the run and lives long enough to overlap the next.
+export const FIREWORK_KINDS = ['peony', 'chrysanthemum', 'willow', 'ring', 'crossette', 'strobe'];   // no pinwheel: sparks fly straight (2026-09-15)
+export function fireworkShells(seed, gridW, gridH, price, zLo, zHi) {
+  const count = price ? 10 : 5, life = price ? 0.28 : 0.33, SMOKE = 1.35;
+  const out = [];
+  for (let i = 0; i < count; i++) {
+    const H = (k) => hash01(seed + i * 131 + k);
+    out.push({
+      i, life, smoke: SMOKE,
+      t0: 0.02 + H(0) * (price ? 0.5 : 0.4),
+      bx: 0.08 * gridW + H(1) * 0.84 * gridW, by: H(2) * gridH,
+      zc: zLo + (zHi - zLo) * (0.15 + 0.8 * H(3)),
+      size: 0.45 + 0.85 * H(4),                                // of the board's shell radius: small to big
+      kind: FIREWORK_KINDS[Math.floor(H(8) * FIREWORK_KINDS.length)],
+      cols: SHELL_COLS[Math.floor(H(9) * SHELL_COLS.length)],
+      drift: (H(5) < 0.5 ? -1 : 1) * (0.12 + 0.2 * H(6)) * gridW,
+      H,
+    });
+  }
+  return out;
+}
+// THE SHELL KINDS, by turn: how the sparks fly. (operator, 2026-09-15: "Make more varied
+// explosions. More effects. Lensflare? Really think stunning to see.")
+//   peony          round, two colours
+//   chrysanthemum  long glittering trails that crackle white late
+//   willow         heavy droop under gravity, the longest trails
+//   ring           a hoop that keeps its shape as it falls
+//   crossette      a peony whose sparks each split four ways partway out
+//   strobe         the sparks blink in unison, white, on a beat
+//   pinwheel       every spark curls the same way -- a spiral opening out
+const SHELL_KINDS = ['peony', 'chrysanthemum', 'willow', 'ring', 'crossette', 'strobe'];   // pinwheel is gone (2026-09-15: "a spiral effect ... defies physics of fireworks")
+// SMOOTH BY LAYERING, NOT BY GRADIENT (operator, 2026-09-15: "gradient visible! We need smooth
+// fills. no gradient shit!" -- then, of the block board: "what is still with the gradient fill
+// shit?!"). createRadialGradient bands on this rasteriser: the rings are plainly visible, and
+// worst on exactly the large soft blobs the effects are made of. Nested flat discs do not band --
+// each is a plain rgba fill and the SUM is the curve.
+//
+// Takes the same `stops` a radial gradient would, so a conversion is mechanical and the colours
+// are unchanged: it walks outward-in, interpolating the stop list, painting N flat rings.
+export function softStops(ctx, x, y, r, stops, N = 0) {
+  // THE STEP MUST LAND UNDER A PIXEL, or the cure is the disease (operator, 2026-09-15: "What is
+  // with the gradient garbage?" -- of fills I had already converted). Twenty flat discs over a
+  // 300px radius is a 15px step: concentric rings, which is exactly the banding a gradient makes,
+  // only coarser. The layer count therefore comes from the RADIUS, not from a constant: about one
+  // ring per 1.2px, floored so a small sprite is not wasteful and capped so a huge nebula cannot
+  // cost thousands of fills.
+  if (!N) N = Math.max(16, Math.min(220, Math.round(Math.abs(r) / 1.2)));
+  const at = (t) => {
+    let a = stops[0], b = stops[stops.length - 1];
+    for (let i = 0; i < stops.length - 1; i++) if (t >= stops[i][0] && t <= stops[i + 1][0]) { a = stops[i]; b = stops[i + 1]; break; }
+    const span = b[0] - a[0], k = span > 1e-6 ? (t - a[0]) / span : 0;
+    const pa = String(a[1]).match(/rgba?\(([^)]+)\)/), pb = String(b[1]).match(/rgba?\(([^)]+)\)/);
+    if (!pa || !pb) return String(a[1]);
+    const va = pa[1].split(',').map(Number), vb = pb[1].split(',').map(Number);
+    const m = (i, d) => (va[i] ?? d) + (((vb[i] ?? d) - (va[i] ?? d)) * k);
+    return `rgba(${Math.round(m(0, 0))},${Math.round(m(1, 0))},${Math.round(m(2, 0))},${m(3, 1).toFixed(4)})`;
+  };
+  // THE DISCS ADD UP (2026-09-15: "far too much solid white" on the Kiosk -- the supernova's pool
+  // and glow were opaque discs). Each nested disc was painted at the stop's whole alpha, and a
+  // point at radius t lies under EVERY disc of radius >= t: two hundred discs at 0.08 stack to
+  // solid. What the caller means by a stop is the opacity of everything painted at that radius,
+  // so each disc carries only the INCREMENT -- painted from the outside in, the disc at t adds
+  // 1 - (1 - a(t)) / (1 - a(t_outer)), and the cumulative opacity at every radius is exactly a(t).
+  const alphaAt = (t) => { const m = at(t).match(/rgba\([^,]+,[^,]+,[^,]+,([^)]+)\)/); return m ? Math.min(0.999, Math.max(0, Number(m[1]))) : 1; };
+  let outer = 0;                                              // the cumulative opacity just outside the current disc
+  for (let i = N; i >= 1; i--) {
+    const t = i / N, want = alphaAt(t);
+    const inc = want > outer ? 1 - (1 - want) / (1 - outer) : 0;
+    if (want > outer) outer = want;
+    if (inc < 0.0005) continue;
+    ctx.fillStyle = at(t).replace(/,([^,]+)\)$/, `,${inc.toFixed(4)})`);
+    ctx.beginPath(); ctx.arc(x, y, Math.max(0.5, r * t), 0, Math.PI * 2); ctx.fill();
+  }
+}
+
+function drawFireworks(ctx, view, lw) {
+  const fx = view.fx;
+  if (!fx || fx.kind !== 'firework') return;
+  const U = view.unit ?? 8;
+  const P = (x, y, z) => project(x, y, z, view);
+  const line = view.axes?.line;
+  const price = line?.length > 1;
+  // THE WHOLE HEIGHT of the picture: the floor to the chart's top on the price board, the floor
+  // to well above the cubes on the block board
+  const zLo = 1, zHi = price ? (view.axes?.zTop ?? 34) : 16;
+  const gf = Math.min(1, (1 - fx.u) / 0.1);                  // the run's own fade-out
+  // still a real gradient maker, because gasCloud() takes one as a callback and uses it for the
+  // smoke puffs; every FILL in this function is layered flat discs now (softStops)
+  const gradientOf = (x, y, r, stops) => {
+    const g = typeof ctx.createRadialGradient === 'function' ? ctx.createRadialGradient(x, y, 0, x, y, r) : null;
+    if (!g || typeof g.addColorStop !== 'function') return stops[0][1];
+    for (const [o, col] of stops) g.addColorStop(o, col);
+    return g;
+  };
+  const linearOf = (x0, y0, x1, y1, stops) => {
+    const g = typeof ctx.createLinearGradient === 'function' ? ctx.createLinearGradient(x0, y0, x1, y1) : null;
+    if (!g || typeof g.addColorStop !== 'function') return stops[Math.floor(stops.length / 2)][1];
+    for (const [o, col] of stops) g.addColorStop(o, col);
+    return g;
+  };
+  const disc = (x, y, r, fill) => { ctx.fillStyle = fill; ctx.beginPath(); ctx.arc(x, y, Math.max(0.5, r), 0, Math.PI * 2); ctx.fill(); };
+  const seg = (a, b, col, w) => { ctx.strokeStyle = col; ctx.lineWidth = Math.max(lw * 0.8, w); ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke(); };
+  const now = view.now ?? 0;
+  const cx0 = (view.boardW ?? 0) / 2, cy0 = -(view.boardH ?? 0) / 4;
+  for (const sh of fireworkShells(fx.seed, fx.gridW, fx.gridH, price, zLo, zHi)) {
+    const { H, life, smoke: SMOKE, kind } = sh;
+    const v = (fx.u - sh.t0) / life;
+    if (!(v > 0 && v < SMOKE)) continue;
+    const [col, col2] = sh.cols;
+    const c1 = col.join(','), c2 = col2.join(',');
+    const top = P(sh.bx, sh.by, sh.zc);
+    const R0 = U * boundedRadius(price ? 4.5 : 6, 0.09, fx.gridW) * sh.size;   // 7 and 8 until 2026-09-15 ("same with fireworks" -- on the Kiosk's panel ten shells carpeted it); never more than 9% of the board
+    // --- the launch: a parabola from the floor, off to one side, to the burst point
+    const RISE = 0.2;
+    const arc = (f) => P(sh.bx - sh.drift * (1 - f), sh.by, zLo + (sh.zc - zLo) * (1 - (1 - f) * (1 - f)));
+    if (v < RISE) {
+      const f = v / RISE;
+      const head = arc(f);
+      const tail = [];
+      for (let k = 0; k <= 8; k++) tail.push(arc(Math.max(0, f - (k / 8) * 0.22)));
+      for (let k = 0; k < 8; k++) {
+        const a = (1 - k / 8) * gf;
+        seg(tail[k], tail[k + 1], `rgba(${c1},${(0.35 * a).toFixed(3)})`, U * 0.26 * a * sh.size);
+        seg(tail[k], tail[k + 1], `rgba(255,240,210,${(0.9 * a).toFixed(3)})`, U * 0.08 * a);
+      }
+      for (let k = 0; k < 10; k++) {
+        const age = ((f * 6 + k / 10) % 1), back = arc(Math.max(0, f - age * 0.18));
+        const sx = back.x + (H(50 + k) - 0.5) * U * 0.8, sy = back.y + age * U * 1.6;
+        disc(sx, sy, U * 0.06 * (1 - age), `rgba(255,220,160,${(0.8 * (1 - age) * gf).toFixed(3)})`);
+      }
+      softStops(ctx, head.x, head.y, U * 0.32, [[0, `rgba(255,255,255,${gf.toFixed(3)})`], [0.4, `rgba(${c2},${(0.9 * gf).toFixed(3)})`], [1, `rgba(${c1},0)`]]);
+      continue;
+    }
+    const s = Math.min(1, (v - RISE) / (1 - RISE));          // 0 at the burst, 1 when the sparks are out
+    const ss = (v - RISE) / (SMOKE - RISE);                   // the smoke's own clock, 0..1 over the longer life
+    // --- THE DISSIPATION (operator: "The dissipation effects need to be more detailed"): a nebula
+    // of sixteen lumps, each two gradient discs offset so it is not round, leaving the burst
+    // outward and curling as it goes, the shell's colour gone grey with the colour still in its
+    // heart; embers falling slowly through it, flickering; ash sinking after them; all of it
+    // fading as it disperses and gone before the run ends
+    const smokeRc = [Math.round(col[0] * 0.45 + 95), Math.round(col[1] * 0.45 + 95), Math.round(col[2] * 0.45 + 105)];
+    const smokeCol = smokeRc.join(',');
+    // THE SMOKE IS A VOLUME OF GAS (operator, 2026-09-15: "Use the gas cloud for the fireworks
+    // smoke too"): the supernova's renderer, smaller -- a sphere of soft blobs carried out from
+    // the burst, drifting up, going from the shell's colour toward grey as it disperses
+    {
+      const sr = R0 * (0.3 + 1.1 * (1 - Math.exp(-2.2 * ss))), rise = R0 * 0.3 * ss;
+      // TONED DOWN (operator, 2026-09-15: "the fireworks nebulas are too prominent. they need to be
+      // toned down by half at least. Too opaque for too long"): half the alpha, a steeper fade,
+      // fewer blobs, and the smoke lives 1.35 shell-lives rather than 1.7
+      const sa = 0.45 * Math.pow(1 - ss, 2.2) * (0.4 + 0.6 * Math.min(1, ss * 6)) * gf;
+      if (sa > 0.01) gasCloud(ctx, top.x, top.y - rise, sr, ss, now, fx.seed + sh.i * 977, sa * 1.1, smokeRc, gradientOf, disc, 60, [50, 50, 58]);
+    }
+    if (ss > 0.15) {
+      const em = (ss - 0.15) / 0.85;
+      for (let k = 0; k < 18; k++) {
+        const ang = H(300 + k) * Math.PI * 2, d = R0 * (0.25 + 0.75 * H(320 + k));
+        const x = top.x + Math.cos(ang) * d + Math.sin(now * 0.002 + k) * U * 0.35, y = top.y + Math.sin(ang) * d * 0.7 + R0 * (0.15 + 1.2 * em) * (0.5 + 0.5 * H(340 + k));
+        const flick = 0.5 + 0.5 * Math.sin(now * 0.02 + k * 2.3);
+        const a = (1 - em) * gf;
+        if (a > 0.02) {
+          softStops(ctx, x, y, U * 0.11 * (1 - 0.5 * em), [[0, `rgba(255,255,255,${(0.9 * a * flick).toFixed(3)})`], [0.5, `rgba(${c2},${(0.7 * a * flick).toFixed(3)})`], [1, `rgba(${c1},0)`]]);
+          if (k % 3 === 0) disc(x + U * 0.2, y + U * 0.5 * em, U * 0.03, `rgba(${smokeCol},${(0.6 * a).toFixed(3)})`);   // ash
+        }
+      }
+    }
+    if (v >= 1) continue;                                     // only the dissipation is left
+    // --- the burst: a flash, a lens flare, and a shockwave ring racing out and thinning
+    if (s < 0.14) {
+      const f = (1 - s / 0.14) * gf;
+      const r = R0 * 0.5 * (1.3 - f * 0.6);
+      softStops(ctx, top.x, top.y, r, [[0, `rgba(255,255,255,${(0.95 * f).toFixed(3)})`], [0.3, `rgba(${c2},${(0.7 * f).toFixed(3)})`], [1, `rgba(${c1},0)`]]);
+    }
+    if (s < 0.35) {
+      const f = Math.pow(1 - s / 0.35, 1.5) * gf;
+      const L = R0 * 2.6;
+      ctx.strokeStyle = linearOf(top.x - L, top.y, top.x + L, top.y, [[0, `rgba(${c2},0)`], [0.35, `rgba(${c2},${(0.35 * f).toFixed(3)})`], [0.5, `rgba(255,255,255,${(0.9 * f).toFixed(3)})`], [0.65, `rgba(${c2},${(0.35 * f).toFixed(3)})`], [1, `rgba(${c2},0)`]]);
+      ctx.lineWidth = Math.max(lw, U * 0.09); ctx.beginPath(); ctx.moveTo(top.x - L, top.y); ctx.lineTo(top.x + L, top.y); ctx.stroke();
+      ctx.lineWidth = Math.max(lw * 3, U * 0.3); ctx.strokeStyle = linearOf(top.x - L, top.y, top.x + L, top.y, [[0, `rgba(${c1},0)`], [0.5, `rgba(${c1},${(0.25 * f).toFixed(3)})`], [1, `rgba(${c1},0)`]]);
+      ctx.beginPath(); ctx.moveTo(top.x - L * 0.7, top.y); ctx.lineTo(top.x + L * 0.7, top.y); ctx.stroke();
+      const rays = 4, spin = now * 0.0004 + H(11) * Math.PI;
+      for (let k = 0; k < rays; k++) {
+        const ang = spin + (k / rays) * Math.PI, rl = R0 * (0.9 + 0.5 * H(12 + k));
+        const x0 = top.x - Math.cos(ang) * rl, y0 = top.y - Math.sin(ang) * rl, x1 = top.x + Math.cos(ang) * rl, y1 = top.y + Math.sin(ang) * rl;
+        ctx.strokeStyle = linearOf(x0, y0, x1, y1, [[0, 'rgba(255,255,255,0)'], [0.5, `rgba(255,255,255,${(0.5 * f).toFixed(3)})`], [1, 'rgba(255,255,255,0)']]);
+        ctx.lineWidth = Math.max(lw * 0.8, U * 0.03); ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.stroke();
+      }
+      for (let k = 1; k <= 5; k++) {
+        const t = k * 0.35, gx = top.x + (cx0 - top.x) * t, gy = top.y + (cy0 - top.y) * t;
+        const gr = R0 * (0.08 + 0.1 * H(20 + k)) * (0.6 + t), ga = 0.16 * f * (1 - k / 7);
+        softStops(ctx, gx, gy, gr, [[0, `rgba(${k % 2 ? c1 : c2},${(ga * 0.5).toFixed(3)})`], [0.7, `rgba(${k % 2 ? c1 : c2},${ga.toFixed(3)})`], [1, `rgba(${k % 2 ? c1 : c2},0)`]]);
+      }
+    }
+    if (s < 0.4) {
+      const f = s / 0.4;
+      ctx.strokeStyle = `rgba(255,255,255,${(0.55 * (1 - f) * gf).toFixed(3)})`; ctx.lineWidth = Math.max(lw, U * 0.12 * (1 - f));
+      ctx.beginPath(); ctx.arc(top.x, top.y, R0 * 1.25 * f, 0, Math.PI * 2); ctx.stroke();
+    }
+    // --- EMISSIVE LIGHT on the explosion's surroundings (operator: "emissive colored lighting
+    // illuminating the explosion area in the explosion color"): a wide soft pool of the shell's
+    // colour over everything near the burst, strongest at the burst and fading with the shell
+    // (the candles under it glow in the colour too, through fxNow's heads)
+    {
+      const f = Math.pow(1 - s, 1.3) * gf, r = R0 * 2.4;
+      softStops(ctx, top.x, top.y + R0 * 0.2 * s, r, [[0, `rgba(${c1},${(0.32 * f).toFixed(3)})`], [0.4, `rgba(${c1},${(0.14 * f).toFixed(3)})`], [1, `rgba(${c1},0)`]]);
+    }
+    // --- the shell
+    const N = kind === 'ring' ? 60 : kind === 'crossette' ? 36 : 84;
+    const fade = Math.pow(1 - s, kind === 'willow' ? 0.8 : 1.2) * gf;
+    const spreadAt = (sq) => (kind === 'ring' ? Math.min(1, sq * 3) : 1 - Math.exp(-3.4 * sq));
+    const gscale = kind === 'willow' ? 1.9 : kind === 'ring' ? 0.7 : 1;
+    const pos = (k, sq, scale) => {
+      const jitter = kind === 'ring' ? 0.03 : 0.25;
+      const curl = kind === 'pinwheel' ? 2.4 * sq : 0;
+      const ang = (k / N) * Math.PI * 2 + (H(100 + k) - 0.5) * jitter + curl;
+      const len = R0 * (kind === 'ring' ? 0.9 : 0.6 + 0.5 * H(200 + k)) * scale;
+      const sp = spreadAt(sq);
+      return { x: top.x + Math.cos(ang) * len * sp, y: top.y + Math.sin(ang) * len * sp * (kind === 'ring' ? 0.55 : 1) + R0 * 0.9 * gscale * sq * sq };
+    };
+    const blink = kind === 'strobe' ? (Math.sin(now * 0.03) > 0.2 ? 1 : 0.15) : 1;
+    for (let k = 0; k < N; k++) {
+      const inner = k % 3 === 0;
+      const c = inner ? c2 : c1;
+      const scale = inner ? 0.62 : 1;
+      const long = kind === 'chrysanthemum' || kind === 'willow';
+      const steps = long ? 5 : 3, back = long ? 0.22 : 0.12;
+      let prev = null;
+      for (let q = steps; q >= 0; q--) {
+        const p = pos(k, Math.max(0, s - (q / steps) * back), scale);
+        if (prev) {
+          const a = (1 - q / (steps + 1)) * blink;
+          seg(prev, p, `rgba(${c},${(0.28 * fade * a).toFixed(3)})`, U * 0.2 * a * sh.size);
+          seg(prev, p, `rgba(${c},${(0.95 * fade * a).toFixed(3)})`, U * 0.07 * a);
+        }
+        prev = p;
+      }
+      const tw = 0.55 + 0.45 * Math.sin(now * 0.02 + k * 1.7);
+      const pop = kind === 'chrysanthemum' && s > 0.3 && hash01(fx.seed + k * 7 + Math.floor(now / 50)) < 0.12;
+      disc(prev.x, prev.y, U * (pop ? 0.2 : 0.075) * scale, `rgba(255,255,255,${(fade * blink * (pop ? 1 : 0.9 * tw)).toFixed(3)})`);
+      if (kind === 'crossette' && s > 0.42) {
+        const s2 = (s - 0.42) / 0.58, f2 = Math.pow(1 - s2, 1.3) * gf;
+        for (let m = 0; m < 4; m++) {
+          const ang = (m / 4) * Math.PI * 2 + H(400 + k) * 1.5, d = R0 * 0.22 * (1 - Math.exp(-3 * s2));
+          const e = { x: prev.x + Math.cos(ang) * d, y: prev.y + Math.sin(ang) * d + R0 * 0.2 * s2 * s2 };
+          seg(prev, e, `rgba(${c2},${(0.8 * f2).toFixed(3)})`, U * 0.05);
+          disc(e.x, e.y, U * 0.06, `rgba(255,255,255,${(0.9 * f2).toFixed(3)})`);
+        }
+      }
+    }
+    disc(top.x, top.y + R0 * 0.25 * s, U * 0.16 * fade, `rgba(255,255,255,${(0.7 * fade).toFixed(3)})`);
+  }
+  ctx.lineWidth = lw;
+}
+
+// THE SCAN IS A LIGHT CURTAIN (operator, 2026-09-15: "Suggest a way to drastically improve the
+// visuals on the scan line effect. Again, create new render tools" -- then "do it"). The front
+// was a tight line on the floor that lit each tile for a frame. Now it is a vertical SHEET of
+// light standing on the board, floor to the chart's top, sweeping across: a hard white core
+// with soft cyan falloff on both faces, faint raster lines rippling down it on the clock, a bar
+// of light along its top edge it hangs from with glints at the ends, a glowing foot on the floor
+// with a green-cyan phosphor tail fading behind it, motes drifting in the beam, sparks thrown up
+// from the foot, and a thin volumetric haze inside its thickness. The tiles keep lighting through
+// fxAt as before, and the price line flares white where the curtain crosses it (scanFlare).
+function curtainEnds(fx, z) {
+  // the front is the set of board points with x*dx + y*dy = p; its ends are where that line
+  // leaves the board, at height z
+  const n = fx.gridW, rows = fx.gridH, p = fxFront(fx);
+  const c0x = n / 2 + (p - (n / 2) * fx.dx - (rows / 2) * fx.dy) * fx.dx;
+  const c0y = rows / 2 + (p - (n / 2) * fx.dx - (rows / 2) * fx.dy) * fx.dy;
+  const L = Math.hypot(n, rows);
+  let a = null, b = null;
+  for (let i = -60; i <= 60; i++) {
+    const gx = c0x - fx.dy * (L * i) / 60, gy = c0y + fx.dx * (L * i) / 60;
+    if (gx >= -0.01 && gx <= n + 0.01 && gy >= -0.01 && gy <= rows + 0.01) { if (!a) a = { x: gx, y: gy, z }; b = { x: gx, y: gy, z }; }
+  }
+  return a && b && (a.x !== b.x || a.y !== b.y) ? [a, b] : null;
+}
+// THE LINE UNDER THE CURTAIN: the stretch the scan is crossing flares white and rings out
+// either side, so the wire reads as struck by the sheet of light as it passes
+function scanFlare(ctx, pts, axes, view, lw) {
+  const fx = view.fx, line = axes.line ?? [];
+  if (!fx || fx.dx === 0 || line.length !== pts.length) return;
+  const xf = fxFront(fx) * fx.dx;                                       // the front's x on the board (dy is 0 on the price board)
+  for (let i = 0; i < pts.length - 1; i++) {
+    const mx = (line[i].x + line[i + 1].x) / 2, d = Math.abs(mx - xf);
+    const k = Math.exp(-(d * d) / 6);
+    if (k < 0.03) continue;
+    ctx.strokeStyle = `rgba(160,230,255,${(0.6 * k).toFixed(3)})`; ctx.lineWidth = lw * 14 * k;
+    ctx.beginPath(); ctx.moveTo(pts[i].x, pts[i].y); ctx.lineTo(pts[i + 1].x, pts[i + 1].y); ctx.stroke();
+    ctx.strokeStyle = `rgba(255,255,255,${(0.95 * k).toFixed(3)})`; ctx.lineWidth = lw * 4;
+    ctx.beginPath(); ctx.moveTo(pts[i].x, pts[i].y); ctx.lineTo(pts[i + 1].x, pts[i + 1].y); ctx.stroke();
+  }
+}
+// THE BEAM'S ALTITUDE AND WIDTH, decided once. fxAt lights the swath while buildScene runs, and
+// drawScanCurtain draws the cone afterwards; if each worked its own numbers out they would drift
+// apart and the lit blocks would not be the ones under the light.
+function scanBeamGeom(view) {
+  const price = (view.axes?.line?.length ?? 0) > 1;
+  const top = price ? (view.axes?.zTop ?? 34) : 9;
+  const line = view.axes?.line ?? [];
+  const peak = line.length > 1 ? line.reduce((h, q) => Math.max(h, q.z ?? 0), 0) : top * 0.8;
+  const clearance = Math.max(2.5, top * 0.1);
+  const z = Math.max(peak + 1, Math.min(peak + clearance, top * 0.95));
+  const spread = price ? Math.max(3, Math.min(11, z * 0.32)) : Math.max(2, Math.min(5, z * 0.45));
+  return { price, top, z, spread };
+}
+
+function drawScanCurtain(ctx, view, lw) {
+  const fx = view.fx;
+  if (!fx || fx.kind !== 'scan') return;
+  const U = view.unit ?? 8, now = view.now ?? 0;
+  const { price, top } = scanBeamGeom(view);
+  const P = (q) => project(q.x, q.y, q.z, view);
+  // NO FADE WHILE IT IS IN SIGHT (operator, 2026-09-15: "it still fades in and out ... with the
+  // effects properly transitioning before being killed"). fx.amp is the shared envelope every
+  // effect dims by at its start and end -- which for a thing that TRAVELS means it materialises in
+  // the middle of the picture and dissolves there. The craft and its beam now hold full strength
+  // and let POSITION do the transition: the front enters and leaves beyond the panel's edge
+  // (fxFront's margin), so there is nothing on screen to fade.
+  const amp = 1;
+  void fx.amp;
+  // IT MUST LEAVE THE VIEWPORT, NOT BLINK OUT AT THE EDGE (operator, 2026-09-15: "it disappears at
+  // the edge of the screen. Have it move entirely off the viewport before you delete it").
+  // curtainEnds returns null the moment the front stops crossing the board, so everything below --
+  // the craft included -- simply stopped being drawn while it was still in frame. The craft's
+  // position comes from the front itself now, which fxFront carries four units past each edge, so
+  // the saucer flies in from off-board and out the far side under its own power.
+  const fp = fxFront(fx);
+  const fcx = fx.gridW / 2 + (fp - (fx.gridW / 2) * fx.dx - (fx.gridH / 2) * fx.dy) * fx.dx;
+  const fcy = fx.gridH / 2 + (fp - (fx.gridW / 2) * fx.dx - (fx.gridH / 2) * fx.dy) * fx.dy;
+  const ends = curtainEnds(fx, 0);
+  const [A, B] = ends ?? [{ x: fcx, y: fcy, z: 0 }, { x: fcx, y: fcy, z: 0 }];
+
+  // A CONE, NOT A STACK OF SHEETS (operator, 2026-09-15: "that leaning portion and the
+  // cross-hatching is not working. Can we make it a conical beam. instead, and do something
+  // volumetric effect?").
+  //
+  // WHY THE OLD ONE HATCHED. The curtain was twenty-one PARALLEL flat quads (k = -10..10, each
+  // offset k*0.5 along the sweep) with fourteen raster lines drawn across them. Under the oblique
+  // camera parallel sheets project to parallelograms offset by a constant, so their translucent
+  // edges land on near-parallel screen lines and read as a lattice -- a leaning cross-hatch. No
+  // amount of alpha tuning fixes that; the geometry itself is a grid.
+  //
+  // A cone has no parallel edges. Its body is a fan of triangles that all converge on the apex,
+  // so overlap -- and therefore density -- rises smoothly toward the axis on its own. That is the
+  // volumetric part: nothing is faked with a gradient across a flat face, the light is thick where
+  // the geometry is thick. Three nested shells give the falloff depth, a bright pool marks where
+  // it lands, and motes drift inside the volume rather than on a sheet.
+  const mx = fcx, my = fcy;                                 // the front's own centre, on or off the board
+  const half = Math.hypot(B.x - A.x, B.y - A.y) / 2;      // reach along the front line
+  const ax = -fx.dy, ay = fx.dx;                          // unit vector ALONG the front
+  const sx = fx.dx, sy = fx.dy;                           // unit vector along the SWEEP
+  // PROPORTIONS ARE THE WHOLE EFFECT (operator, 2026-09-15: the first cut "is fucked"). It put the
+  // apex at top*1.5 -- z = 51 on the price board -- over a base barely 5 units across, which draws
+  // 49px wide by 147px tall: a needle, not a beam. A spotlight reads as a spotlight when its height
+  // and the width where it lands are comparable, so the apex sits just under the chart's own top
+  // and the pool is wide enough to look like something landed in it.
+  // ABOVE THE PEAK, not level with it (operator, 2026-09-15: "It needs to fly a bit higher than
+  // the price line peak"). `top` is the chart's axis ceiling, which the line can come close to --
+  // a craft at 0.9 of it flies through the high candles. So the ceiling is the taller of the axis
+  // top and the line's own highest point, and the saucer clears it by 15%.
+  // ABOVE THE PEAK, BUT UNDER THE CEILING (operator, 2026-09-15: "It needs to fly a bit higher
+  // than the price line peak", then -- when I raised it past the chart's own top -- "It's flying at
+  // the top of teh screen. don't do that ... set it lower with some above tolerances").
+  //
+  // Both mistakes were the same one: taking a single bound and scaling it. Too low and the craft
+  // flies through the high candles; too high and it leaves the frame. It wants a clearance over the
+  // line AND a hard ceiling under the chart's top, so it rides above the price wherever the price
+  // happens to be and never reaches the edge.
+  const apex = { x: mx, y: my, z: scanBeamGeom(view).z };
+  const SPREAD = scanBeamGeom(view).spread;
+  const RING = 44;
+  // a point on the base ellipse: `f` scales the shell, `th` runs around it
+  const ring = (th, f) => ({
+    x: mx + Math.cos(th) * half * f * ax + Math.sin(th) * SPREAD * f * sx,
+    y: my + Math.cos(th) * half * f * ay + Math.sin(th) * SPREAD * f * sy,
+    z: 0,
+  });
+  const tri = (a, b, c, fill) => {
+    const p0 = P(a), p1 = P(b), p2 = P(c);
+    ctx.fillStyle = fill;
+    ctx.beginPath(); ctx.moveTo(p0.x, p0.y); ctx.lineTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.closePath(); ctx.fill();
+  };
+  const seg = (a, b, col, w) => { const p = P(a), q = P(b); ctx.strokeStyle = col; ctx.lineWidth = Math.max(lw * 0.8, w); ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(q.x, q.y); ctx.stroke(); };
+  // SMOOTH BY LAYERING, NOT BY GRADIENT (operator, 2026-09-15: "gradient visible! We need smooth
+  // fills. no gradient shit!"). A radial gradient bands on this rasteriser -- the rings are
+  // plainly visible, and worst on a large fill like the beam's pool. Many nested flat discs do not
+  // band: each is a plain rgba fill and the SUM is the curve. Same doctrine as bloom() in
+  // agents.js, with far more steps because the pool is large.
+  // one ring per ~1.2px, same rule as softStops: a fixed count bands on a large pool
+  const soft = (x, y, r, rgb, a) => {
+    const N = Math.max(16, Math.min(220, Math.round(Math.abs(r) / 1.2)));
+    for (let i = N; i >= 1; i--) {
+      ctx.fillStyle = `rgba(${rgb},${(a / N).toFixed(4)})`;
+      ctx.beginPath(); ctx.arc(x, y, Math.max(0.5, r * (i / N)), 0, Math.PI * 2); ctx.fill();
+    }
+  };
+  const disc = (x, y, r, fill) => { ctx.fillStyle = fill; ctx.beginPath(); ctx.arc(x, y, Math.max(0.5, r), 0, Math.PI * 2); ctx.fill(); };
+
+  // off the board there is nothing to light, so the beam is not drawn -- but the craft still is,
+  // which is what carries it out of the viewport
+  const onBoard = !!ends;
+  // --- the volume: nested cone shells, widest and faintest first
+  // DIMMER (operator, 2026-09-15: "the brightness of the scanner cone in the block space view needs
+  // to be toned down. It's too bright. Actually tone down beam brightness on both"): the shells,
+  // the axis, the pool and the rim all at a little over half of what they were
+  const DIM = 0.55;
+  if (onBoard) for (const [f, a] of [[1, 0.018], [0.88, 0.019], [0.76, 0.021], [0.64, 0.023], [0.53, 0.026], [0.43, 0.029], [0.34, 0.033], [0.26, 0.038], [0.19, 0.044], [0.13, 0.05]]) {
+    const fill = `rgba(120,220,255,${(a * DIM * amp).toFixed(3)})`;
+    for (let i = 0; i < RING; i++) {
+      tri(apex, ring((i / RING) * Math.PI * 2, f), ring(((i + 1) / RING) * Math.PI * 2, f), fill);
+    }
+  }
+  // the hot axis: a thin cone down the middle, and the shaft itself
+  if (onBoard) for (let i = 0; i < RING; i++) {
+    tri(apex, ring((i / RING) * Math.PI * 2, 0.08), ring(((i + 1) / RING) * Math.PI * 2, 0.08), `rgba(235,250,255,${(0.10 * DIM * amp).toFixed(3)})`);
+  }
+
+  // --- where it lands: a pool on the floor, brightest at the axis
+  if (onBoard) {
+    const c = P({ x: mx, y: my, z: 0 });
+    const r = U * Math.max(half, SPREAD) * 1.35;
+    soft(c.x, c.y, r, '150,225,255', 1.5 * DIM * amp);
+    soft(c.x, c.y, r * 0.42, '225,248,255', 1.1 * DIM * amp);
+  }
+  // the rim of the pool, so the cone reads as landing on something
+  if (onBoard) for (let i = 0; i < RING; i++) {
+    seg(ring((i / RING) * Math.PI * 2, 1), ring(((i + 1) / RING) * Math.PI * 2, 1), `rgba(170,235,255,${(0.28 * DIM * amp).toFixed(3)})`, U * 0.05);
+  }
+
+  // --- the source: the UFO, flying the beam (operator, 2026-09-15: "The top-down view in block
+  // space coming from a sphere does not look good. Can we re-purpose the UFO"). A glowing ball
+  // seen from directly above is just a blob -- it has no orientation, so top-down it reads as a
+  // smudge where the light starts. The saucer has a rim and a dome, so it stays a craft at any
+  // camera angle. Same craft the tractor beam flies (agents.js saucer()), so the board has one
+  // ship rather than two unrelated light sources.
+  {
+    const p = P(apex);
+    // (no glow round the craft: operator, 2026-09-15, "remove the light around the UFO. We have
+    // enough lights for that effect")
+    // TOP-DOWN (operator, 2026-09-15: "We need a top-down rendering of the UFO for this scene").
+    // The board's camera looks DOWN, so a dome-and-rim craft drawn edge-on is a smear; from above
+    // a saucer is concentric, and `squash` is the camera's own depth foreshortening so its circles
+    // are the ellipses everything else on the board is drawn in.
+    saucerAbove(ctx, p.x, p.y, U * 1.9, amp, view.oblique?.dy ?? 1, now * 0.0009);
+  }
+
+  // --- motes INSIDE the volume: placed by angle and depth, so they sit in the cone rather than
+  // on a face. Each drifts up the shaft and is reseeded by its own hash, never by Math.random.
+  // ...and only while the beam is on the board (operator, 2026-09-15: "I don't like how the
+  // particles are kept when the scanner is off"): off it, the craft flies alone
+  if (onBoard) for (let k = 0; k < 30; k++) {
+    const H = (q) => hash01(fx.seed + 700 + k * 13 + q);
+    const climb = ((H(1) + now * 0.00007 * (0.5 + H(2))) % 1);       // 0 at the floor, 1 at the apex
+    const th = H(3) * Math.PI * 2, rad = Math.sqrt(H(4)) * (1 - climb);
+    const b = ring(th, rad);
+    const q = { x: b.x + (apex.x - b.x) * climb, y: b.y + (apex.y - b.y) * climb, z: apex.z * climb };
+    const p = P(q), tw = 0.5 + 0.5 * Math.sin(now * 0.008 + k * 1.7);
+    disc(p.x, p.y, U * 0.06 * (1 - 0.5 * climb), `rgba(230,250,255,${(0.75 * tw * (1 - climb) * amp).toFixed(3)})`);
+  }
+
+  // --- sparks thrown from where it lands, as before: the beam is doing something to the board
+  const STEP = 160, LIFE = 900, kNow = Math.floor(now / STEP);
+  if (onBoard) for (let k = kNow - Math.ceil(LIFE / STEP); k <= kNow; k++) {
+    if (hash01(fx.seed + k * 5) > 0.5) continue;
+    const age = (now - k * STEP) / LIFE;
+    if (age < 0 || age >= 1) continue;
+    const t = hash01(fx.seed + k * 5 + 1);
+    const q = { x: A.x + (B.x - A.x) * t, y: A.y + (B.y - A.y) * t, z: 0 };
+    const p = P(q), rise = U * 2.2 * age * (1 - age) * 4, drift = (hash01(fx.seed + k * 5 + 2) - 0.5) * U * 1.2 * age;
+    disc(p.x + drift, p.y - rise, U * 0.07 * (1 - age), `rgba(255,255,255,${(0.9 * (1 - age) * amp).toFixed(3)})`);
+  }
+  ctx.lineWidth = lw;
+}
+
+// THE BLACK HOLE (operator, 2026-09-15: "Simulate the price chart turning into a black hole",
+// reference svs.gsfc.nasa.gov/14576 -- NASA's visualisation: an orange accretion disk of hot gas
+// spiralling in, brighter on the side coming toward us, a photon ring inside it, the far side of
+// the disk lensed into an arch over the top of the shadow and a thinner one under it, the sky
+// behind bent into arcs). On the chart:
+//   collapse   0    - 0.22  a point of darkness opens on the price line; the line bends round it
+//                            (lensPoints) and the candles nearest are swallowed (fxNow's head hides
+//                            them) as the horizon grows
+//   accretion  0.22 - 0.82  the disk: the chart's own colours -- gold, and the candles' green and
+//                            red -- spiralling in, Keplerian (faster inside), Doppler-bright on
+//                            the approaching side; the far side arched over and under the shadow;
+//                            the photon ring; lensed starlight in arcs round the horizon; the
+//                            shadow, black, soft-edged
+//   release    0.82 - 1     the hole shrinks to nothing, the disk spins away, the line straightens
+//                            and the candles come back
+// Screen-space, gradients and strokes under transforms, no clip or composite modes.
+function holeOnScreen(view) {
+  const b = view.fx?.blackhole;
+  if (!b) return null;
+  const c = project(b.x, b.y, b.z, view);
+  const U = view.unit ?? 8;
+  return { c, U, rs: b.rs * U, grow: b.grow };
+}
+function lensPoints(pts, view) {
+  const h = holeOnScreen(view);
+  if (!h || h.rs <= 0.5) return pts;
+  const rE = h.rs * 1.9;
+  return pts.map((p) => {
+    const dx = p.x - h.c.x, dy = p.y - h.c.y, r = Math.hypot(dx, dy) || 1e-6;
+    const r2 = Math.sqrt(r * r + rE * rE);
+    return { x: h.c.x + (dx / r) * r2, y: h.c.y + (dy / r) * r2 };
+  });
+}
+function drawBlackHole(ctx, view, lw) {
+  const fx = view.fx;
+  if (!fx || fx.kind !== 'blackhole') return;
+  const h = holeOnScreen(view);
+  if (!h || h.rs <= 0.5) return;
+  const { c, U, rs, grow } = h;
+  const now = view.now ?? 0;
+  const disc = (x, y, r, fill) => { ctx.fillStyle = fill; ctx.beginPath(); ctx.arc(x, y, Math.max(0.5, r), 0, Math.PI * 2); ctx.fill(); };
+  const canT = typeof ctx.save === 'function' && typeof ctx.rotate === 'function' && typeof ctx.scale === 'function';
+  // THE LOOK OF THE REFERENCE (operator, 2026-09-15, with NASA's still of the disk: "Is there any
+  // way we can get it looking closer to this?"): the disk seen well above its plane, not edge-on;
+  // a broad continuous body, white-yellow at its inner edge through orange to a dark red rim that
+  // fades to nothing; FIBROUS -- hundreds of thin streaks spiralling inward over it, sheared by
+  // the Keplerian flow, brightest on the approaching side; the shadow in the middle with a thin
+  // photon ring, a gap, and the far side's thin lensed arch hugging it over the top.
+  // ...then the Interstellar view (operator, with a second still: "need it to look more like this"):
+  // the disk nearly edge-on, a thin band crossing in front of the shadow, the far side thrown
+  // into a great arch over the top and a smaller one beneath
+  const TILT = 0.04, SQUASH = 0.17;
+  const inner = rs * 1.5, outer = rs * 5;     // 6.4 horizons at the largest ("twice as large"), then 5 ("obscuring too much")
+  const doppler = (ang) => 0.55 + 0.75 * Math.max(0, Math.cos(ang - Math.PI));   // the left side comes toward us: brightest at ang = pi
+  const H = (k) => hash01(fx.seed + k);
+  softStops(ctx, c.x, c.y, outer * 1.15, [[0, `rgba(255,170,70,${(0.22 * grow).toFixed(3)})`], [0.5, `rgba(255,130,50,${(0.08 * grow).toFixed(3)})`], [1, 'rgba(255,100,40,0)']]);
+  const toScreen = (rr, ang) => {
+    const px = rr * Math.cos(ang), py = rr * Math.sin(ang) * SQUASH;
+    return { x: c.x + px * Math.cos(TILT) - py * Math.sin(TILT), y: c.y + px * Math.sin(TILT) + py * Math.cos(TILT) };
+  };
+  // the fibres: thin streaks spiralling inward, each sheared along the flow, in the disk's plane
+  const streaks = [];
+  for (let k = 0; k < 520; k++) {
+    const hk = (q) => hash01(fx.seed + 400 + k * 13 + q);
+    const r0 = inner + (outer - inner) * Math.pow(hk(1), 1.3);
+    const omega = 0.0016 * Math.pow(inner / r0, 1.5);
+    const a0 = hk(2) * Math.PI * 2 + now * omega;
+    const span = (0.25 + 0.9 * hk(3)) * Math.pow(inner / r0, 0.4), heat = 1 - (r0 - inner) / (outer - inner);
+    streaks.push({ r0, a0, span, heat, w: rs * (0.02 + 0.045 * hk(4)), bright: 0.4 + 0.6 * hk(5), kind: hk(6), k });
+  }
+  const drawStreaks = (far) => {
+    if (!canT) return;
+    ctx.save(); ctx.translate(c.x, c.y); ctx.rotate(TILT); ctx.scale(1, SQUASH); ctx.lineCap = 'round';
+    for (const st of streaks) {
+      const mid = st.a0 + st.span / 2, isFar = Math.sin(mid) < 0;
+      if (isFar !== far) continue;
+      const dop = doppler(mid), heat = st.heat;
+      const col = st.kind < 0.06 ? '120,240,170' : st.kind < 0.12 ? '255,110,110' : heat > 0.7 ? '255,250,225' : heat > 0.35 ? '255,215,120' : '255,120,50';
+      ctx.strokeStyle = `rgba(${col},${(0.7 * grow * st.bright * Math.min(1.2, dop) / 1.2 * (0.35 + 0.65 * heat)).toFixed(3)})`; ctx.lineWidth = st.w * (0.8 + 0.6 * heat);
+      ctx.beginPath();
+      for (let i = 0; i <= 10; i++) { const t = i / 10, rr = st.r0 * (1 - 0.07 * t), ang = st.a0 + st.span * t; const x = rr * Math.cos(ang), y = rr * Math.sin(ang); if (i) ctx.lineTo(x, y); else ctx.moveTo(x, y); }
+      ctx.stroke();
+    }
+    ctx.restore();
+  };
+  // --- THE FAR HALF, LIFTED INTO THE ARCH (operator, 2026-09-15: "the disc above is not merging
+  // with the sides, and looks really bad" -- the arch was a circle drawn round the shadow while
+  // the disk is an ellipse in its own plane, two surfaces that met by accident). The arch IS the
+  // far half of the disk now: every point keeps its x on the disk (rr cos ang) and is raised over
+  // the top by an amount that grows with its radius -- 1.1 horizons at the inner edge, 2.7 at the
+  // outer -- so at the sides, where sin ang -> 0, the arch comes down exactly onto the flat band.
+  // The second image under the hole is the same, mirrored, smaller and dimmer.
+  const lift = (rr) => rs * (1.1 + 1.6 * (rr - inner) / (outer - inner));
+  const farPt = (rr, ang, under) => {
+    // the second image is a MIRROR, x as well as y: it turns with the band above it, not against
+    // (2026-09-15: "the two discs are spinning in opposite directions")
+    // CONTINUOUS INTO THE BAND (2026-09-15: "The transition between the two discs is not steady
+    // or continuous"): the arch's height starts at the flat band's own slope (rr * SQUASH per
+    // radian) and the lift takes over with |sin|^2.4, so the surface bends smoothly up from the
+    // band rather than kinking where the two meet
+    const sn = Math.abs(Math.sin(ang)), top = under ? rs * (1.05 + 0.45 * (rr - inner) / (outer - inner)) : lift(rr);
+    const sx = Math.cos(ang) * rr * (under ? -0.78 : 1), sy = rr * SQUASH * sn + Math.max(0, top - rr * SQUASH) * Math.pow(sn, 2.4);
+    return { x: c.x + sx * Math.cos(TILT) - sy * (under ? 1 : -1) * Math.sin(TILT), y: c.y + sx * Math.sin(TILT) + (under ? sy : -sy) * Math.cos(TILT) };
+  };
+  // ONE SET OF STRIPS FOR THE WHOLE DISK (operator, 2026-09-15, of a hard line across the middle:
+  // "that harsh line does not work"): the near half was a radial gradient in the disk's plane
+  // and the arch forty colour strips, and where they met at the midline the two disagreed. The
+  // near half is the same strips now, laid on the flat ellipse, so the colour at any radius is
+  // the same on both sides of the line and there is no line.
+  const archBody = (mode) => {
+    // 'ring': ONE CLOSED POLYGON PER STRIP round the whole disk -- the flat mapping over the near
+    // half, the lifted mapping over the far -- so there is no interior edge at the midline at all
+    // (2026-09-15: "still see harsh line bisecting" -- two fills sharing an edge draw that edge,
+    // antialiased twice, however well their colours agree). 'under' is the second image alone.
+    const under = mode === 'under';
+    const STRIPS = under ? 16 : 40, dim = under ? 0.55 : 1;
+    const at = (rr, ang) => (under ? farPt(rr, ang, true) : ang <= Math.PI ? toScreen(rr, ang) : farPt(rr, ang, false));
+    const a0 = under ? Math.PI : 0, aSpan = under ? Math.PI : Math.PI * 2, N = under ? 24 : 72;
+    // the second image FADES IN FROM THE MIDLINE (2026-09-15: "Still seeing the gradient" -- its
+    // top edge lay exactly on the disk's midline): it is drawn in sectors, each at an alpha that
+    // rises with |sin| from nothing at the line, so it has no edge there
+    const SECT = under ? N : 1;
+    for (let k = 0; k < STRIPS; k++) {
+      const t0 = k / STRIPS, t1 = (k + 1) / STRIPS, r0 = inner + (outer - inner) * t0, r1 = inner + (outer - inner) * t1, heat = 1 - (t0 + t1) / 2;
+      for (let sct = 0; sct < SECT; sct++) {
+      const s0 = a0 + (aSpan * sct) / SECT, s1 = a0 + (aSpan * (sct + 1)) / SECT, n = under ? 1 : N;
+      const fadeIn = under ? Math.pow(Math.abs(Math.sin((s0 + s1) / 2)), 0.8) : 1;
+      ctx.beginPath();
+      for (let i = 0; i <= n; i++) { const ang = s0 + ((s1 - s0) * i) / n; const p = at(r1, ang); if (i) ctx.lineTo(p.x, p.y); else ctx.moveTo(p.x, p.y); }
+      for (let i = n; i >= 0; i--) { const ang = s0 + ((s1 - s0) * i) / n; const p = at(r0, ang); ctx.lineTo(p.x, p.y); }
+      ctx.closePath();
+      // bright, never brown: the rim stays a saturated orange rather than a dark red at low alpha
+      const R = 255, G = Math.round(95 + 160 * Math.pow(heat, 0.7)), B = Math.round(25 + 200 * Math.pow(heat, 2.2));
+      const alpha = grow * dim * fadeIn * (0.55 + 0.42 * Math.pow(heat, 0.8));
+      // the Doppler side across the strip: a linear gradient, bright left, dark right
+      const dg = typeof ctx.createLinearGradient === 'function' ? ctx.createLinearGradient(c.x - outer, 0, c.x + outer, 0) : null;
+      if (dg && typeof dg.addColorStop === 'function') { dg.addColorStop(0, `rgba(${Math.min(255, R)},${Math.min(255, G + 50)},${Math.min(255, B + 70)},${alpha.toFixed(3)})`); dg.addColorStop(0.5, `rgba(${R},${G},${B},${(alpha * 0.85).toFixed(3)})`); dg.addColorStop(1, `rgba(${Math.round(R * 0.7)},${Math.round(G * 0.45)},${Math.round(B * 0.4)},${(alpha * 0.7).toFixed(3)})`); ctx.fillStyle = dg; }
+      else ctx.fillStyle = `rgba(${R},${G},${B},${alpha.toFixed(3)})`;
+      ctx.fill();
+      }
+    }
+  };
+  const archStreaks = (under) => {
+    ctx.lineCap = 'round';
+    for (const st of streaks) {
+      const mid = st.a0 + st.span / 2;
+      if (Math.sin(mid) >= 0) continue;                                  // the far half only
+      const dop = doppler(mid), heat = st.heat;
+      const col = st.kind < 0.06 ? '120,240,170' : st.kind < 0.12 ? '255,110,110' : heat > 0.7 ? '255,250,225' : heat > 0.35 ? '255,215,120' : '255,120,50';
+      const fadeIn = under ? Math.pow(Math.abs(Math.sin(mid)), 0.8) : 1;
+      ctx.strokeStyle = `rgba(${col},${(0.7 * grow * (under ? 0.5 : 1) * fadeIn * st.bright * Math.min(1.2, dop) / 1.2 * (0.35 + 0.65 * heat)).toFixed(3)})`; ctx.lineWidth = Math.max(lw * 0.8, st.w * (0.8 + 0.6 * heat) * 1.6);
+      ctx.beginPath();
+      for (let i = 0; i <= 10; i++) { const t = i / 10, rr = st.r0 * (1 - 0.07 * t), ang = st.a0 + st.span * t; const p = farPt(rr, ang, under); if (i) ctx.lineTo(p.x, p.y); else ctx.moveTo(p.x, p.y); }
+      ctx.stroke();
+    }
+  };
+  archBody('under'); archStreaks(true);                                 // the second image, under
+  // the shadow, then the whole disk over it -- the far half is lifted clear of the shadow, the
+  // near half crosses in front of it -- then the fibres, then the photon ring over everything
+  softStops(ctx, c.x, c.y, rs * 1.1, [[0, 'rgba(0,0,0,1)'], [0.88, 'rgba(0,0,0,1)'], [1, 'rgba(0,0,0,0)']]);
+  archBody('ring');
+  archStreaks(false);
+  drawStreaks(false);
+  ctx.strokeStyle = `rgba(255,245,215,${(0.95 * grow).toFixed(3)})`; ctx.lineWidth = Math.max(lw, rs * 0.045);
+  ctx.beginPath(); ctx.arc(c.x, c.y, rs * 1.07, 0, Math.PI * 2); ctx.stroke();
+  ctx.strokeStyle = `rgba(255,190,100,${(0.45 * grow).toFixed(3)})`; ctx.lineWidth = Math.max(lw * 2, rs * 0.14);
+  ctx.beginPath(); ctx.arc(c.x, c.y, rs * 1.11, 0, Math.PI * 2); ctx.stroke();
+  // --- lensed starlight: short arcs of white round the horizon, the sky behind bent into rings
+  for (let k = 0; k < 26; k++) {
+    const hk = (q) => hash01(fx.seed + 800 + k * 7 + q);
+    const rr = rs * (1.15 + 1.6 * hk(1)), a0 = hk(2) * Math.PI * 2 + now * 0.00008 * (hk(3) - 0.5), span = 0.08 + 0.35 * hk(4);
+    ctx.strokeStyle = `rgba(255,255,255,${(0.45 * grow * (0.4 + 0.6 * hk(5))).toFixed(3)})`; ctx.lineWidth = Math.max(lw * 0.8, U * 0.03);
+    ctx.beginPath(); ctx.arc(c.x, c.y, rr, a0, a0 + span); ctx.stroke();
+  }
+  ctx.lineWidth = lw;
+}
+
+// A STAR'S GLINT (for the supernova's progenitor; 2026-09-15, operator: "The flashing dot as a
+// supernova looks bad. The star is blue-shifted before it blows up. Can we have a better glint
+// effect there?"). A soft halo, a hot core, four long diffraction spikes and two shorter
+// diagonals, each a gradient fading to its tip, all of it twinkling on the clock; `col` is the
+// star's colour and `f` its strength. Gradients only.
+function starGlint(ctx, x, y, size, col, f, now, lw) {
+  if (f <= 0.003) return;
+  const c = col.join(','), tw = 0.85 + 0.15 * Math.sin(now * 0.017) * Math.sin(now * 0.031 + 1);
+  const grad = (r, stops) => { const g = typeof ctx.createRadialGradient === 'function' ? ctx.createRadialGradient(x, y, 0, x, y, r) : null; if (!g || typeof g.addColorStop !== 'function') return stops[0][1]; for (const [o, cc] of stops) g.addColorStop(o, cc); return g; };
+  const lin = (x0, y0, x1, y1, stops) => { const g = typeof ctx.createLinearGradient === 'function' ? ctx.createLinearGradient(x0, y0, x1, y1) : null; if (!g || typeof g.addColorStop !== 'function') return stops[1][1]; for (const [o, cc] of stops) g.addColorStop(o, cc); return g; };
+  ctx.fillStyle = grad(size * 3, [[0, `rgba(255,255,255,${(0.9 * f * tw).toFixed(3)})`], [0.12, `rgba(${c},${(0.7 * f * tw).toFixed(3)})`], [0.4, `rgba(${c},${(0.18 * f).toFixed(3)})`], [1, `rgba(${c},0)`]]);
+  ctx.beginPath(); ctx.arc(x, y, size * 3, 0, Math.PI * 2); ctx.fill();
+  const spikes = [[0, 1, 0.09], [Math.PI / 2, 1, 0.09], [Math.PI / 4, 0.45, 0.05], [-Math.PI / 4, 0.45, 0.05]];
+  for (const [ang, len, w] of spikes) {
+    const L = size * 9 * len * tw, x0 = x - Math.cos(ang) * L, y0 = y - Math.sin(ang) * L, x1 = x + Math.cos(ang) * L, y1 = y + Math.sin(ang) * L;
+    ctx.strokeStyle = lin(x0, y0, x1, y1, [[0, `rgba(${c},0)`], [0.5, `rgba(255,255,255,${(0.85 * f * tw).toFixed(3)})`], [1, `rgba(${c},0)`]]);
+    ctx.lineWidth = Math.max(lw * 0.8, size * w); ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.stroke();
+    ctx.strokeStyle = lin(x0, y0, x1, y1, [[0, `rgba(${c},0)`], [0.5, `rgba(${c},${(0.4 * f).toFixed(3)})`], [1, `rgba(${c},0)`]]);
+    ctx.lineWidth = Math.max(lw * 2, size * w * 3.5); ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.stroke();
+  }
+  ctx.fillStyle = `rgba(255,255,255,${(f * tw).toFixed(3)})`; ctx.beginPath(); ctx.arc(x, y, size * 0.45, 0, Math.PI * 2); ctx.fill();
+}
+
+// A VOLUME OF GAS (for the supernova's debris, the fireworks' smoke, the pulsar's wind; 2026-09-15).
+// `n` blobs with fixed places in the unit sphere -- radius biased toward the rim, so the limb reads
+// brighter, the way a shell does when seen through -- projected with the sphere's depth kept: the
+// blobs are drawn back to front, the back ones darker, the front ones paler and hotter. The whole
+// thing expands homologously (every blob's distance in proportion to its own), grows, boils
+// slowly on the clock, and cools from `rc` toward `dark` as `f` runs 0..1. No strokes: gradients.
+// ORGANIC, NOT CIRCULAR (operator, 2026-09-15: "Everything is too circular RN. It needs to look
+// more organic like the video"): the blobs gather in CLUMPS rather than spreading evenly, each is
+// an ELLIPSE stretched along its own radial line (a streak of gas blown outward) and turned to
+// it, and the sphere's silhouette is LUMPY -- every blob's radius carries a low-order wobble by
+// its direction, so the cloud has lobes and bays rather than an outline. `colorAt(front, f, H)`,
+// if given, decides each blob's colour from its depth, the run and its own hashes.
+function gasCloud(ctx, cx, cy, shell, f, now, seed, bright, rc, grad, disc, n = 150, dark = [90, 20, 25], colorAt = null, blobScale = 1, stretchMax = 2.4) {
+  const blobs = [];
+  const clumps = Math.max(4, Math.round(n / 14));
+  const cdir = [];
+  for (let q = 0; q < clumps; q++) { const H = (k) => hash01(seed + 900 + q * 17 + k); cdir.push({ th: H(1) * Math.PI * 2, ph: Math.acos(2 * H(2) - 1), w: 0.35 + 0.5 * H(3) }); }
+  const lumpA = hash01(seed + 77) * Math.PI * 2, lumpB = hash01(seed + 78) * Math.PI * 2;
+  for (let k = 0; k < n; k++) {
+    const H = (q) => hash01(seed + 5000 + k * 37 + q);
+    const cl = cdir[Math.floor(H(6) * clumps)];
+    // a gaussian-ish scatter round the clump's direction, wider for some clumps
+    const th = cl.th + (H(2) + H(7) - 1) * cl.w * 1.6, ph = Math.max(0.05, Math.min(Math.PI - 0.05, cl.ph + (H(3) + H(8) - 1) * cl.w * 1.2));
+    const lump = 1 + 0.22 * Math.sin(3 * th + lumpA) * Math.sin(2 * ph + lumpB) + 0.14 * Math.sin(5 * th - lumpB) + 0.1 * Math.cos(4 * ph + lumpA);
+    const rho = (0.3 + 0.7 * Math.sqrt(H(1))) * lump;
+    blobs.push({ x: rho * Math.sin(ph) * Math.cos(th), y: rho * Math.sin(ph) * Math.sin(th), z: rho * Math.cos(ph), s: 0.16 + 0.2 * H(4), w: H(5) * Math.PI * 2, stretch: 1 + (stretchMax - 1) * (0.3 + 0.7 * H(9)), H, k });
+  }
+  blobs.sort((a, b) => a.z - b.z);                                       // back to front
+  const canTransform = typeof ctx.save === 'function' && typeof ctx.rotate === 'function' && typeof ctx.scale === 'function';
+  for (const b of blobs) {
+    const wob = 0.035 * Math.sin(now * 0.0013 + b.w) + 0.02 * Math.sin(now * 0.0029 + b.k);
+    const x = cx + (b.x + wob) * shell, y = cy + (b.y - wob * 0.6) * shell * 0.85;
+    const r = shell * b.s * (0.8 + 0.7 * f) * blobScale;
+    const front = (b.z + 1) / 2;                                         // 0 at the back, 1 at the front
+    let col, core;
+    if (colorAt) { col = colorAt(front, f, b.H); core = col.map((v) => Math.round(v + (255 - v) * 0.45)); }
+    else {
+      const heat = Math.max(0, Math.min(1, 0.5 + 0.55 * front - 0.45 * f));
+      col = rc.map((v, i) => Math.round(dark[i] + (v - dark[i]) * heat));
+      core = col.map((v) => Math.round(v + (255 - v) * 0.5 * heat));
+    }
+    const a = bright * (0.32 + 0.3 * front) * (1 - 0.25 * f);
+    if (a < 0.004) continue;
+    const fill = (rr) => grad(0, 0, rr, [[0, `rgba(${core.join(',')},${a.toFixed(3)})`], [0.45, `rgba(${col.join(',')},${(a * 0.7).toFixed(3)})`], [1, `rgba(${col.join(',')},0)`]]);
+    if (canTransform) {
+      const ang = Math.atan2(y - cy, x - cx);                            // stretched along its own radial line
+      ctx.save(); ctx.translate(x, y); ctx.rotate(ang); ctx.scale(b.stretch, 1 / Math.sqrt(b.stretch));
+      ctx.fillStyle = grad(0, 0, r, [[0, `rgba(${core.join(',')},${a.toFixed(3)})`], [0.45, `rgba(${col.join(',')},${(a * 0.7).toFixed(3)})`], [1, `rgba(${col.join(',')},0)`]]);
+      ctx.beginPath(); ctx.arc(0, 0, Math.max(0.5, r), 0, Math.PI * 2); ctx.fill();
+      ctx.restore();
+    } else softStops(ctx, x, y, r, [[0, `rgba(${core.join(',')},${a.toFixed(3)})`], [0.45, `rgba(${col.join(',')},${(a * 0.7).toFixed(3)})`], [1, `rgba(${col.join(',')},0)`]]);
+    void fill;
+  }
+  // the limb: a soft brightening at the sphere's edge
+  const R = shell * 1.02;
+  softStops(ctx, cx, cy, R, [[0, `rgba(${rc.join(',')},0)`], [0.78, `rgba(${rc.join(',')},0)`], [0.92, `rgba(${rc.join(',')},${(0.16 * bright).toFixed(3)})`], [1, `rgba(${rc.join(',')},0)`]]);
+}
+
+// A SUPERNOVA (operator, 2026-09-15: "build the supernova" -- the solar flare only ever lit a cube
+// and its neighbours, and on a chart of candles that was one candle blinking). MODELLED ON NASA
+// GODDARD'S ANIMATION (svs.gsfc.nasa.gov/20413, the operator's reference, 2026-09-15: "Look at
+// this video of the explosive supernova. Model something similar"): a star, a blinding flash
+// that whites out the whole picture, a turbulent debris cloud of knots and filaments expanding
+// and reddening as it dims, and, as the cloud thins, a PULSAR -- a point of light pulsing at the
+// centre inside a small blue pulsar-wind nebula that grows. Drawn on both boards, on the same
+// star fxAt lights (fxHash(seed + 7, 8)), whose shockwave throws the candles it crosses:
+//   ignition     0    - 0.12  the star swells white-hot, crackle rising over it
+//   breakout     0.12 - 0.34  the white-out: the whole picture goes white and comes back (no flare)
+//   debris       0.14 - 1     the cloud: a volume of gas (gasCloud), a sphere of soft blobs
+//                             carried out by the expansion, white-gold, orange, then deep red,
+//                             the shock band at its leading edge
+//   pulsar       0.45 - 1     the point pulsing at the centre, its blue nebula growing
+// Everything is a function of fx.u, the seed and the clock; the run fades in its last tenth.
+// a radial-gradient maker and a disc filler bound to a given context (gasCloud takes both)
+function gradFor(c) {
+  return (x, y, r, stops) => {
+    const g = typeof c.createRadialGradient === 'function' ? c.createRadialGradient(x, y, 0, x, y, r) : null;
+    if (!g || typeof g.addColorStop !== 'function') return stops[0][1];
+    for (const [o, col] of stops) g.addColorStop(o, col);
+    return g;
+  };
+}
+function discFor(c) { return (x, y, r, fill) => { c.fillStyle = fill; c.beginPath(); c.arc(x, y, Math.max(0.5, r), 0, Math.PI * 2); c.fill(); }; }
+// a half-size offscreen layer matching the board's canvas and transform, cleared for this frame;
+// null where there is no real canvas to make one from
+function plumeLayer(ctx, fx) {
+  const cv = ctx.canvas;
+  if (!cv || !cv.width || typeof ctx.getTransform !== 'function' || typeof ctx.drawImage !== 'function' || typeof document === 'undefined') return null;
+  const w = Math.ceil(cv.width / 2), h = Math.ceil(cv.height / 2);
+  let L = fx._plumes;
+  if (!L || L.canvas.width !== w || L.canvas.height !== h) {
+    const canvas = document.createElement('canvas'); canvas.width = w; canvas.height = h;
+    const c2 = canvas.getContext('2d');
+    if (!c2) return null;
+    L = fx._plumes = { canvas, ctx: c2 };
+  }
+  const m = ctx.getTransform();
+  L.ctx.setTransform(1, 0, 0, 1, 0, 0); L.ctx.clearRect(0, 0, w, h);
+  L.ctx.setTransform(m.a / 2, m.b / 2, m.c / 2, m.d / 2, m.e / 2, m.f / 2);
+  return L;
+}
+function drawSupernova(ctx, view, lw) {
+  const fx = view.fx;
+  if (!fx || fx.kind !== 'flare') return;
+  const U = view.unit ?? 8, u = fx.u, now = view.now ?? 0;
+  const line = view.axes?.line, price = line?.length > 1;
+  const sx = fxHash(fx.seed + 7) * fx.gridW, sy = price ? (view.axes.y ?? fx.gridH / 2) : fxHash(fx.seed + 8) * fx.gridH;
+  let sz = 3;
+  if (price) {   // the star sits on the price line at that hour
+    let best = line[0]; for (const p of line) if (Math.abs(p.x - sx) < Math.abs(best.x - sx)) best = p;
+    sz = best.z;
+  }
+  const c = project(sx, sy, sz, view);
+  // BOUNDED (operator, 2026-09-15: "supernova and black hole nebula effects take up too much
+  // screen space ... it's obscuring too much"): the shell was sized at half the board and the
+  // white-out was the whole frame, which on the Kiosk's panel was the whole panel; the shell is
+  // about a third of the board now and the flash a soft disc round the star
+  // ...and never more than 7% of the board's width, whatever the board (the Kiosk's block-space
+  // panel is 44 units across and small on screen: at 4.5 units the cloud covered most of it)
+  const R0 = U * boundedRadius(price ? 3.4 : 4.5, 0.07, fx.gridW);
+  const gf = Math.min(1, (1 - u) / 0.1);
+  // still a real gradient maker, because gasCloud() takes one as a callback for its puffs; every
+  // FILL drawn directly by this function is layered flat discs now (softStops)
+  const grad = (x, y, r, stops) => {
+    const g = typeof ctx.createRadialGradient === 'function' ? ctx.createRadialGradient(x, y, 0, x, y, r) : null;
+    if (!g || typeof g.addColorStop !== 'function') return stops[0][1];
+    for (const [o, col] of stops) g.addColorStop(o, col);
+    return g;
+  };
+  const disc = (x, y, r, fill) => { ctx.fillStyle = fill; ctx.beginPath(); ctx.arc(x, y, Math.max(0.5, r), 0, Math.PI * 2); ctx.fill(); };
+  const mixc = (a, b, t) => a.map((v, i) => Math.round(v + (b[i] - v) * t));
+  // the cloud's colour with the run, as in the reference (operator: "the cloud is white at the
+  // start, shifting towards blue, then purple/violet"): white, blue, then violet
+  const cool = Math.max(0, Math.min(1, (u - 0.14) / 0.86));
+  const rc = cool < 0.3 ? mixc([255, 255, 255], [150, 195, 255], cool / 0.3) : mixc([150, 195, 255], [175, 110, 255], (cool - 0.3) / 0.7);
+  const rcs = rc.join(',');
+  // --- ignition: a white nebula, not a ball (operator, 2026-09-15: "Don't use a white ball visual
+  // at the beginning of the animation. Use white nebula effects"): a small cloud of white gas
+  // gathering and brightening round the star, blue-shifting as the blast nears
+  if (u < 0.14) {
+    const f = Math.min(1, u / 0.12), ease = f * f;
+    const col = [Math.round(255 - 70 * ease), Math.round(255 - 30 * ease), 255];
+    gasCloud(ctx, c.x, c.y, R0 * (0.35 + 0.9 * ease), 0.2, now, fx.seed + 555, 0.25 + 0.75 * ease, col, grad, disc, 70, [120, 150, 230]);
+  }
+  // --- THE DEBRIS CLOUD AS A VOLUME OF GAS (operator, 2026-09-15: "Overall it needs to look
+  // more like the NASA video. I don't think the ejecta/fireworks is working well ... The thin
+  // white lines shifting at the edges does not hold up well"). No lines of any kind. The cloud
+  // is gasCloud: a sphere of soft gradient blobs, each with a fixed place in the unit sphere
+  // (denser toward the rim, so the limb is brighter, as a shell seen through is), carried
+  // outward by the expansion -- every blob at a radius in proportion to its own, as a real
+  // remnant expands -- growing as it goes, the front ones hotter and paler than the ones behind,
+  // the whole cooling white-gold -> orange -> red as it dims, its surface boiling on the clock.
+  const band = (r, w, col, a) => {
+    if (r <= 0 || a <= 0.003) return;
+    const R = r + w;
+    softStops(ctx, c.x, c.y, R, [[0, `rgba(${col},0)`], [Math.max(0, (r - w) / R), `rgba(${col},0)`], [Math.max(0, (r - w * 0.35) / R), `rgba(${col},${a.toFixed(3)})`], [r / R, `rgba(240,245,255,${(a * 0.8).toFixed(3)})`], [Math.min(1, (r + w * 0.5) / R), `rgba(${col},${(a * 0.6).toFixed(3)})`], [1, `rgba(${col},0)`]]);
+  };
+  if (u >= 0.14) {
+    const f = (u - 0.14) / 0.86;
+    const shell = R0 * (0.5 + 4.2 * (1 - Math.exp(-1.3 * f)));           // the cloud's radius: slower than the first cut (operator: "the cloud dispersion is too fast")
+    // LINGERING (operator, 2026-09-15: "make the violet nebula linger longer into the blink
+    // phase"): the cloud holds full weight until four fifths of the run -- well into the pulsar's
+    // beat -- and only thins over the last fifth, so the purple stays round the blinking star
+    const bright = (f < 0.08 ? f / 0.08 : f < 0.8 ? 1 : Math.pow(1 - (f - 0.8) / 0.2, 1.2)) * gf;
+    // THE MORPHING (operator, 2026-09-15: "as it shifts from blue to white initially, then the
+    // purples and violets start appearing, as the blue clouds continue to disperse ahead of
+    // everything else"): three clouds. The BLUE one is out in front, expanding fastest and
+    // thinning first; the MAIN one behind it is white at the start, and violet grows into it
+    // patch by patch, each blob turning on its own schedule, until the whole is purple; the
+    // INNER one is the deep violet heart that shows as the others thin.
+    const blueShell = R0 * (0.6 + 4.6 * (1 - Math.exp(-1.9 * f)));
+    const blueBright = bright * 0.7 * Math.pow(1 - f, 1.6);
+    // SMOOTH (operator, 2026-09-15: "We see too much of the radial texture. Lets try to smoothen
+    // that up"): more and larger blobs at a lower weight, barely stretched, so they melt into one
+    // another instead of reading as radial streaks
+    gasCloud(ctx, c.x, c.y, blueShell, f, now, fx.seed + 31337, blueBright * 0.32, [150, 195, 255], grad, disc, 140, [70, 110, 220], (front, ff, H) => {
+      const t = Math.min(1, ff / 0.5);
+      return [Math.round(215 - 65 * t), Math.round(235 - 40 * t), 255].map((v, i) => Math.round(v * (0.75 + 0.25 * front) + (i === 2 ? 0 : 0)));
+    }, 0.85, 1.25);
+    // THIN, NOT SOLID (2026-09-15, the Kiosk: "far too much solid white"): overlapping discs sum
+    // toward opaque however faint each is -- 320 blobs saturated, and 170 at a third still did --
+    // so the cloud is ninety blobs at an eighth of the weight, which peaks near half opacity at the
+    // centre and reads as gas the chart shows through
+    gasCloud(ctx, c.x, c.y, shell, f, now, fx.seed, bright * 0.17, rc, grad, disc, 220, [60, 30, 120], (front, ff, H) => {
+      // SOONER (operator, 2026-09-15: "we need more of the third stage purple and violet nebula
+      // becoming prominent as it starts the blink phase"): the patches turn violet between a tenth
+      // and four tenths of the run, so the cloud is mostly purple by the time the pulsar wakes
+      const start = 0.1 + 0.3 * H(11), on = Math.max(0, Math.min(1, (ff - start) / 0.2));   // when this patch turns violet
+      const white = [225, 235, 255], violet = [170, 105, 255], deep = [95, 45, 170];   // blue-white, not solid white (2026-09-15)
+      const c1 = white.map((v, i) => v + (violet[i] - v) * on);
+      const shade = 0.55 + 0.45 * front;
+      return c1.map((v, i) => Math.round(deep[i] + (v - deep[i]) * shade));
+    }, 0.85, 1.25);
+    if (f > 0.2) {
+      // the violet heart, sooner and heavier (the same request): rising from a fifth of the run,
+      // full by the blink, and a second wider violet cloud behind it that keeps growing
+      const inner = Math.min(1, (f - 0.2) / 0.18);
+      gasCloud(ctx, c.x, c.y, shell * 0.7, f, now, fx.seed + 777, bright * 0.3 * inner, [160, 90, 255], grad, disc, 90, [60, 25, 130], null, 0.9, 1.25);
+      gasCloud(ctx, c.x, c.y, shell * 1.05, f, now, fx.seed + 778, bright * 0.16 * inner, [175, 115, 255], grad, disc, 90, [70, 30, 140], null, 1.1, 1.3);
+    }
+    // and the interior glow: the cloud lit from within
+    softStops(ctx, c.x, c.y, shell * 0.8, [[0, `rgba(${rcs},${(0.1 * bright).toFixed(3)})`], [0.6, `rgba(${rcs},${(0.05 * bright).toFixed(3)})`], [1, `rgba(${rcs},0)`]]);
+    // the shock band at the cloud's leading edge, soft, in the cloud's colour
+    if (u < 0.6) {
+      const fr = (u - 0.14) / 0.46, r = R0 * 4.5 * (1 - Math.pow(1 - fr, 2.2));
+      softStops(ctx, c.x, c.y, r, [[0, 'rgba(235,240,255,0)'], [0.7, `rgba(235,240,255,${(0.05 * (1 - fr) * gf).toFixed(3)})`], [1, `rgba(240,245,255,${(0.14 * (1 - fr) * gf).toFixed(3)})`]]);
+      band(r, R0 * (0.3 + 0.6 * (1 - fr)), rcs, 0.4 * (1 - fr) * gf);
+    }
+    // a wide pool of the cloud's colour on everything near
+    softStops(ctx, c.x, c.y, shell * 1.9, [[0, `rgba(${rcs},${(0.08 * bright).toFixed(3)})`], [1, `rgba(${rcs},0)`]]);
+  }
+  // --- the breakout: the whole picture goes white and comes back
+  if (u >= 0.12 && u < 0.4) {
+    const t = (u - 0.12) / 0.28, f = t < 0.1 ? t / 0.1 : Math.pow(1 - (t - 0.1) / 0.9, 1.5);
+    // THE FLASH ITSELF (operator, 2026-09-15: "It's missing the bright white flash!"): a bright,
+    // brief one -- full white at the heart for an instant, gone in a third of the breakout -- so
+    // it reads as a flash, not as a solid glow that sits on the Kiosk's panel
+    const fl = t < 0.04 ? t / 0.04 : t < 0.12 ? 1 : Math.pow(Math.max(0, 1 - (t - 0.12) / 0.3), 2);
+    // WHITE-HOT (operator, 2026-09-15: "We need to add the white-hot-flash to the explosion
+    // again"): the heart goes fully white and holds for a moment, and a wide veil of light
+    // washes twice as far out for the same instant -- bounded to the star's neighbourhood, so
+    // the Kiosk's panel flashes bright but never sits solid
+    if (fl > 0) {
+      const V = R0 * 8;
+      disc(c.x, c.y, V, grad(c.x, c.y, V, [[0, `rgba(255,255,252,${(0.45 * fl).toFixed(3)})`], [0.4, `rgba(255,252,246,${(0.18 * fl).toFixed(3)})`], [1, 'rgba(255,248,240,0)']]));
+    }
+    // a soft flash round the star, not the whole frame -- and NOT SOLID (operator, 2026-09-15, via
+    // his wife on the Kiosk: "far too much solid white"): a modest disc, at most half opaque at its
+    // heart, thin by three shells out, and the white gas thrown with it at a third of the weight
+    const W = R0 * 4;
+    // PRESENCE BACK (operator, 2026-09-15: "We've removed so much of the initial white nebula
+    // emission that it's lost much of its presence and intensity") -- now that the discs add up
+    // honestly, the flash and the white gas can carry weight again without going solid
+    disc(c.x, c.y, W, grad(c.x, c.y, W, [[0, `rgba(255,255,252,${Math.min(1, 0.3 * f + 1.0 * fl).toFixed(3)})`], [0.35, `rgba(255,252,244,${Math.min(1, 0.15 * f + 0.6 * fl).toFixed(3)})`], [0.7, `rgba(255,248,235,${(0.05 * f + 0.06 * fl).toFixed(3)})`], [1, 'rgba(255,245,230,0)']]));
+    // MORE GAS OFF THE FLASH (operator, 2026-09-15: "Opening white flash needs more dispersing
+    // nebula gas"): two clouds thrown with it -- a dense one at the flash and a wider, thinner
+    // one racing ahead of it -- both flying out faster than the flash fades, so the white
+    // disperses into the dark rather than shrinking back into the star
+    // A BURST OF PLUMES, not two clouds (operator, 2026-09-15: "need much more than two clouds of
+    // white gas in the initial explosion"): the dense cloud at the flash, and the plumes of
+    // white gas thrown from it in every direction (below), each its own cloud flying outward on
+    // its own speed and growing as it goes, the fast ones out ahead and thinning first
+    gasCloud(ctx, c.x, c.y, R0 * (1.0 + 2.2 * t), t, now, fx.seed + 999, 0.1 * f, [255, 255, 255], grad, disc, 80, [200, 210, 240], null, 0.9, 1.25);
+    // (no lens flare here: its turning rays were the "opening rotating glints" the operator had
+    // taken out on 2026-09-15; the white-out alone is the breakout)
+  }
+  // FURTHER AND LONGER (operator, 2026-09-15: "the plumes need to disperse further out and linger
+  // longer ... Double the amount"): thirty-two plumes on their own clock, outliving the flash by
+  // half again -- they reach nine star radii, keep flying after the flash has gone, and only
+  // thin out slowly, so the white gas is still drifting outward when the blue debris rises
+  // AND AGAIN (operator, 2026-09-15: "the white plumes still fade too fast, make them linger
+  // longer. Double the amount again" -- then "Double the white ejecta again. We're getting
+  // closer!"): a hundred and twenty-eight plumes, holding full for the first fifth of
+  // their flight and thinning slowly over the rest, still drifting at nine tenths of the effect
+  if (u >= 0.12 && u < 0.9) {
+    const t = (u - 0.12) / 0.78, g = t < 0.04 ? t / 0.04 : t < 0.2 ? 1 : Math.pow(1 - (t - 0.2) / 0.8, 0.7);
+    // AT HALF RESOLUTION: a hundred and twenty-eight clouds of soft gradient discs is the costliest
+    // thing any effect draws, so the plumes go onto a half-size layer (a quarter of the pixels to
+    // fill) and are blitted up -- gas is blurry to begin with, so nothing is lost; where there is
+    // no offscreen canvas (the tests' stub context) they draw straight onto the board
+    const layer = plumeLayer(ctx, fx), pc = layer ? layer.ctx : ctx;
+    const pgrad = layer ? gradFor(pc) : grad, pdisc = layer ? discFor(pc) : disc;
+    for (let k = 0; k < 128; k++) {
+      const H = (q) => hash01(fx.seed + 4400 + k * 19 + q);
+      const ang = (k / 128) * Math.PI * 2 + (H(1) - 0.5) * 0.2, sp = 0.4 + 1.2 * H(2);
+      const reach = R0 * (0.6 + 9 * t) * sp, ease = 1 - Math.exp(-2.2 * t);
+      const px = c.x + Math.cos(ang) * reach * ease, py = c.y + Math.sin(ang) * 0.75 * reach * ease;
+      const shell = R0 * (0.5 + 2.8 * t) * (0.7 + 0.6 * H(3));
+      gasCloud(pc, px, py, shell, t, now, fx.seed + 5000 + k * 131, 0.09 * g * (1 - 0.3 * sp), [245, 248, 255], pgrad, pdisc, 10, [180, 195, 235], null, 1.3, 1.3);
+    }
+    if (layer) { ctx.save(); ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.drawImage(layer.canvas, 0, 0, ctx.canvas.width, ctx.canvas.height); ctx.restore(); }
+  }
+  // --- the pulsar: as the cloud dims, a point pulsing at the centre, its blue nebula growing
+  if (u >= 0.45) {
+    const f = (u - 0.45) / 0.55, on = Math.min(1, f / 0.1) * gf;
+    const period = 140, ph = ((now % period) / period), pulse = Math.pow(Math.max(0, 1 - Math.abs(ph - 0.5) * 6), 2);   // a sharp beat, seven a second (operator: "Pulsar needs to pulse quicker")
+    const neb = R0 * (0.25 + 1.1 * f);
+    // THE WIND NEBULA IS A GAS CLOUD TOO (operator, 2026-09-15: "The pulsar nebula needs the gas
+    // cloud too"): a small blue-white sphere of blobs blown outward from the pulsar, growing with
+    // it, lit from the centre, the pulsar's beat showing in its brightness
+    softStops(ctx, c.x, c.y, neb, [[0, `rgba(190,225,255,${(0.28 * on).toFixed(3)})`], [0.5, `rgba(120,175,255,${(0.12 * on).toFixed(3)})`], [1, 'rgba(80,130,255,0)']]);
+    gasCloud(ctx, c.x, c.y, neb, f, now, fx.seed + 4242, on * (0.75 + 0.25 * pulse), [170, 215, 255], grad, disc, 70, [40, 70, 170]);
+    const rp = R0 * (0.12 + 0.25 * pulse);
+    softStops(ctx, c.x, c.y, rp * 2.4, [[0, `rgba(255,255,255,${((0.5 + 0.5 * pulse) * on).toFixed(3)})`], [0.3, `rgba(200,235,255,${(0.55 * pulse * on).toFixed(3)})`], [1, 'rgba(140,200,255,0)']]);
+    disc(c.x, c.y, rp * 0.5, `rgba(255,255,255,${on.toFixed(3)})`);
+    // the beam: two thin rays sweeping round with the beat
+    const sweep = now * 0.004;
+    for (const side of [0, Math.PI]) {
+      const ang = sweep + side, L = neb * (0.8 + 0.8 * pulse);
+      ctx.strokeStyle = `rgba(220,240,255,${(0.35 * pulse * on).toFixed(3)})`; ctx.lineWidth = Math.max(lw, U * 0.04);
+      ctx.beginPath(); ctx.moveTo(c.x, c.y); ctx.lineTo(c.x + Math.cos(ang) * L, c.y + Math.sin(ang) * L); ctx.stroke();
+    }
+  }
+  ctx.lineWidth = lw;
+}
+
 // THE LIGHTNING BALL, over the cubes: the grid line it has traced burning behind it and cooling
 // over 16 units, a plasma ball of one pale gradient with a white-hot heart, and bolts jumping from it
 // to the grid crossings round it, new every frame. Plain rgba fills and strokes only.
@@ -801,17 +1933,16 @@ function drawBall(ctx, view, lw) {
   // thin so the ball is light on the board rather than a shadow over it.
   const flick = 0.85 + 0.15 * Math.random();
   const R = 4.2 * U;
-  const g = typeof ctx.createRadialGradient === 'function' ? ctx.createRadialGradient(c.x, c.y, 0, c.x, c.y, R) : null;
-  if (g && typeof g.addColorStop === 'function') {
-    g.addColorStop(0, 'rgba(255,255,255,1)');
-    g.addColorStop(0.1, 'rgba(240,250,255,1)');
-    g.addColorStop(0.22, 'rgba(200,236,255,0.85)');
-    g.addColorStop(0.4, `rgba(170,220,255,${(0.32 * flick).toFixed(3)})`);
-    g.addColorStop(0.68, `rgba(160,205,255,${(0.1 * flick).toFixed(3)})`);
-    g.addColorStop(1, 'rgba(160,200,255,0)');
-    ctx.fillStyle = g;
-  } else ctx.fillStyle = 'rgba(220,240,255,0.5)';
-  ctx.beginPath(); ctx.arc(c.x, c.y, R, 0, Math.PI * 2); ctx.fill();
+  // layered flat discs, not a radial gradient: this is the biggest soft blob on the board and it
+  // banded visibly (operator, 2026-09-15: "what is still with the gradient fill shit?!")
+  softStops(ctx, c.x, c.y, R, [
+    [0, 'rgba(255,255,255,1)'],
+    [0.1, 'rgba(240,250,255,1)'],
+    [0.22, 'rgba(200,236,255,0.85)'],
+    [0.4, `rgba(170,220,255,${(0.32 * flick).toFixed(3)})`],
+    [0.68, `rgba(160,205,255,${(0.1 * flick).toFixed(3)})`],
+    [1, 'rgba(160,200,255,0)'],
+  ], 26);
   const z0 = b.z - 0.9;
   const bolts = 4 + ((Math.random() * 4) | 0);
   for (let i = 0; i < bolts; i++) {
@@ -980,7 +2111,7 @@ function drawGrid(ctx, view, opts, n, blockRows, rows = n) {
     polyline(pts, 16, `rgba(80,255,190,${(0.12 * fx.amp).toFixed(3)})`);
     polyline(pts, 3, `rgba(180,255,230,${(0.45 * fx.amp).toFixed(3)})`);
   }
-  if (fx && (fx.kind === 'outline' || fx.kind === 'scan' || fx.kind === 'tide')) {
+  if (fx && (fx.kind === 'outline' || fx.kind === 'tide')) {   // the scan draws its own foot (drawScanCurtain)
     // the front itself, drawn across the floor where it is
     const p = fxFront(fx);
     const L = Math.hypot(n, rows);
@@ -1297,20 +2428,37 @@ function curveByLength(pts, samples = 400) {
     let lo = 0, hi = samples;
     while (hi - lo > 1) { const mid = (lo + hi) >> 1; if (table[mid].len < L) lo = mid; else hi = mid; }
     const a = table[lo], b = table[hi], f = b.len > a.len ? (L - a.len) / (b.len - a.len) : 0;
-    return curveAt(pts, a.s + (b.s - a.s) * f);
+    // never exactly 1: curveAt's last segment is pts[n-1]..pts[n], and s = 1 would ask for pts[n+1]
+    // (the pulse's head bulge sits at the very end of the line once the head has run off it)
+    return curveAt(pts, Math.min(0.999999, a.s + (b.s - a.s) * f));
   };
-  return { total, at, travel: bulgeTravel(table) };
+  // the length along the curve at parameter s (0..1 by point index, as headPoint and curveAt count):
+  // the pulse's bulge is placed with this, so it sits ON the head rather than a share of the length
+  // along -- which drifted from the head wherever the candles' hops were unequal (operator,
+  // 2026-09-15: "the bulge effect is lagging behind the energy. They should be on top of each other")
+  const lenAt = (sv) => {
+    const S = Math.max(0, Math.min(1, sv));
+    let lo = 0, hi = samples;
+    while (hi - lo > 1) { const mid = (lo + hi) >> 1; if (table[mid].s < S) lo = mid; else hi = mid; }
+    const a = table[lo], b = table[hi], f = b.s > a.s ? (S - a.s) / (b.s - a.s) : 0;
+    return a.len + (b.len - a.len) * f;
+  };
+  return { total, at, lenAt, travel: bulgeTravel(table) };
 }
 
 function drawBulge(ctx, pts, lw0, u, layers, ms = FX_MS.bulge) {
   const lw = Number.isFinite(lw0) && lw0 > 0 ? lw0 : 1;         // a canvas that will not say: one pixel
   const { t } = bulgeAt(u, ms);
   const coreR = (lw * 5.5) / 2;
-  const Rfull = coreR * BULGE_BALL;
   const curve = curveByLength(pts);
   // the ball's centre travels the whole line, quicker downhill and slower up (bulgeTravel); the ball
   // is as big as fits between it and the nearer end
-  const centre = curve.travel(t);
+  drawBulgeAt(ctx, pts, lw, curve.travel(t), coreR * BULGE_BALL, layers, curve);
+}
+/** The swell itself, at `centre` along the curve with a full radius of `Rfull`: the pulse's head borrows it. */
+function drawBulgeAt(ctx, pts, lw0, centre, Rfull, layers, curve = curveByLength(pts)) {
+  const lw = Number.isFinite(lw0) && lw0 > 0 ? lw0 : 1;         // a canvas that will not say: one pixel
+  const coreR = (lw * 5.5) / 2;
   const R = bulgeFit(Math.min(centre, curve.total - centre), Rfull, coreR);
   const amp = (R - coreR) / (Rfull - coreR || 1);
   if (amp < 0.002) return;
@@ -1406,9 +2554,83 @@ function electrifyLine(ctx, pts, view, lw) {
   }
 }
 
+
+// A LIGHT SABER (operator, 2026-09-15: "add another markets effect that really rips off a star wars
+// light saber visual somehow"). The price line is the blade. It IGNITES from the left end -- the
+// blade extends along the line with a flash at the hilt and a bright tip -- HUMS for most of the
+// run (the glow breathes on two fast sines, the core shimmers, and now and then a spark spits off
+// the blade), and RETRACTS to the hilt. One of four colours a run, hashed from the seed: blue,
+// green, red, purple. The unlit rest of the line stays as the faint wire. Nothing here is the
+// price line's resting look, which is the steady neon glow (markets.test.js keeps it so).
+const SABER_COLS = [[80, 170, 255], [90, 255, 130], [255, 70, 70], [200, 100, 255]];
+function drawSaberLine(ctx, pts, lw, fx, view, GLOW, CORE) {
+  const u = fx.u, now = view.now ?? 0;
+  const col = SABER_COLS[Math.floor(hash01(fx.seed + 7) * SABER_COLS.length)];
+  const c = col.join(',');
+  const pale = col.map((v) => Math.round(v + (255 - v) * 0.55)).join(',');
+  const IGN = 0.14, RET = 0.86;
+  const ease = (t) => 1 - Math.pow(1 - t, 3);
+  const ext = u < IGN ? ease(u / IGN) : u > RET ? 1 - ease((u - RET) / (1 - RET)) : 1;
+  // the faint wire under it all
+  const stroke = (w, colour, path) => { ctx.strokeStyle = colour; ctx.lineWidth = lw * w; ctx.beginPath(); path(); ctx.stroke(); };
+  const wire = () => traceCurve(ctx, pts);
+  for (const [w, cc, a] of [...GLOW, ...CORE]) stroke(w, `rgba(${cc[0]},${cc[1]},${cc[2]},${(a * 0.3).toFixed(3)})`, wire);
+  if (ext <= 0.002) return;
+  // the lit part: the curve up to `ext` of its length
+  const curve = curveByLength(pts);
+  const len = curve.total * ext;
+  const N = Math.max(2, Math.ceil(64 * ext));
+  const blade = [];
+  for (let k = 0; k <= N; k++) blade.push(curve.at((len * k) / N));
+  const along = () => { ctx.moveTo(blade[0].x, blade[0].y); for (let k = 1; k < blade.length; k++) ctx.lineTo(blade[k].x, blade[k].y); };
+  // the hum: the glow breathes on two fast sines, never still
+  const hum = 1 + 0.06 * Math.sin(now * 0.05) + 0.035 * Math.sin(now * 0.131 + 1);
+  const bright = 0.9 + 0.1 * Math.sin(now * 0.021);
+  // a third thicker than the first cut (operator, 2026-09-15: "make the saber effect a bit thicker")
+  stroke(44 * hum, `rgba(${c},${(0.11 * bright).toFixed(3)})`, along);
+  stroke(27 * hum, `rgba(${c},${(0.24 * bright).toFixed(3)})`, along);
+  stroke(15 * hum, `rgba(${c},${(0.58 * bright).toFixed(3)})`, along);
+  stroke(8.8, `rgba(${pale},0.92)`, along);
+  stroke(4.4, `rgba(255,255,255,${(0.95 * bright).toFixed(3)})`, along);
+  // the core shimmers: a thin white thread whose brightness runs along the blade
+  for (let k = 0; k < blade.length - 1; k++) {
+    const f = 0.5 + 0.5 * Math.sin(now * 0.03 + k * 0.9);
+    ctx.strokeStyle = `rgba(255,255,255,${(0.35 * f).toFixed(3)})`; ctx.lineWidth = lw * 1.9;
+    ctx.beginPath(); ctx.moveTo(blade[k].x, blade[k].y); ctx.lineTo(blade[k + 1].x, blade[k + 1].y); ctx.stroke();
+  }
+  // the tip: a bright point with the colour's bloom round it
+  const tip = blade[blade.length - 1];
+  for (const [r, colour, a] of [[12, c, 0.25], [6.8, pale, 0.7], [3.2, '255,255,255', 1]]) {
+    ctx.fillStyle = `rgba(${colour},${a})`; ctx.beginPath(); ctx.arc(tip.x, tip.y, lw * r, 0, Math.PI * 2); ctx.fill();
+  }
+  // the hilt flashes at ignition and again as the blade comes home
+  const flash = u < IGN ? 1 - u / IGN : u > RET ? (u - RET) / (1 - RET) : 0;
+  if (flash > 0) {
+    const h = blade[0];
+    for (const [r, colour, a] of [[26, c, 0.18], [14, pale, 0.45], [6, '255,255,255', 0.9]]) {
+      ctx.fillStyle = `rgba(${colour},${(a * flash).toFixed(3)})`; ctx.beginPath(); ctx.arc(h.x, h.y, lw * r * (0.6 + 0.4 * flash), 0, Math.PI * 2); ctx.fill();
+    }
+  }
+  // now and then a spark spits off the blade: a few short lines from one point, gone in a beat
+  const beat = Math.floor(now / 90);
+  if (ext >= 1 && hash01(fx.seed + beat) < 0.3) {
+    const at = curve.at(curve.total * hash01(fx.seed + beat * 3 + 1));
+    const srnd = (k) => hash01(fx.seed + beat * 7 + k);
+    for (let k = 0; k < 6; k++) {
+      const ang = srnd(k) * Math.PI * 2, r = lw * (6 + 12 * srnd(k + 20));
+      ctx.strokeStyle = `rgba(${pale},${(0.8 * (0.5 + 0.5 * srnd(k + 40))).toFixed(3)})`; ctx.lineWidth = lw * 1.2;
+      ctx.beginPath(); ctx.moveTo(at.x, at.y); ctx.lineTo(at.x + Math.cos(ang) * r, at.y + Math.sin(ang) * r); ctx.stroke();
+    }
+  }
+}
 function priceLine(ctx, view, axes) {
-  const pts = (axes.line ?? []).map((q) => project(q.x, axes.y ?? 0, q.z, view));
+  let pts = (axes.line ?? []).map((q) => project(q.x, axes.y ?? 0, q.z, view));
   if (pts.length < 2) return;
+  // THE LINE BENDS ROUND THE BLACK HOLE (2026-09-15): every point is pushed out from the hole's
+  // centre the way a lens pushes a background image -- r' = sqrt(r^2 + rE^2), the Einstein
+  // radius rE growing with the hole -- so the chart warps into an arc round the shadow, and
+  // the stretch inside the horizon is drawn under the shadow, which covers it
+  if (view.fx?.kind === 'blackhole' && view.fx.blackhole) pts = lensPoints(pts, view);
   const lw = ctx.lineWidth;
   const join = ctx.lineJoin, cap = ctx.lineCap;
   ctx.lineJoin = 'round';
@@ -1445,6 +2667,28 @@ function priceLine(ctx, view, axes) {
   const CORE = [[5.5, [255, 236, 70], 0.78, 'core'], [3, [255, 246, 150], 1, 'core'], [1.3, [255, 255, 240], 1, 'core']];
   const fx = view.fx && view.fx.kind === 'pulse' ? view.fx : null;
   const done = () => { ctx.lineWidth = lw; ctx.lineJoin = join; ctx.lineCap = cap; };
+  const HOT = [255, 255, 215];                               // the flash: whiter than the wire
+  // THE LINE BREATHES (operator, 2026-09-15: "an effect for the markets page that makes the line
+  // breathe in-and-out between those two extents"): three slow swells over the run, each easing
+  // the tube from the plain wire to the pulse's heat -- wider, whiter, brighter -- and back.
+  if (view.fx?.kind === 'breathe') {
+    const bre = 0.5 - 0.5 * Math.cos(view.fx.u * Math.PI * 2 * 3);
+    const env = Math.sin(Math.PI * view.fx.u);               // in from nothing and out to nothing over the run
+    const k = bre * env;
+    for (const [w, c, a] of [...GLOW, ...CORE]) {
+      const mix = (j) => Math.round(c[j] + (HOT[j] - c[j]) * 0.8 * k);
+      stroke(w * (1 + 0.9 * k), `rgba(${mix(0)},${mix(1)},${mix(2)},${Math.min(1, a * (1 + 0.6 * k))})`);
+    }
+    done();
+    return;
+  }
+  if (view.fx?.kind === 'saber') { drawSaberLine(ctx, pts, lw, view.fx, view, GLOW, CORE); done(); return; }
+  if (view.fx?.kind === 'scan') {
+    for (const [w, c, a] of [...GLOW, ...CORE]) stroke(w, `rgba(${c[0]},${c[1]},${c[2]},${a})`);
+    scanFlare(ctx, pts, axes, view, lw);
+    done();
+    return;
+  }
   if (view.fx?.kind === 'bulge') {
     for (const [w, c, a] of [...GLOW, ...CORE]) stroke(w, `rgba(${c[0]},${c[1]},${c[2]},${a})`);
     drawBulge(ctx, pts, lw, view.fx.u, [...GLOW, ...CORE], view.fx.ms);
@@ -1465,9 +2709,13 @@ function priceLine(ctx, view, axes) {
   // surround reads as pure blue instead of the washed periwinkle it was. The tail's shape is
   // untouched -- every pass still blends wire-yellow through these to HOT at the overshoot; only
   // how blue "blue" is has changed.
-  const BLUE = [120, 225, 255];                              // the core: electric neon
-  const DEEP = [0, 120, 255];                                // the bloom: pure saturated blue
-  const HOT = [255, 255, 215];                               // the flash: whiter than the wire
+  // NO BLUE (operator, 2026-09-15: "during the energy pulse, I don't like the blue shift/tint it's
+  // adding on everything. Get rid of that, and add a bulge effect around the energy pulse"). The
+  // surge is heat now: behind the head the tube goes white-hot through hot gold and cools back to
+  // the wire, the cloud behind it is warm, the crackle and the motes are gold and white, and the
+  // head is a swell in the pipe (drawBulgeAt) with a white-hot core, not a blue dot.
+  const BLUE = [255, 255, 235];                              // the core behind the head: white-hot
+  const DEEP = [255, 205, 90];                               // the bloom behind the head: hot gold
   // THE NEBULA BEHIND THE SURGE (operator, 2026-09-12: "like a blue nebula behind the energy pulse
   // that starts expanding and fading out to black"). Drawn FIRST, so it sits behind the wire: soft
   // nested discs on every charged segment, their radius growing with that stretch's age and their
@@ -1488,37 +2736,32 @@ function priceLine(ctx, view, axes) {
   // large"). Puffs spread about half as far from the line (4 + 78 * age line-widths -> 3 + 38), are
   // a bit over half the radius and grow less with age, and sit at three-quarters of the alpha, so the
   // cloud hugs the wire instead of billowing over the chart. Fewer of them, since each covers less.
-  const PUFFS = 160;
-  for (let k = 0; k < PUFFS; k++) {
+  // THE MIST, NOT A PATH OF CIRCLES (operator, 2026-09-15: "the energy pulse effect trail looks
+  // really bad. it looks like a path of circles rather than emissive nebula/mist"). The cloud was
+  // 160 flat discs, and flat discs of one alpha have edges the eye joins into circles however they
+  // are scattered. Each puff is a radial gradient now -- bright at its heart, gone at its rim, so
+  // no puff has an edge -- larger, fewer, and laid so they overlap into one glowing haze behind
+  // the head that thins and cools down the tail. Hashed, so it holds its shape frame to frame.
+  const MIST = 54;
+  for (let k = 0; k < MIST; k++) {
     const u = hash01(k * 7 + 13);                         // how far back down the tail it sits
     const at = headAt - u * PULSE_TAIL;
     if (at < 0) continue;
-    // PAST THE END IT FADES, IT DOES NOT VANISH (operator: "The nebula effects should also fade out
-    // instead of just disappearing"). This was `at > 1 -> continue`, so the cloud was culled the
-    // instant its stretch ran off the last candle and the whole trail blinked out together.
     const off = at > 1 ? (at - 1) / 0.34 : 0;
     if (off >= 1) continue;
-    const edge = 1 - off;
-    const tint = Math.pow(1 - u, 1.4) * edge;
-    const age = u;
-    // positioned along the same flight the head takes, so the cloud follows it off the end
-    // instead of piling up on the last candle
+    const tint = Math.pow(1 - u, 1.3) * (1 - off);
     const hp = headPoint(pts, at, 0.34);
     if (!hp) continue;
-    const mx = hp.x, my = hp.y;
     const a1 = hash01(k * 31 + 101) * Math.PI * 2;
-    const spread = lw * (3 + 38 * age) * (0.2 + 0.8 * hash01(k * 17 + 5));
-    const rad = lw * (5 + 19 * hash01(k * 13 + 67)) * (1 + 0.7 * age);
-    const al = 0.13 * tint * (1 - 0.5 * age) * (0.45 + 0.55 * hash01(k * 5 + 29));
-    const px = mx + Math.cos(a1) * spread, py = my + Math.sin(a1) * spread;
-    ctx.fillStyle = `rgba(48,110,255,${al.toFixed(3)})`;
-    ctx.beginPath();
-    ctx.arc(px, py, rad, 0, Math.PI * 2);
-    ctx.fill();
-    if (k % 2 === 0) {
-      ctx.fillStyle = `rgba(120,180,255,${(al * 0.7).toFixed(3)})`;
-      ctx.beginPath(); ctx.arc(px, py, rad * 0.5, 0, Math.PI * 2); ctx.fill();
-    }
+    const spread = lw * (2 + 22 * u) * (0.2 + 0.8 * hash01(k * 17 + 5));
+    const rad = lw * (9 + 16 * hash01(k * 13 + 67)) * (1 + 0.9 * u);
+    const al = 0.16 * tint * (0.5 + 0.5 * hash01(k * 5 + 29));
+    const px = hp.x + Math.cos(a1) * spread, py = hp.y + Math.sin(a1) * spread;
+    const warm = u < 0.35 ? '255,236,170' : '255,185,70';
+    ctx.fillStyle = gradientOr(ctx, () => ctx.createRadialGradient(px, py, 0, px, py, rad),
+      [[0, `rgba(${warm},${al.toFixed(3)})`], [0.4, `rgba(255,185,70,${(al * 0.55).toFixed(3)})`], [1, 'rgba(255,150,40,0)']],
+      `rgba(255,185,70,${(al * 0.5).toFixed(3)})`);
+    ctx.beginPath(); ctx.arc(px, py, rad, 0, Math.PI * 2); ctx.fill();
   }
   // THE TUBE, AS ONE STROKE PER LAYER WITH A GRADIENT ALONG IT.
   //
@@ -1540,10 +2783,13 @@ function priceLine(ctx, view, axes) {
   const tailStop = clamp01(headAt - PULSE_TAIL);
   for (const [w, c, a, kind] of [...GLOW, ...CORE]) {
     const B = kind === 'glow' ? DEEP : BLUE;
-    // the charged stretch is FAT: a pulse is a thing travelling the line, not a colour on it.
-    // One width for the whole stroke now, so it swells while the head is on the line.
-    const onLine = headAt >= 0 && headAt <= 1 + PULSE_TAIL;
-    ctx.lineWidth = lw * w * (1 + (onLine ? 0.9 : 0));
+    // NO WHOLE-LINE SWELL (operator, 2026-09-15: "the energy pulse effect makes the yellow line
+    // entirely grow at the start of the animation, and instantly snap back into the prior size.
+    // I want the energy pulse effect growing the thickness of the yellow line in an arced radius
+    // around it"). One stroke has one width, so a swell here was the whole wire jumping fat at
+    // the start and thin at the end; the swell is the head's bulge (drawBulgeAt), round the head
+    // and nowhere else, and the wire keeps its width.
+    ctx.lineWidth = lw * w;
     const at = (passed) => {
       const tint = passed >= 0 && passed < PULSE_TAIL ? Math.pow(1 - passed / PULSE_TAIL, 1.4) : 0;
       const past = passed - PULSE_TAIL * 0.55;
@@ -1572,7 +2818,49 @@ function priceLine(ctx, view, axes) {
     if (path) ctx.stroke(path);
     else { ctx.beginPath(); traceCurve(ctx, pts); ctx.stroke(); }
   }
-  // SHIMMER on the charged stretch: a thin white-blue core whose brightness flickers per segment
+  // THE BULGE AT THE HEAD: the pipe swells round the surge as it passes, the same stretched skin
+  // and fish-eyed core as the bulge effect, at a smaller radius, in the heat's own colours
+  {
+    const headFrac = Math.max(0, Math.min(1, headAt));
+    const curve = curveByLength(pts);
+    const coreR = (lw * 5.5) / 2;
+    const hotLayers = [...GLOW, ...CORE].map(([w, c, a, kind]) => [w, c.map((v, j) => Math.round(v + (HOT[j] - v) * 0.75)), a, kind]);
+    const fadeIn = headAt < 0 ? 0 : headAt > 1 ? Math.max(0, 1 - (headAt - 1) / 0.2) : 1;
+    // PROMINENT (operator, 2026-09-15: "the bulging effect is not prominent enough ... It needs a
+    // lot more vibrance, presence, and effect"): the swell is the bulge effect's own full size now
+    // ...then THREE TIMES THAT (operator: "make the bulge 3 times larger for the energy pulse. It's
+    // not obvious the line is being deformed"), then half of that ("reduce the bulge by half")
+    // ...then a third bigger ("the bulge effect on the energy pulse is getting lost in the animation.
+    // Increase in size by 33%")
+    if (fadeIn > 0) drawBulgeAt(ctx, pts, lw, curve.lenAt(headFrac), (Number.isFinite(coreR) && coreR > 0 ? coreR : 2.75) * (1 + 2 * (BULGE_BALL - 1) * fadeIn), hotLayers, curve);
+  }
+  // THE HAZE (operator, 2026-09-15: "haze effects of some sort for the energy blurring and
+  // interfering with the affected areas"): three ghost copies of the charged stretch, each thrown
+  // off the wire by a slow wave that runs along it and drifts with the clock, faint and warm, so
+  // the wire seems to shimmer through hot air -- and a wide soft light over the whole stretch
+  {
+    const now0 = view.now ?? 0;
+    const i0 = Math.max(0, Math.floor((headAt - PULSE_TAIL) * n)), i1 = Math.min(n, Math.ceil(Math.min(1, headAt) * n));
+    if (i1 - i0 >= 1) {
+      for (let g = 0; g < 3; g++) {
+        ctx.strokeStyle = `rgba(255,220,140,${(0.10 + 0.04 * g).toFixed(3)})`; ctx.lineWidth = lw * (7 - 2 * g);
+        ctx.beginPath();
+        for (let i = i0; i <= i1; i++) {
+          const passed = headAt - i / n;
+          const tint = passed >= 0 && passed < PULSE_TAIL ? Math.pow(1 - passed / PULSE_TAIL, 1.4) : 0;
+          const wob = lw * (3.5 + 2 * g) * tint * Math.sin(now0 * (0.004 + 0.0015 * g) + i * 0.9 + g * 2.1);
+          const p = pts[i];
+          if (i === i0) ctx.moveTo(p.x, p.y + wob); else ctx.lineTo(p.x, p.y + wob);
+        }
+        ctx.stroke();
+      }
+      // the light over the affected area: a wide soft warm glow along the charged stretch
+      const mid = pts[Math.floor((i0 + i1) / 2)], span = Math.hypot(pts[i1].x - pts[i0].x, pts[i1].y - pts[i0].y) * 0.7 + lw * 20;
+      ctx.fillStyle = gradientOr(ctx, () => ctx.createRadialGradient(mid.x, mid.y, 0, mid.x, mid.y, span), [[0, 'rgba(255,225,160,0.14)'], [0.5, 'rgba(255,200,110,0.06)'], [1, 'rgba(255,180,80,0)']], 'rgba(255,215,140,0.04)');
+      ctx.beginPath(); ctx.arc(mid.x, mid.y, span, 0, Math.PI * 2); ctx.fill();
+    }
+  }
+  // SHIMMER on the charged stretch: a thin white-gold core whose brightness flickers per segment
   // on the frame clock, scaled by that segment's tint so it dies out exactly as the blue does.
   //
   // These were removed on 2026-09-12 ("the particle effects ... looks terrible ... get rid of the
@@ -1588,7 +2876,7 @@ function priceLine(ctx, view, axes) {
     if (tint < 0.08) continue;
     const p = pts[i], q = pts[i + 1];
     const flick = 0.55 + 0.45 * Math.abs(Math.sin(now * 0.023 + i * 1.7) * Math.sin(now * 0.041 + i * 0.9));
-    ctx.strokeStyle = `rgba(210,240,255,${(0.9 * tint * flick).toFixed(3)})`;
+    ctx.strokeStyle = `rgba(255,250,225,${(0.9 * tint * flick).toFixed(3)})`;
     ctx.lineWidth = lw * 2.4;
     ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(q.x, q.y); ctx.stroke();
 
@@ -1626,9 +2914,9 @@ function priceLine(ctx, view, axes) {
         for (let m = 1; m <= upto; m++) ctx.lineTo(pl[m].x, pl[m].y);
         ctx.stroke();
       };
-      arc(legs, 2.4, `rgba(90,170,255,${(0.3 * tint).toFixed(3)})`);
-      arc(legs, 0.95, `rgba(185,230,255,${(0.92 * tint).toFixed(3)})`);
-      arc(Math.max(1, legs - 1), 0.5, `rgba(245,252,255,${(0.95 * tint).toFixed(3)})`);
+      arc(legs, 2.4, `rgba(255,170,60,${(0.3 * tint).toFixed(3)})`);
+      arc(legs, 0.95, `rgba(255,225,150,${(0.92 * tint).toFixed(3)})`);
+      arc(Math.max(1, legs - 1), 0.5, `rgba(255,255,240,${(0.95 * tint).toFixed(3)})`);
     }
     // PARTICLES: a spray of motes streaming off the charged wire, each on its own heading,
     // spreading wider and fading as its stretch of the line ages. Placed by a HASH of segment and
@@ -1643,7 +2931,7 @@ function priceLine(ctx, view, axes) {
       const ang = hash01(i * 17 + k * 13 + 101) * Math.PI * 2;
       const dist = lw * (4 + 62 * age) * (0.6 + 0.4 * hash01(i + k * 3 + 7));
       const r = lw * (0.6 + 1.3 * hash01(i * 5 + k + 41)) * (1 - 0.45 * age);
-      ctx.fillStyle = `rgba(200,236,255,${(0.75 * tint * (1 - 0.5 * age)).toFixed(3)})`;
+      ctx.fillStyle = `rgba(255,235,190,${(0.75 * tint * (1 - 0.5 * age)).toFixed(3)})`;
       ctx.beginPath(); ctx.arc(bx + Math.cos(ang) * dist, by + Math.sin(ang) * dist, r, 0, Math.PI * 2); ctx.fill();
     }
   }
@@ -1663,7 +2951,7 @@ function priceLine(ctx, view, axes) {
       const r = lw * (0.6 + 1.3 * hash01(m * 7 + 19));
       const a = 0.7 * hp.fade * (1 - back / (PULSE_TAIL * 0.6));
       if (a <= 0.01) continue;
-      ctx.fillStyle = `rgba(200,236,255,${a.toFixed(3)})`;
+      ctx.fillStyle = `rgba(255,235,190,${a.toFixed(3)})`;
       ctx.beginPath();
       ctx.arc(hp.x + Math.cos(ang) * spread, hp.y + Math.sin(ang) * spread, r, 0, Math.PI * 2);
       ctx.fill();
@@ -1693,10 +2981,84 @@ function priceLine(ctx, view, axes) {
       // ball with a blue halo, which is exactly what was reported. Every layer is blue-dominant
       // now, the hot centre included -- it is the brightest, palest blue rather than white, so the
       // head still reads as the hottest point on the line without going colourless.
-      for (const [r, c0, a0] of [[28, '0,150,255', 0.20], [15, '40,190,255', 0.48], [7, '80,220,255', 0.95], [3, '150,240,255', 1]]) {
+      // AN UNSTABLE, CRACKLING BALL OF PLASMA (operator, 2026-09-15: "It needs a lot more vibrance,
+      // presence, and effect. An unstable crackling ball of plasma"): a sphere of one gradient,
+      // white-hot heart through gold to a rim that is not quite there, breathing on two quick
+      // sines; three warm wisps of nebula wobbling round it; filaments of discharge skittering over
+      // its surface, re-rolled on a 60 ms beat; and every so often it SPITS -- a few sparks thrown
+      // up and out that arc under gravity, slow, and fade (their flights are pure functions of the
+      // clock and the moment they were spat, so nothing is kept between frames).
+      const nowH = view.now ?? 0;
+      const breathe = 1 + 0.08 * Math.sin(nowH * 0.011) + 0.05 * Math.sin(nowH * 0.023 + 1);
+      const RB = lw * 16 * (0.6 + 0.4 * f) * breathe;
+      const wispsH = [['255,170,60', 0.34, 1.0], ['255,120,80', 0.26, -0.7], ['255,230,150', 0.22, 0.5]];
+      wispsH.forEach(([wc, wa, spin], k) => {
+        const t = nowH * 0.0011;
+        const wx = hp.x + Math.cos(t * spin * 0.6 + k * 2.1) * RB * 0.5, wy = hp.y + Math.sin(t * spin * 0.45 + k * 1.3) * RB * 0.4;
+        const base = RB * (1.7 + 0.4 * k);
+        ctx.beginPath();
+        for (let i = 0; i <= 36; i++) {
+          const th = (i / 36) * Math.PI * 2;
+          const wob = 1 + 0.26 * Math.sin(th * 3 + t * spin * 3 + k) + 0.15 * Math.sin(th * 5 - t * 2.4 * spin + k * 3);
+          const rr = base * wob, x = wx + Math.cos(th) * rr, y = wy + Math.sin(th) * rr;
+          if (i) ctx.lineTo(x, y); else ctx.moveTo(x, y);
+        }
+        ctx.closePath();
+        ctx.fillStyle = gradientOr(ctx, () => ctx.createRadialGradient(wx, wy, 0, wx, wy, base * 1.4), [[0, `rgba(${wc},${(wa * f).toFixed(3)})`], [0.4, `rgba(${wc},${(wa * 0.6 * f).toFixed(3)})`], [1, `rgba(${wc},0)`]], `rgba(${wc},${(wa * 0.3 * f).toFixed(3)})`);
+        ctx.fill();
+      });
+      ctx.fillStyle = gradientOr(ctx, () => ctx.createRadialGradient(hp.x, hp.y, 0, hp.x, hp.y, RB * 1.35), [
+        [0, `rgba(255,255,255,${f.toFixed(3)})`], [0.16, `rgba(255,250,225,${f.toFixed(3)})`], [0.38, `rgba(255,232,150,${(0.95 * f).toFixed(3)})`],
+        [0.6, `rgba(255,190,80,${(0.8 * f).toFixed(3)})`], [0.82, `rgba(255,140,50,${(0.4 * f).toFixed(3)})`], [1, 'rgba(255,120,40,0)'],
+      ], `rgba(255,232,150,${(0.95 * f).toFixed(3)})`);
+      ctx.beginPath(); ctx.arc(hp.x, hp.y, RB * 1.35, 0, Math.PI * 2); ctx.fill();
+      // the discs the tests know the head by: its hot centre and its white point, over the sphere
+      for (const [r, c0, a0] of [[7, '255,232,150', 0.95], [3, '255,252,225', 1]]) {
         ctx.fillStyle = `rgba(${c0},${(a0 * f).toFixed(3)})`;
         ctx.beginPath(); ctx.arc(hp.x, hp.y, lw * r * (0.55 + 0.45 * f), 0, Math.PI * 2); ctx.fill();
       }
+      // the crackle over its surface: short filaments between two points on and just off the ball
+      {
+        const beat = Math.floor(nowH / 60);
+        let x = ((fx.seed ?? 1) ^ (beat * 2654435761)) >>> 0 || 1;
+        const rr = () => ((x = (Math.imul(x, 1103515245) + 12345) >>> 0) / 4294967296);
+        for (let i = 0; i < 12; i++) {
+          const ang = rr() * Math.PI * 2, r0 = RB * (0.35 + 0.5 * rr()), r1 = RB * (1.05 + 0.6 * rr());
+          const p = { x: hp.x + Math.cos(ang) * r0, y: hp.y + Math.sin(ang) * r0 };
+          const q = { x: hp.x + Math.cos(ang + (rr() - 0.5) * 0.9) * r1, y: hp.y + Math.sin(ang + (rr() - 0.5) * 0.9) * r1 };
+          const mid = { x: (p.x + q.x) / 2 + (rr() - 0.5) * RB * 0.35, y: (p.y + q.y) / 2 + (rr() - 0.5) * RB * 0.35 };
+          for (const [w, col] of [[2.2, `rgba(255,170,60,${(0.55 * f).toFixed(3)})`], [0.9, `rgba(255,250,225,${(0.95 * f).toFixed(3)})`]]) {
+            ctx.strokeStyle = col; ctx.lineWidth = lw * w; ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(mid.x, mid.y); ctx.lineTo(q.x, q.y); ctx.stroke();
+          }
+        }
+      }
+      // THE SPIT: every 140 ms there is a one-in-three chance the ball throws three sparks; each
+      // flight is (birth, angle, speed) and the clock, so it is drawn from those alone
+      {
+        const STEP = 140, LIFE = 1500;
+        const t0 = nowH - (fx.u ?? 0) * (fx.ms ?? FX_MS.pulse);
+        const kNow = Math.floor(nowH / STEP);
+        for (let k = kNow - Math.ceil(LIFE / STEP); k <= kNow; k++) {
+          if (hash01((fx.seed ?? 1) + k * 3) > 0.33) continue;
+          const born = k * STEP, age = (nowH - born) / LIFE;
+          if (age < 0 || age >= 1) continue;
+          const uk = (born - t0) / (fx.ms ?? FX_MS.pulse);
+          const bp = headPoint(pts, uk / PULSE_TRAVEL, OVERRUN);
+          if (!bp) continue;
+          for (let m = 0; m < 3; m++) {
+            const hh = (q) => hash01((fx.seed ?? 1) + k * 31 + m * 7 + q);
+            const ang = -Math.PI / 2 + (hh(1) - 0.5) * 2.2, sp = lw * (14 + 16 * hh(2));
+            const ease = 1 - Math.exp(-3 * age);
+            const sx = bp.x + Math.cos(ang) * sp * ease * 2.2, sy = bp.y + Math.sin(ang) * sp * ease * 2.2 + lw * 34 * age * age;
+            const px = bp.x + Math.cos(ang) * sp * Math.max(0, ease - 0.12) * 2.2, py = bp.y + Math.sin(ang) * sp * Math.max(0, ease - 0.12) * 2.2 + lw * 34 * Math.max(0, age - 0.08) ** 2;
+            const al = (1 - age) * f;
+            ctx.strokeStyle = `rgba(255,200,100,${(0.7 * al).toFixed(3)})`; ctx.lineWidth = lw * 1.6;
+            ctx.beginPath(); ctx.moveTo(px, py); ctx.lineTo(sx, sy); ctx.stroke();
+            ctx.fillStyle = `rgba(255,250,225,${(0.95 * al).toFixed(3)})`;
+            ctx.beginPath(); ctx.arc(sx, sy, lw * 1.3 * (1 - 0.5 * age), 0, Math.PI * 2); ctx.fill();
+          }
+        }
+      }
       // THE HEAD CRACKLES (operator, 2026-09-13: "Did you copy the energy crackle from the grid
       // effect, and add to the head of the energy ball travelling along the yellow price line?").
       // It had not been. The crackle above is emitted per wire SEGMENT, gated on that segment's
@@ -1730,9 +3092,9 @@ function priceLine(ctx, view, axes) {
           for (let m = 1; m <= upto; m++) ctx.lineTo(bp[m].x, bp[m].y);
           ctx.stroke();
         };
-        bolt(legs, 2.4, `rgba(70,190,255,${(0.32 * f).toFixed(3)})`);
-        bolt(legs, 0.95, `rgba(160,235,255,${(0.9 * f).toFixed(3)})`);
-        bolt(Math.max(1, legs - 1), 0.5, `rgba(250,255,255,${(0.95 * f).toFixed(3)})`);
+        bolt(legs, 2.4, `rgba(255,170,60,${(0.32 * f).toFixed(3)})`);
+        bolt(legs, 0.95, `rgba(255,225,150,${(0.9 * f).toFixed(3)})`);
+        bolt(Math.max(1, legs - 1), 0.5, `rgba(255,255,245,${(0.95 * f).toFixed(3)})`);
       }
     }
   }
@@ -2394,7 +3756,7 @@ function paintFrame(ctx, geom, frame, opts, view, gridN, blockRows, gridH = grid
   // name and calls it with a hand-built view -- and the registry simply points at them.
   const agentDraw = view.fx?.kind ? AGENTS[view.fx.kind]?.draw : null;
   if (agentDraw) agentDraw(ctx, view, ctx.lineWidth, { drawCycles, drawBall, project });
-  else { drawCycles(ctx, view, ctx.lineWidth); drawBall(ctx, view, ctx.lineWidth); }
+  else { drawCycles(ctx, view, ctx.lineWidth); drawBall(ctx, view, ctx.lineWidth); drawFireworks(ctx, view, ctx.lineWidth); drawSupernova(ctx, view, ctx.lineWidth); drawBlackHole(ctx, view, ctx.lineWidth); drawScanCurtain(ctx, view, ctx.lineWidth); }
   ctx.setTransform(1, 0, 0, 1, 0, 0);
 }
 
@@ -2784,8 +4146,12 @@ export function render3d(canvas, cells, options = {}) {
   // Nothing can overtake the parked layout: scheduleFx treats a pending render as `busy` and
   // re-arms its timer instead of starting another effect, so an effect cannot chain ahead of a
   // refresh that is already waiting.
-  const fxHolding = !!fxNow(st, now) && sig !== st.sig
-    && (st.pendingAt == null || now - st.pendingAt < FX_DEFER_MAX);
+  // the cap runs from the later of the parking and the effect's own start: a layout parked
+  // before an effect was forced (triggerIdle) must still wait that effect out, not lift off
+  // under it because the clock started early
+  const heldSince = st.pendingAt == null ? null : Math.max(st.pendingAt, st.fx?.t0 ?? 0);
+  const fxHolding = (!!fxNow(st, now) || fxResting(st, now)) && sig !== st.sig
+    && (heldSince == null || now - heldSince < FX_DEFER_MAX);
   if (!unchanged && st.plan && !still && st.raf != null && (now < st.plan.settleAt || fxHolding)) {
     st.pending = { cells, options };
     st.pendingAt ??= now;
@@ -2856,6 +4222,20 @@ export function render3d(canvas, cells, options = {}) {
     // uses: the textured sphere is laid over all of it (drawGrid), and an
     // arrival starts wholly outside it (offscreenLift)
     if (opts.oblique) view.viewRect = obliqueFit(geom.pw, geom.ph, st.gridW, st.gridH, opts).rect;
+    // how far the PANEL reaches beyond the board, so a sweeping front enters and leaves out of
+    // sight instead of appearing in the middle of the picture (fxFront)
+    if (view.fx && view.viewRect) {
+      const r = view.viewRect;
+      view.fx.margin = Math.max(0 - r.x0, r.x1 - st.gridW, 0 - r.y0, r.y1 - st.gridH, 4) + 3;
+      // the scan's beam: its half-width, so fxAt lights exactly the swath the cone covers, and
+      // whether it PANS -- a searchlight sweeping out and back, which is the top-down board's
+      // motion; the price chart keeps its single pass along the hours
+      if (view.fx.kind === 'scan') {
+        const g = scanBeamGeom(view);
+        view.fx.beamR = g.spread;
+        view.fx.pan = !g.price;
+      }
+    }
     const frame = frameAt(st.plan, t, view);
     paintFrame(ctx, geom, frame, opts, view, st.gridW, st.blockRows, st.gridH);
     st.lastFit = frame.__fit ?? st.lastFit;
@@ -2890,7 +4270,7 @@ export function render3d(canvas, cells, options = {}) {
     // landed -- cutting the effect off exactly as before. It is also the live path: stars ship on
     // by default, so this is the branch a real board takes, and guarding only the entry above
     // would have looked correct and done nothing.
-    if (starsOn(opts) && frame.settled && st.pending && !fxNow(st, t)) { const p = st.pending; st.pending = null; st.pendingAt = null; st.raf = null; render3d(canvas, p.cells, p.options); return; }
+    if (starsOn(opts) && frame.settled && st.pending && !fxNow(st, t) && !fxResting(st, t)) { const p = st.pending; st.pending = null; st.pendingAt = null; st.raf = null; render3d(canvas, p.cells, p.options); return; }
     // keep the loop alive while the choreography runs OR the camera is moving;
     // park otherwise, because repainting a still picture is a heater
     if (frame.settled && !st.dirty && !fxNow(st, t)) {
@@ -2898,13 +4278,18 @@ export function render3d(canvas, cells, options = {}) {
       // but ONCE, on the frame it arrives, or a running loop would re-arm the timer for ever
       if (!st.atRest) {
         const afterEffect = st.fx != null;   // an effect just ended -- or it has only now settled
+        if (afterEffect) st.fxEndedAt = t;   // the rest before a held refresh runs from here
         st.fx = null;
         st.atRest = true;
         scheduleFx(canvas, st, opts, !afterEffect);
       }
       if (!starsOn(opts) && !glowAnimating(st, t)) {
         st.raf = null;
-        if (st.pending) { const p = st.pending; st.pending = null; st.pendingAt = null; render3d(canvas, p.cells, p.options); return; }
+        if (st.pending) {
+          // the loop parks here (no stars to keep it running), so the rest is kept by a timer
+          if (fxResting(st, t)) { setTimeout(() => { if (st.pending && st.raf == null) { const p = st.pending; st.pending = null; st.pendingAt = null; render3d(canvas, p.cells, p.options); } }, FX_REST_MS - (t - st.fxEndedAt) + 20); return; }
+          const p = st.pending; st.pending = null; st.pendingAt = null; render3d(canvas, p.cells, p.options); return;
+        }
         return;
       }
       if (st.pending) { const p = st.pending; st.pending = null; st.pendingAt = null; st.raf = null; render3d(canvas, p.cells, p.options); return; }