igneum/site/scenes.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Igneum scenes, a lab</title>
<meta name="description" content="Three animated views of the same live devnet feed: Forge, Lattice and Pulse. An unlinked lab page.">
<meta name="robots" content="noindex">
<meta name="theme-color" content="#0C0C0E" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#F4F1EC" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<!-- head:start -->
<link rel="preload" href="/fonts/unbounded-900.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/plex-sans-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/site.css">
<style>
/* Shared by every page: the head partial, injected by the build between the head markers. Edit the partial, not the page. */
/* Fonts, self-hosted (latin subsets, OFL): Unbounded 500/700/900, IBM Plex Sans 400/500/600, IBM Plex Mono 400/500. Fallbacks carry size and ascent overrides so the swap does not move the layout. The tokens, type and components are in /site.css (docs/plans/site-ui-3.md). */
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/unbounded-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/unbounded-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/unbounded-900.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-sans-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-sans-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-sans-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-mono-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded Fallback';src:local('Arial Black'),local('Arial-Black'),local('Impact');size-adjust:114%;ascent-override:87.5%;descent-override:21.5%;line-gap-override:0%}
@font-face{font-family:'Plex Sans Fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica');size-adjust:100.5%;ascent-override:102%;descent-override:27.4%;line-gap-override:0%}
@font-face{font-family:'Plex Mono Fallback';src:local('Courier New'),local('Menlo');size-adjust:100%;ascent-override:102.5%;descent-override:27.5%;line-gap-override:0%}
</style>
<script>
/* theme before first paint: the footer control stores "light" or "dark" under igneum-theme; nothing stored means the system setting */
(function(){try{var t=localStorage.getItem("igneum-theme");if(t==="light"||t==="dark")document.documentElement.setAttribute("data-theme",t);}catch(e){}})();
</script>
<!-- head:end -->
<style>
/* scenes lab block; tokens, type and components are in /site.css */
.lab{padding:calc(var(--sec) * .5) 0 var(--sec)}
.lab-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--s-3);margin-bottom:var(--s-5)}
.scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.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;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)}
@media (max-width:1000px){.scenes{grid-template-columns:1fr}.scene-card canvas{height:320px}.scenes.only .scene-card canvas{height:420px}}
</style>
</head>
<body>
<!-- nav:start -->
<a class="skip" href="#main">Skip to content</a>
<nav class="nav" aria-label="Main">
  <div class="wrap">
    <a href="/" class="brand" aria-label="Igneum home">
      <svg class="mark" viewBox="0 0 1024 1024" width="28" height="28" aria-hidden="true"><rect width="1024" height="1024" rx="160" fill="#0C0C0E"></rect><g transform="translate(166.95 166.95) scale(6.901)"><polygon points="50,4 74,34 67,58 80,54 61,96 39,96 20,54 33,58 26,34" fill="#F2541B"></polygon><polygon points="50,42 59,58 50,82 41,58" fill="#0C0C0E"></polygon></g></svg>
      <span class="word">IGNEUM</span>
    </a>
    <div class="links" id="nav-links">
      <a href="/litepaper" data-nav="litepaper">Litepaper</a>
      <a href="/miner" data-nav="miner">Miner</a>
      <a href="/app" data-nav="app">App</a>
      <a href="/wallet" data-nav="wallet">Wallet</a>
      <a href="/live" data-nav="live">Live devnet</a>
      <a href="/ledger" data-nav="ledger">Ledger</a>
    </div>
    <a href="/miner#get" class="btn primary small cta">Download</a>
    <button class="burger" id="nav-burger" type="button" aria-expanded="false" aria-controls="nav-sheet" aria-label="Open the menu" aria-haspopup="true"><span class="bars" aria-hidden="true"></span></button>
    <div class="nav-sheet" id="nav-sheet">
      <a href="/litepaper" data-nav="litepaper">Litepaper</a>
      <a href="/miner" data-nav="miner">Miner</a>
      <a href="/app" data-nav="app">App</a>
      <a href="/wallet" data-nav="wallet">Wallet</a>
      <a href="/live" data-nav="live">Live devnet</a>
      <a href="/ledger" data-nav="ledger">Ledger</a>
      <a href="/miner#get" class="btn primary">Download</a>
    </div>
  </div>
</nav>
<script>
(function(){
  // the menu: open on the button, closed by any link, Escape (focus back on the button) or a resize past 900 px
  var n=document.querySelector('.nav'),b=document.getElementById('nav-burger'),s=document.getElementById('nav-sheet');if(!n||!b||!s)return;
  function set(o){n.classList.toggle('open',o);b.setAttribute('aria-expanded',o?'true':'false');b.setAttribute('aria-label',o?'Close the menu':'Open the menu');document.documentElement.style.overflow=o?'hidden':'';}
  b.addEventListener('click',function(){set(!n.classList.contains('open'));});
  s.addEventListener('click',function(e){if(e.target.closest('a'))set(false);});
  document.addEventListener('keydown',function(e){if(e.key==='Escape'&&n.classList.contains('open')){set(false);b.focus();}});
  var mq=window.matchMedia('(min-width:901px)');if(mq.addEventListener)mq.addEventListener('change',function(){set(false);});
})();
</script>
<!-- nav:end -->
<main id="main">
<section class="lab">
  <div class="wrap">
    <div class="lab-head">
      <div>
        <div class="eyebrow">A lab, not linked</div>
        <h1>Three scenes, one feed</h1>
        <p class="lead" style="margin-top:var(--s-3)">The same live devnet reply, drawn three ways. Every mark is a block the observer stored; the words are the ledger's.</p>
      </div>
      <div class="state" id="feed-state"><span class="dot off"></span>connecting to the devnet observer</div>
    </div>
    <div class="scenes" id="scenes">
      <div class="scene-card card" data-scene="a">
        <div class="head"><h3>A · Forge</h3><div class="eyebrow">embers rise</div></div>
        <canvas id="sc-a" aria-label="Forge: blocks rise as embers from the bottom and cool from molten to bone as they go from pending to included to proven; a dark band sweeps up at the lock"></canvas>
        <p>Blocks arrive as embers from the hearth, one column per miner, and cool as they go: pending molten, included ember, proven bone. A lock is the dark band sweeping up; everything under it is final.</p>
      </div>
      <div class="scene-card card" data-scene="b">
        <div class="head"><h3>B · Lattice</h3><div class="eyebrow">a slow isometric DAG</div></div>
        <canvas id="sc-b" aria-label="Lattice: an isometric DAG with parents behind children, the selected chain a lit spine, checkpoints as rings closing around it"></canvas>
        <p>Time runs left to right, each miner one step deeper, so parents stand behind their children. The selected chain is the lit spine; a checkpoint is a ring that closes around it when it locks. The camera drifts at chain speed.</p>
      </div>
      <div class="scene-card card" data-scene="c">
        <div class="head"><h3>C · Pulse</h3><div class="eyebrow">the tip at the centre</div></div>
        <canvas id="sc-c" aria-label="Pulse: the tip at the centre, time outward in rings, each block a bead on its miner's ray, proofs filling beads, locks as a ring hardening"></canvas>
        <p>The tip is the centre and time runs outward, a ring every 30 seconds. Each miner is a ray; a block is a bead on it that drifts outward, filling when proven. A lock is a ring that hardens from dashed to solid.</p>
      </div>
    </div>
    <div class="legend" style="margin-top:var(--s-5)">
      <span><i class="sw" style="border:2px solid var(--molten);border-radius:50%"></i>pending</span>
      <span><i class="sw" style="background:var(--ember);border-radius:50%"></i>included</span>
      <span><i class="sw" style="border:2px solid var(--line-2);border-radius:50%;opacity:.45"></i>excluded</span>
      <span><i class="sw" style="background:var(--bone);border-radius:50%"></i>proven</span>
      <span><i class="sw" style="border:3px solid var(--ember);border-radius:50%;background:transparent"></i>locked checkpoint</span>
    </div>
    <p class="note">One node is read every 2 s; the window is the last 120 s. Under reduced motion each scene draws a still frame on every reply. Add <code>?only=a</code>, <code>b</code> or <code>c</code> to the address for one scene full width.</p>
  </div>
</section>
</main>
<!-- footer:start -->
<footer class="foot">
  <div class="wrap">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="/" class="brand" aria-label="Igneum home"><svg class="mark" viewBox="0 0 1024 1024" width="26" height="26" aria-hidden="true"><rect width="1024" height="1024" rx="160" fill="#0C0C0E"></rect><g transform="translate(166.95 166.95) scale(6.901)"><polygon points="50,4 74,34 67,58 80,54 61,96 39,96 20,54 33,58 26,34" fill="#F2541B"></polygon><polygon points="50,42 59,58 50,82 41,58" fill="#0C0C0E"></polygon></g></svg><span class="word">IGNEUM</span></a>
        <p>Mined by GPUs. Proven by fire.</p>
        <div class="social" aria-label="Igneum elsewhere">
          <a href="https://github.com/igneum-network/spec" target="_blank" rel="noopener" aria-label="Igneum on GitHub: the spec, the vectors and the issues"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2.1c-3.2.7-3.9-1.4-3.9-1.4-.5-1.3-1.3-1.7-1.3-1.7-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.2 1.2.9-.3 1.9-.4 2.9-.4s2 .1 2.9.4c2.2-1.5 3.2-1.2 3.2-1.2.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.2c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z"></path></svg></a>
          <a href="https://discord.gg/igneum" target="_blank" rel="noopener" aria-label="The Igneum Discord"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d="M19.6 5.3A17 17 0 0 0 15.4 4l-.2.4a15.6 15.6 0 0 1 3.9 1.9 13.6 13.6 0 0 0-14.2 0A15.6 15.6 0 0 1 8.8 4.4L8.6 4a17 17 0 0 0-4.2 1.3C1.8 9.2 1.1 13 1.4 16.7a17.1 17.1 0 0 0 5.2 2.6l1.1-1.8a10.8 10.8 0 0 1-1.7-.8l.4-.3a12.2 12.2 0 0 0 11.2 0l.4.3-1.7.8 1.1 1.8a17 17 0 0 0 5.2-2.6c.4-4.3-.7-8-3-11.4zM8.7 14.4c-1 0-1.8-.9-1.8-2.1s.8-2.1 1.8-2.1 1.9 1 1.8 2.1c0 1.2-.8 2.1-1.8 2.1zm6.6 0c-1 0-1.8-.9-1.8-2.1s.8-2.1 1.8-2.1 1.9 1 1.8 2.1c0 1.2-.8 2.1-1.8 2.1z"></path></svg></a>
          <a data-social="reddit" href="https://www.reddit.com/user/Igneum_network/" target="_blank" rel="noopener" aria-label="Igneum on Reddit"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d="M22 12.1a2.2 2.2 0 0 0-3.7-1.6 10.8 10.8 0 0 0-5.8-1.8l1-4.6 3.2.7a1.5 1.5 0 1 0 .2-.9l-3.6-.8a.5.5 0 0 0-.5.4l-1.1 5.2a10.8 10.8 0 0 0-5.9 1.8A2.2 2.2 0 1 0 3.4 14a4.3 4.3 0 0 0 0 .7c0 3.4 3.9 6.1 8.6 6.1s8.6-2.7 8.6-6.1a4.3 4.3 0 0 0 0-.7 2.2 2.2 0 0 0 1.4-1.9zM7 13.6a1.5 1.5 0 1 1 1.5 1.5A1.5 1.5 0 0 1 7 13.6zm8.6 4.1a5.7 5.7 0 0 1-3.6 1.1 5.7 5.7 0 0 1-3.6-1.1.4.4 0 0 1 .6-.6 4.9 4.9 0 0 0 3 .9 4.9 4.9 0 0 0 3-.9.4.4 0 0 1 .6.6zm-.3-2.6a1.5 1.5 0 1 1 1.5-1.5 1.5 1.5 0 0 1-1.5 1.5z"></path></svg></a>
        </div>
      </div>
      <nav class="foot-col" aria-label="Read">
        <div class="eyebrow">Read</div>
        <a href="/litepaper">Litepaper</a>
        <a href="/claims">What Igneum does not claim</a>
        <a href="/randomx">Igneum vs RandomX</a>
        <a href="/bench">Engineering log</a>
        <a href="/evidence">Evidence</a>
        <a href="/ledger">Ledger: every criticism</a>
        <a href="/provenance">Built on the shoulders</a>
      </nav>
      <nav class="foot-col" aria-label="Run">
        <div class="eyebrow">Run</div>
        <a href="/miner">The miner</a>
        <a href="/app">The app</a>
        <a href="/wallet">The wallet</a>
        <a href="/miners">GPU bench table</a>
        <a href="/dev-fee">The dev fee</a>
        <a href="/faucet">Testnet faucet</a>
      </nav>
      <nav class="foot-col" aria-label="Follow">
        <div class="eyebrow">Follow</div>
        <a href="/live">Live devnet</a>
        <a href="/explorer">Explorer</a>
        <a href="/journey">Journey</a>
        <a href="/metamask">Add Igneum to MetaMask</a>
        <a href="/miner#get">Downloads: devnet build</a>
      </nav>
      <nav class="foot-col" aria-label="Contact">
        <div class="eyebrow">Contact</div>
        <a href="mailto:hello@igneum.network">hello@igneum.network</a>
        <a href="https://github.com/igneum-network/spec/issues" rel="noopener">An issue on the spec</a>
        <span class="foot-note">Report a flaw by either. Nobody from Igneum will ask for your seed.</span>
      </nav>
    </div>
    <div class="foot-base">
      <span class="foot-imprint">Igneum Labs LTD · Unit IH-00-01-01-OF-01, Level 01, Innovation One, Dubai International Financial Centre</span>
      <span class="foot-state"><span class="dot off" id="foot-dot"></span><span id="foot-state">devnet</span></span>
      <span class="theme" role="group" aria-label="Theme"><button type="button" data-theme-set="system" aria-pressed="true">System</button><button type="button" data-theme-set="light" aria-pressed="false">Light</button><button type="button" data-theme-set="dark" aria-pressed="false">Dark</button></span>
      <span class="mono foot-copy">© 2026 Igneum · not an offer to sell anything</span>
    </div>
  </div>
</footer>

<script>
(function(){
  // theme control: stores light or dark under igneum-theme; system clears it. The head applied the stored value before paint.
  var bs=document.querySelectorAll('[data-theme-set]');if(!bs.length)return;
  function cur(){try{var t=localStorage.getItem('igneum-theme');return t==='light'||t==='dark'?t:'system';}catch(e){return 'system';}}
  function paint(){var c=cur();bs.forEach(function(b){b.setAttribute('aria-pressed',b.getAttribute('data-theme-set')===c?'true':'false');});}
  bs.forEach(function(b){b.addEventListener('click',function(){var v=b.getAttribute('data-theme-set');try{if(v==='system')localStorage.removeItem('igneum-theme');else localStorage.setItem('igneum-theme',v);}catch(e){}
    if(v==='system')document.documentElement.removeAttribute('data-theme');else document.documentElement.setAttribute('data-theme',v);paint();});});
  paint();
  // the network state word in the footer: one read of the observer per page view
  var fs=document.getElementById('foot-state'),fd=document.getElementById('foot-dot');if(fs&&fd){fetch('/api/live?window=30',{cache:'no-store'}).then(function(r){return r.json();}).then(function(d){var on=d&&d.ok&&d.state&&!d.state.stale;fs.textContent=on?'devnet live':'devnet, observer stale';fd.className='dot '+(on?'live':'off');}).catch(function(){fs.textContent='devnet';});}
})();
</script>
<!-- footer:end -->
<script src="/scenes/feed.js"></script>
<script src="/scenes/forge.js"></script>
<script src="/scenes/lattice.js"></script>
<script src="/scenes/pulse.js"></script>
<script>
(function(){
  var only=new URLSearchParams(location.search).get('only'),grid=document.getElementById('scenes');
  if(only){grid.classList.add('only');Array.prototype.slice.call(grid.children).forEach(function(c){if(c.getAttribute('data-scene')!==only)c.remove();});}
  var subs=[];
  if(document.getElementById('sc-a'))subs.push(IgneumForge.mount(document.getElementById('sc-a'),{}));
  if(document.getElementById('sc-b'))subs.push(IgneumLattice.mount(document.getElementById('sc-b'),{window:120,compact:window.innerWidth<700}));
  if(document.getElementById('sc-c'))subs.push(IgneumPulse.mount(document.getElementById('sc-c'),{window:120}));
  var st=document.getElementById('feed-state');
  IgneumFeed.start({window:120,subs:subs,onState:function(s,r){st.className='state '+(s==='live'?'live':s==='failed'?'bad':'');st.innerHTML='<span class="dot '+(s==='live'?'live':s==='failed'?'bad':'off')+'"></span>'+(s==='live'?'live devnet':s==='connecting'?'connecting to the devnet observer':(r||'live feed unavailable'));}});
})();
</script>
</body>
</html>