<head> <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#f5f3ed"> <title>A szerveződés nyelvtana</title><meta name="description" content="Gondolatkísérlet arról, hogyan lesz a részekből egész. Tízezer pixel, folytonosan újrarendeződve."> <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}} /* Palette drawn from the navy type on wouldyoulikesome.com. */ :root{--paper:#f6f7fc;--ink:#082166;--muted:#52628b;--accent:#748cc8;--border:#c8d0e5;--glass:#f6f7fcb8;--active:#082166;--active-ink:#f6f7fc} body{transition:background-color 1.8s,color 1.8s}.territory{color-scheme:dark;--paper:#08163e;--ink:#f4e1be;--muted:#bdc8e6;--accent:#e7b786;--border:#455579;--glass:#142348b8;--active:#f4e1be;--active-ink:#08163e} .sheen{background:radial-gradient(ellipse at 30% 40%,#c6d8ff28,transparent 58%),radial-gradient(ellipse at 80% 70%,#c8bbf518,transparent 50%);mix-blend-mode:normal;transition:opacity 2s}.territory .sheen{opacity:.3;background:radial-gradient(ellipse at 25% 50%,#506db02b,transparent 60%),radial-gradient(ellipse at 80% 30%,#c19b8215,transparent 55%)} .mark{width:16px;height:16px;align-self:center;background:linear-gradient(var(--ink),var(--ink)) 0 0/4px 4px,linear-gradient(var(--ink),var(--ink)) 12px 0/4px 4px,linear-gradient(var(--ink),var(--ink)) 0 12px/4px 4px,linear-gradient(var(--ink),var(--ink)) 12px 12px/4px 4px;background-repeat:no-repeat;opacity:.8} .copy p,#chapter-num,#hint,#note,nav button{color:var(--muted)}.copy button{border-color:var(--accent)}.chapter:before,.status-dot{background:var(--accent)}.status-dot{box-shadow:0 0 12px var(--accent)}nav{background:var(--glass);border-color:var(--border);transition:background 1.8s,border-color 1.8s}nav button.active{background:var(--active);color:var(--active-ink)}.copy{transition:opacity 1.2s,transform 1.2s}.assembling .copy{opacity:0;transform:translateY(8px);pointer-events:none}.changing .eyebrow{opacity:0}.eyebrow{transition:opacity .7s,color 1.8s}button,a,.chapter,#hint,#chapter-num{transition:color 1.8s,border-color 1.8s}.arrow{display:inline-block;width:23px;height:16px;margin-left:24px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}.copy button{display:inline-flex;align-items:center;justify-content:center}#release .arrow{width:19px;margin-left:16px}.territory #release,.territory #motion{color:var(--muted)}button:focus-visible,a:focus-visible{outline-color:var(--accent)} @media(max-height:650px){.chapter{bottom:128px}.copy{top:58%}.copy p{font-size:12px;max-width:340px}.copy button{margin-top:15px}.eyebrow{top:24%}} @media(max-width:420px){nav button{padding:12px 9px;font-size:9px}nav button span{display:none}.field-status{font-size:8px}#release{font-size:9px}#release .arrow{margin-left:7px;width:16px}#motion{font-size:9px;max-width:105px;line-height:1.5}.copy button{font-size:10px}} </style> </head> <body> <canvas id="field" aria-hidden="true"></canvas> <div class="sheen" aria-hidden="true"></div> <header><a class="identity" href="#" aria-label="Vissza a kezdőlapra"><span class="mark" aria-hidden="true"></span><span>A SZERVEZŐDÉS<br>NYELVTANA</span></a><button id="motion" aria-pressed="false">Mozgás megállítása</button></header> <main id="main"><div class="eyebrow" id="eyebrow">EGY GONDOLAT NYOMÁBAN</div><h1 id="title" class="sr-only">A szerveződés nyelvtana</h1><div class="copy" id="copy"><p id="description">Hogyan lesz a különálló részekből valami több?</p><button id="explore">Induljunk el <span aria-hidden="true">→</span></button></div><div class="chapter" id="chapter"><span id="chapter-num">00</span><span id="chapter-label">A LEHETŐSÉGEK TERE</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 pixel. Egy közös tér.</span></div><nav aria-label="A gondolatmenet fejezetei"><button data-state="0" class="active" aria-current="page"><span>00</span> Tér</button><button data-state="1"><span>01</span> Részek</button><button data-state="2"><span>02</span> Kapcsolatok</button><button data-state="3"><span>03</span> Kibontakozás</button></nav><button id="release">Engedd szabadon <span aria-hidden="true">→</span></button></footer> <div id="hint">Járd be a teret. Figyeld, mi ölt alakot.</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=[],pointer={x:-1000,y:-1000}; const arrow='<svg class="arrow" viewBox="0 0 24 16" aria-hidden="true"><path d="M1 8h20M15 2l6 6-6 6"/></svg>'; let w=innerWidth,h=innerHeight,dpr,state=0,free=false,paused=reduced.matches,raf,last=null,clock=0,theme=0,transitionTimer,revealTimer; const chapters=[ { "words": [ "A szerveződés", "nyelvtana" ], "tag": "EGY GONDOLAT NYOMÁBAN", "desc": "Hogyan lesz a különálló részekből valami több?", "label": "A LEHETŐSÉGEK TERE", "action": "Induljunk el" }, { "words": [ "Minden egész", "egy résszel kezdődik." ], "tag": "01 / RÉSZEK", "desc": "Egy pont. Egy ember. Egy gondolat. Mielőtt rendszer születik, különálló dolgok vannak: mindegyik a maga lehetőségeivel.", "label": "AZ ÖNÁLLÓ RÉSZ", "action": "Fedezzük fel a kapcsolatokat" }, { "words": [ "A köztes tér", "is az alkotás része." ], "tag": "02 / KAPCSOLATOK", "desc": "A szerveződés a kapcsolatokban él: abban, ami találkozik, ami külön marad, és ami megváltozik, ha valami megmozdul.", "label": "A KAPCSOLÓDÁS MINTÁZATAI", "action": "Nézzük, mi bontakozik ki" }, { "words": [ "Az egész", "egy új kezdet." ], "tag": "03 / KIBONTAKOZÁS", "desc": "Mi történik, ha a részek nemcsak összeállnak, hanem egymást és a közös egészet is alakítják?", "label": "TÖBB MINT A RÉSZEK ÖSSZEGE", "action": "Lépjünk az összetartományba" }, { "words": [ "Összetartomány" ], "tag": "EGYMÁSALKOTÁS / ÚJ TÉR", "desc": "Az együtt formált egész, amelynek részei egymást és az egészet is alakítják.", "label": "AZ EGYMÁSALKOTÁS TERE", "action": "Kezdjük újra" } ]; const clamp=n=>Math.max(0,Math.min(1,n)); const smooth=t=>t*t*t*(t*(t*6-15)+10); const mix=(a,b,t)=>a+(b-a)*t; function color(a,b,t){return a.map((v,i)=>Math.round(mix(v,b[i],t))).join(',');} for(let i=0;i<N;i++)particles.push({x:Math.random()*w,y:Math.random()*h,vx:0,vy:0,seed:Math.random()*Math.PI*2,tone:Math.random(),s:.65+Math.random()*.8,target:null,ink:0,flight:null}); // Nearby particles travel together; no new pixels are created for the words. function spatialKey(x,y){let a=Math.max(0,Math.min(1023,Math.floor(x/w*1023))),b=Math.max(0,Math.min(1023,Math.floor(y/h*1023))),key=0;for(let j=0;j<10;j++)key|=((a>>j)&1)<<(2*j)|((b>>j)&1)<<(2*j+1);return key;} function makeTargets(){ rc.clearRect(0,0,w,h);const mobile=w<700,lines=chapters[state].words; let size=state===4?(mobile?60:110):Math.min(mobile?43:82,w/(mobile?9:15)); rc.font=`400 ${size}px Georgia,serif`;let longest=Math.max(...lines.map(s=>rc.measureText(s).width));if(longest>w*.84){size*=w*.84/longest;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-(lines.length-1)/2)*size*1.15)); const data=rc.getImageData(0,0,w,h).data,points=[],step=mobile?2.5:3; for(let y=Math.max(0,Math.floor(cy-size*1.5));y<Math.min(h,cy+size*1.5);y+=step)for(let x=w*.06;x<w*.94;x+=step)if(data[(Math.floor(y)*w+Math.floor(x))*4+3]>95)points.push({x,y,key:spatialKey(x,y)}); points.sort((a,b)=>a.key-b.key); const ordered=particles.map(p=>({p,key:spatialKey(p.x,p.y)})).sort((a,b)=>a.key-b.key); particles.forEach(p=>{p.target=null;p.flight=null;}); const count=Math.min(points.length,N); for(let i=0;i<count;i++){ const p=ordered[Math.floor(i*N/count)].p,t=points[Math.floor(i*points.length/count)]; const dx=t.x-p.x,dy=t.y-p.y,len=Math.hypot(dx,dy)||1; const bend=Math.min(110,len*.22)*Math.sin(p.seed*.65+clock*.05); p.target=t;p.flight={x:p.x,y:p.y,cx:(p.x+t.x)/2-dy/len*bend,cy:(p.y+t.y)/2+dx/len*bend,start:clock+.12+(p.x/w)*.6+p.tone*.35,duration:3.3+Math.min(1,len/Math.max(w,h))*.9}; if(paused){p.x=t.x;p.y=t.y;p.ink=1;} } } function drift(p,dt){ const angle=Math.sin(p.y*.003+clock*.07)*1.8+Math.cos(p.x*.0025-clock*.055)*1.5; const speed=.18+p.tone*.23; p.vx+=(Math.cos(angle)*speed-p.vx)*Math.min(1,.025*dt);p.vy+=(Math.sin(angle)*speed-p.vy)*Math.min(1,.025*dt); p.x+=p.vx*dt;p.y+=p.vy*dt; // Wrap only after leaving the visible field, so the edges remain quiet. if(p.x<-8)p.x=w+8;if(p.x>w+8)p.x=-8;if(p.y<-8)p.y=h+8;if(p.y>h+8)p.y=-8; } function draw(now){ const dt=last===null?1:Math.min((now-last)/16.667,2);last=now; if(!paused)clock+=dt/60; const goal=state===4?1:0;theme=paused?goal:mix(theme,goal,1-Math.exp(-dt/72)); const paper=color([246,247,252],[8,22,62],theme),ink=color([8,33,102],[244,225,190],theme),dust=color([87,111,181],[145,169,235],theme),gold=color([146,153,205],[240,182,125],theme); ctx.fillStyle=`rgb(${paper})`;ctx.fillRect(0,0,w,h); for(const p of particles){const t=!free&&p.target; if(!paused){ if(t){const f=p.flight,u=clamp((clock-f.start)/f.duration),v=smooth(u),q=1-v; p.x=q*q*f.x+2*q*v*f.cx+v*v*t.x;p.y=q*q*f.y+2*q*v*f.cy+v*v*t.y; // The settled type remains almost imperceptibly alive. p.x+=Math.sin(clock*.55+p.seed)*.24*v;p.y+=Math.cos(clock*.43+p.seed)*.24*v; p.ink=mix(p.ink,1,Math.min(1,.018*dt)); }else{drift(p,dt);p.ink=mix(p.ink,0,Math.min(1,.012*dt));} } const dx=p.x-pointer.x,dy=p.y-pointer.y,distance=Math.hypot(dx,dy),near=distance<70?(1-distance/70):0; // Pointer interaction bends the light without destroying the phrase. const px=p.x+(distance>0?dx/distance:0)*near*3,py=p.y+(distance>0?dy/distance:0)*near*3; const shimmer=.5+.5*Math.sin(clock*.6+p.seed*3),alpha=mix(.065+p.tone*.13+shimmer*.075,.68+p.tone*.28,p.ink); ctx.fillStyle=`rgba(${p.ink>.25?ink:(p.tone>.96?gold:dust)},${alpha})`; const s=mix(p.s,w<700?1.55:1.9,p.ink);ctx.fillRect(px,py,s,s); } if(!paused)raf=requestAnimationFrame(draw); } function restart(){cancelAnimationFrame(raf);last=null;draw(performance.now());} function resize(){if(innerWidth<1||innerHeight<1)return;const ow=w,oh=h;w=innerWidth;h=innerHeight;particles.forEach(p=>{p.x=ow>0?p.x*w/ow:Math.random()*w;p.y=oh>0?p.y*h/oh:Math.random()*h;});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();restart();} function updateContent(){ const c=chapters[state];document.body.classList.toggle('territory',state===4); 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+arrow;document.querySelector('#chapter-num').textContent=String(state).padStart(2,'0');document.querySelector('#chapter-label').textContent=c.label; document.querySelectorAll('nav button').forEach((b,i)=>{const active=i===Math.min(state,3);b.classList.toggle('active',active);if(active)b.setAttribute('aria-current','page');else b.removeAttribute('aria-current');}); document.querySelector('#hint').textContent=state===4?'Ugyanazok a részek. Egy másik lehetőség.':'Járd be a teret. Figyeld, mi ölt alakot.'; } function dissolve(){particles.forEach(p=>{if(p.target){const dx=p.x-w/2,dy=p.y-h*.44,d=Math.hypot(dx,dy)||1;p.vx=dx/d*(.25+p.tone*.5)-dy/d*.3;p.vy=dy/d*(.25+p.tone*.5)+dx/d*.3;}p.target=null;p.flight=null;});} function updateRelease(){document.querySelector('#release').innerHTML=(free?'Álljon össze':'Engedd szabadon')+arrow;document.querySelector('#status').textContent=free?'10 000 pixel. Szabad mozgásban.':'10 000 pixel. Egy közös tér.';} function revealCopy(){clearTimeout(revealTimer);if(paused)document.body.classList.remove('assembling');else revealTimer=setTimeout(()=>document.body.classList.remove('assembling'),2200);} function show(next){clearTimeout(transitionTimer);clearTimeout(revealTimer);state=(next+chapters.length)%chapters.length;free=true;dissolve();document.body.classList.add('changing','assembling'); const complete=()=>{updateContent();makeTargets();free=false;document.body.classList.remove('dispersed','changing');updateRelease();revealCopy();if(paused)restart();}; if(paused)complete();else transitionTimer=setTimeout(complete,850); } function release(){clearTimeout(transitionTimer);clearTimeout(revealTimer);free=!free;document.body.classList.toggle('dispersed',free);document.body.classList.remove('changing');if(free){dissolve();if(paused)particles.forEach(p=>{p.x=Math.random()*w;p.y=Math.random()*h;p.ink=0;});}else{updateContent();makeTargets();document.body.classList.add('assembling');revealCopy();}updateRelease();if(paused)restart();} document.querySelectorAll('nav button').forEach(b=>b.onclick=()=>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.textContent=paused?'Mozgás folytatása':'Mozgás megállítása';motion.setAttribute('aria-pressed',String(paused));} motion.onclick=()=>{paused=!paused;updateMotion();if(paused){document.body.classList.remove('assembling');}restart();};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(resize,150);});document.addEventListener('visibilitychange',()=>{if(document.hidden)cancelAnimationFrame(raf);else restart();}); reduced.addEventListener('change',e=>{paused=e.matches;updateMotion();document.body.classList.remove('assembling');restart();}); function boot(){if(innerWidth<1||innerHeight<1){requestAnimationFrame(boot);return;}updateContent();updateRelease();document.body.classList.add('assembling');resize();revealCopy();} requestAnimationFrame(boot); </script> </body></html> " style="display: block; width: 100%; height: 100svh; min-height: 620px; border: 0px; background: rgb(245, 243, 237);" title="A szerveződés nyelvtana" width="100%">