Chain scene: denser on phones
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
parent
bd1ccb379f
commit
03df35080d
1 changed files with 3 additions and 3 deletions
|
|
@ -98,7 +98,7 @@ section{padding-block:clamp(56px,8vw,96px)}
|
|||
.viz-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 20px;margin-bottom:12px}
|
||||
.viz-stats{display:flex;gap:18px;font-size:12px;color:var(--ash)}
|
||||
.viz-stats b{color:var(--bone);font-weight:500;font-variant-numeric:tabular-nums}
|
||||
#chain{display:block;width:100%;height:clamp(220px,36vw,340px);border-radius:12px;background:var(--obsidian)}
|
||||
#chain{display:block;width:100%;height:clamp(200px,36vw,340px);border-radius:12px;background:var(--obsidian)}
|
||||
.dag{padding:clamp(18px,3vw,32px);overflow:hidden}
|
||||
.dag-rows{display:flex;flex-direction:column;gap:var(--dg,14px);--bs:34px;--dg:14px}
|
||||
@media (max-width:640px){.dag-rows{--bs:26px;--dg:9px}}
|
||||
|
|
@ -474,7 +474,7 @@ footer .wrap{padding-block:48px 32px}
|
|||
(function(){
|
||||
var c=document.getElementById('chain'),x=c.getContext('2d'),W,H,blocks=[],sparks=[],ripples=[],n=0,proven=0,locked=0,lanes=5,S,GAP,speed;
|
||||
var cb=document.getElementById('c-blocks'),cp=document.getElementById('c-proven'),cl=document.getElementById('c-locked');
|
||||
function size(){W=c.clientWidth;H=c.clientHeight;c.width=W*dpr;c.height=H*dpr;x.setTransform(dpr,0,0,dpr,0,0);S=W<600?18:26;GAP=S*3.1;speed=GAP/1000;}
|
||||
function size(){W=c.clientWidth;H=c.clientHeight;c.width=W*dpr;c.height=H*dpr;x.setTransform(dpr,0,0,dpr,0,0);S=W<600?18:26;GAP=W<600?S*2.5:S*3.1;speed=GAP/1000;}
|
||||
size();window.addEventListener('resize',size);
|
||||
function laneY(l){return H*0.14+l*(H*0.72/(lanes-1));}
|
||||
function spawn(px){n++;var lane=Math.floor(Math.random()*lanes);var b={id:n,x:px,y:laneY(lane),born:performance.now(),shards:[0,0,0,0],claimed:[false,false,false,false],state:'mined',cp:n%6===0,parents:[],glow:0,flash:0};
|
||||
|
|
@ -515,7 +515,7 @@ footer .wrap{padding-block:48px 32px}
|
|||
ripples.forEach(function(r){x.strokeStyle='rgba(242,84,27,'+r.a+')';x.lineWidth=1.5;x.beginPath();x.arc(r.x,r.y,r.r,0,Math.PI*2);x.stroke();});
|
||||
if(!reduce)requestAnimationFrame(frame);
|
||||
}
|
||||
for(var i=0;i<Math.ceil(W/(S*3.1))+1;i++){spawn(W-i*S*3.1);var b=blocks[blocks.length-1];b.born=performance.now()-i*1000;if(i>5){b.state='proven';b.shards=[1,1,1,1];b.claimed=[true,true,true,true];proven++;if(b.cp&&i>5){b.locked=true;locked++;}}else if(i>1){b.state='proving';b.claimed=[true,true,false,false];b.shards=[1,1,0,0];}}
|
||||
for(var i=0;i<Math.ceil(W/GAP)+1;i++){spawn(W-i*GAP);var b=blocks[blocks.length-1];b.born=performance.now()-i*1000;if(i>5){b.state='proven';b.shards=[1,1,1,1];b.claimed=[true,true,true,true];proven++;if(b.cp&&i>5){b.locked=true;locked++;}}else if(i>1){b.state='proving';b.claimed=[true,true,false,false];b.shards=[1,1,0,0];}}
|
||||
cb.textContent=n;cp.textContent=proven;cl.textContent=locked;
|
||||
requestAnimationFrame(frame);
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in a new issue