diff --git a/docs/plans/site-ui-3-shots/after/index-steps-1440-dark-clip.jpg b/docs/plans/site-ui-3-shots/after/index-steps-1440-dark-clip.jpg
new file mode 100644
index 00000000..e62d4871
Binary files /dev/null and b/docs/plans/site-ui-3-shots/after/index-steps-1440-dark-clip.jpg differ
diff --git a/docs/plans/site-ui-3-shots/after/index-steps-1440-dark.webm b/docs/plans/site-ui-3-shots/after/index-steps-1440-dark.webm
new file mode 100644
index 00000000..41a62912
Binary files /dev/null and b/docs/plans/site-ui-3-shots/after/index-steps-1440-dark.webm differ
diff --git a/docs/plans/site-ui-3-shots/after/index-steps-390-dark-clip.jpg b/docs/plans/site-ui-3-shots/after/index-steps-390-dark-clip.jpg
new file mode 100644
index 00000000..2a795015
Binary files /dev/null and b/docs/plans/site-ui-3-shots/after/index-steps-390-dark-clip.jpg differ
diff --git a/site/api/live.mjs b/site/api/live.mjs
index 57012a98..7b1751f5 100644
--- a/site/api/live.mjs
+++ b/site/api/live.mjs
@@ -45,7 +45,7 @@ export default async function handler(req, res) {
                   (SELECT row_to_json(s) FROM ${T}live_state s WHERE s.id = 1) AS state,
                   (SELECT json_agg(e) FROM (SELECT ts, kind, text FROM ${T}live_events ORDER BY ts DESC LIMIT 30) e) AS events,
                   (SELECT max(number) FROM ${T}live_blocks WHERE number IS NOT NULL AND received_at > now() - interval '10 minutes') AS height`),
-      sql(`SELECT hash, blue_score, daa_score, timestamp_ms, parent_hashes, is_chain_block, vote_key_hash, received_at, color
+      sql(`SELECT hash, blue_score, daa_score, timestamp_ms, parent_hashes, is_chain_block, vote_key_hash, received_at, color, number
              FROM ${T}live_blocks
             WHERE received_at > now() - ($1 || ' seconds')::interval
             ORDER BY received_at DESC
@@ -140,6 +140,8 @@ export default async function handler(req, res) {
 
     const blocks = blockRows.reverse().map(b => ({
       hash: short(b.hash),
+      // the chain block number (the EVM block number) once the observer has planned the block; null off the chain or before the plan
+      number: num(b.number),
       blue_score: num(b.blue_score),
       daa: num(b.daa_score),
       ts: num(b.timestamp_ms),
diff --git a/site/index.html b/site/index.html
index ced72786..6e071d7f 100644
--- a/site/index.html
+++ b/site/index.html
@@ -82,6 +82,7 @@
 .scene-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-3) var(--s-5);margin-bottom:var(--s-3)}
 .scene-head .state{margin:0}
 .scene{position:relative}
+.caption{margin:var(--s-3) 0 0;font-size:13px;line-height:1.5;color:var(--bone);min-height:1.5em}.caption.muted{color:var(--ash)}
 .scene canvas{width:100%;height:360px;border-radius:var(--r-row);background:var(--row);border:1px solid var(--line);display:block}
 .tip{position:absolute;left:0;top:0;pointer-events:none;background:var(--graphite);border:1px solid var(--line-2);border-radius:var(--r-row);padding:10px 12px;font:400 12px/1.5 var(--f-mono);color:var(--ink-2);display:flex;flex-direction:column;gap:2px;max-width:320px;box-shadow:0 14px 40px var(--shadow)}
 .tip b{color:var(--bone);font-weight:500;overflow-wrap:anywhere}
@@ -259,22 +260,21 @@
         <div class="viz-stats mono"><span>chain block <b id="c-blocks">pending</b></span><span>shards proven <b id="c-proven">pending</b></span><span>last lock <b id="c-locked">pending</b></span><span>vote keys in 10 min <b id="c-miners">pending</b></span><span>hash rate <b id="c-hash">pending</b></span></div>
       </div>
       <div class="scene">
-        <canvas id="dag" aria-label="The devnet's block DAG, live: blocks by time and miner, parent edges, the selected chain, checkpoints and proofs"></canvas>
-        <div class="chip-zoom" id="dag-chip" hidden><span class="dot live"></span>scroll to zoom, Esc to release</div>
-        <div class="tip" id="dag-tip" hidden></div>
+        <canvas id="steps" aria-label="The live devnet, step by step: every square is a real block moving left as time passes; its outline, quarter cells, fill and ring show mined, shards being proven, proven and locked checkpoint"></canvas>
       </div>
+      <p class="caption mono" id="steps-caption" aria-live="polite">Connecting to the devnet observer.</p>
       <div class="scene-foot">
         <div class="legend" id="legend-live">
-          <span><i class="sw" style="border:2px solid var(--line-2)"></i>pending</span>
-          <span><i class="sw" style="border:2px solid var(--bone)"></i>included</span><span><i class="sw" style="border:2px solid var(--ember)"></i>selected chain</span>
+          <span><i class="sw" style="border:2px solid var(--line-2)"></i>mined, pending</span>
+          <span><i class="sw" style="border:2px solid var(--ember)"></i>mined, included</span>
           <span><i class="sw" style="border:2px solid var(--line-2);opacity:.45"></i>excluded</span>
+          <span><i class="sw" style="border:2px solid var(--molten);background:linear-gradient(90deg,var(--molten) 50%,transparent 50%)"></i>shards being proven</span>
           <span><i class="sw" style="background:var(--ember)"></i>proven</span>
-          <span><i class="sw" style="border:3px solid var(--ember);border-radius:50%;background:transparent"></i>locked checkpoint</span>
-          <span><i class="sw" style="width:0;height:12px;border-left:2px solid var(--ember);border-radius:0"></i>finality band, with its weight</span>
+          <span><i class="sw" style="border:3px solid var(--ember);border-radius:50%;background:transparent"></i>locked checkpoint, final to its left</span>
         </div>
-        <div class="cta"><button type="button" class="btn" id="dag-pause" aria-pressed="false">Pause</button><a href="/live" class="btn">The live page</a></div>
+        <div class="cta"><a href="/live" class="btn">The live page</a></div>
       </div>
-      <p class="note" id="viz-note">One node is read every 2 s. Chain block is the EVM block number. Shards proven is every shard paid on the chain so far. Last lock is the latest checkpoint the finality rule locked. Hover or tap a block for its hash, miner, blue score, parents and proof state. Ctrl or cmd and scroll, a pinch, or a click into the scene then scroll, changes the window.</p>
+      <p class="note" id="viz-note">One node is read every 2 s. Every square is a real block, released at a calm pace so each step can be seen; the counters read the chain. Chain block is the EVM block number. Shards proven is every shard paid on the chain so far. Last lock is the latest checkpoint the finality rule locked.</p>
     </div>
     <div class="grid c2" style="margin-top:var(--s-4)">
       <div class="card program">
@@ -556,7 +556,8 @@
 <!-- journey:start -->
 <script type="application/json" id="journey-data">{"updated":"2026-10-06","stage":"phase-3","phases":[{"id":"phase-1","name":"Specification","when":"Oct to Nov 2026","status":"active","line":"Mining generator, shard proving, finality rules, written for external review"},{"id":"phase-2","name":"Prove the proving","when":"Nov 2026 to Jan 2027","status":"active","line":"Mining program proven on Apple, NVIDIA and AMD; shard proving benchmark on consumer cards still to run","gate":"A fixed published workload, job received to accepted proof on a declared consumer card, sustained with no growing backlog, reproduced by three independent operators"},{"id":"phase-3","name":"Devnet","when":"Started 3 Oct 2026, 20 nodes by Mar 2027","status":"active","line":"BlockDAG node mining on the new program, GPU miners on three vendors, EVM execution in build","gate":"1 block a second held with proofs under 60 s behind the tip"},{"id":"phase-4","name":"Finality and job market","when":"Apr to Jul 2027","status":"next","line":"Sustained-mining finality, external proving jobs, miner client with auto-switching","gate":"Finality design passes external review and one rollup signs for testnet"},{"id":"phase-5","name":"Public testnet","when":"Aug to Oct 2027","status":"next","line":"One-click miner app on Windows, macOS and Linux, HiveOS, pools, the first rollup as a proving customer, no coin yet","gate":"1,000 independent miners run 30 days and rollup proofs are delivered on time"},{"id":"phase-6","name":"Mainnet fair launch","when":"Nov 2027","status":"next","line":"Genesis with no premine, 30-day ramp. No listing is arranged, promised or sought by the project"}],"log":[{"date":"2026-10-06","text":"16:01Z: Ember run 6 on the three-card Windows rig","short":"16:01Z: Ember run 6 on the three-card Windows rig"},{"date":"2026-10-06","text":"Counter ASIC 3.0 item 2: the per-day derivation","short":"Counter ASIC 3.0 item 2"},{"date":"2026-10-06","text":"Counter ASIC 3.0 item 8: program work in the latency shadow","short":"Counter ASIC 3.0 item 8"},{"date":"2026-10-06","text":"Counter ASIC 3.0 item 6: the reserve families' step costs","short":"Counter ASIC 3.0 item 6"},{"date":"2026-10-06","text":"Counter ASIC 3.0 gate run, the hash side","short":"Counter ASIC 3.0 gate run, the hash side"},{"date":"2026-10-06","text":"16:01Z: Ember run 6 on the three-card Windows rig (RTX 5090, RTX 4070, RX 9070 XT)","short":"16:01Z: Ember run 6 on the three-card Windows rig (RTX 5090, RTX 4070"},{"date":"2026-10-06","text":"00:4xZ, the empty `/api/state` reply","short":"00:4xZ, the empty `/api/state` reply"},{"date":"2026-10-06","text":"07:12Z to 07:17Z, the host's chain mode with --save-shards records and --prev, on the Apple M5 Max's CPU","short":"07:12Z to 07:17Z, the host's chain mode with --save-shards records…"},{"date":"2026-10-06","text":"07:52Z to 08:24Z, the segment-aligned prover beside the miner on the RTX 5090 Windows rig's RTX 5090","short":"07:52Z to 08:24Z, the segment-aligned prover beside the miner on the…"},{"date":"2026-10-06","text":"08:26Z to 08:35Z, the fast-time harness on the fresh-record rule","short":"08:26Z to 08:35Z, the fast-time harness on the fresh-record rule"},{"date":"2026-10-06","text":"12:25 to 13:20Z, the finality route: why 26 fresh nodes lost the seed every checkpoint","short":"12:25 to 13:20Z, the finality route: why 26 fresh nodes lost the…"},{"date":"2026-10-05","text":"Ember Tune: the two-knob efficiency tune, the fleet prior, and what the three-card Windows rig could measure tonight","short":"Ember Tune: the two-knob efficiency tune, the fleet prior"},{"date":"2026-10-05","text":"The SP1 CPU prover on the three-card Windows rig beside the miners, and the backend survey: no zkVM proves on AMD","short":"The SP1 CPU prover on the three-card Windows rig beside the miners,…"},{"date":"2026-10-05","text":"The 9070 XT on the eGPU: why 17.9 MH/s, and what moved","short":"The 9070 XT on the eGPU"},{"date":"2026-10-05","text":"Ember Tune: the two-knob efficiency tune, the fleet prior, and what the three-card Windows rig (RTX 5090, RTX 4070, RX 9070 XT) could measure tonight","short":"Ember Tune: the two-knob efficiency tune, the fleet prior"},{"date":"2026-10-05","text":"Read width of the lottery hash: 4, 16 and 64-byte loads, a per-load mix, a written scratch; three cards","short":"Read width of the lottery hash"},{"date":"2026-10-05","text":"The hot table on the M5 Max: a second table sized to GPU cache beside the 1 GiB dataset","short":"The hot table on the M5 Max"},{"date":"2026-10-05","text":"Mixer x4 and the cache growth rule: the class v3 dataset construction, with the x8 candidate","short":"Mixer x4 and the cache growth rule"},{"date":"2026-10-05","text":"The SP1 CPU prover on the three-card Windows rig (RTX 5090, RTX 4070, RX 9070 XT) beside the miners, and the backend survey: no zkVM proves on AMD","short":"The SP1 CPU prover on the three-card Windows rig (RTX 5090, RTX…"},{"date":"2026-10-05","text":"Proving v1: segment records, the chain rule, the unproven rule; what was measured tonight","short":"Proving v1: segment records, the chain rule"},{"date":"2026-10-05","text":"Dp4a-class throughput on the M5 Max: the dot4 emulation against the ALU chain","short":"Dp4a-class throughput on the M5 Max"},{"date":"2026-10-05","text":"Layer 3 scratch soundness","short":"Layer 3 scratch soundness"},{"date":"2026-10-05","text":"Epoch length as an era parameter : the Apple M5 Max's compile-ahead per program","short":"Epoch length as an era parameter"},{"date":"2026-10-05","text":"Aggregation cost on the RTX 5090: what a per-block aggregation spends and what each lever gives","short":"Aggregation cost on the RTX 5090"},{"date":"2026-10-05","text":"The C4 fix: certificate-driven reorg","short":"The C4 fix: certificate-driven reorg"},{"date":"2026-10-05","text":"EVM transaction relay: three nodes in a chain, every transaction sent to one end included by the other two miners","short":"EVM transaction relay"},{"date":"2026-10-05","text":"The prover carries both fee tables and the height switch: one pinned guest on either side of DAA 210,000","short":"The prover carries both fee tables and the height switch"},{"date":"2026-10-05","text":"FUD ledger sweep round 6","short":"FUD ledger sweep round 6"},{"date":"2026-10-05","text":"Live devnet: real transactions, the first non-empty shard proven and paid, and the exporter's block structure fixed","short":"Live devnet: real transactions, the first non-empty shard proven and…"},{"date":"2026-10-05","text":"The program id split: why the Apple M5 Max rejected the RTX 5090 Windows rig's proofs, and the verifier at 114 s","short":"The program id split"},{"date":"2026-10-05","text":"Live devnet: the first shards proven, verified and paid","short":"Live devnet: the first shards proven, verified and paid"},{"date":"2026-10-04","text":"One-click Windows workers: what the Apple M5 Max could measure","short":"One-click Windows workers"},{"date":"2026-10-04","text":"First finality lock on the live devnet: checkpoint 242 at 77.4% of all weight, two hours after genesis","short":"First live finality lock: 77.4% of weight, 17 voters"},{"date":"2026-10-04","text":"The gfx1036 worker fault and what the Apple M5 Max could and could not reproduce","short":"The gfx1036 worker fault and what the Apple M5 Max could and could…"},{"date":"2026-10-04","text":"A node 60 s behind the clock is silently dead","short":"A node 60 s behind the clock is silently dead"},{"date":"2026-10-04","text":"First machine on the Igneum Miner app: the RTX 5090 Windows rig's RTX 5090 at 118 MH/s, via Setup.exe","short":"First machine on the one-click app: a 5090 at 118 MH/s"},{"date":"2026-10-04","text":"Difficulty rule v2: the live oscillation, its cause, the DAG replay, the fix behind a height switch","short":"Difficulty rule v2"},{"date":"2026-10-04","text":"The observer stored nothing for 78 minutes, then 7,022 blocks in two minutes","short":"The observer stored nothing for 78 minutes, then 7,022 blocks in two…"},{"date":"2026-10-04","text":"The RTX 5090 Windows rig at the 14:20 boundary: a worker stuck on the previous epoch","short":"The RTX 5090 Windows rig at the 14"},{"date":"2026-10-04","text":"Shard proving on the RTX 5090: a full shard compressed in 10.9 s, a two-shard block aggregated in 2.2 s, all verified","short":"Shard layer on the RTX 5090: a full shard proven in 10.9 s, a block aggregated in 2.2 s"}]}</script>
 <!-- journey:end -->
-<script src="/live-dag.js" defer></script>
+<script src="/scenes/feed.js"></script>
+<script src="/live-steps.js"></script>
 <script>
 (function(){
   var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -583,11 +584,12 @@
     cm.textContent=fmtN(s.miners_10m!==null&&s.miners_10m!==undefined?s.miners_10m:(d.miners||[]).length);
     ch.textContent=fmtHash(s.hashes_per_second_estimate);
     if(note&&!s.stale){var lag=pv&&pv.active&&pv.median_proof_lag_s?Math.round(pv.median_proof_lag_s):null;
-      note.textContent='One node is read every 2 s. Chain block is the EVM block number. Shards proven is every shard paid on the chain so far'+(pv&&pv.active?' ('+fmtN(pv.shards_paid_10m||0)+' in the last 10 minutes'+(lag?', landing a median '+lag+' s behind the tip, so the newest blocks on screen are still pending':'')+')':'')+'. Last lock is the latest checkpoint the finality rule locked. A card runs several vote keys. Hover or tap a block for its details; ctrl or cmd and scroll, a pinch, or a click into the scene then scroll, changes the window.';}
+      note.textContent='One node is read every 2 s. Chain block is the EVM block number. Shards proven is every shard paid on the chain so far'+(pv&&pv.active?' ('+fmtN(pv.shards_paid_10m||0)+' in the last 10 minutes'+(lag?', landing a median '+lag+' s behind the tip, so the newest blocks on screen are still pending':'')+')':'')+'. Last lock is the latest checkpoint the finality rule locked. A card runs several vote keys. Every square is a real block released at a calm pace so each step can be seen; the caption follows the newest block that changed step.';}
   }
-  function mountDag(){var c=document.getElementById('dag');if(!c||!window.IgneumDag)return;
-    IgneumDag.mount(c,{compact:window.innerWidth<700,window:90,onState:setWord,onData:onData,pauseButton:document.getElementById('dag-pause'),tooltip:document.getElementById('dag-tip'),chip:document.getElementById('dag-chip')});}
-  if(window.IgneumDag)mountDag();else document.addEventListener('DOMContentLoaded',function(){var s=document.querySelector('script[src="/live-dag.js"]');if(window.IgneumDag)mountDag();else if(s)s.addEventListener('load',mountDag);});
+  // the step view: the shared feed polls /api/live (300 s window so late proofs still reach the caption) and pushes to the scene
+  var stepsCanvas=document.getElementById('steps');
+  if(stepsCanvas&&window.IgneumFeed&&window.IgneumSteps){var steps=IgneumSteps.mount(stepsCanvas,{caption:document.getElementById('steps-caption')});
+    IgneumFeed.start({window:300,subs:[steps],onState:setWord,onData:onData});}
 
   // hourly program ticker
   var ops=['rotl','rotr','xor','add','sub','mul','mulhi','mad','or'];
diff --git a/site/live-steps.js b/site/live-steps.js
new file mode 100644
index 00000000..f573c35f
--- /dev/null
+++ b/site/live-steps.js
@@ -0,0 +1,115 @@
+/* Igneum live steps (6 October 2026, the owner: "I liked it when we could see each step of the algo working").
+   The original step view with real blocks: a lane chart where every square is a block the observer stored, released at a
+   calm pace (the feed is sampled, the counters elsewhere read the chain), and every square shows its step: mined (an outline,
+   grey while pending, ember once included), shards being proven (molten quarter cells fill as shards are verified or paid),
+   proven (ember fill), locked checkpoint (a ring; a dashed "final" line marks that everything to its left is final).
+   Each transition is animated as it happens (a glow and a ring pulse) and captioned in one line for the newest block that
+   changed. The wheel is never touched: the page scrolls through the scene. Light and dark from the CSS tokens; a still frame
+   under reduced motion. Needs /scenes/feed.js (IgneumFeed) on the page.
+   Usage: var steps = IgneumSteps.mount(canvas, { caption: el, window: 300 }); then IgneumFeed.start({ subs: [steps], window: 300 }). */
+(function (root) {
+  'use strict';
+  var F = root.IgneumFeed;
+  function pad(n) { return String(n).padStart(2, '0'); }
+  function hms(ms) { var d = new Date(ms); return pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds()); }
+  function fmt(n) { return n === null || n === undefined ? null : Number(n).toLocaleString('en-GB'); }
+  function stepOf(b) {
+    var sh = b.shards || [], done = function (x) { return x.state === 'verified' || x.state === 'paid'; };
+    if (b.proven || (sh.length && sh.every(done))) return 'proven';
+    if (sh.some(function (x) { return x.state === 'proving' || done(x); })) return 'proving';
+    return 'mined';
+  }
+  function mount(canvas, opts) {
+    opts = opts || {};
+    var ctx = canvas.getContext('2d'), size = F.sizer(canvas, ctx), dims = size(), T = F.theme();
+    var lanes = 5, S, GAP, speed, blocks = [], byHash = {}, queue = [], laneOf = {}, laneN = 0, last = 0, prevT = 0;
+    // one block released every 2.5 s and a crossing of about 34 s at 1440: the chain merges a pending block in about 10 s, so a
+    // square is still on screen when its step changes (the original pace of 10 s lost most transitions off the left edge)
+    var RELEASE_MS = 2500;
+    var caption = opts.caption || null, lastChange = 0, latest = null, finality = null, proving = null, serverNow = 0;
+    function metrics() { S = dims.W < 600 ? 18 : 26; GAP = dims.W < 600 ? S * 2.5 : S * 3.1; speed = GAP / RELEASE_MS; }
+    metrics();
+    root.addEventListener('resize', function () { dims = size(); metrics(); L.kick(); });
+    function laneY(l) { return dims.H * 0.14 + l * (dims.H * 0.72 / (lanes - 1)); }
+    function laneFor(m) { if (!(m in laneOf)) laneOf[m] = laneN++ % lanes; return laneOf[m]; }
+    function cpIndexOf(hash) { var cps = (finality && finality.checkpoints) || []; for (var i = cps.length - 1; i >= 0; i--) if (cps[i].hash === hash) return cps[i].index; return null; }
+    // the record of a block for the caption: its words with their times
+    function describe(e) {
+      var b = e.src, parts = [], name = b.number !== null && b.number !== undefined ? 'block ' + fmt(b.number) : 'block ' + b.hash.slice(0, 8);
+      parts.push('mined ' + hms(b.ts) + (b.color === 'red' ? ', excluded' : b.chain ? ', on the selected chain' : b.color === 'blue' ? ', included' : ', pending'));
+      var sh = b.shards || [];
+      if (sh.length) {
+        var proving = sh.filter(function (x) { return x.state === 'proving'; }), done = sh.filter(function (x) { return x.state === 'verified' || x.state === 'paid'; });
+        var provers = {}; sh.forEach(function (x) { if (x.prover) provers[x.prover] = 1; }); var np = Object.keys(provers).length;
+        if (e.step === 'proven') { var lag = Math.max.apply(null, sh.map(function (x) { return x.lag || 0; })); parts.push(sh.length + (sh.length === 1 ? ' shard' : ' shards') + (np ? ' on ' + np + (np === 1 ? ' card' : ' cards') : '')); parts.push('proven in ' + (lag > 0 ? lag : Math.max(1, Math.round((Date.now() - b.ts) / 1000))) + ' s'); }
+        else if (proving.length || done.length) parts.push((done.length ? done.length + ' of ' + sh.length + ' shards proven' : sh.length + (sh.length === 1 ? ' shard' : ' shards') + ' proving') + (np ? ' on ' + np + (np === 1 ? ' card' : ' cards') : ''));
+        else parts.push(sh.length + (sh.length === 1 ? ' shard planned' : ' shards planned'));
+      }
+      if (b.locked) { var idx = cpIndexOf(b.hash); parts.push('locked at checkpoint' + (idx !== null ? ' ' + fmt(idx) : '')); }
+      else if (b.final) parts.push('final under the newest lock');
+      return name + ': ' + parts.join('; ');
+    }
+    function setCaption(text, muted) { if (!caption) return; caption.textContent = text; caption.classList.toggle('muted', !!muted); }
+    function apply(e, src, now, announce) {
+      var before = e.step + '|' + e.src.color + '|' + e.src.locked + '|' + e.src.final + '|' + (e.src.chain ? 1 : 0);
+      e.src = src; e.step = stepOf(src);
+      var after = e.step + '|' + src.color + '|' + src.locked + '|' + src.final + '|' + (src.chain ? 1 : 0);
+      if (announce && after !== before) { e.glow = 1; if (src.locked && !e.ringed) { e.ringed = true; e.ripple = 1; } lastChange = now; latest = e; setCaption(describe(e)); if (opts.onChange) opts.onChange(e, before, after); }
+    }
+    var seeded = false;
+    function push(d) {
+      var now = performance.now(); finality = d.finality || null; proving = d.proving || null; serverNow = new Date(d.now).getTime();
+      if (!seeded) {
+        // the first reply fills the scene: the newest blocks placed across the width, oldest at the left, so nothing starts empty
+        seeded = true; var n = Math.ceil(dims.W / GAP) + 1, recent = d.blocks.slice(-n);
+        recent.forEach(function (b, i) { var e = { hash: b.hash, src: b, step: stepOf(b), x: dims.W - S - (recent.length - 1 - i) * GAP, y: laneY(laneFor(b.miner || '?')), glow: 0, ripple: 0, ringed: !!b.locked, born: now }; byHash[b.hash] = e; blocks.push(e); });
+      }
+      d.blocks.forEach(function (b) {
+        var e = byHash[b.hash];
+        if (e) { apply(e, b, now, true); return; }
+        e = { hash: b.hash, src: b, step: stepOf(b), x: null, y: null, glow: 0, ripple: 0, ringed: !!b.locked, born: 0 };
+        byHash[b.hash] = e; queue.push(e); if (queue.length > 6) { var dropped = queue.shift(); delete byHash[dropped.hash]; }
+      });
+      var seen = {}; d.blocks.forEach(function (b) { seen[b.hash] = 1; });
+      // a block the feed no longer carries keeps its last words on screen until it leaves at the left
+      if (!latest || now - lastChange > 60000) {
+        var why = finality && finality.supported && !finality.active ? 'finality paused: under two thirds of the weight is signing, so no checkpoint locks' : proving && proving.supported && proving.active && !(proving.shards_paid_10m > 0) ? 'no proof landed in the last 10 minutes; proofs land about ' + (proving.median_proof_lag_s ? Math.round(proving.median_proof_lag_s) : 380) + ' s behind the tip' : 'no block changed step in the last minute';
+        setCaption('Blocks arrive every second. ' + why.charAt(0).toUpperCase() + why.slice(1) + '.', true);
+      }
+      L.kick();
+    }
+    function rr(x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r); ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath(); }
+    function spawn(e, t) { e.x = dims.W + S; e.y = laneY(laneFor(e.src.miner || '?')); e.born = t; blocks.push(e); if (blocks.length > 80) { var old = blocks.shift(); if (!queue.some(function (q) { return q === old; })) delete byHash[old.hash]; } }
+    function draw(t) {
+      var W = dims.W, H = dims.H; T = F.theme();
+      var dt = prevT ? Math.min(50, t - prevT) : 16; prevT = t;
+      if (queue.length && t - last > RELEASE_MS) { spawn(queue.pop(), t); queue.length = 0; last = t; } // the newest waiting block; the rest are sampled out
+      blocks.forEach(function (b) { b.x -= speed * dt; if (b.glow > 0) b.glow -= 0.02; if (b.ripple > 0) b.ripple -= 0.012; });
+      blocks = blocks.filter(function (b) { if (b.x < -S * 2) { if (byHash[b.hash] === b && queue.indexOf(b) < 0) delete byHash[b.hash]; return false; } return true; });
+      ctx.clearRect(0, 0, W, H);
+      ctx.strokeStyle = F.rgba(T.line, 0.9); ctx.lineWidth = 1; for (var l = 0; l < lanes; l++) { ctx.beginPath(); ctx.moveTo(0, laneY(l)); ctx.lineTo(W, laneY(l)); ctx.stroke(); }
+      // parent edges between blocks on screen
+      blocks.forEach(function (b) { (b.src.parents || []).forEach(function (h) { var q = byHash[h]; if (!q || q.x === null || blocks.indexOf(q) < 0) return; var both = b.step === 'proven' && q.step === 'proven'; ctx.strokeStyle = both ? F.rgba(T.ember, 0.45) : F.rgba(T.ash, 0.22); ctx.lineWidth = both ? 1.5 : 1; ctx.beginPath(); ctx.moveTo(b.x, b.y); var mx = (b.x + q.x) / 2; ctx.bezierCurveTo(mx, b.y, mx, q.y, q.x, q.y); ctx.stroke(); }); });
+      // the lock line: everything left of the newest locked block is final
+      var lk = null; blocks.forEach(function (b) { if (b.src.locked && (!lk || b.x > lk.x)) lk = b; });
+      if (lk) { ctx.strokeStyle = F.rgba(T.ember, 0.55); ctx.lineWidth = 1.5; ctx.setLineDash([5, 6]); ctx.beginPath(); ctx.moveTo(lk.x, 6); ctx.lineTo(lk.x, H - 6); ctx.stroke(); ctx.setLineDash([]); ctx.fillStyle = T.ash; ctx.font = '500 ' + Math.max(10, Math.round(S * 0.42)) + 'px IBM Plex Mono, monospace'; ctx.textAlign = 'right'; ctx.textBaseline = 'alphabetic'; ctx.fillText('final', lk.x - 8, 14); }
+      blocks.forEach(function (b) {
+        var h = S / 2, w = b.step, src = b.src, ex = src.color === 'red';
+        if (b.glow > 0) { var g = ctx.createRadialGradient(b.x, b.y, 0, b.x, b.y, S * 1.6); g.addColorStop(0, F.rgba(T.ember, 0.45 * b.glow)); g.addColorStop(1, F.rgba(T.ember, 0)); ctx.fillStyle = g; ctx.beginPath(); ctx.arc(b.x, b.y, S * 1.6, 0, Math.PI * 2); ctx.fill(); }
+        if (ex) ctx.globalAlpha = 0.45;
+        if (w === 'proven') { ctx.fillStyle = T.ember; rr(b.x - h, b.y - h, S, S, S * 0.24); ctx.fill(); }
+        else {
+          ctx.fillStyle = T.row; rr(b.x - h, b.y - h, S, S, S * 0.24); ctx.fill();
+          ctx.strokeStyle = w === 'proving' ? F.rgba(T.molten, 0.9) : (src.chain || src.color === 'blue') ? F.rgba(T.ember, 0.8) : F.rgba(T.ash, 0.7); ctx.lineWidth = 2; rr(b.x - h, b.y - h, S, S, S * 0.24); ctx.stroke();
+          if (w === 'proving') { var sh = src.shards || [], n = Math.min(4, sh.length), q = S / 2 - 3; for (var i = 0; i < n; i++) { var st = sh[i].state; if (st === 'verified' || st === 'paid' || st === 'proving') { ctx.fillStyle = st === 'proving' ? F.rgba(T.molten, 0.45) : T.molten; var qx = b.x - h + 3 + (i % 2) * q, qy = b.y - h + 3 + Math.floor(i / 2) * q; rr(qx, qy, q - 1, q - 1, 2); ctx.fill(); } } }
+        }
+        if (src.locked) { var pulse = 0.8 + 0.2 * Math.sin(t / 350); ctx.strokeStyle = F.rgba(T.ember, pulse); ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(b.x, b.y, S * 1.15, 0, Math.PI * 2); ctx.stroke(); ctx.fillStyle = T.bone; ctx.beginPath(); ctx.arc(b.x, b.y, S * 0.16, 0, Math.PI * 2); ctx.fill(); }
+        if (b.ripple > 0) { ctx.strokeStyle = F.rgba(T.ember, b.ripple); ctx.lineWidth = 1.5; ctx.beginPath(); ctx.arc(b.x, b.y, S * (1.3 + (1 - b.ripple) * 2), 0, Math.PI * 2); ctx.stroke(); }
+        ctx.globalAlpha = 1;
+      });
+    }
+    var L = F.loop(draw, canvas); L.kick();
+    return { push: push, redraw: L.kick };
+  }
+  root.IgneumSteps = { mount: mount };
+})(window);
diff --git a/site/scenes.html b/site/scenes.html
index f6a51b04..759f9eff 100644
--- a/site/scenes.html
+++ b/site/scenes.html
@@ -41,7 +41,8 @@
 .scenes.only{grid-template-columns:1fr}
 .scene-card{display:flex;flex-direction:column;gap:var(--s-3)}
 .scene-card .head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3)}
-.scene-card .head .eyebrow{margin:0}
+.scene-card .head .eyebrow{margin:0;text-align:right}
+.scene-card .head h3{white-space:nowrap}
 .scene-card canvas{width:100%;height:420px;border-radius:var(--r-row);background:var(--row);border:1px solid var(--line);display:block}
 .scenes.only .scene-card canvas{height:560px}
 .scene-card p{margin:0;color:var(--ink-2);font-size:var(--t-base)}
diff --git a/site/scenes/feed.js b/site/scenes/feed.js
index 178353b0..9b9acc65 100644
--- a/site/scenes/feed.js
+++ b/site/scenes/feed.js
@@ -13,7 +13,7 @@
         if (!d || !d.ok || !d.state || !d.blocks) throw new Error('bad reply');
         failures = 0;
         if (d.state.stale) set('stale', 'observer offline, last update ' + (d.state.age_s !== null && d.state.age_s !== undefined ? fmtAge(d.state.age_s) + ' ago' : 'unknown')); else set('live', null);
-        subs.forEach(function (s) { s.push(d); });
+        subs.forEach(function (s) { s.push(d); }); if (opts.onData) opts.onData(d);
       }).catch(function () { failures++; if (failures >= 2) set('failed', 'live feed unavailable'); });
     }
     poll(); var t = setInterval(poll, 2000);