Canyon Run

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Canyon//Vector</title>
<style>
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#120d1d;color:#fff;font-family:Arial,Helvetica,sans-serif}#stage{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 72%,#ff6b35 0,#492048 30%,#171026 72%)}canvas{display:block}#hud{position:fixed;inset:0;pointer-events:none;padding:28px 34px;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 2px 16px #000}.top{display:flex;justify-content:space-between;align-items:flex-start}.brand{font-size:11px;font-weight:bold;line-height:1.4;color:#ffcb91}.brand b{display:block;font-size:19px;letter-spacing:.21em;color:#fff}.scorebox{text-align:right;font-size:11px;color:#d7b7ef}.scorebox strong{display:block;font-size:31px;color:white;letter-spacing:.08em}.center{position:absolute;left:50%;top:34%;transform:translateX(-50%);text-align:center}.multlabel{font-size:9px;color:#ffcf93}.mult{font-weight:900;font-size:74px;line-height:.9;letter-spacing:-.08em;color:#fff;filter:drop-shadow(0 0 16px #ff5e31);transition:transform .15s}.mult.hit{transform:scale(1.3);color:#ffe2ac}.hint{margin-top:15px;font-size:10px;color:#f5c8b7}.bottom{position:absolute;bottom:28px;left:34px;right:34px;display:flex;align-items:flex-end;justify-content:space-between}.energyWrap{width:250px}.barlabel,.speedlabel{font-size:10px;margin-bottom:9px;color:#d5b0e4}.energy{height:7px;border:1px solid #ffb15e;background:#2d1a39;padding:1px;box-shadow:0 0 12px #e75247}.energy i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff4f47,#ffd35d);box-shadow:0 0 12px #ffae4c;transition:width .12s}.speed{width:250px;height:5px;background:#38283f;transform:skewX(-25deg);overflow:hidden}.speed i{display:block;width:40%;height:100%;background:#e7d7ff;box-shadow:0 0 12px #fff}.key{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);font-size:10px;color:#dcb4c8;text-align:center;line-height:1.7}.key span{border:1px solid #bd879b;padding:4px 8px;margin:0 3px;color:white}.turbo{position:absolute;top:110px;left:34px;width:150px}.turbo i{display:block;margin-top:7px;height:3px;width:0;background:#86e8ff;box-shadow:0 0 12px #7cdeff}.flash{position:fixed;inset:0;background:radial-gradient(circle,#fff0 45%,#ff5b301f 100%);pointer-events:none;opacity:0;transition:.15s}.flash.on{opacity:1}#dead{position:fixed;inset:0;display:none;place-items:center;background:#10091bdd;backdrop-filter:blur(8px);text-align:center;z-index:4}#dead.show{display:grid}.panel{border:1px solid #bf846b;padding:43px 58px;background:#1d1029cc;box-shadow:0 0 70px #fc573744}.eyebrow{font-size:10px;color:#ffb180;letter-spacing:.3em}.title{font-size:48px;font-weight:900;letter-spacing:.13em;margin:10px 0 28px}.stats{display:flex;gap:35px;justify-content:center;margin-bottom:30px}.stats div{font-size:10px;color:#be9bbb}.stats b{display:block;color:white;font-size:22px;margin-top:6px}button{pointer-events:auto;background:#f26c42;border:0;color:#fff;padding:14px 29px;font-weight:bold;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}button:hover{background:#ff9a62}
</style></head><body><div id="stage"></div><div id="hud"><div class="top"><div class="brand">PROCEDURAL FLIGHT<b>CANYON//VECTOR</b></div><div class="scorebox">Distance score<strong id="score">000000</strong></div></div><div class="turbo"><div class="barlabel">Turbo charge</div><i id="turbo"></i></div><div class="center"><div class="multlabel">RISK MULTIPLIER</div><div class="mult" id="mult">×1</div><div class="hint" id="status">STAY IN THE LIGHT</div></div><div class="bottom"><div class="energyWrap"><div class="barlabel">Energy // <span id="energyNum">100</span>%</div><div class="energy"><i id="energy"></i></div></div><div class="key"><span>←</span><span>→</span> BANK &nbsp; <span>↑</span><span>↓</span> PITCH<br><span>SPACE</span> TURBO</div><div><div class="speedlabel">VELOCITY <span id="speedNum">680</span> km/h</div><div class="speed"><i id="speed"></i></div></div></div></div><div class="flash" id="flash"></div><div id="dead"><div class="panel"><div class="eyebrow">SIGNAL LOST // CANYON COLLISION</div><div class="title">RUN ENDED</div><div class="stats"><div>FINAL SCORE<b id="finalScore">0</b></div><div>MAX SPEED<b id="maxSpeed">0</b></div><div>NEAR MISSES<b id="misses">0</b></div></div><button id="restart">RE-ENTER CANYON</button></div></div>
<script src="https://cdn.jsdelivr.net/npm/three@0.161.0/build/three.min.js"></script>
<script>
(()=>{const $=id=>document.getElementById(id);let scene,camera,renderer,craft,clock,alive=true,energy=100,score=0,mult=1,turbo=0,maxSpeed=0,near=0,velocity=56,roll=0,pitch=0;const chunks=[],objects=[],orbs=[],keys={};let audio,hum;
function sound(kind){try{audio||(audio=new AudioContext());let o=audio.createOscillator(),g=audio.createGain();o.connect(g).connect(audio.destination);o.type=kind==='orb'?'sine':'sawtooth';o.frequency.setValueAtTime(kind==='orb'?850:160,audio.currentTime);o.frequency.exponentialRampToValueAtTime(kind==='orb'?1300:75,audio.currentTime+.16);g.gain.setValueAtTime(.05,audio.currentTime);g.gain.exponentialRampToValueAtTime(.001,audio.currentTime+.22);o.start();o.stop(audio.currentTime+.25)}catch(e){}}
function mat(c,em=0){return new THREE.MeshStandardMaterial({color:c,flatShading:true,roughness:.78,metalness:.15,emissive:em?c:0,emissiveIntensity:em?1:0})}
function init(){scene=new THREE.Scene();scene.fog=new THREE.FogExp2(0x291334,.012);renderer=new THREE.WebGLRenderer({antialias:true,powerPreference:'high-performance'});renderer.setPixelRatio(Math.min(devicePixelRatio,1.7));renderer.setSize(innerWidth,innerHeight);renderer.shadowMap.enabled=true;renderer.shadowMap.type=THREE.PCFSoftShadowMap;$('stage').appendChild(renderer.domElement);camera=new THREE.PerspectiveCamera(68,innerWidth/innerHeight,.1,900);scene.add(new THREE.HemisphereLight(0xffbe94,0x20122d,1.5));let sun=new THREE.DirectionalLight(0xff9a55,3);sun.position.set(-60,70,20);sun.castShadow=true;scene.add(sun);let glow=new THREE.PointLight(0xd05fff,20,65);glow.position.set(0,11,4);scene.add(glow);let ground=new THREE.Mesh(new THREE.PlaneGeometry(500,4000),mat(0x311535));ground.rotation.x=-Math.PI/2;ground.position.y=-15;ground.receiveShadow=true;scene.add(ground);
 craft=new THREE.Group();let body=new THREE.Mesh(new THREE.ConeGeometry(1.15,5,5),mat(0xd9d9ec));body.rotation.x=Math.PI/2;body.castShadow=true;craft.add(body);let wing=new THREE.Mesh(new THREE.ConeGeometry(3.2,1.2,4),mat(0x7e5a9d));wing.scale.z=.18;wing.position.z=.4;craft.add(wing);let engine=new THREE.Mesh(new THREE.SphereGeometry(.5,8,6),mat(0xff603e,1));engine.position.z=2.2;craft.add(engine);craft.position.set(0,0,4);scene.add(craft);for(let z=0;z>-1000;z-=70) chunk(z);clock=new THREE.Clock();addEventListener('keydown',e=>{keys[e.code]=true;if(e.code==='Space')e.preventDefault()});addEventListener('keyup',e=>keys[e.code]=false);addEventListener('resize',resize);requestAnimationFrame(loop)}
function rock(x,y,z,s,h,c=0x7a3540){let m=new THREE.Mesh(new THREE.DodecahedronGeometry(s,0),mat(c));m.scale.y=h;m.position.set(x,y,z);m.rotation.set(Math.random(),Math.random(),Math.random());m.castShadow=true;m.userData={type:'rock',r:s*.65};scene.add(m);objects.push(m)}
function orb(x,y,z){let m=new THREE.Mesh(new THREE.OctahedronGeometry(.7,0),mat(0x55eaff,1));m.position.set(x,y,z);m.userData={type:'orb',r:1,spin:Math.random()*6};scene.add(m);orbs.push(m)}
function chunk(z){let d=1+score/8000;for(let i=0;i<5;i++){let zz=z-i*13-Math.random()*8, side=Math.random()>.5?1:-1;rock(side*(15+Math.random()*15),-5+Math.random()*10,zz,4+Math.random()*5,1+Math.random()*3,side>0?0x6e3150:0x8b403c)}if(Math.random()<.75){let x=(Math.random()-.5)*12;orb(x,(Math.random()-.5)*9,z-35);if(d>1.5&&Math.random()<.4)rock(x+(Math.random()>.5?3:-3),0,z-33,2.4,2,0x59406d)}chunks.push(z)}
function removeOld(){while(chunks.length&&chunks[0]>craft.position.z+100){chunks.shift()}for(let a of [objects,orbs])for(let i=a.length-1;i>=0;i--)if(a[i].position.z>craft.position.z+35){scene.remove(a[i]);a.splice(i,1)}}
function loop(){let dt=Math.min(clock.getDelta(),.04);if(alive){let steer=(keys.ArrowLeft||keys.KeyA?-1:0)+(keys.ArrowRight||keys.KeyD?1:0), lift=(keys.ArrowUp||keys.KeyW?1:0)+(keys.ArrowDown||keys.KeyS?-1:0);roll+=(steer*.9-roll)*dt*4;pitch+=(lift*.7-pitch)*dt*3;craft.position.x+=roll*velocity*dt*.22;craft.position.y+=pitch*velocity*dt*.17;craft.position.x=THREE.MathUtils.clamp(craft.position.x,-18,18);craft.position.y=THREE.MathUtils.clamp(craft.position.y,-10,12);let boosting=keys.Space&&turbo>1;velocity+=(boosting?30:0-velocity*.001)*dt;if(boosting){turbo-=22*dt;velocity=Math.min(104,velocity+36*dt)}else velocity+=((56+Math.min(score/800,23))-velocity)*dt*.4;craft.position.z-=velocity*dt;craft.rotation.z=-roll*.75;craft.rotation.x=pitch*.18;energy-=dt*(1.7+(boosting?.9:0));score+=velocity*dt*mult;maxSpeed=Math.max(maxSpeed,velocity);for(let o of [...objects]){let dx=o.position.x-craft.position.x,dy=o.position.y-craft.position.y,dz=o.position.z-craft.position.z,dist=Math.hypot(dx,dy,dz);if(dist<o.userData.r+1.15){end();break}if(dist<o.userData.r+4&&!o.userData.near&&Math.abs(dz)<3){o.userData.near=true;near++;mult=Math.min(9,mult+1);turbo=Math.min(100,turbo+13);$('status').textContent='NEAR MISS // TURBO GAIN';$('mult').classList.add('hit');$('flash').classList.add('on');sound('near');setTimeout(()=>{$('mult').classList.remove('hit');$('flash').classList.remove('on')},150)}}for(let i=orbs.length-1;i>=0;i--){let o=orbs[i];o.rotation.y+=dt*3;o.position.y+=Math.sin(clock.elapsedTime*4+o.userData.spin)*dt*.6;if(o.position.distanceTo(craft.position)<2.1){energy=Math.min(100,energy+28);turbo=Math.min(100,turbo+18);score+=500*mult;sound('orb');scene.remove(o);orbs.splice(i,1)}}if(energy<=0)end();while(chunks.length<15||chunks[chunks.length-1]>craft.position.z-700)chunk((chunks.length?chunks[chunks.length-1]:craft.position.z)-70);removeOld();let shake=(boosting?.18:0)+Math.min(near*.001,.05);camera.position.lerp(new THREE.Vector3(craft.position.x*.28+(Math.random()-.5)*shake,craft.position.y*.2+4+(Math.random()-.5)*shake,craft.position.z+13),dt*6);camera.fov+=(68+(boosting?13:0)-camera.fov)*dt*4;camera.updateProjectionMatrix();camera.lookAt(craft.position.x*.15,craft.position.y*.25,craft.position.z-34);updateHUD(boosting)}renderer.render(scene,camera);requestAnimationFrame(loop)}
function updateHUD(boost){$('score').textContent=Math.floor(score).toString().padStart(6,'0');$('energy').style.width=Math.max(0,energy)+'%';$('energyNum').textContent=Math.max(0,Math.ceil(energy));$('mult').textContent='×'+mult;$('turbo').style.width=turbo+'%';$('speedNum').textContent=Math.floor(velocity*12);$('speed').style.width=Math.min(100,velocity)+'%';if(!boost&&mult>1&&Math.random()<.006)mult--;}
function end(){if(!alive)return;alive=false;sound('near');$('finalScore').textContent=Math.floor(score);$('maxSpeed').textContent=Math.floor(maxSpeed*12)+' km/h';$('misses').textContent=near;$('dead').classList.add('show')}
function resize(){camera.aspect=innerWidth/innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth,innerHeight)}$('restart').onclick=()=>location.reload();
function fallback(){const c=document.createElement('canvas'),x=c.getContext('2d');$('stage').appendChild(c);let W,H,px=0,py=0,z=0,v=56,en=100,sc=0,mu=1,tu=0,ms=0,nm=0,live=true,last=performance.now(),rocks=[],stars=[];function rs(){W=c.width=innerWidth;H=c.height=innerHeight}rs();addEventListener('resize',rs);for(let i=0;i<130;i++)stars.push([Math.random(),Math.random(),Math.random()]);function spawn(){let lane=(Math.random()-.5)*1.65, depth=1.12;rocks.push({x:lane,y:(Math.random()-.5)*.75,z:depth,r:.07+Math.random()*.075,orb:Math.random()<.22,near:false});if(Math.random()<.25)rocks.push({x:-lane*.7,y:(Math.random()-.5)*.6,z:depth+.05,r:.05,orb:true,near:false})}for(let i=0;i<22;i++){spawn();rocks[rocks.length-1].z=Math.random()*1.25}function drawRock(o){let q=1/(Math.max(.015,o.z)+.08),sx=W/2+(o.x-px)*W*q*.52,sy=H*.54+(o.y-py)*H*q*.48,rr=Math.max(.5,o.r*W*q);if(o.orb){let g=x.createRadialGradient(sx,sy,0,sx,sy,rr*3);g.addColorStop(0,'#eaffff');g.addColorStop(.18,'#65edff');g.addColorStop(1,'#55cfff00');x.fillStyle=g;x.beginPath();x.arc(sx,sy,rr*3,0,7);x.fill();x.fillStyle='#b9ffff';x.beginPath();x.moveTo(sx,sy-rr);x.lineTo(sx+rr*.72,sy);x.lineTo(sx,sy+rr);x.lineTo(sx-rr*.72,sy);x.fill()}else{x.save();x.translate(sx,sy);x.rotate(o.x*3+o.z*3);x.fillStyle=o.x>0?'#8a3e49':'#633552';x.beginPath();for(let i=0;i<6;i++){let a=i*Math.PI/3;x.lineTo(Math.cos(a)*rr,Math.sin(a)*rr*1.4)}x.fill();x.fillStyle='#c6604a';x.globalAlpha=.4;x.beginPath();x.moveTo(0,-rr*1.4);x.lineTo(rr*.86,rr*.7);x.lineTo(0,rr*.25);x.fill();x.restore()}}function frame(t){let dt=Math.min(.04,(t-last)/1000);last=t;if(live){let s=(keys.ArrowLeft||keys.KeyA?-1:0)+(keys.ArrowRight||keys.KeyD?1:0),u=(keys.ArrowUp||keys.KeyW?1:0)+(keys.ArrowDown||keys.KeyS?-1:0),boost=keys.Space&&tu>1;px+=s*dt*1.15;py+=u*dt*.9;px=Math.max(-.92,Math.min(.92,px));py=Math.max(-.65,Math.min(.65,py));v+=(boost?38:0-v*.001)*dt;if(boost){tu-=24*dt;v=Math.min(108,v+30*dt)}else v+=(60+Math.min(sc/1200,25)-v)*dt*.35;z+=v*dt;en-=dt*(1.75+(boost?.8:0));sc+=v*dt*mu;ms=Math.max(ms,v);x.fillStyle='#190f28';x.fillRect(0,0,W,H);let sky=x.createLinearGradient(0,0,0,H);sky.addColorStop(0,'#1a102c');sky.addColorStop(.48,'#5c2845');sky.addColorStop(.68,'#ee6846');sky.addColorStop(.7,'#381936');sky.addColorStop(1,'#130d20');x.fillStyle=sky;x.fillRect(0,0,W,H);x.fillStyle='#ffb05d';x.beginPath();x.arc(W/2,H*.46,70,0,7);x.fill();for(let a of stars){x.fillStyle='rgba(255,220,190,'+a[2]+')';x.fillRect(a[0]*W,a[1]*H*.47,2,2)}let horizon=H*.54;x.fillStyle='#3b1934';x.beginPath();x.moveTo(0,H);x.lineTo(W*.35,horizon);x.lineTo(W*.65,horizon);x.lineTo(W,H);x.fill();x.strokeStyle='#a84548';x.lineWidth=2;for(let i=0;i<18;i++){let yy=horizon+i*i*1.1;x.beginPath();x.moveTo(W*.35-i*19,yy);x.lineTo(W*.65+i*19,yy);x.stroke()}if(Math.random()<dt*3)spawn();rocks.sort((a,b)=>b.z-a.z);for(let i=rocks.length-1;i>=0;i--){let o=rocks[i];o.z-=v*dt*.009;drawRock(o);let dx=o.x-px,dy=o.y-py,d=Math.hypot(dx,dy);if(o.z<.15&&o.z>-.03){if(o.orb&&d<.17){en=Math.min(100,en+28);tu=Math.min(100,tu+18);sc+=500*mu;sound('orb');rocks.splice(i,1);continue}if(sc>450&&!o.orb&&d<o.r+.09){live=false;end();break}if(!o.orb&&d<o.r+.22&&!o.near){o.near=true;nm++;near=nm;mu=Math.min(9,mu+1);tu=Math.min(100,tu+13);$('mult').classList.add('hit');$('status').textContent='NEAR MISS // TURBO GAIN';sound('near');setTimeout(()=>$('mult').classList.remove('hit'),150)}}if(o.z<-.12)rocks.splice(i,1)}x.save();x.translate(W/2+px*W*.1,H*.73+py*H*.08);x.rotate(-s*.35);x.fillStyle='#f3e5ef';x.beginPath();x.moveTo(0,-32);x.lineTo(25,28);x.lineTo(0,18);x.lineTo(-25,28);x.fill();x.fillStyle='#ff7647';x.fillRect(-6,25,12,17);x.restore();if(en<=0){live=false;end()}energy=en;score=sc;mult=mu;turbo=tu;velocity=v;maxSpeed=ms;updateHUD(boost)}requestAnimationFrame(frame)}requestAnimationFrame(frame)}
window.THREE?init():fallback();
})();
</script></body></html>
<!-- agent-meta {"model":"openai/gpt-5.6-terra-pro","provider":"openrouter","persona":"full","sessionId":"83e046bd-a062-4b87-a4f4-a94bcb158595","tokensIn":326114,"tokensOut":20867,"tokensTotal":346981,"cost":0.25169505000000003,"turns":8,"toolCalls":7,"failedToolCalls":0,"timestamp":"2026-08-01T05:37:40.048Z"} -->