41:null 42:["$","title",null,{"children":"Phantom of the Hrönir | jmfbo | Observable"}] 48:T1e97,(() => { if(!document.getElementById('serif-fonts')){ const l=document.createElement('link'); l.id='serif-fonts'; l.rel='stylesheet'; l.href='https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap'; document.head.append(l); } const SERIF="'Fraunces', serif", SANS="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"; const INK='#1a1714', PAPER='#faf8f3', MUTED='#8a8378', LIGHT='#e5e7eb'; const container = document.createElement('div'); container.style.cssText = 'font:13px/1.5 ' + SANS + '; max-width:900px;'; const controls = document.createElement('div'); controls.style.cssText = 'margin:10px 0;display:flex;gap:8px;align-items:center;'; const observe = document.createElement('button'); observe.textContent = 'Look for it — manufacture the next copy'; const leak = document.createElement('button'); leak.textContent = 'Leak into reality'; const reset = document.createElement('button'); reset.textContent = 'Reset'; [observe, leak, reset].forEach(b => b.style.cssText = 'padding:7px 14px;cursor:pointer;background:none;border:1px solid #c9bfa8;color:' + INK + ';font-family:' + SANS + ';'); controls.append(observe, leak, reset); container.append(controls); const banner = document.createElement('div'); banner.style.cssText = 'color:#E52127;min-height:20px;margin-bottom:6px;font-weight:600;'; container.append(banner); const svg = d3.create('svg').attr('viewBox', [0, 0, 820, 660]).style('width', '100%').style('max-width', '860px').style('height', 'auto').style('font-family', SANS); svg.append('rect').attr('width', 820).attr('height', 660).attr('fill', PAPER); function ph(seed, k){ const x = Math.sin(seed*12.9898 + k*78.233)*43758.5453; return (x - Math.floor(x)) * 2*Math.PI; } function jit(seed, i){ const x = Math.sin(seed*127.1 + i*311.7)*43758.5453; return (x - Math.floor(x)) - 0.5; } function shapePoints(degree, size){ const N = 80, seed = 42; const pts = []; for(let i = 0; i < N; i++){ const th = i/N*2*Math.PI; let r = 1; if(degree === 'ur'){ r = 1 + 0.16*Math.sin(3*th + ph(seed,3)) + 0.12*Math.sin(7*th + ph(seed,7)) + 0.08*Math.sin(13*th + ph(seed,13)) + 0.09*jit(seed,i); } else if(degree === 0){ r = 1 + 0.14*Math.sin(2*th + ph(seed,2)) + 0.12*Math.sin(5*th + ph(seed,5)) + 0.09*Math.sin(8*th + ph(seed,8)) + 0.05*Math.sin(12*th + ph(seed,12)); } else { const maxK = Math.max(1, 11 - degree); const amp = 0.14 * (1 - degree/12); r = 1; for(let k = 1; k <= maxK; k++) r += amp*Math.sin(k*th + ph(seed,k)); } pts.push([size*r*Math.cos(th), size*r*Math.sin(th)]); } return pts; } function polyPath(d){ return 'M' + shapePoints(d.degree, d.size).map(p => p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join('L') + 'Z'; } const desc = { 0: 'The lost thing — found by two who looked.', 1: 'hrön, first degree — nearly the thing itself.', 2: 'second degree — the copy of the copy.', 3: 'third degree — accidental detail begins to fade.', 4: 'fourth degree — the accidents recede.', 5: 'fifth degree — the essential form emerges.', 6: 'sixth degree — thinner, stranger.', 7: 'seventh degree — no longer tied to matter.', 8: 'eighth degree — approaching the idea.', 9: 'ninth degree — almost pure.', 10: 'tenth degree — the original forgotten.', 11: 'eleventh degree — purity of form the originals lack.', ur: 'ur — produced by hope, a coarser duplicate.' }; const nodes = []; nodes.push({ key: 'original', degree: 0, x: 150, y: 320, size: 44, label: 'the thing' }); nodes.push({ key: 'ur', degree: 'ur', x: 150, y: 500, size: 30, label: 'ur' }); for(let d = 1; d <= 11; d++){ const ang = d * 0.62, rad = 18 + d * 27; nodes.push({ key: 'h' + d, degree: d, x: 430 + rad*Math.cos(ang), y: 350 + rad*Math.sin(ang), size: 34 - d*0.8, label: d + '°' }); } function hronColor(d){ const c0 = [251, 98, 71], c1 = [106, 212, 255]; const t = (d - 1)/10; return 'rgb(' + Math.round(c0[0] + (c1[0]-c0[0])*t) + ',' + Math.round(c0[1] + (c1[1]-c0[1])*t) + ',' + Math.round(c0[2] + (c1[2]-c0[2])*t) + ')'; } function colorFor(d){ if(d.key === 'original') return '#ac9356'; if(d.key === 'ur') return MUTED; return hronColor(d.degree); } const guide = svg.append('path') .attr('d', (() => { let s = ''; for(let d=1; d<=11; d++){ const ang=d*0.62, rad=18+d*27; const x=430+rad*Math.cos(ang), y=350+rad*Math.sin(ang); s += (d===1?'M':'L') + x.toFixed(1) + ' ' + y.toFixed(1); } return s; })()) .attr('fill', 'none').attr('stroke', LIGHT).attr('stroke-width', 1).attr('stroke-dasharray', '2 4'); const nodeLayer = svg.append('g'); const compass = svg.append('g').attr('transform', 'translate(730, 60)').style('opacity', 0).style('transition', 'opacity .6s'); compass.append('circle').attr('r', 22).attr('fill', 'none').attr('stroke', '#E52127').attr('stroke-width', 2); compass.append('path').attr('d', 'M0,-16 L5,0 L0,16 L-5,0 Z').attr('fill', '#E52127'); compass.append('text').attr('y', 34).attr('text-anchor', 'middle').attr('font-size', 9).attr('fill', '#E52127').text('a compass bearing Tlön script'); let revealed = 0, leakOn = false, selected = null; const panel = document.createElement('div'); panel.style.cssText = 'margin-top:10px;padding:10px 12px;background:' + PAPER + ';border:1px solid ' + LIGHT + ';max-width:820px;min-height:20px;'; container.append(svg.node(), panel); function render(){ const sel = nodeLayer.selectAll('g.node').data(nodes, d => d.key).join('g') .attr('class', 'node') .attr('transform', d => `translate(${d.x},${d.y})`) .style('cursor', 'pointer') .style('transition', 'opacity .5s') .style('opacity', d => { if(d.key === 'original' || d.key === 'ur') return 1; return d.degree <= revealed ? 1 : 0.07; }) .on('click', (e, d) => { selected = d; render(); }); sel.selectAll('path').data(d => [d]).join('path') .attr('d', d => polyPath(d)) .attr('fill', d => colorFor(d)) .attr('stroke', d => (leakOn ? '#E52127' : (d.key === selected?.key ? INK : MUTED))) .attr('stroke-width', d => (d.key === selected?.key ? 2 : 1)); sel.selectAll('title').data(d => [d]).join('title').text(d => desc[d.degree]); sel.selectAll('text.lab').data(d => [d]).join('text') .attr('class', 'lab') .attr('y', d => d.size + 16) .attr('text-anchor', 'middle') .attr('font-family', SERIF) .attr('font-size', 11) .attr('fill', INK) .text(d => d.label); if(selected){ panel.innerHTML = '' + selected.label + ' — ' + desc[selected.degree] + '' + '

' + (selected.key === 'original' ? 'The original: irregular, accidental, real.' : selected.key === 'ur' ? 'Coarse, from hope — matter coarsened, not purified.' : 'Degree ' + selected.degree + ' of 11 — ' + (11 - selected.degree) + ' further copies toward purity.') + '

'; } else { panel.textContent = 'Click any copy to inspect it. Each "Look for it" manufactures the next degree.'; } compass.style('opacity', leakOn ? 1 : 0); banner.textContent = leakOn ? 'Tlön is leaking into the world. The copies have begun to appear in reality.' : ''; } observe.addEventListener('click', () => { if(revealed < 11){ revealed++; render(); } }); leak.addEventListener('click', () => { leakOn = !leakOn; render(); }); reset.addEventListener('click', () => { revealed = 0; leakOn = false; selected = null; render(); }); render(); return container; })()49:[] 46:{"id":"bff81eb27e23e2d3","slug":"phantom-of-the-hroenir","title":"Phantom of the Hrönir","thumbnail":"b793221bee7563df5ba207f4d64b85c6132d814fcb4100b954c1c897b181892b","access_level":"public","create_time":"$D2026-10-19T15:59:50.690Z","update_time":"$D2026-10-19T22:00:03.029Z","view_time":null,"first_public_time":"$D2026-10-19T17:37:21.004Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"13e9f68b1ec1653b","login":"ssp2","name":"jmfbo","avatar_url":"https://avatars-next.observableusercontent.com/86da5640a4a538e054fc577d613a9d57f0da60f5d4a14a3da6b4e0fb3e5a5800","tier":"free_2026","bio":"founder and principal engineer at sindio.net","following":false},"version":22,"publish_version":22,"role":null,"authored":false,"authors":[{"type":"individual","id":"f18d27787b7a1d20","login":"ssp2","name":"jmfbo","avatar_url":"https://avatars-next.observableusercontent.com/86da5640a4a538e054fc577d613a9d57f0da60f5d4a14a3da6b4e0fb3e5a5800","tier":null,"bio":"founder and principal engineer at sindio.net","following":false}],"members":[{"type":"team","id":"13e9f68b1ec1653b","login":"ssp2","name":"jmfbo","avatar_url":"https://avatars-next.observableusercontent.com/86da5640a4a538e054fc577d613a9d57f0da60f5d4a14a3da6b4e0fb3e5a5800","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Phantom of the Hrönir","cells":[{"id":1,"value":"# Phantom of the Hrönir","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"In the story, Tlon Uqbar Orbis Tertius, Borges describes an interactive duplication spiral. At the center of the latter is an original object and the eleven degrees of Hrön. Each copy purifies as the original's accidents fall away, until the 11th has a purity of form that the original lacks. Each copy has a ur (born of hope) besides it, and the ur gets coarser with every at every degree.\n\nEach \"Look for it\" manufactures the next copy, and a toggle lets Tlön leak into reality.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"2"}} 47:"$46:body"