<head> <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#f5f3ed"> <title>The grammar of organization</title><meta name="description" content="An interactive inquiry into how parts become a whole. A finite field of pixels, continuously reorganizing."> <style> :root{color-scheme:light;--paper:#f5f3ed;--ink:#34372f;--muted:#777970;--accent:#7b876e}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:1px solid #697b56;outline-offset:7px}canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0}.sheen{position:fixed;inset:0;pointer-events:none;opacity:.55;background:radial-gradient(ellipse at 35% 40%,#fff9 0,transparent 58%),radial-gradient(ellipse at 75% 70%,#d9dfcd28,transparent 50%);mix-blend-mode:soft-light;animation:glimmer 14s ease-in-out infinite alternate}@keyframes glimmer{to{opacity:.15;transform:scale(1.2)}}header{position:fixed;top:38px;left:46px;right:46px;display:flex;align-items:center;justify-content:space-between;z-index:3}.identity{display:flex;gap:14px;text-decoration:none;color:inherit;font-size:10px;line-height:1.5;letter-spacing:1.3px}.mark{font-size:33px;line-height:30px;color:#7c846d}#motion{background:none;border:0;color:var(--muted);font-size:11px;letter-spacing:.3px}#motion span{margin-left:12px;font-size:12px}main{position:fixed;inset:0;pointer-events:none;z-index:2}.eyebrow{position:absolute;top:26%;left:0;width:100%;text-align:center;letter-spacing:3.3px;font-size:9px;color:var(--muted);transition:opacity .4s}.copy{position:absolute;top:61%;width:100%;padding:0 28px;text-align:center;transition:opacity .45s,transform .45s;pointer-events:auto}.copy p{font:14px/1.8 Arial,sans-serif;max-width:440px;margin:0 auto;color:#73766b;text-wrap:balance}.copy button{margin-top:28px;background:none;border:0;border-bottom:1px solid #a8ad9d;padding:0 0 8px;font-size:11px;letter-spacing:.3px}.copy button span{margin-left:30px}.chapter{position:absolute;left:46px;bottom:144px;font-size:9px;letter-spacing:1.6px;display:flex;align-items:center;gap:15px;color:var(--muted)}#chapter-num{font:italic 22px Georgia,serif;color:#8b907f}.chapter:before{content:'';width:22px;height:1px;background:#9aa38d}footer{position:fixed;bottom:39px;left:46px;right:46px;z-index:4;display:flex;justify-content:space-between;align-items:center}.field-status{font-size:10px;color:var(--muted);letter-spacing:.2px;display:flex;align-items:center;gap:9px;min-width:180px}.status-dot{width:4px;height:4px;border-radius:50%;background:#85926e;box-shadow:0 0 9px #85926e66}nav{display:flex;gap:5px;border:1px solid #d9dcd0;border-radius:35px;padding:5px;background:#f7f5efb0;backdrop-filter:blur(12px)}nav button{background:none;border:0;font-size:11px;padding:12px 17px;border-radius:24px;color:#74796e;transition:background .3s,color .3s}nav button span{font-size:8px;opacity:.55;margin-right:6px}nav button.active{background:#3e4437;color:#f5f3ed}#release{min-width:180px;text-align:right;background:none;border:0;font-size:11px;color:var(--muted)}#release span{margin-left:18px}#hint{position:fixed;bottom:111px;width:100%;text-align:center;z-index:2;font-size:9px;letter-spacing:.8px;color:#969b8c;pointer-events:none}#note{position:fixed;top:110px;right:46px;font-size:10px;color:#73796a;z-index:3}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dispersed .copy,.dispersed .eyebrow{opacity:0;transform:translateY(7px);pointer-events:none}.changing .copy{opacity:0;transform:translateY(6px)}@media(max-width:700px){header{top:26px;left:24px;right:24px}.identity{font-size:8px;gap:9px}#motion{font-size:10px}.eyebrow{top:28%;font-size:8px;letter-spacing:2.5px}.copy{top:58%}.copy p{font-size:13px;max-width:300px}.chapter{left:24px;bottom:155px;font-size:8px}.chapter:before{width:14px}footer{left:18px;right:18px;bottom:25px;flex-wrap:wrap;gap:18px}.field-status{min-width:0;order:2;font-size:9px}nav{order:1;width:100%;justify-content:space-between}nav button{font-size:10px;padding:12px 11px}nav button span{margin-right:4px}#release{min-width:0;order:3;font-size:10px}#hint{bottom:133px;font-size:8px}#note{right:24px;top:95px}}@media(prefers-reduced-motion:reduce){.sheen{animation:none}*{transition:none!important}} </style> </head> <body> <canvas id="field" aria-hidden="true"></canvas> <div class="sheen" aria-hidden="true"></div> <header><a class="identity" href="#" aria-label="Return to introduction"><span class="mark" aria-hidden="true">⁙</span><span>THE GRAMMAR<br>OF ORGANIZATION</span></a><button id="motion" aria-pressed="false">Pause motion <span aria-hidden="true">Ⅱ</span></button></header> <main id="main"><div class="eyebrow" id="eyebrow">AN ONGOING INQUIRY</div><h1 id="title" class="sr-only">The grammar of organization</h1><div class="copy" id="copy"><p id="description">How do individual parts become something more?</p><button id="explore">Enter the inquiry <span aria-hidden="true">↗</span></button></div><div class="chapter" id="chapter"><span id="chapter-num">00</span><span id="chapter-label">A FIELD OF POSSIBILITY</span></div></main> <aside id="note" aria-live="polite"></aside> <footer><div class="field-status"><span class="status-dot"></span><span id="status">10,000 pixels. One field.</span></div><nav aria-label="Explore the inquiry"><button data-state="0" class="active" aria-current="page"><span>00</span> Field</button><button data-state="1"><span>01</span> Elements</button><button data-state="2"><span>02</span> Relations</button><button data-state="3"><span>03</span> Emergence</button></nav><button id="release">Release <span aria-hidden="true">↗</span></button></footer> <div id="hint">Move through the field. See what takes shape.</div> <script> 'use strict'; const canvas=document.querySelector('#field'),ctx=canvas.getContext('2d',{alpha:false}); const raster=document.createElement('canvas'),rc=raster.getContext('2d',{willReadFrequently:true}); const reduced=matchMedia('(prefers-reduced-motion: reduce)'); const N=10000, particles=[]; let w,h,dpr,state=0,free=false,paused=reduced.matches,targets=[],raf,last=0,time=0,transitionTimer; const pointer={x:-1000,y:-1000}; const chapters=[ {words:['The grammar','of organization'],tag:'AN ONGOING INQUIRY',desc:'How do individual parts become something more?',label:'A FIELD OF POSSIBILITY',action:'Enter the inquiry'}, {words:['Every whole','begins with a part.'],tag:'01 / ELEMENTS',desc:'A point. A person. An idea. Before there is a system, there are individual things, each carrying its own possibility.',label:'THE INDIVIDUAL UNIT',action:'Explore the relationships'}, {words:['The space between','is part of the work.'],tag:'02 / RELATIONS',desc:'Organization lives in the connections: what meets, what stays apart, and what changes when one thing moves.',label:'PATTERNS OF CONNECTION',action:'See what emerges'}, {words:['A whole is','a new beginning.'],tag:'03 / EMERGENCE',desc:'The same parts, arranged differently, become something else. Structure is a possibility we can keep reimagining.',label:'MORE THAN THE SUM',action:'Return to the field'} ]; function resize(){w=innerWidth;h=innerHeight;dpr=Math.min(devicePixelRatio||1,2);canvas.width=w*dpr;canvas.height=h*dpr;ctx.setTransform(dpr,0,0,dpr,0,0);raster.width=w;raster.height=h;makeTargets();draw(0)} function makeTargets(){rc.clearRect(0,0,w,h);let mobile=w<700, size=Math.min(mobile?42:78,w/(mobile?9:15));const lines=chapters[state].words;rc.font=`400 ${size}px Georgia,serif`;let max=Math.max(...lines.map(t=>rc.measureText(t).width));if(max>w*.84){size*=w*.84/max;rc.font=`400 ${size}px Georgia,serif`;}rc.textAlign='center';rc.textBaseline='middle';rc.fillStyle='#000';let cy=h*(mobile?.415:.437);lines.forEach((s,i)=>rc.fillText(s,w/2,cy+(i-.5)*size*1.13));let data=rc.getImageData(0,0,w,h).data;targets=[];let step=mobile?2.6:3.2;for(let y=Math.max(0,Math.floor(cy-size*1.3));y<Math.min(h,cy+size*1.3);y+=step)for(let x=w*.06;x<w*.94;x+=step){if(data[(Math.floor(y)*w+Math.floor(x))*4+3]>90)targets.push({x,y});} // Shuffle to make assembly flow through the whole field. for(let i=targets.length-1;i>0;i--){let j=Math.floor(Math.random()*(i+1));[targets[i],targets[j]]=[targets[j],targets[i]];} particles.forEach((p,i)=>{p.target=targets[i]||null;});} for(let i=0;i<N;i++)particles.push({x:Math.random()*innerWidth,y:Math.random()*innerHeight,vx:0,vy:0,seed:Math.random()*Math.PI*2,s:.65+Math.random()*.8,tone:Math.random(),target:null}); function draw(now){let dt=Math.min((now-last)/16.67||1,2);last=now;if(!paused)time+=dt*.009;ctx.fillStyle='#f5f3ed';ctx.fillRect(0,0,w,h);for(let i=0;i<N;i++){let p=particles[i],t=!free&&p.target,anchored=!!t; if(!paused){if(t){let dx=t.x-p.x,dy=t.y-p.y;p.vx=(p.vx+dx*.012*dt)*Math.pow(.8,dt);p.vy=(p.vy+dy*.012*dt)*Math.pow(.8,dt);}else{let angle=Math.sin(p.y*.003+time*.23)+Math.cos(p.x*.002-time*.18)+p.seed;p.vx=p.vx*.97+Math.cos(angle)*.018*dt;p.vy=p.vy*.97+Math.sin(angle)*.018*dt;} let dx=p.x-pointer.x,dy=p.y-pointer.y,dist=dx*dx+dy*dy;if(dist<5000&&dist>1){let f=(1-dist/5000)*.28;p.vx+=dx/Math.sqrt(dist)*f;p.vy+=dy/Math.sqrt(dist)*f;}p.x+=p.vx*dt;p.y+=p.vy*dt;if(!t){if(p.x<0)p.x+=w;if(p.x>w)p.x-=w;if(p.y<0)p.y+=h;if(p.y>h)p.y-=h;}} else if(t){p.x=t.x;p.y=t.y;} let shimmer=.5+.5*Math.sin(time+p.seed*4);ctx.fillStyle=anchored?`rgba(58,66,45,${.52+p.tone*.38})`:`rgba(${p.tone>.95?'166,158,114':'116,129,96'},${.06+p.tone*.17+shimmer*.08})`;let s=anchored?(w<700?1.5:1.9):p.s;ctx.fillRect(p.x,p.y,s,s); }if(!paused)raf=requestAnimationFrame(draw);} function show(next){clearTimeout(transitionTimer);state=(next+chapters.length)%chapters.length;free=true;document.body.classList.add('changing');particles.forEach(p=>{p.vx+=(Math.random()-.5)*6;p.vy+=(Math.random()-.5)*6;});if(paused)complete();else transitionTimer=setTimeout(complete,550); function complete(){const c=chapters[state];document.querySelector('#title').textContent=c.words.join(' ');document.querySelector('#eyebrow').textContent=c.tag;document.querySelector('#description').textContent=c.desc;document.querySelector('#explore').innerHTML=c.action+' <span aria-hidden="true">↗</span>';document.querySelector('#chapter-num').textContent=String(state).padStart(2,'0');document.querySelector('#chapter-label').textContent=c.label;document.querySelectorAll('nav button').forEach((b,i)=>{b.classList.toggle('active',i===state);if(i===state)b.setAttribute('aria-current','page');else b.removeAttribute('aria-current')});makeTargets();free=false;document.body.classList.remove('dispersed','changing');document.querySelector('#release').innerHTML='Release <span aria-hidden="true">↗</span>';document.querySelector('#status').textContent='10,000 pixels. One field.';if(paused)draw(0);}} function release(){clearTimeout(transitionTimer);free=!free;document.body.classList.toggle('dispersed',free);document.body.classList.remove('changing');document.querySelector('#release').innerHTML=free?'Gather <span aria-hidden="true">↙</span>':'Release <span aria-hidden="true">↗</span>';document.querySelector('#status').textContent=free?'10,000 pixels. Freely moving.':'10,000 pixels. One field.';if(free)particles.forEach(p=>{p.vx+=(Math.random()-.5)*9;p.vy+=(Math.random()-.5)*9;if(paused){p.x=Math.random()*w;p.y=Math.random()*h}});if(paused)draw(0);} document.querySelectorAll('nav button').forEach(b=>b.addEventListener('click',()=>show(+b.dataset.state)));document.querySelector('#explore').onclick=()=>show(state+1);document.querySelector('.identity').onclick=e=>{e.preventDefault();show(0)};document.querySelector('#release').onclick=release; const motion=document.querySelector('#motion');function updateMotion(){motion.innerHTML=paused?'Resume motion <span aria-hidden="true">▷</span>':'Pause motion <span aria-hidden="true">Ⅱ</span>';motion.setAttribute('aria-pressed',String(paused))}motion.onclick=()=>{paused=!paused;updateMotion();cancelAnimationFrame(raf);last=0;draw(0)};updateMotion(); window.addEventListener('pointermove',e=>{pointer.x=e.clientX;pointer.y=e.clientY});window.addEventListener('pointerout',e=>{if(!e.relatedTarget)pointer.x=pointer.y=-1000});window.addEventListener('keydown',e=>{if(e.target.closest('button,a,input'))return;if(e.key==='Escape')release();if(e.key==='ArrowRight'){e.preventDefault();show(state+1)}if(e.key==='ArrowLeft'){e.preventDefault();show(state-1)}});let resizeTimer;window.addEventListener('resize',()=>{clearTimeout(resizeTimer);resizeTimer=setTimeout(()=>{cancelAnimationFrame(raf);resize()},150)});document.addEventListener('visibilitychange',()=>{if(document.hidden)cancelAnimationFrame(raf);else if(!paused){last=0;draw(0)}});resize(); </script> </body></html> " style="display: block; width: 100%; height: 100svh; min-height: 620px; border: 0px; background: rgb(245, 243, 237);" title="The grammar of organization — interactive pixel field" width="100%">