Canyon Run

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SUNDRIFT // Canyon Racer</title>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<style>
/* ── css: base ── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:#120d25;color:#f6ecd8}body{font-family:'Barlow Condensed',sans-serif}#game{position:relative;width:100%;height:100%;overflow:hidden}#scene{position:absolute;inset:0}canvas{display:block;width:100%;height:100%}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,transparent 42%,rgba(10,5,22,.22) 75%,rgba(6,3,15,.78) 100%);mix-blend-mode:multiply}.topbar{position:absolute;top:30px;left:42px;right:42px;display:flex;justify-content:space-between;align-items:center;letter-spacing:2px}.brand{display:flex;gap:12px;align-items:center}.mark{font-size:25px;color:#ffbf55;text-shadow:0 0 18px #ff7c3c}.brand b{display:block;font-size:21px;letter-spacing:6px}.brand small,.label,.status,.hint,.energy,.boost,.eyebrow,.results span{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:1.5px;color:#d8c8bb}.brand small{font-size:8px;color:#ae88a4;letter-spacing:2px}.status{border:1px solid rgba(255,220,180,.2);padding:10px 13px}.status b{color:#ffd17a;margin-left:6px}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#ff744c;box-shadow:0 0 10px #ff744c;margin-right:7px}.hud{position:absolute;top:112px;left:44px;display:flex;gap:52px;align-items:flex-start}.metric{min-width:150px}.label{display:block;margin-bottom:6px;color:#bba7b4}.metric strong{font-size:35px;line-height:1;font-weight:600;letter-spacing:2px}.unit{color:#c79579;font:10px 'Space Mono',monospace;margin-left:4px}.speedline{height:3px;width:132px;background:rgba(255,255,255,.16);margin:5px 0 8px}.speedline i{display:block;height:100%;width:72%;background:#ff9a54;box-shadow:0 0 9px #ff7850}.speed strong{font-size:24px}.multi strong{color:#ffb45e;text-shadow:0 0 16px rgba(255,126,57,.6);transition:transform .2s}.energy,.boost{position:absolute;bottom:39px;display:flex;align-items:center;gap:12px}.energy{left:42px}.boost{right:42px}.energybar,.boostbar{width:145px;height:5px;background:rgba(255,255,255,.16);transform:skewX(-20deg)}.energybar i,.boostbar i{display:block;height:100%;width:82%;background:linear-gradient(90deg,#f47456,#ffd16b);box-shadow:0 0 12px #ff884c}.boostbar{width:112px}.boostbar i{width:34%;background:#cb8dff;box-shadow:0 0 12px #b66eff}.energy b{font:11px 'Space Mono';color:#ffd17a}.hint{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);opacity:.75}.gameover{position:absolute;inset:0;display:grid;place-items:center;background:rgba(12,6,27,.48);backdrop-filter:blur(8px)}.hidden{display:none}.overcard{width:min(470px,90vw);padding:38px;background:linear-gradient(145deg,rgba(40,22,64,.94),rgba(17,11,37,.96));border:1px solid rgba(255,180,100,.35);box-shadow:0 0 70px rgba(225,76,79,.2)}h1{font-size:57px;line-height:.84;margin:14px 0 30px;letter-spacing:1px}h1 em{font-style:normal;color:#ff9d65}.results{display:flex;gap:48px;margin-bottom:30px}.results span{display:block;margin-bottom:5px}.results b{font-size:28px}.results small{font-size:10px;color:#c79579}button{cursor:pointer;border:0;padding:14px 19px;background:#ff9a59;color:#201127;font:bold 12px 'Space Mono';letter-spacing:1px;box-shadow:0 0 20px rgba(255,133,74,.3)}button span{font-size:18px;margin-left:24px}@media(max-width:700px){.topbar{left:20px;right:20px;top:18px}.hud{left:20px;top:88px;gap:20px}.metric{min-width:90px}.metric strong{font-size:27px}.multi{display:none}.hint{font-size:8px;white-space:nowrap}.energy{left:20px;bottom:22px}.boost{right:20px;bottom:65px}.energybar{width:100px}.boostbar{width:85px}}
</style>
</head>
<body>
<main id="game"><div id="scene"></div><div class="vignette"></div><header class="topbar"><div class="brand"><span class="mark">✦</span><div><b>SUNDRIFT</b><small>PROCEDURAL CANYON RUN</small></div></div><div class="status"><span class="live-dot"></span> SECTOR <b id="sector">07</b></div></header><section class="hud"><div class="metric"><span class="label">DISTANCE</span><strong id="score">000000</strong><span class="unit">m</span></div><div class="metric speed"><span class="label">VELOCITY</span><div class="speedline"><i id="speedFill"></i></div><strong id="speed">840</strong><span class="unit">km/h</span></div><div class="metric multi"><span class="label">FLOW MULTIPLIER</span><strong id="multiplier">x1.0</strong></div></section><div class="energy"><span>ENERGY</span><div class="energybar"><i id="energyFill"></i></div><b id="energyText">82%</b></div><div class="boost"><span>TURBO</span><div class="boostbar"><i id="boostFill"></i></div></div><div id="hint" class="hint">A / D  STEER &nbsp;&nbsp; W / S  PITCH &nbsp;&nbsp; SPACE  TURBO</div><div id="gameover" class="gameover hidden"><div class="overcard"><span class="eyebrow">SIGNAL LOST // RUN ENDED</span><h1>DESCENT<br><em>TERMINATED</em></h1><div class="results"><div><span>FINAL SCORE</span><b id="finalScore">0</b></div><div><span>MAX VELOCITY</span><b id="maxSpeed">0 <small>km/h</small></b></div></div><button id="restart">RE-ENTER FLOW <span>↗</span></button></div></div></main>
<script>
(function () {
'use strict';
var __mods = {};
var __cache = {};
var __map = {};
function __require(id) {
  if (__cache[id]) return __cache[id].exports;
  var module = __cache[id] = { exports: {} };
  var factory = __mods[id];
  if (!factory) throw new Error("Module not found: " + id);
  factory(module.exports, function (spec) {
    var target = (__map[id] && __map[id][spec]) || spec;
    return __require(target);
  }, module);
  return module.exports;
}

// ── module: src/main.ts ──
__mods["src/main.ts"] = function (exports, require, module) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const T = THREE;
let renderer, scene, camera, craft, engine;
let obstacles = [];
let orbs = [];
let trail = [];
let running = true, score = 0, energy = 82, turbo = 34, mult = 1, speed = 38, maxSpeed = 840, last = 0, spawnZ = -40, shake = 0;
let px = 0, py = 0, vx = 0, vy = 0, boost = false;
let audio;
const $ = (id) => document.getElementById(id);
function mat(color, emissive = 0) { return new T.MeshStandardMaterial({ color, flatShading: true, emissive, emissiveIntensity: emissive ? 1.8 : 0, roughness: .78 }); }
function cube(x, y, z, sx, sy, sz, color, kind = 'wall') { const m = new T.Mesh(new T.BoxGeometry(sx, sy, sz), mat(color)); m.position.set(x, y, z); m.castShadow = true; scene.add(m); const o = { mesh: m, x, y, z, r: Math.max(sx, sy, sz) * .42, kind, active: true }; obstacles.push(o); return o; }
function orb(x, y, z) { const m = new T.Mesh(new T.IcosahedronGeometry(.65, 1), mat(0xffbd62, 0xff6b36)); m.position.set(x, y, z); scene.add(m); const o = { mesh: m, x, y, z, r: 1, kind: 'orb', active: true }; orbs.push(o); }
function chunk() {
    const z = spawnZ;
    const t = score / 3500;
    const width = Math.max(7.5, 13 - t * 3.4);
    const side = width + 2.5 + Math.sin(-z * .027) * 2;
    cube(-side, -1.5, z, 4, 9, 22, 0x542c4d);
    cube(side, -1.5, z + 3, 4, 9, 28, 0x4b284a);
    if (Math.random() < .7) {
        const x = (Math.random() > .5 ? 1 : -1) * (width * .48);
        cube(x, 2.2, z - 4, 1.7, 6, 2.7, 0xb35a58, 'monolith');
    }
    if (Math.random() < .65)
        orb((Math.random() * 2 - 1) * width * .63, (Math.random() * 2 - 1) * 2, z - 8);
    if (Math.random() < .35)
        orb((Math.random() * 2 - 1) * width * .35, 2.3, z - 18);
    spawnZ -= 22;
}
function makeCraft() { craft = new T.Group(); const body = new T.Mesh(new T.ConeGeometry(1.05, 4.8, 4), mat(0xd7e0df)); body.rotation.x = -Math.PI / 2; craft.add(body); const wing = new T.Mesh(new T.BoxGeometry(4.8, .12, .9), mat(0xff765d, 0x431b42)); wing.rotation.z = .02; craft.add(wing); const glow = new T.Mesh(new T.ConeGeometry(.35, 1.5, 8), mat(0xffb04e, 0xff5b25)); glow.rotation.x = Math.PI / 2; glow.position.z = 2.4; craft.add(glow); craft.position.set(0, 0, 4); scene.add(craft); }
function setup() {
    const host = $('scene');
    scene = new T.Scene();
    scene.background = new T.Color(0x170d2b);
    scene.fog = new T.Fog(0x170d2b, 18, 125);
    camera = new T.PerspectiveCamera(68, innerWidth / innerHeight, .1, 250);
    camera.position.set(0, 4.4, 12);
    renderer = new T.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
    renderer.setSize(innerWidth, innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.toneMapping = T.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1.25;
    host.appendChild(renderer.domElement);
    scene.add(new T.AmbientLight(0x9b6bb5, 1.5));
    const sun = new T.DirectionalLight(0xffa45c, 3.2);
    sun.position.set(-20, 24, 15);
    sun.castShadow = true;
    scene.add(sun);
    const fill = new T.PointLight(0x6e45cc, 18, 80);
    fill.position.set(0, 8, -35);
    scene.add(fill);
    makeCraft();
    for (let i = 0; i < 8; i++)
        chunk();
    for (let i = 0; i < 45; i++) {
        const g = new T.Mesh(new T.BoxGeometry(.07, .07, Math.random() * 2 + .4), mat(0xff9d5b, 0xff5a2b));
        g.position.set((Math.random() - .5) * 42, (Math.random() - .2) * 18, -Math.random() * 110);
        scene.add(g);
        trail.push(g);
    }
    addEvents();
    last = performance.now();
    requestAnimationFrame(loop);
}
function addEvents() { addEventListener('resize', () => { camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); renderer.setSize(innerWidth, innerHeight); }); addEventListener('keydown', e => { if (e.key === ' ') {
    boost = true;
    e.preventDefault();
} if (e.key.toLowerCase() === 'a' || e.key === 'ArrowLeft')
    vx = -1; if (e.key.toLowerCase() === 'd' || e.key === 'ArrowRight')
    vx = 1; if (e.key.toLowerCase() === 'w' || e.key === 'ArrowUp')
    vy = 1; if (e.key.toLowerCase() === 's' || e.key === 'ArrowDown')
    vy = -1; }); addEventListener('keyup', e => { if (e.key === ' ')
    boost = false; if (['a', 'd', 'ArrowLeft', 'ArrowRight'].includes(e.key))
    vx = 0; if (['w', 's', 'ArrowUp', 'ArrowDown'].includes(e.key))
    vy = 0; }); $('restart').onclick = () => location.reload(); }
function sound(type) { try {
    audio ?? (audio = new AudioContext());
    const o = audio.createOscillator(), g = audio.createGain();
    o.connect(g);
    g.connect(audio.destination);
    o.frequency.value = type === 'ping' ? 760 : type === 'near' ? 180 : 72;
    g.gain.setValueAtTime(.001, audio.currentTime);
    g.gain.exponentialRampToValueAtTime(type === 'engine' ? .025 : .12, audio.currentTime + .02);
    g.gain.exponentialRampToValueAtTime(.001, audio.currentTime + (type === 'engine' ? .18 : .3));
    o.start();
    o.stop(audio.currentTime + .32);
}
catch (e) { } }
function end() { running = false; $('finalScore').textContent = Math.floor(score).toString().padStart(6, '0'); $('maxSpeed').innerHTML = `${Math.floor(maxSpeed)} <small>km/h</small>`; $('gameover').classList.remove('hidden'); }
function loop(now) {
    const dt = Math.min((now - last) / 1000, .04);
    last = now;
    if (running) {
        const difficulty = Math.min(1, score / 6000);
        speed = Math.min(82, 38 + score * .004 + (boost ? 25 : 0));
        score += speed * dt * mult;
        energy -= dt * (3.1 + speed * .012);
        turbo = Math.min(100, turbo + dt * (1.4 + (speed > 58 ? 2 : 0)) - (boost ? dt * 14 : 0));
        if (boost && turbo <= 1)
            boost = false;
        maxSpeed = Math.max(maxSpeed, speed * 22.1);
        px += vx * dt * 15;
        py += vy * dt * 10;
        px = Math.max(-9, Math.min(9, px));
        py = Math.max(-4.3, Math.min(5, py));
        craft.position.x += (px - craft.position.x) * Math.min(1, dt * 8);
        craft.position.y += (py - craft.position.y) * Math.min(1, dt * 8);
        craft.rotation.z += (-vx * .42 - craft.rotation.z) * dt * 7;
        craft.rotation.x += (vy * .18 - craft.rotation.x) * dt * 5;
        for (const o of obstacles) {
            o.mesh.position.z += speed * dt;
            o.z = o.mesh.position.z;
            if (o.active && o.z > 0 && o.z < 8) {
                const dx = Math.abs(o.mesh.position.x - craft.position.x), dy = Math.abs(o.mesh.position.y - craft.position.y);
                if (dx < o.r + 1 && dy < o.r + 1) {
                    if (o.kind === 'wall' || o.kind === 'monolith') {
                        end();
                        break;
                    }
                }
                if (dx < o.r + 2.4 && dy < o.r + 2.4 && dx > o.r + .5) {
                    mult = Math.min(9, mult + dt * 1.8);
                    shake = .12;
                }
            }
            if (o.z > 25) {
                scene.remove(o.mesh);
                o.active = false;
            }
        }
        for (const o of orbs) {
            o.mesh.position.z += speed * dt;
            o.z = o.mesh.position.z;
            o.mesh.rotation.x += dt * 3;
            if (o.active && o.z > 1 && o.z < 8 && o.mesh.position.distanceTo(craft.position) < 2) {
                o.active = false;
                scene.remove(o.mesh);
                energy = Math.min(100, energy + 27);
                turbo = Math.min(100, turbo + 24);
                sound('ping');
            }
        }
        orbs = orbs.filter(o => o.active);
        obstacles = obstacles.filter(o => o.active);
        if (obstacles.length < 32) {
            const far = obstacles.reduce((m, o) => Math.min(m, o.mesh.position.z), -85);
            spawnZ = Math.min(spawnZ, far - 22);
            chunk();
        }
        for (const p of trail) {
            p.position.z += speed * dt * 1.5;
            if (p.position.z > 14)
                p.position.z = -110 - Math.random() * 35;
            p.position.x += (Math.random() - .5) * .1;
        }
        camera.fov += (boost ? 84 : 68 - camera.fov) * dt * 5;
        camera.updateProjectionMatrix();
        shake = Math.max(0, shake - dt);
        camera.position.x = (Math.random() - .5) * shake;
        camera.position.y = 4.4 + (Math.random() - .5) * shake;
        camera.lookAt(craft.position.x * .18, craft.position.y * .2, -20);
        if (energy <= 0)
            end();
        $('score').textContent = Math.floor(score).toString().padStart(6, '0');
        $('speed').textContent = Math.floor(speed * 22.1).toString();
        $('speedFill').style.width = Math.min(100, speed / 82 * 100) + '%';
        $('energyFill').style.width = Math.max(0, energy) + '%';
        $('energyText').textContent = Math.floor(energy) + '%';
        $('boostFill').style.width = turbo + '%';
        $('multiplier').textContent = 'x' + mult.toFixed(1);
        $('sector').textContent = String(7 + Math.floor(score / 900)).padStart(2, '0');
        if (Math.random() < .012)
            sound('engine');
    }
    renderer.render(scene, camera);
    requestAnimationFrame(loop);
}
setup();
};

// ── types: globals.d.ts ──
__mods["globals.d.ts"] = function (exports) {};

// ── entry ──
__require("src/main.ts");
})();
</script>
</body>
</html>
<!-- agent-meta {"model":"openai/gpt-5.6-luna-pro","provider":"openrouter","persona":"typescript","sessionId":"8c6e0559-f399-48e3-8d20-74d601fb3496","tokensIn":333118,"tokensOut":22718,"tokensTotal":355836,"turns":11,"toolCalls":18,"failedToolCalls":1,"timestamp":"2026-07-31T02:47:05.326Z"} -->