Canyon Run

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Canyon // Sunfall</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
*{box-sizing:border-box}html,body{margin:0;overflow:hidden;background:#120d25;color:#ffe3b0;font-family:Arial,sans-serif}canvas{display:block}#ui{position:fixed;inset:0;pointer-events:none;text-transform:uppercase;letter-spacing:.16em}#brand{position:absolute;top:26px;left:31px;font-size:11px;color:#ffc66b;opacity:.9}#brand b{color:#fff2d4;font-size:15px;letter-spacing:.26em}#score{position:absolute;top:59px;left:30px;font-size:28px;font-weight:200;color:#fff5df;text-shadow:0 0 16px #ff972d}#multi{position:absolute;right:33px;top:30px;text-align:right;font-size:10px;color:#d9b8ff}.x{font-size:46px;line-height:44px;color:#fff2d1;font-weight:800;letter-spacing:-.04em;transition:transform .13s,color .13s}.pulse{transform:scale(1.25);color:#fff!important;text-shadow:0 0 22px #ff922c}#speed{position:absolute;bottom:28px;left:30px;width:230px;font-size:10px;color:#d8b3ff}.line{height:3px;background:#473358;margin-top:10px;overflow:hidden}.fill{height:100%;width:45%;background:linear-gradient(90deg,#a984ff,#ffbd4a);box-shadow:0 0 12px #ff9f37;transition:width .1s}#energy{position:absolute;bottom:28px;right:32px;width:180px;text-align:right;font-size:10px;color:#ffd98c}.energyline{height:5px;margin-top:9px;border:1px solid #61436a;padding:1px}.energyfill{height:100%;background:linear-gradient(90deg,#ff632e,#ffe06e);box-shadow:0 0 13px #ff7c2b;width:100%;transition:width .15s}#hint{position:absolute;bottom:85px;left:50%;transform:translateX(-50%);font-size:10px;color:#f0b7a4;text-align:center;line-height:1.8;opacity:.7}.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(13,5,29,.52) 100%)}#flash{position:absolute;inset:0;background:#ffd48b;opacity:0;mix-blend-mode:screen}.scan{position:absolute;inset:0;opacity:.08;background:repeating-linear-gradient(0deg,transparent 0 3px,#d0a7ff 4px);mix-blend-mode:overlay}#start,#over{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(12,6,26,.68);backdrop-filter:blur(4px);z-index:3}#panel{text-align:center;border-top:1px solid #f2aa5c;border-bottom:1px solid #f2aa5c;padding:32px 58px;background:linear-gradient(90deg,transparent,rgba(80,33,72,.42),transparent)}h1{margin:0;font-size:48px;letter-spacing:.24em;font-weight:800;color:#fff0ca;text-shadow:0 0 28px #f06a31}h1 span{color:#ca9bff}p{font-size:11px;line-height:2;color:#f4caa1}button{pointer-events:auto;border:1px solid #ffd17c;background:transparent;color:#ffe9bc;padding:13px 28px;letter-spacing:.2em;text-transform:uppercase;font-weight:bold;cursor:pointer;transition:.2s}button:hover{background:#ffbd4a;color:#271027;box-shadow:0 0 24px #ff9b3d}.stats{display:flex;gap:35px;justify-content:center;margin:18px 0}.stats div{font-size:10px;color:#d9b8ff}.stats b{display:block;font-size:24px;color:#ffe5b0;margin-top:5px}#over{display:none}.loading{position:fixed;inset:0;z-index:10;background:#120d25;display:flex;align-items:center;justify-content:center;color:#ffcf83;letter-spacing:.3em;font-size:12px}
</style></head><body>
<div id="loading" class="loading">CALIBRATING FLIGHT SYSTEM</div><div id="ui"><div id="brand"><b>SUNFALL</b><br>PROCEDURAL CANYON RUN</div><div id="score">000000</div><div id="multi">RISK MULTIPLIER<div class="x" id="mult">x1.0</div></div><div id="speed">VELOCITY <span id="speednum">620</span><div class="line"><div class="fill" id="speedfill"></div></div></div><div id="energy">ENERGY <span id="energynum">100</span>%<div class="energyline"><div class="energyfill" id="energyfill"></div></div></div><div id="hint">← → / A D &nbsp; STEER + BANK &nbsp; • &nbsp; ↑ ↓ / W S &nbsp; PITCH<br>HOLD SPACE TO ENGAGE TURBO</div><div class="vignette"></div><div class="scan"></div><div id="flash"></div></div>
<div id="start"><div id="panel"><h1>SUN<span>FALL</span></h1><p>FLY THE LAST LIGHT THROUGH AN ENDLESS CANYON<br>SKIM THE STONE. CHASE THE CHARGE. OUTRUN THE DARK.</p><button id="launch">BEGIN RUN</button></div></div>
<div id="over"><div id="panel"><h1>RUN <span>ENDED</span></h1><div class="stats"><div>FINAL SCORE<b id="finalscore">0</b></div><div>MAX VELOCITY<b id="finalspeed">0</b></div><div>NEAR MISSES<b id="finalnear">0</b></div></div><button id="restart">RE-ENTER CANYON</button></div></div>
<script>
(()=>{if(!window.THREE){document.getElementById('loading').textContent='THREE.JS SIGNAL LOST — RECONNECT';return}const $=id=>document.getElementById(id), scene=new THREE.Scene(),camera=new THREE.PerspectiveCamera(72,innerWidth/innerHeight,.1,1300),renderer=new THREE.WebGLRenderer({antialias:true,powerPreference:'high-performance'});renderer.setSize(innerWidth,innerHeight);renderer.setPixelRatio(Math.min(devicePixelRatio,2));renderer.setClearColor(0x170d2d);renderer.shadowMap.enabled=true;renderer.shadowMap.type=THREE.PCFSoftShadowMap;document.body.insertBefore(renderer.domElement,$('ui'));
scene.fog=new THREE.FogExp2(0x27133d,.006);const world=new THREE.Group();scene.add(world);const sun=new THREE.Mesh(new THREE.SphereGeometry(35,24,16),new THREE.MeshBasicMaterial({color:0xff9a38}));sun.position.set(-80,38,-390);scene.add(sun);const light=new THREE.DirectionalLight(0xffa34c,2.4);light.position.set(-80,95,-50);light.castShadow=true;light.shadow.mapSize.set(1024,1024);scene.add(light);scene.add(new THREE.HemisphereLight(0xb87cff,0x26112c,1.6));
const craft=new THREE.Group(),bodyMat=new THREE.MeshStandardMaterial({color:0xdac7d6,metalness:.82,roughness:.25,flatShading:true}),engineMat=new THREE.MeshBasicMaterial({color:0xff7b2d});let body=new THREE.Mesh(new THREE.ConeGeometry(1.05,4.2,4),bodyMat);body.rotation.x=-Math.PI/2;body.scale.set(1,.42,1);craft.add(body);const wing=new THREE.Mesh(new THREE.ConeGeometry(2.7,1.1,4),bodyMat);wing.rotation.x=-Math.PI/2;wing.scale.set(1,.12,.4);wing.position.z=.25;craft.add(wing);const eng=new THREE.PointLight(0xff5d29,3,20);eng.position.z=2;craft.add(eng);scene.add(craft);
const keys={};addEventListener('keydown',e=>{keys[e.code]=true;if(e.code==='Space')e.preventDefault()});addEventListener('keyup',e=>keys[e.code]=false);let audio,osc,gain;function sound(){if(audio)return;audio=new AudioContext();osc=audio.createOscillator();gain=audio.createGain();osc.type='sawtooth';osc.frequency.value=55;gain.gain.value=.018;osc.connect(gain).connect(audio.destination);osc.start()}function beep(f,d=.12){if(!audio)return;let o=audio.createOscillator(),g=audio.createGain();o.frequency.value=f;g.gain.setValueAtTime(.08,audio.currentTime);g.gain.exponentialRampToValueAtTime(.001,audio.currentTime+d);o.connect(g).connect(audio.destination);o.start();o.stop(audio.currentTime+d)}
let chunks=[],objects=[],dust=[],running=false,score=0,energy=100,speed=62,maxSpeed=0,mult=1,near=0,lastZ=0,px=0,py=3,vx=0,vy=0,turbo=0,time=0;const rockMats=[0x6e3150,0x8f3c4b,0x582a61,0xaa5043].map(c=>new THREE.MeshStandardMaterial({color:c,flatShading:true,roughness:.86,metalness:.05}));const orbMat=new THREE.MeshBasicMaterial({color:0xffe36a});
function rock(x,y,z,s,type='wall'){let geo=type==='mono'?new THREE.CylinderGeometry(s*.45,s*.75,s*3,6,1):new THREE.DodecahedronGeometry(s,0);let m=new THREE.Mesh(geo,rockMats[(Math.random()*rockMats.length)|0]);m.position.set(x,y,z);m.rotation.set(Math.random(),Math.random(),Math.random());m.castShadow=true;m.userData={kind:'rock',radius:s*.8,checked:false};world.add(m);objects.push(m)}function orb(x,y,z){let g=new THREE.Group(),a=new THREE.Mesh(new THREE.OctahedronGeometry(.58,0),orbMat),l=new THREE.PointLight(0xffb13a,1.8,15);g.add(a,l);g.position.set(x,y,z);g.userData={kind:'orb',radius:1};world.add(g);objects.push(g)}
function chunk(z){let diff=1+score/8500, center=Math.sin(z*.007)*10+Math.sin(z*.019)*6;for(let i=0;i<7;i++){let zz=z-i*8-Math.random()*4,gap=15-Math.min(5,diff*1.2);rock(center-gap-Math.random()*4,-1+Math.random()*8,zz,5+Math.random()*7);rock(center+gap+Math.random()*4,-1+Math.random()*8,zz,5+Math.random()*7)}if(Math.random()<.75){let side=(Math.random()<.5?-1:1),x=center+side*(4+Math.random()*6);rock(x,3+Math.random()*5,z-25,2.5+Math.random()*2,'mono')}if(Math.random()<.8)orb(center+(Math.random()-.5)*10,2+Math.random()*7,z-28);chunks.push(z)}
function reset(){objects.forEach(o=>world.remove(o));chunks=[];objects=[];score=0;energy=100;speed=62;maxSpeed=0;mult=1;near=0;turbo=0;px=0;py=3;vx=vy=0;lastZ=0;for(let z=-30;z>-360;z-=45)chunk(z);running=true;$('over').style.display='none';$('start').style.display='none';sound();audio.resume();}
function finish(){running=false;$('finalscore').textContent=Math.floor(score).toLocaleString();$('finalspeed').textContent=Math.floor(maxSpeed*10);$('finalnear').textContent=near;$('over').style.display='flex';beep(70,.5)}$('launch').onclick=reset;$('restart').onclick=reset;
for(let i=0;i<140;i++){let p=new THREE.Mesh(new THREE.BoxGeometry(.06,.06,Math.random()*1.8+.2),new THREE.MeshBasicMaterial({color:Math.random()>.5?0xff9651:0xc69aff,transparent:true,opacity:.65}));p.position.set((Math.random()-.5)*70,(Math.random()-.5)*35,-Math.random()*230);world.add(p);dust.push(p)}
function loop(){requestAnimationFrame(loop);let dt=Math.min(.035,(performance.now()-(loop.last||performance.now()))/1000);loop.last=performance.now();time+=dt;if(running){let steer=(keys.ArrowLeft||keys.KeyA?-1:0)+(keys.ArrowRight||keys.KeyD?1:0),pitch=(keys.ArrowUp||keys.KeyW?1:0)-(keys.ArrowDown||keys.KeyS?1:0),boost=keys.Space&&turbo>4;vx+=(steer*29-vx*2.8)*dt;vy+=(pitch*18-vy*2.8)*dt;px+=vx*dt;py=THREE.MathUtils.clamp(py+vy*dt,-2,13);if(boost){turbo-=18*dt;speed+=26*dt}else speed+=(62+Math.min(31,score/7000)-speed)*dt*.7;turbo=Math.min(100,turbo+dt*(Math.abs(vx)<3?3:.5));energy-=dt*(1.35+(boost?.7:0));score+=speed*dt*mult*1.6;maxSpeed=Math.max(maxSpeed,speed);craft.position.set(px,py,0);craft.rotation.z=THREE.MathUtils.lerp(craft.rotation.z,-vx*.035,.12);craft.rotation.x=THREE.MathUtils.lerp(craft.rotation.x,vy*.02,.1);body.rotation.z=Math.sin(time*13)*.03;camera.fov=THREE.MathUtils.lerp(camera.fov,boost?91:72,.09);camera.updateProjectionMatrix();camera.position.lerp(new THREE.Vector3(px*.22,py+5.2,14),.08);camera.position.x+=(Math.random()-.5)*(boost?.12:.025);camera.lookAt(px*.4,py, -31);
let dz=speed*dt;world.position.z+=dz;lastZ+=dz;if(lastZ>45){chunk(-360-world.position.z);lastZ=0}objects=objects.filter(o=>{let wz=o.position.z+world.position.z,dx=o.position.x-px,dy=o.position.y-py,d=Math.hypot(dx,dy);if(wz>18){world.remove(o);return false}if(wz>-5&&wz<6){if(o.userData.kind==='orb'&&d<2){energy=Math.min(100,energy+26);turbo=Math.min(100,turbo+19);score+=400*mult;beep(880,.12);world.remove(o);return false}if(o.userData.kind==='rock'){let r=o.userData.radius;if(d<r+1){finish()}else if(d<r+4&&!o.userData.checked){o.userData.checked=true;mult=Math.min(9.9,mult+.25);near++;score+=150*mult;beep(230,.1);$('mult').classList.add('pulse');setTimeout(()=>$('mult').classList.remove('pulse'),150)}}}return true});if(energy<=0)finish();dust.forEach(p=>{p.position.z+=dz*(1.3+speed/80);if(p.position.z>18){p.position.set(px+(Math.random()-.5)*55,py+(Math.random()-.5)*28,-220-Math.random()*90)}});if(audio){osc.frequency.setTargetAtTime(42+speed*1.5+(boost?65:0),audio.currentTime,.08);gain.gain.setTargetAtTime(.014+(boost?.016:0),audio.currentTime,.1)}$('score').textContent=Math.floor(score).toString().padStart(6,'0');$('mult').textContent='x'+mult.toFixed(1);$('speednum').textContent=Math.floor(speed*10);$('speedfill').style.width=Math.min(100,speed/100*100)+'%';$('energynum').textContent=Math.max(0,Math.ceil(energy));$('energyfill').style.width=Math.max(0,energy)+'%';$('flash').style.opacity=boost?.06:0}renderer.render(scene,camera)}loop();addEventListener('resize',()=>{camera.aspect=innerWidth/innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth,innerHeight)});$('loading').remove();})();
</script></body></html>
<!-- agent-meta {"model":"openai/gpt-5.6-terra","provider":"openrouter","persona":"full","sessionId":"b5ccd00d-0d3e-4ca3-bcc6-6413dd92919f","tokensIn":17477,"tokensOut":4142,"tokensTotal":21619,"turns":3,"toolCalls":2,"failedToolCalls":0,"timestamp":"2026-07-31T19:24:49.902Z"} -->