GPT-6 Luna

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nightfall — Campfire</title>
<style>
  * { box-sizing: border-box; }
  html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #08111a; }
  body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f5e6ca; }
  canvas { display: block; width: 100%; height: 100%; }
  .vignette {
    position: fixed; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 52% 55%, transparent 35%, rgba(3, 8, 14, .25) 100%);
  }
  .topbar {
    position: fixed; top: 27px; left: 32px; display: flex; align-items: center; gap: 13px;
    pointer-events: none;
  }
  .mark {
    width: 36px; height: 36px; border: 1px solid rgba(255, 213, 150, .42);
    border-radius: 50%; display: grid; place-items: center; color: #ffc574;
    background: rgba(11, 18, 25, .52); font-size: 17px;
    box-shadow: 0 0 24px rgba(247, 129, 43, .12);
  }
  .eyebrow { color: #e9b978; font-size: 9px; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 3px; }
  h1 { font-size: 15px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; margin: 0; }
  .coordinates {
    position: fixed; right: 32px; top: 31px; color: rgba(222, 228, 224, .65);
    font-size: 9px; letter-spacing: .18em; text-transform: uppercase; pointer-events: none;
  }
  .footer {
    position: fixed; bottom: 25px; left: 32px; right: 32px; display: flex;
    justify-content: space-between; align-items: flex-end; pointer-events: none;
  }
  .caption { color: rgba(234, 228, 211, .68); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
  .hint { color: rgba(234, 228, 211, .57); font-size: 10px; letter-spacing: .08em; }
  .hint span { color: #f3c57e; }
  @media (max-width: 600px) {
    .topbar { top: 18px; left: 18px; }
    .coordinates { top: 23px; right: 18px; font-size: 8px; }
    .footer { left: 18px; right: 18px; bottom: 18px; }
    .caption { max-width: 45%; line-height: 1.6; }
    .hint { max-width: 48%; text-align: right; line-height: 1.6; }
  }
</style>
<script type="importmap">{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"}}</script>
</head>
<body>
<div class="topbar">
  <div class="mark">✦</div>
  <div><div class="eyebrow">Wilderness · 11:48 PM</div><h1>Nightfall</h1></div>
</div>
<div class="coordinates">N 47° 18′ &nbsp;·&nbsp; PINE RIDGE</div>
<div class="footer">
  <div class="caption">A quiet place beneath the pines</div>
  <div class="hint"><span>DRAG</span> to look around &nbsp;·&nbsp; <span>SCROLL</span> to explore</div>
</div>
<div class="vignette"></div>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x09131d);
scene.fog = new THREE.FogExp2(0x0b1720, 0.025);

const camera = new THREE.PerspectiveCamera(47, innerWidth / innerHeight, 0.1, 180);
camera.position.set(20, 15, 24);

const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: 'high-performance' });
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.28;
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 1.1, 0);
controls.enableDamping = true;
controls.dampingFactor = 0.055;
controls.minDistance = 9;
controls.maxDistance = 62;
controls.minPolarAngle = 0.18;
controls.maxPolarAngle = 1.43;
controls.update();

scene.add(new THREE.HemisphereLight(0x9aadc0, 0x172019, 0.48));
const moonlight = new THREE.DirectionalLight(0xa8c3e2, 1.05);
moonlight.position.set(-24, 32, -18);
moonlight.castShadow = true;
moonlight.shadow.mapSize.set(1024, 1024);
moonlight.shadow.camera.left = -42;
moonlight.shadow.camera.right = 42;
moonlight.shadow.camera.top = 42;
moonlight.shadow.camera.bottom = -42;
moonlight.shadow.camera.near = 1;
moonlight.shadow.camera.far = 90;
moonlight.shadow.bias = -0.00035;
moonlight.shadow.normalBias = 0.035;
scene.add(moonlight);

const ground = new THREE.Mesh(
  new THREE.PlaneGeometry(220, 220),
  new THREE.MeshStandardMaterial({ color: 0x17241d, roughness: 1, metalness: 0 })
);
ground.rotation.x = -Math.PI / 2;
ground.receiveShadow = true;
scene.add(ground);

const clearing = new THREE.Mesh(
  new THREE.CircleGeometry(12.8, 48),
  new THREE.MeshStandardMaterial({ color: 0x25291e, roughness: 1 })
);
clearing.rotation.x = -Math.PI / 2;
clearing.position.y = 0.018;
clearing.receiveShadow = true;
scene.add(clearing);

// A small seeded random generator keeps the forest arrangement pleasantly natural.
let seed = 91827;
function rand() {
  seed = (seed * 1664525 + 1013904223) >>> 0;
  return seed / 4294967296;
}
const pick = (a, b) => a + rand() * (b - a);

const trunkGeo = new THREE.CylinderGeometry(0.21, 0.34, 1, 6, 1);
const pineGeos = [
  new THREE.ConeGeometry(1, 1, 7, 1),
  new THREE.ConeGeometry(1, 1, 8, 1),
  new THREE.ConeGeometry(1, 1, 7, 1)
];
const barkMats = [0x392d25, 0x43352a, 0x302a24].map(c =>
  new THREE.MeshStandardMaterial({ color: c, roughness: 1 })
);
const pineMats = [0x183329, 0x1d3b30, 0x263e32, 0x20352d].map(c =>
  new THREE.MeshStandardMaterial({ color: c, roughness: 1, flatShading: true })
);

function makeTree(x, z, height, index) {
  const group = new THREE.Group();
  group.position.set(x, 0, z);
  group.rotation.y = pick(0, Math.PI * 2);
  const scale = height / 8;
  const trunk = new THREE.Mesh(trunkGeo, barkMats[index % barkMats.length]);
  trunk.scale.set(scale, height * 0.36, scale);
  trunk.position.y = height * 0.18;
  trunk.castShadow = true;
  trunk.receiveShadow = true;
  group.add(trunk);

  const tiers = [
    { y: 0.31, h: 0.43, r: 0.30 },
    { y: 0.49, h: 0.39, r: 0.235 },
    { y: 0.66, h: 0.35, r: 0.17 }
  ];
  for (let i = 0; i < tiers.length; i++) {
    const t = tiers[i];
    const mesh = new THREE.Mesh(pineGeos[(index + i) % pineGeos.length], pineMats[(index + i) % pineMats.length]);
    mesh.scale.set(height * t.r, height * t.h, height * t.r);
    mesh.position.y = height * t.y;
    mesh.rotation.y = pick(0, Math.PI);
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    group.add(mesh);
  }
  scene.add(group);
}

// A loose ring of trees leaves a broad, open firelit clearing.
for (let i = 0; i < 54; i++) {
  const angle = (i / 54) * Math.PI * 2 + pick(-0.13, 0.13);
  const radius = pick(14.2, 38);
  makeTree(Math.cos(angle) * radius, Math.sin(angle) * radius, pick(6.5, 11.5), i);
}

// Distant sparse silhouettes extend the woods beyond the first ring.
for (let i = 0; i < 17; i++) {
  const angle = pick(0, Math.PI * 2);
  const radius = pick(34, 49);
  makeTree(Math.cos(angle) * radius, Math.sin(angle) * radius, pick(7, 12), i + 54);
}

// Moon and quiet scattered stars.
const starPositions = [];
for (let i = 0; i < 360; i++) {
  starPositions.push(pick(-100, 100), pick(23, 83), pick(-100, 100));
}
const starGeometry = new THREE.BufferGeometry();
starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starPositions, 3));
const stars = new THREE.Points(starGeometry, new THREE.PointsMaterial({
  color: 0xc8d9eb, size: 0.31, sizeAttenuation: true, transparent: true, opacity: 0.78
}));
scene.add(stars);

const moon = new THREE.Mesh(
  new THREE.SphereGeometry(2.05, 12, 10),
  new THREE.MeshBasicMaterial({ color: 0xe4e4d3 })
);
moon.position.set(-30, 40, -43);
scene.add(moon);
const moonHalo = new THREE.Mesh(
  new THREE.SphereGeometry(2.85, 12, 10),
  new THREE.MeshBasicMaterial({ color: 0x9ebbd4, transparent: true, opacity: 0.075, side: THREE.BackSide, depthWrite: false })
);
moonHalo.position.copy(moon.position);
scene.add(moonHalo);

// Pebbles and a little forest-floor detail around the clearing.
const rockGeo = new THREE.DodecahedronGeometry(1, 0);
const rockMats = [0x4b4a3e, 0x5a5142, 0x3b443b, 0x625847].map(c =>
  new THREE.MeshStandardMaterial({ color: c, roughness: 1, flatShading: true })
);
for (let i = 0; i < 30; i++) {
  const a = pick(0, Math.PI * 2);
  const r = pick(5.8, 12.2);
  const rock = new THREE.Mesh(rockGeo, rockMats[i % rockMats.length]);
  rock.position.set(Math.cos(a) * r, pick(0.12, 0.3), Math.sin(a) * r);
  rock.scale.set(pick(0.18, 0.52), pick(0.13, 0.38), pick(0.2, 0.55));
  rock.rotation.set(pick(0, 2), pick(0, 3), pick(0, 2));
  rock.castShadow = true;
  rock.receiveShadow = true;
  scene.add(rock);
}

// Scattered low-poly ground tufts.
const grassGeo = new THREE.ConeGeometry(0.12, 0.5, 4, 1);
const grassMat = new THREE.MeshStandardMaterial({ color: 0x354332, flatShading: true, roughness: 1 });
for (let i = 0; i < 75; i++) {
  const a = pick(0, Math.PI * 2), r = pick(8, 16);
  const tuft = new THREE.Mesh(grassGeo, grassMat);
  tuft.position.set(Math.cos(a) * r, 0.22, Math.sin(a) * r);
  tuft.scale.set(pick(0.55, 1.25), pick(0.55, 1.2), pick(0.55, 1.2));
  tuft.rotation.y = pick(0, Math.PI);
  tuft.castShadow = true;
  scene.add(tuft);
}

// Charred logs arranged in a loose star around the heart of the fire.
const logGeo = new THREE.CylinderGeometry(0.22, 0.28, 2.35, 7, 1);
const logMat = new THREE.MeshStandardMaterial({ color: 0x30251e, roughness: 1, flatShading: true });
const logEnds = new THREE.MeshStandardMaterial({ color: 0x765039, roughness: 1, flatShading: true });
for (let i = 0; i < 4; i++) {
  const a = i * Math.PI / 2 + 0.35;
  const log = new THREE.Mesh(logGeo, [logMat, logEnds, logMat]);
  log.position.set(Math.cos(a) * 0.52, 0.28, Math.sin(a) * 0.52);
  log.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), new THREE.Vector3(Math.cos(a), 0.12, Math.sin(a)).normalize());
  log.castShadow = true;
  log.receiveShadow = true;
  scene.add(log);
}

// Ember bed: dark stones with warm glowing faces.
const emberMats = [
  new THREE.MeshStandardMaterial({ color: 0x602b18, emissive: 0xb73508, emissiveIntensity: 0.48, roughness: 1, flatShading: true }),
  new THREE.MeshStandardMaterial({ color: 0x43291d, emissive: 0x691d08, emissiveIntensity: 0.3, roughness: 1, flatShading: true })
];
for (let i = 0; i < 10; i++) {
  const a = i / 10 * Math.PI * 2;
  const stone = new THREE.Mesh(new THREE.DodecahedronGeometry(0.32, 0), emberMats[i % 2]);
  stone.position.set(Math.cos(a) * 0.92, 0.18, Math.sin(a) * 0.92);
  stone.scale.set(1.25, 0.62, 0.85);
  stone.rotation.y = a;
  stone.castShadow = true;
  scene.add(stone);
}

// Curved, faceted cone geometry gives the flame a slightly wind-swept silhouette.
function flameGeometry(radius, height, bend) {
  const geo = new THREE.ConeGeometry(radius, height, 7, 1);
  const p = geo.attributes.position;
  for (let i = 0; i < p.count; i++) {
    const t = (p.getY(i) + height / 2) / height;
    p.setY(i, p.getY(i) + height / 2);
    p.setX(i, p.getX(i) + bend * t * t);
    p.setZ(i, p.getZ(i) + Math.sin(t * Math.PI) * bend * 0.42);
  }
  geo.computeVertexNormals();
  return geo;
}
const flameMats = [
  new THREE.MeshStandardMaterial({ color: 0xf04a08, emissive: 0xb92300, emissiveIntensity: 1.15, roughness: 0.8, flatShading: true }),
  new THREE.MeshStandardMaterial({ color: 0xff7811, emissive: 0xe94500, emissiveIntensity: 1.35, roughness: 0.75, flatShading: true }),
  new THREE.MeshStandardMaterial({ color: 0xffbd36, emissive: 0xff6900, emissiveIntensity: 1.4, roughness: 0.7, flatShading: true }),
  new THREE.MeshStandardMaterial({ color: 0xffe08a, emissive: 0xff9a12, emissiveIntensity: 1.15, roughness: 0.65, flatShading: true })
];
const flames = [];
function addFlame(radius, height, x, z, material, bend, phase) {
  const mesh = new THREE.Mesh(flameGeometry(radius, height, bend), material);
  mesh.position.set(x, 0.28, z);
  mesh.rotation.y = phase;
  mesh.castShadow = false;
  scene.add(mesh);
  flames.push({ mesh, phase, height });
}
addFlame(0.72, 2.55, 0, 0, flameMats[0], 0.28, 0.15);
addFlame(0.54, 2.05, -0.18, 0.05, flameMats[1], -0.32, 2.0);
addFlame(0.43, 1.7, 0.2, -0.12, flameMats[2], 0.12, 4.1);
addFlame(0.26, 1.15, -0.08, -0.1, flameMats[3], -0.08, 1.2);

const fireLight = new THREE.PointLight(0xff8b38, 58, 21, 2);
fireLight.position.set(0, 2.15, 0);
fireLight.castShadow = true;
fireLight.shadow.mapSize.set(512, 512);
fireLight.shadow.camera.near = 0.15;
fireLight.shadow.camera.far = 24;
fireLight.shadow.bias = -0.0006;
fireLight.shadow.normalBias = 0.045;
fireLight.shadow.radius = 4;
scene.add(fireLight);

// Rising, glowing embers recycle through a tiny, lightweight particle system.
const sparks = [];
const sparkGeo = new THREE.TetrahedronGeometry(0.065, 0);
for (let i = 0; i < 26; i++) {
  const mat = new THREE.MeshBasicMaterial({
    color: i % 4 === 0 ? 0xffe18a : 0xff8b2b,
    transparent: true, opacity: 0.9
  });
  const mesh = new THREE.Mesh(sparkGeo, mat);
  scene.add(mesh);
  sparks.push({
    mesh, age: rand(), life: pick(1.1, 2.3),
    driftX: pick(-0.55, 0.55), driftZ: pick(-0.45, 0.45),
    size: pick(0.55, 1.25), phase: pick(0, Math.PI * 2)
  });
}

const clock = new THREE.Clock();
function animate() {
  requestAnimationFrame(animate);
  const time = clock.getElapsedTime();
  const dt = Math.min(clock.getDelta(), 0.04);

  for (const f of flames) {
    const wobble = 1 + 0.1 * Math.sin(time * 8.2 + f.phase) + 0.06 * Math.sin(time * 13.1 + f.phase * 2);
    f.mesh.scale.set(wobble, 0.92 + 0.13 * Math.sin(time * 7.4 + f.phase), wobble);
    f.mesh.rotation.y += dt * (0.28 + f.phase * 0.015);
  }
  fireLight.intensity = 54 + Math.sin(time * 11) * 7 + Math.sin(time * 19.4) * 4;
  fireLight.position.x = Math.sin(time * 2.5) * 0.08;
  fireLight.position.z = Math.cos(time * 2.1) * 0.06;

  for (const s of sparks) {
    s.age += dt / s.life;
    if (s.age >= 1) {
      s.age = 0;
      s.life = pick(1.1, 2.3);
      s.driftX = pick(-0.55, 0.55);
      s.driftZ = pick(-0.45, 0.45);
      s.size = pick(0.55, 1.25);
      s.phase = pick(0, Math.PI * 2);
    }
    const t = s.age;
    s.mesh.position.set(
      s.driftX * t + Math.sin(t * 8 + s.phase) * 0.12,
      0.65 + t * 3.8,
      s.driftZ * t + Math.cos(t * 6 + s.phase) * 0.1
    );
    const fade = Math.min(1, (1 - t) * 3.4);
    s.mesh.scale.setScalar(s.size * fade);
    s.mesh.material.opacity = Math.max(0, fade * 0.9);
    s.mesh.rotation.x += dt * 2;
    s.mesh.rotation.y += dt * 2.7;
  }

  controls.update();
  renderer.render(scene, camera);
}
animate();

addEventListener('resize', () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
  renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
});
</script>
</body>
</html>