← Back to Articles Directory
AI Models • September 23, 2026 • 3 min read

GPT-6 Luna Browser Coding Test: Aetherfall, Pelagic & Glass Crane

Three supplied outputs span a low-poly wizard adventure, a procedural 3D globe, and a glass origami crane.

Mohid Mirza

Co-Founder & Lead Programmer of AcceleratedLogic AI

This gallery collects three browser artifacts supplied as GPT-6 Luna outputs: Aetherfall — The Shards of Dawn, Pelagic — A Living Globe, and a glass-sphere origami crane. It is a small creative-coding sample, not a general coding benchmark or a model ranking.
I kept the supplied game, globe, and SVG artwork intact. Aetherfall and Pelagic load Three.js r128 from cdnjs; the crane is a standalone SVG displayed by a small HTML wrapper. The 3D scenes therefore need WebGL and an internet connection for the library. The exact prompts, generation settings, and repeat-run results were not included, so I make no claims about latency, reliability, or a controlled comparison with another model.

1. Aetherfall: The Shards of Dawn

Aetherfall is a low-poly floating-island adventure built around a small wizard character and a game HUD. Its opening panel frames the scene as a quest, while the in-game overlay gives the player movement and action controls. The single-file implementation builds its world and characters in Three.js rather than loading a pre-rendered video or a set of raster screenshots.
The useful test here is whether the scene, controls, and game-state UI come together in one browser document. The source file is about 30 KB and imports Three.js r128 from cdnjs, so this is best treated as a self-contained demo with a CDN dependency rather than an offline-ready game package.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="theme-color" content="#b2d8e8">
<title>Aetherfall — The Shards of Dawn</title>
<style>
  :root{--ink:#18334b;--soft:#587487;--glass:rgba(249,253,255,.78);--line:rgba(53,93,123,.16);--pink:#ff8792;--mint:#65dbc0;--gold:#ffe19a}
  *{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#badbe9;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;touch-action:none}#game{position:fixed;inset:0}#game canvas{display:block;width:100%;height:100%}
  .vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 24%,transparent 70%,rgba(25,54,74,.12))}.hud{position:fixed;inset:0;pointer-events:none;padding:clamp(15px,3vw,34px);display:flex;flex-direction:column;justify-content:space-between}.topline{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.brand{display:flex;align-items:center;gap:11px}.sigil{width:37px;height:37px;border-radius:13px;background:rgba(255,255,255,.61);border:1px solid rgba(255,255,255,.8);display:grid;place-items:center;color:#9a6abc;font-size:19px;box-shadow:0 6px 24px rgba(79,116,139,.12)}.brand-copy strong{display:block;font:600 12px Georgia,serif;letter-spacing:.16em;text-transform:uppercase}.brand-copy span{display:block;color:#658096;font-size:9px;letter-spacing:.18em;text-transform:uppercase;margin-top:3px}.hud-cards{display:flex;gap:10px}.card{background:var(--glass);border:1px solid rgba(255,255,255,.83);box-shadow:0 8px 30px rgba(44,83,109,.1);backdrop-filter:blur(14px);border-radius:14px;padding:11px 14px;min-width:142px}.card-label{font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:#6d879a}.crystal-row{display:flex;align-items:center;gap:8px;margin-top:5px}.crystal-icon{color:#9466c3;font-size:17px;text-shadow:0 0 11px #d9aaff}.crystal-count{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}.crystal-count small{font-size:11px;color:#7790a2;font-weight:500}.health-card{min-width:176px}.health-head{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-size:14px;font-weight:600}.health-head span:last-child{font-size:10px;color:#638094;font-weight:500}.health-track{height:6px;background:rgba(45,86,112,.12);border-radius:10px;overflow:hidden;margin-top:8px}.health-fill{height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,#61dabc,#a8e7bd);transition:width .25s,background .25s}.objective{position:absolute;left:50%;top:clamp(20px,3vw,35px);transform:translateX(-50%);text-align:center;background:rgba(250,253,255,.57);border:1px solid rgba(255,255,255,.65);border-radius:999px;padding:9px 17px;color:#43647b;font-size:10px;letter-spacing:.08em;white-space:nowrap;backdrop-filter:blur(12px)}.objective b{color:#784da0;font-weight:650}.bottomline{display:flex;align-items:flex-end;justify-content:space-between}.tip{font-size:10px;color:#506e81;line-height:1.6;background:rgba(248,252,255,.52);padding:9px 12px;border-radius:11px;border:1px solid rgba(255,255,255,.55)}.keys{display:flex;gap:4px;align-items:center}.key{font-size:9px;color:#527084;border:1px solid rgba(55,97,123,.24);background:rgba(255,255,255,.65);border-radius:5px;padding:2px 5px;min-width:19px;text-align:center}.toast{position:fixed;left:50%;top:24%;transform:translate(-50%,-8px);opacity:0;z-index:6;padding:10px 17px;border-radius:99px;background:rgba(19,44,60,.8);color:#f4fcff;font-size:11px;letter-spacing:.07em;transition:opacity .25s,transform .25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
  .overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:linear-gradient(135deg,rgba(92,130,157,.27),rgba(232,202,222,.28));backdrop-filter:blur(7px);transition:opacity .35s,visibility .35s}.overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.modal{width:min(460px,calc(100vw - 32px));padding:clamp(27px,5vw,43px);text-align:center;border-radius:25px;background:rgba(250,253,255,.91);border:1px solid rgba(255,255,255,.9);box-shadow:0 28px 100px rgba(44,75,100,.25);position:relative;overflow:hidden}.modal:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(213,175,237,.33),transparent 69%);top:-120px;left:calc(50% - 110px)}.modal-kicker{position:relative;color:#9370b0;font-size:9px;letter-spacing:.22em;text-transform:uppercase}.modal h1{position:relative;margin:12px 0 7px;font:400 clamp(35px,8vw,52px)/.98 Georgia,serif;letter-spacing:-.035em;color:#26465b}.modal p{position:relative;margin:15px auto 21px;max-width:335px;color:#688194;font-size:12px;line-height:1.7}.button{position:relative;border:0;border-radius:999px;padding:13px 26px;background:linear-gradient(135deg,#9f76bd,#7399c4);color:white;font:600 11px system-ui;letter-spacing:.13em;text-transform:uppercase;box-shadow:0 8px 21px rgba(112,113,171,.28);cursor:pointer}.button:hover{filter:brightness(1.06);transform:translateY(-1px)}.modal-note{position:relative;margin-top:17px;color:#91a5b4;font-size:9px;letter-spacing:.04em}.mobile-controls{display:none;position:fixed;bottom:21px;left:17px;right:17px;justify-content:space-between;align-items:flex-end;pointer-events:none;z-index:4}.pad{display:grid;grid-template-columns:repeat(3,43px);grid-template-rows:repeat(2,43px);gap:5px;pointer-events:auto}.touch-btn{display:grid;place-items:center;border:1px solid rgba(255,255,255,.7);border-radius:13px;background:rgba(249,253,255,.47);color:#42657b;font-size:16px;backdrop-filter:blur(9px);user-select:none}.touch-btn:active,.touch-btn.down{background:rgba(226,211,240,.85)}.jump-btn{width:58px;height:58px;border-radius:50%;pointer-events:auto;font-size:10px;font-weight:650;letter-spacing:.08em}.up{grid-column:2}.left{grid-column:1;grid-row:2}.down{grid-column:2;grid-row:2}.right{grid-column:3;grid-row:2}
  @media(max-width:680px){.hud{padding:13px}.brand{gap:7px}.sigil{width:31px;height:31px;border-radius:10px}.brand-copy strong{font-size:10px}.brand-copy span{font-size:7px}.topline{align-items:flex-start}.hud-cards{gap:6px}.card{min-width:84px;padding:8px 9px;border-radius:12px}.health-card{min-width:115px}.card-label{font-size:7px}.health-head{font-size:12px}.health-head span:last-child{font-size:8px}.objective{top:70px;font-size:8px;padding:8px 12px}.crystal-count{font-size:15px}.tip{display:none}.mobile-controls{display:flex}.bottomline{min-height:85px}.footer-label{display:none}}
</style>
</head>
<body>
<div id="game"></div><div class="vignette"></div>
<div class="hud">
  <div class="topline">
    <div class="brand"><div class="sigil">✦</div><div class="brand-copy"><strong>Aetherfall</strong><span>The Shards of Dawn</span></div></div>
    <div class="objective">OBJECTIVE&nbsp; <b>Gather the six prism hearts</b></div>
    <div class="hud-cards">
      <div class="card"><div class="card-label">Prism hearts</div><div class="crystal-row"><span class="crystal-icon">✧</span><span class="crystal-count"><span id="score">0</span> <small>/ 6</small></span></div></div>
      <div class="card health-card"><div class="card-label">Vitality</div><div class="health-head"><span id="healthNumber">100</span><span>✦ &nbsp;WIZARD</span></div><div class="health-track"><div class="health-fill" id="healthFill"></div></div></div>
    </div>
  </div>
  <div class="bottomline"><div class="tip"><span class="keys"><span class="key">W</span><span class="key">A</span><span class="key">S</span><span class="key">D</span>&nbsp; move &nbsp; <span class="key">SPACE</span>&nbsp; jump</span><br>Drag anywhere in the sky to look around.</div><div class="tip footer-label">Keep moving to evade the elemental sentries.</div></div>
</div>
<div class="toast" id="toast">The wind turns in your favor</div>
<div class="mobile-controls" id="mobileControls"><div class="pad"><div class="touch-btn up" data-key="w">↑</div><div class="touch-btn left" data-key="a">←</div><div class="touch-btn down" data-key="s">↓</div><div class="touch-btn right" data-key="d">→</div></div><div class="touch-btn jump-btn" data-key=" ">JUMP</div></div>
<div class="overlay" id="overlay"><div class="modal"><div class="modal-kicker">A low-poly sky adventure</div><h1 id="modalTitle">The Shards<br>of Dawn</h1><p id="modalCopy">Aetherfall is drifting into twilight. Find six prism hearts across the floating isles, leap over the gaps, and stay light on your feet while the elemental sentries take aim.</p><button class="button" id="startButton">Begin the journey</button><div class="modal-note">WASD to roam · Space to jump · Drag to steer your view</div></div></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
(function(){
  'use strict';
  var host=document.getElementById('game');
  if(!window.THREE){host.innerHTML='<div style="padding:2rem;font:14px system-ui;color:#25465c">Three.js could not be loaded. Check your connection and reload.</div>';return;}
  var scene=new THREE.Scene();var skyDay=new THREE.Color(0xb6d9eb),skyNight=new THREE.Color(0x596b99);scene.background=skyDay.clone();scene.fog=new THREE.Fog(skyDay.clone(),28,67);
  var camera=new THREE.PerspectiveCamera(52,window.innerWidth/window.innerHeight,.1,120);camera.position.set(0,7,12);
  var renderer=new THREE.WebGLRenderer({antialias:true,alpha:false});renderer.setPixelRatio(Math.min(window.devicePixelRatio||1,2));renderer.setSize(window.innerWidth,window.innerHeight);renderer.outputEncoding=THREE.sRGBEncoding;renderer.toneMapping=THREE.ACESFilmicToneMapping;renderer.toneMappingExposure=1.17;host.appendChild(renderer.domElement);
  var hemi=new THREE.HemisphereLight(0xe7f8ff,0x795d75,1.18);scene.add(hemi);var sun=new THREE.DirectionalLight(0xffedc3,2.15);sun.position.set(-8,15,8);scene.add(sun);var fill=new THREE.DirectionalLight(0x8ca5ff,.42);fill.position.set(7,4,-10);scene.add(fill);
  var mats={grass:new THREE.MeshStandardMaterial({color:0x8ac9a5,roughness:.94,flatShading:true}),grass2:new THREE.MeshStandardMaterial({color:0xa6d5ad,roughness:1,flatShading:true}),cliff:new THREE.MeshStandardMaterial({color:0x806c90,roughness:1,flatShading:true}),rock:new THREE.MeshStandardMaterial({color:0xa78cad,roughness:1,flatShading:true}),gold:new THREE.MeshStandardMaterial({color:0xffd689,roughness:.56,metalness:.08}),wood:new THREE.MeshStandardMaterial({color:0x805f64,roughness:1,flatShading:true})};
  var mat=function(color,rough,metal){return new THREE.MeshStandardMaterial({color:color,roughness:rough===undefined?.75:rough,metalness:metal||0,flatShading:true});};
  var world=new THREE.Group();scene.add(world);
  function mesh(geo,material,parent){var m=new THREE.Mesh(geo,material);(parent||world).add(m);return m;}
  function addIsland(cx,cz,radius,small){var root=new THREE.Group();root.position.set(cx,0,cz);world.add(root);var cliffH=small?1.6:3.2,topR=radius,botR=radius*(small?.7:.74),cliff=mesh(new THREE.CylinderGeometry(topR,botR,cliffH,small?8:12,3),small?mats.rock:mats.cliff,root);cliff.position.y=-cliffH/2+.08;var cap=mesh(new THREE.CircleGeometry(radius,small?9:15),small?mats.grass2:mats.grass,root);cap.rotation.x=-Math.PI/2;cap.position.y=.105;var crown=mesh(new THREE.TorusGeometry(radius*.87,.065,5,48),mat(small?0x91d1ab:0xa5d9ae,.9),root);crown.rotation.x=Math.PI/2;crown.position.y=.11;return root;}
  var mainRadius=12.4;addIsland(0,0,mainRadius,false);
  var isleData=[{x:16.05,z:-4.1,r:4.3},{x:-15.6,z:-8.3,r:4.15},{x:1.2,z:17.25,r:4.25}];isleData.forEach(function(d){addIsland(d.x,d.z,d.r,true);});
  // Walkable, narrow sky bridges link the four floating islands.
  var bridges=[];isleData.forEach(function(d){var len=Math.hypot(d.x,d.z),ux=d.x/len,uz=d.z/len,startR=11.2,endR=len-d.r*.8,sx=ux*startR,sz=uz*startR,ex=ux*endR,ez=uz*endR,bx=(sx+ex)/2,bz=(sz+ez)/2,bl=Math.hypot(ex-sx,ez-sz);var plank=mesh(new THREE.BoxGeometry(bl,.2,1.55,1,1,3),mat(0xd6b9a5,.9),world);plank.position.set(bx,.06,bz);plank.rotation.y=-Math.atan2(ez-sz,ex-sx);var railMat=mat(0xffe0aa,.55);for(var side=-1;side<=1;side+=2){var rail=mesh(new THREE.BoxGeometry(bl,.06,.08),railMat,world);rail.position.set(bx,.23,bz);rail.rotation.y=plank.rotation.y;rail.position.x+=Math.sin(plank.rotation.y)*side*.78;rail.position.z+=Math.cos(plank.rotation.y)*side*.78;}bridges.push({ax:sx,az:sz,bx:ex,bz:ez});});
  // Floating stone shards, pastel shrubs and miniature blossom trees.
  function addTree(x,z,scale,color){var trunk=mesh(new THREE.CylinderGeometry(.11*scale,.17*scale,.9*scale,5),mats.wood,world);trunk.position.set(x,.55*scale,z);var crown=mesh(new THREE.IcosahedronGeometry(.62*scale,1),mat(color,.87),world);crown.position.set(x,1.2*scale,z);var crown2=mesh(new THREE.IcosahedronGeometry(.37*scale,0),mat(color===0xffbfd0?0xffd2d3:0xd3c4ed,.9),world);crown2.position.set(x+.27*scale,1.45*scale,z+.08*scale);}
  function addRock(x,z,scale){var r=mesh(new THREE.DodecahedronGeometry(scale,0),mats.rock,world);r.position.set(x,-.55+Math.random()*.35,z);r.rotation.set(Math.random(),Math.random(),Math.random());}
  [[-7,-5,1.15,0xffbfd0],[-7,3,.8,0xc0b2ed],[4,-7,.85,0xffc2d6],[7,4,.95,0xb3d6bc],[-1,7,.72,0xffd0a5],[18,-5,.68,0xffc4d4],[-16,-9,.67,0xc7b7ee],[2,18,.72,0xffc7a6]].forEach(function(a){addTree(a[0],a[1],a[2],a[3]);});
  for(var rk=0;rk<38;rk++){var ra=Math.random()*Math.PI*2,rr=8.9+Math.random()*4.5;addRock(Math.cos(ra)*rr,Math.sin(ra)*rr,.24+Math.random()*.45);}
  // Distant drifting islets make the horizon feel like an archipelago.
  for(var di=0;di<9;di++){var ang=di/9*Math.PI*2,dist=28+Math.random()*12,dx=Math.cos(ang)*dist,dz=Math.sin(ang)*dist;var floater=mesh(new THREE.CylinderGeometry(1.4+Math.random(),2.4+Math.random(),2,7,2),mats.cliff,world);floater.position.set(dx,-1.6+Math.random()*2,dz);var top=mesh(new THREE.CircleGeometry(2.1,8),mats.grass2,world);top.rotation.x=-Math.PI/2;top.position.set(dx,.0+floater.position.y+1,dz);for(var sp=0;sp<3;sp++){var shard=mesh(new THREE.ConeGeometry(.35+Math.random()*.4,.9+Math.random(),5),mats.rock,world);shard.position.set(dx+(Math.random()-.5)*2,top.position.y+1,dz+(Math.random()-.5)*2);}}
  // Soft clouds made from low-poly puffs, gently drifting around the islands.
  var clouds=[];for(var ci=0;ci<20;ci++){var cg=new THREE.Group();var cmat=new THREE.MeshStandardMaterial({color:0xf7fbff,transparent:true,opacity:.5,roughness:1,flatShading:true});var px=(Math.random()-.5)*66,pz=(Math.random()-.5)*65;for(var cp=0;cp<4;cp++){var puff=mesh(new THREE.IcosahedronGeometry(.75+Math.random()*.65,1),cmat,cg);puff.position.set(cp*1.0,.1*Math.random(),Math.random()*.65);}cg.position.set(px,-2+Math.random()*6,pz);world.add(cg);clouds.push({group:cg,base:px,phase:Math.random()*6});}
  // Firefly motes: tiny, warm particles suspended in the air.
  var moteGeo=new THREE.BufferGeometry(),motePos=new Float32Array(210*3);for(var mi=0;mi<210;mi++){motePos[mi*3]=(Math.random()-.5)*38;motePos[mi*3+1]=Math.random()*12-1;motePos[mi*3+2]=(Math.random()-.5)*38;}moteGeo.setAttribute('position',new THREE.BufferAttribute(motePos,3));var motes=new THREE.Points(moteGeo,new THREE.PointsMaterial({color:0xffefc2,size:.075,transparent:true,opacity:.77,sizeAttenuation:true}));scene.add(motes);
  // Wizard assembled from simple low-poly primitives.
  var player=new THREE.Group();world.add(player);player.position.set(0,.17,0);
  var robe=mat(0x695c9d,.82),robeLight=mat(0x9780c0,.8),skin=mat(0xf2c4a2,.74),goldMat=mat(0xe8c274,.48,.12),hatMat=mat(0x514879,.8),bootMat=mat(0x574856,.9),eyeMat=new THREE.MeshBasicMaterial({color:0x263f58}),glowMat=new THREE.MeshBasicMaterial({color:0xbafcff});
  var robeMesh=mesh(new THREE.CylinderGeometry(.25,.51,1.18,7,1),robe,player);robeMesh.position.y=.76;
  var mantle=mesh(new THREE.CylinderGeometry(.23,.54,.34,7,1),robeLight,player);mantle.position.y=.53;
  var belt=mesh(new THREE.TorusGeometry(.31,.045,6,16),goldMat,player);belt.rotation.x=Math.PI/2;belt.position.y=.72;
  var face=mesh(new THREE.SphereGeometry(.29,9,7),skin,player);face.position.y=1.62;
  var nose=mesh(new THREE.ConeGeometry(.075,.18,5),skin,player);nose.rotation.x=Math.PI/2;nose.position.set(0,1.59,.275);
  var eyeL=mesh(new THREE.SphereGeometry(.027,6,6),eyeMat,player);eyeL.position.set(-.1,1.67,.26);var eyeR=mesh(new THREE.SphereGeometry(.027,6,6),eyeMat,player);eyeR.position.set(.1,1.67,.26);
  var brim=mesh(new THREE.CylinderGeometry(.43,.43,.075,9),goldMat,player);brim.position.y=1.9;
  var hat=mesh(new THREE.ConeGeometry(.33,.78,7),hatMat,player);hat.position.y=2.28;hat.rotation.z=-.12;
  var hatBand=mesh(new THREE.TorusGeometry(.31,.035,5,16),mat(0xe5b8d5,.6),player);hatBand.rotation.x=Math.PI/2;hatBand.position.y=2.02;
  var arms=[];for(var side=-1;side<=1;side+=2){var arm=mesh(new THREE.CylinderGeometry(.09,.12,.59,6),robeLight,player);arm.position.set(side*.37,1.04,.02);arm.rotation.z=side*.36;arms.push(arm);var hand=mesh(new THREE.SphereGeometry(.105,7,6),skin,player);hand.position.set(side*.47,.78,.04);var boot=mesh(new THREE.CylinderGeometry(.11,.14,.23,6),bootMat,player);boot.position.set(side*.2,.12,.12);}
  var staff=new THREE.Group();player.add(staff);staff.position.set(.59,.65,.02);staff.rotation.z=-.13;var staffPole=mesh(new THREE.CylinderGeometry(.045,.06,1.6,6),mats.wood,staff);staffPole.position.y=.72;var staffTop=mesh(new THREE.OctahedronGeometry(.19,1),glowMat,staff);staffTop.position.set(0,1.63,0);var staffRing=mesh(new THREE.TorusGeometry(.23,.025,5,18),goldMat,staff);staffRing.position.y=1.63;staffRing.rotation.x=.55;var staffLight=new THREE.PointLight(0x8ce9ff,1.2,5);staffLight.position.set(0,1.65,.1);staff.add(staffLight);
  var playerLight=new THREE.PointLight(0xd5aaff,.42,4);playerLight.position.set(0,1.4,-.3);player.add(playerLight);
  // Six collectible, faceted prism hearts spread across the connected isles.
  var collectibles=[],heartPlaces=[[-8,-1],[5,-4],[7,7],[17,-4],[-16,-8],[1,19]];
  heartPlaces.forEach(function(p,i){var g=new THREE.Group();world.add(g);g.position.set(p[0],1.15,p[1]);var color=[0x9ef4ff,0xffbbdc,0xffdf8a,0xc3a6ff,0x9af0d3,0xffbca1][i];var core=mesh(new THREE.OctahedronGeometry(.42,1),new THREE.MeshStandardMaterial({color:color,emissive:color,emissiveIntensity:.72,roughness:.2,metalness:.18,flatShading:true}),g);core.rotation.y=.3;var halo=mesh(new THREE.TorusGeometry(.59,.018,5,28),new THREE.MeshBasicMaterial({color:color,transparent:true,opacity:.72}),g);halo.rotation.x=Math.PI/2;var base=mesh(new THREE.CylinderGeometry(.34,.45,.16,7),mat(0xe9d2bc,.7),g);base.position.y=-.68;var light=new THREE.PointLight(color,1.3,5);g.add(light);collectibles.push({group:g,core:core,base:base,active:true,phase:Math.random()*6});});
  // Elemental sentries: a rotating crystal eye fires seeking bolts on a cadence.
  var turrets=[],bolts=[],turretSpecs=[[6.4,-1.6,0xff9d89],[-5.9,5.6,0x9ce6ff],[1.2,8.2,0xd0a0ff]];
  turretSpecs.forEach(function(t,i){var g=new THREE.Group();world.add(g);g.position.set(t[0],.18,t[1]);var base=mesh(new THREE.CylinderGeometry(.55,.77,.45,7),mat(0x826c92,.6),g);base.position.y=.22;var belt2=mesh(new THREE.TorusGeometry(.58,.06,5,16),goldMat,g);belt2.rotation.x=Math.PI/2;belt2.position.y=.35;var head=new THREE.Group();g.add(head);head.position.y=.88;var orb=mesh(new THREE.IcosahedronGeometry(.36,1),new THREE.MeshStandardMaterial({color:t[2],emissive:t[2],emissiveIntensity:.55,roughness:.28,flatShading:true}),head);var eye=mesh(new THREE.SphereGeometry(.105,8,6),new THREE.MeshBasicMaterial({color:0xffffff}),head);eye.position.z=.32;for(var s=-1;s<=1;s+=2){var horn=mesh(new THREE.ConeGeometry(.14,.48,5),mat(t[2],.5),g);horn.position.set(s*.48,1.05,0);horn.rotation.z=-s*.35;}var light=new THREE.PointLight(t[2],.8,5);light.position.y=1;g.add(light);turrets.push({group:g,head:head,color:t[2],timer:1.25+i*.8,phase:i});});
  function makeBolt(color){var g=new THREE.Group();var orb=mesh(new THREE.SphereGeometry(.17,8,7),new THREE.MeshBasicMaterial({color:color}),g);var halo=mesh(new THREE.SphereGeometry(.28,8,7),new THREE.MeshBasicMaterial({color:color,transparent:true,opacity:.23,depthWrite:false}),g);var l=new THREE.PointLight(color,1.4,3);g.add(l);world.add(g);return g;}
  function distanceToSegment(px,pz,a,b,c,d){var vx=c-a,vz=d-b,den=vx*vx+vz*vz,t=den?((px-a)*vx+(pz-b)*vz)/den:0;t=Math.max(0,Math.min(1,t));return Math.hypot(px-(a+t*vx),pz-(b+t*vz));}
  function walkable(x,z){if(Math.hypot(x,z)<11.48)return true;for(var i=0;i<isleData.length;i++){var p=isleData[i];if(Math.hypot(x-p.x,z-p.z)<p.r-.18)return true;}for(var j=0;j<bridges.length;j++){var b=bridges[j];if(distanceToSegment(x,z,b.ax,b.az,b.bx,b.bz)<.72)return true;}return false;}
  var keys={},playing=false,ended=false,health=100,score=0,invulnerable=0,velocityY=0,onGround=true,gameTime=0,cameraYaw=0,cameraPitch=.32,cameraDistance=10.6,dragging=false,lastPointerX=0,lastPointerY=0,lastDamageAt=0;var toastTimer=0,audioCtx=null;
  function sound(kind){try{var AC=window.AudioContext||window.webkitAudioContext;if(!AC)return;if(!audioCtx)audioCtx=new AC();if(audioCtx.state==='suspended')audioCtx.resume();var now=audioCtx.currentTime,osc=audioCtx.createOscillator(),gain=audioCtx.createGain();osc.connect(gain);gain.connect(audioCtx.destination);if(kind==='collect'){osc.type='sine';osc.frequency.setValueAtTime(620,now);osc.frequency.exponentialRampToValueAtTime(1180,now+.17);gain.gain.setValueAtTime(.001,now);gain.gain.exponentialRampToValueAtTime(.14,now+.025);gain.gain.exponentialRampToValueAtTime(.001,now+.34);osc.start(now);osc.stop(now+.35);}else{osc.type='triangle';osc.frequency.setValueAtTime(245,now);osc.frequency.exponentialRampToValueAtTime(510,now+.11);gain.gain.setValueAtTime(.001,now);gain.gain.exponentialRampToValueAtTime(.11,now+.02);gain.gain.exponentialRampToValueAtTime(.001,now+.22);osc.start(now);osc.stop(now+.23);}}catch(e){}}
  function showToast(txt){var el=document.getElementById('toast');el.textContent=txt;el.classList.add('show');clearTimeout(toastTimer);toastTimer=setTimeout(function(){el.classList.remove('show');},1450);}
  function updateHud(){document.getElementById('score').textContent=score;document.getElementById('healthNumber').textContent=health;var fillEl=document.getElementById('healthFill');fillEl.style.width=health+'%';fillEl.style.background=health<35?'linear-gradient(90deg,#fb818b,#f4ad87)':'linear-gradient(90deg,#61dabc,#a8e7bd)';}
  function finish(victory){playing=false;ended=true;var title=document.getElementById('modalTitle'),copy=document.getElementById('modalCopy'),button=document.getElementById('startButton');title.innerHTML=victory?'Dawn returns<br>to Aetherfall':'A quiet<br>after the storm';copy.textContent=victory?'Every prism heart is home. The islands glow again, and the sentries have fallen silent. Your journey score is '+score+'.':'The sentries overpowered your little wizard. Gather your courage and try another path through the isles.';button.textContent='Play again';document.querySelector('.modal-note').textContent='Journey score · '+score+' points';document.getElementById('overlay').classList.remove('hidden');}
  function startGame(){score=0;health=100;invulnerable=2;velocityY=0;onGround=true;ended=false;playing=true;gameTime=0;player.position.set(0,.17,0);player.rotation.set(0,0,0);cameraYaw=0;cameraPitch=.32;cameraDistance=10.6;turrets.forEach(function(t,i){t.timer=1.2+i*.8;});bolts.forEach(function(b){world.remove(b.mesh);});bolts=[];collectibles.forEach(function(c){c.active=true;c.group.visible=true;});updateHud();document.getElementById('modalTitle').innerHTML='The Shards<br>of Dawn';document.getElementById('startButton').textContent='Begin the journey';document.getElementById('overlay').classList.add('hidden');}
  document.getElementById('startButton').addEventListener('click',startGame);
  window.addEventListener('keydown',function(e){var k=e.key.toLowerCase();if(k===' '||k.startsWith('arrow'))e.preventDefault();keys[k]=true;if((k===' '||k==='arrowup')&&playing&&onGround){velocityY=7.8;onGround=false;sound('jump');}});window.addEventListener('keyup',function(e){keys[e.key.toLowerCase()]=false;});
  document.querySelectorAll('.touch-btn').forEach(function(btn){var k=btn.getAttribute('data-key');function down(e){e.preventDefault();e.stopPropagation();keys[k]=true;btn.classList.add('down');if(k===' '&&playing&&onGround){velocityY=7.8;onGround=false;sound('jump');}}function up(e){e.preventDefault();e.stopPropagation();keys[k]=false;btn.classList.remove('down');}btn.addEventListener('pointerdown',down);btn.addEventListener('pointerup',up);btn.addEventListener('pointercancel',up);btn.addEventListener('pointerleave',up);});
  renderer.domElement.addEventListener('pointerdown',function(e){if(e.button!==undefined&&e.button!==0)return;dragging=true;lastPointerX=e.clientX;lastPointerY=e.clientY;renderer.domElement.setPointerCapture(e.pointerId);});renderer.domElement.addEventListener('pointermove',function(e){if(!dragging)return;var dx=e.clientX-lastPointerX,dy=e.clientY-lastPointerY;lastPointerX=e.clientX;lastPointerY=e.clientY;cameraYaw-=dx*.005;cameraPitch=Math.max(.08,Math.min(.85,cameraPitch+dy*.003));});function stopDrag(){dragging=false;}renderer.domElement.addEventListener('pointerup',stopDrag);renderer.domElement.addEventListener('pointercancel',stopDrag);window.addEventListener('wheel',function(e){cameraDistance=Math.max(7,Math.min(16,cameraDistance+e.deltaY*.006));},{passive:true});
  function takeDamage(){if(invulnerable>0)return;health=Math.max(0,health-20);invulnerable=.95;updateHud();showToast('A sentry bolt struck! Keep moving.');if(health<=0)finish(false);}
  var clock=new THREE.Clock(),dayColor=new THREE.Color(),fogColor=new THREE.Color();
  function animate(){requestAnimationFrame(animate);var dt=Math.min(clock.getDelta(),.04);gameTime+=dt;
    // Gentle day-night orbit shifts the sky, fog and key lighting over time.
    var phase=(gameTime%105)/105,lightWave=(Math.sin(phase*Math.PI*2-Math.PI/2)+1)/2;dayColor.copy(skyNight).lerp(skyDay,lightWave);scene.background.copy(dayColor);scene.fog.color.copy(dayColor);sun.intensity=.5+1.9*lightWave;sun.color.setHSL(.1+.035*(1-lightWave),.46+.15*lightWave,.7+.08*lightWave);hemi.intensity=.48+.8*lightWave;fill.intensity=.32+.25*(1-lightWave);
    clouds.forEach(function(c){c.group.position.x=c.base+Math.sin(gameTime*.09+c.phase)*.7;});motes.rotation.y=gameTime*.018;
    collectibles.forEach(function(c){if(!c.active)return;c.group.position.y=1.15+Math.sin(gameTime*2.2+c.phase)*.13;c.group.rotation.y=gameTime*.8+c.phase;c.core.rotation.x=Math.sin(gameTime*1.1+c.phase)*.12;});
    if(playing&&!ended){if(invulnerable>0)invulnerable=Math.max(0,invulnerable-dt);
      var f=(keys.w||keys.arrowup?1:0)-(keys.s||keys.arrowdown?1:0),s=(keys.d||keys.arrowright?1:0)-(keys.a||keys.arrowleft?1:0),moveX=0,moveZ=0;if(f||s){var len=Math.hypot(f,s);f/=len;s/=len;moveX=Math.sin(cameraYaw)*f+Math.cos(cameraYaw)*s;moveZ=-Math.cos(cameraYaw)*f+Math.sin(cameraYaw)*s;var ml=Math.hypot(moveX,moveZ);moveX/=ml;moveZ/=ml;var step=5.1*dt,nx=player.position.x+moveX*step,nz=player.position.z+moveZ*step;if(walkable(nx,nz)){player.position.x=nx;player.position.z=nz;}else{if(walkable(player.position.x+moveX*step,player.position.z))player.position.x+=moveX*step;if(walkable(player.position.x,player.position.z+moveZ*step))player.position.z+=moveZ*step;}player.rotation.y=Math.atan2(moveX,moveZ);arms.forEach(function(a,i){a.rotation.x=Math.sin(gameTime*10+i*Math.PI)*.18;});staff.rotation.z=-.13+Math.sin(gameTime*10)*.04;robeMesh.rotation.z=Math.sin(gameTime*8)*.035;}else{arms.forEach(function(a){a.rotation.x=0;});}
      velocityY-=19*dt;player.position.y+=velocityY*dt;if(player.position.y<=.17){player.position.y=.17;velocityY=0;onGround=true;}if(invulnerable>0){player.visible=Math.floor(gameTime*18)%2===0;}else player.visible=true;
      collectibles.forEach(function(c){if(c.active&&Math.hypot(player.position.x-c.group.position.x,player.position.z-c.group.position.z)<1.12){c.active=false;c.group.visible=false;score+=100;sound('collect');updateHud();showToast('Prism heart gathered  ·  +100');if(score>=600){finish(true);}}});
      turrets.forEach(function(t){t.head.rotation.y=Math.atan2(player.position.x-t.group.position.x,player.position.z-t.group.position.z);t.group.rotation.y=Math.sin(gameTime*.7+t.phase)*.08;t.timer-=dt;if(t.timer<=0&&Math.hypot(player.position.x-t.group.position.x,player.position.z-t.group.position.z)<17){t.timer=2.5+Math.random()*.65;var bolt=makeBolt(t.color),from=new THREE.Vector3(t.group.position.x,t.group.position.y+1.2,t.group.position.z),to=new THREE.Vector3(player.position.x,player.position.y+1.05,player.position.z),dir=to.sub(from).normalize();bolt.position.copy(from);bolts.push({mesh:bolt,velocity:dir.multiplyScalar(5.8),life:5,color:t.color});}});
      for(var bi=bolts.length-1;bi>=0;bi--){var b=bolts[bi];b.mesh.position.addScaledVector(b.velocity,dt);b.life-=dt;if(b.mesh.position.distanceTo(new THREE.Vector3(player.position.x,player.position.y+1.0,player.position.z))<.62){takeDamage();world.remove(b.mesh);bolts.splice(bi,1);continue;}if(b.life<=0||Math.hypot(b.mesh.position.x,b.mesh.position.z)>30){world.remove(b.mesh);bolts.splice(bi,1);}}
    }
    var cp=Math.cos(cameraPitch),camX=player.position.x+Math.sin(cameraYaw)*cameraDistance*cp,camZ=player.position.z+Math.cos(cameraYaw)*cameraDistance*cp,camY=player.position.y+2.1+Math.sin(cameraPitch)*cameraDistance;camera.position.x+=(camX-camera.position.x)*.09;camera.position.y+=(camY-camera.position.y)*.09;camera.position.z+=(camZ-camera.position.z)*.09;camera.lookAt(player.position.x,player.position.y+1.0,player.position.z);renderer.render(scene,camera);
  }
  animate();window.addEventListener('resize',function(){camera.aspect=window.innerWidth/window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth,window.innerHeight);});
})();
</script>
</body>
</html>
Open the Aetherfall wizard-game demo

2. Pelagic: A Living Globe

Pelagic is a second Three.js scene, this time centered on a luminous procedural planet. The page includes a rotation-speed slider and zoom buttons, with pointer interaction for adjusting the view. Its title and interface present the globe as an atmospheric science-fiction illustration rather than a geographic reference map.
The important limitation is also visible in the source: the scene depends on Three.js r128 loaded from a public CDN, and its generated terrain is an artistic procedural surface. It should be judged as an interactive visual demo, not as geographic data or a production globe renderer.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#07111f">
<title>Pelagic — A Living Globe</title>
<style>
  :root{color-scheme:dark;--ink:#ecf7ff;--muted:#91a9be;--line:rgba(187,222,255,.16);--panel:rgba(9,23,40,.74);--cyan:#70e5ff;--gold:#f4d7a1}
  *{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#06101e;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
  #scene{position:fixed;inset:0}canvas{display:block;width:100%;height:100%}.grain{position:fixed;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E")}
  .top{position:fixed;left:clamp(22px,5vw,76px);top:clamp(22px,5vh,58px);display:flex;align-items:center;gap:12px;z-index:2}.mark{width:30px;height:30px;border:1px solid rgba(113,226,255,.6);border-radius:50%;display:grid;place-items:center;color:var(--cyan);font-size:17px;box-shadow:0 0 28px rgba(81,207,255,.19)}.brand{font-size:12px;font-weight:650;letter-spacing:.2em;text-transform:uppercase}.eyebrow{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--cyan)}
  .copy{position:fixed;left:clamp(22px,5vw,76px);top:30%;z-index:2;width:min(315px,35vw);pointer-events:none}.copy h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(36px,4.3vw,62px);font-weight:400;line-height:.98;letter-spacing:-.04em;margin:13px 0 16px}.copy p{max-width:265px;color:#aebfd0;font-size:13px;line-height:1.7;margin:0}.coordinates{margin-top:28px;padding-top:17px;border-top:1px solid var(--line);display:flex;gap:23px;color:var(--muted);font-size:10px;letter-spacing:.1em;text-transform:uppercase}.coordinates b{display:block;color:#e3f0fc;font-size:12px;font-weight:500;letter-spacing:.04em;margin-top:6px}
  .right-label{position:fixed;right:clamp(22px,5vw,76px);top:45%;z-index:2;text-align:right;pointer-events:none}.right-label .number{font-family:Georgia,serif;font-size:32px;color:#d6effc}.right-label .caption{font-size:9px;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;margin-top:4px}
  .controls{position:fixed;right:clamp(22px,5vw,76px);bottom:clamp(22px,5vh,56px);z-index:3;width:min(318px,calc(100vw - 44px));padding:19px 20px 17px;background:var(--panel);border:1px solid var(--line);border-radius:15px;backdrop-filter:blur(18px);box-shadow:0 20px 80px rgba(0,0,0,.25)}.control-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.control-head label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c0d5e6}.speed{font-variant-numeric:tabular-nums;color:var(--cyan);font-size:11px}.slider-row{display:flex;align-items:center;gap:12px}.slider-row span{font-size:12px;color:#7e96ab}.slider-row input{appearance:none;flex:1;height:3px;background:linear-gradient(90deg,var(--cyan),rgba(112,229,255,.2));border-radius:9px;outline:none}.slider-row input::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#e9fbff;border:2px solid #64dffa;box-shadow:0 0 14px #54d7fb;cursor:pointer}.slider-row input::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#e9fbff;border:2px solid #64dffa;box-shadow:0 0 14px #54d7fb;cursor:pointer}.hint{color:#768ba0;font-size:10px;margin-top:13px;letter-spacing:.035em}.zoom{position:fixed;right:clamp(22px,5vw,76px);bottom:192px;z-index:3;display:flex;gap:8px}.zoom button{width:37px;height:37px;border:1px solid var(--line);border-radius:50%;background:rgba(10,25,42,.75);color:#cde7f5;font-size:17px;cursor:pointer;backdrop-filter:blur(10px);transition:background .2s,border-color .2s}.zoom button:hover{background:rgba(36,77,101,.8);border-color:rgba(112,229,255,.48)}.footer{position:fixed;left:clamp(22px,5vw,76px);bottom:clamp(25px,5vh,58px);color:#6f8497;font-size:9px;letter-spacing:.15em;text-transform:uppercase;z-index:2}.footer i{display:inline-block;width:5px;height:5px;margin:0 7px 1px 0;border-radius:50%;background:#79e9d2;box-shadow:0 0 8px #79e9d2}
  @media(max-width:700px){.copy{top:17%;width:80vw}.copy h1{font-size:42px}.copy p{max-width:240px}.coordinates{display:none}.right-label{top:auto;bottom:202px;right:24px}.controls{right:22px;bottom:22px;width:calc(100vw - 44px)}.zoom{right:auto;left:22px;bottom:30px}.footer{display:none}}
</style>
</head>
<body>
<div id="scene" aria-label="Interactive procedural globe"></div><div class="grain"></div>
<header class="top"><span class="mark">✳</span><span class="brand">Pelagic</span><span class="eyebrow">/ 01</span></header>
<section class="copy"><div class="eyebrow">A small atlas of a living world</div><h1>One world,<br>in motion.</h1><p>Continents drawn from light and color. A quiet study of our blue planet, turning slowly in the dark.</p><div class="coordinates"><span>Surface<b>Oceanic blue</b></span><span>Orbit<b>Low earth</b></span></div></section>
<div class="right-label"><div class="number">01</div><div class="caption">Terra · 4.54 billion years</div></div>
<div class="zoom"><button id="zoomIn" aria-label="Zoom in">+</button><button id="zoomOut" aria-label="Zoom out">−</button></div>
<section class="controls"><div class="control-head"><label for="rotationSpeed">Rotation speed</label><span class="speed" id="speedValue">0.35×</span></div><div class="slider-row"><span>Ⅱ</span><input id="rotationSpeed" type="range" min="0" max="1.4" step="0.01" value="0.35" aria-label="Globe rotation speed"><span>↻</span></div><div class="hint">Drag to turn · Scroll or use + / − to zoom</div></section>
<div class="footer"><i></i>Procedurally rendered · 23.4° axial tilt</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
(function(){
  'use strict';
  var host=document.getElementById('scene');
  if(!window.THREE){host.innerHTML='<div style="color:#d7edfa;padding:2rem;font:14px system-ui">Three.js could not be loaded. Check your connection and reload.</div>';return;}
  var scene=new THREE.Scene();scene.background=new THREE.Color(0x06101e);
  var camera=new THREE.PerspectiveCamera(34,window.innerWidth/window.innerHeight,.1,100);camera.position.set(0,.12,6.7);
  var renderer=new THREE.WebGLRenderer({antialias:true,alpha:false});renderer.setPixelRatio(Math.min(window.devicePixelRatio||1,2));renderer.setSize(window.innerWidth,window.innerHeight);renderer.outputEncoding=THREE.sRGBEncoding;renderer.toneMapping=THREE.ACESFilmicToneMapping;renderer.toneMappingExposure=1.12;host.appendChild(renderer.domElement);
  var ambient=new THREE.AmbientLight(0x81b5da,.72);scene.add(ambient);
  var key=new THREE.DirectionalLight(0xfff1d1,2.45);key.position.set(-4,2.4,5);scene.add(key);
  var rimLight=new THREE.DirectionalLight(0x37a9ff,2.1);rimLight.position.set(3,-1.5,-4);scene.add(rimLight);
  var starGeo=new THREE.BufferGeometry(),starPos=[];for(var si=0;si<1350;si++){var rr=18+Math.random()*18,aa=Math.random()*Math.PI*2,zz=(Math.random()*2-1),rad=Math.sqrt(1-zz*zz);starPos.push(rr*rad*Math.cos(aa),rr*zz,rr*rad*Math.sin(aa));}starGeo.setAttribute('position',new THREE.Float32BufferAttribute(starPos,3));var stars=new THREE.Points(starGeo,new THREE.PointsMaterial({color:0x9ec7e6,size:.035,transparent:true,opacity:.63,sizeAttenuation:true}));scene.add(stars);
  function makePlanetTexture(){
    var c=document.createElement('canvas');c.width=2048;c.height=1024;var x=c.getContext('2d');
    var ocean=x.createLinearGradient(0,0,0,1024);ocean.addColorStop(0,'#082547');ocean.addColorStop(.48,'#0b3960');ocean.addColorStop(1,'#071c38');x.fillStyle=ocean;x.fillRect(0,0,c.width,c.height);
    var glow=x.createRadialGradient(910,500,20,970,480,840);glow.addColorStop(0,'rgba(27,111,154,.42)');glow.addColorStop(.63,'rgba(9,63,104,.19)');glow.addColorStop(1,'rgba(2,18,44,.38)');x.fillStyle=glow;x.fillRect(0,0,c.width,c.height);
    var land=[
      [[.045,.27],[.075,.18],[.12,.14],[.16,.16],[.18,.21],[.165,.27],[.19,.32],[.175,.39],[.15,.42],[.14,.5],[.115,.55],[.1,.51],[.085,.43],[.065,.38]],
      [[.155,.08],[.21,.075],[.245,.12],[.23,.17],[.205,.19],[.19,.16]],
      [[.18,.43],[.225,.42],[.25,.46],[.245,.53],[.23,.59],[.22,.68],[.195,.78],[.18,.73],[.17,.63],[.16,.54]],
      [[.39,.22],[.425,.16],[.47,.14],[.505,.17],[.53,.22],[.57,.23],[.59,.29],[.56,.34],[.54,.39],[.51,.41],[.49,.48],[.45,.5],[.43,.46],[.4,.43],[.37,.37],[.375,.3]],
      [[.445,.49],[.475,.48],[.5,.52],[.51,.59],[.495,.67],[.48,.75],[.455,.8],[.44,.73],[.43,.64],[.42,.56]],
      [[.51,.17],[.55,.14],[.6,.15],[.64,.19],[.69,.2],[.74,.23],[.79,.22],[.84,.26],[.87,.31],[.85,.35],[.81,.36],[.78,.4],[.74,.39],[.7,.43],[.67,.4],[.63,.4],[.6,.36],[.565,.36],[.54,.32],[.53,.26]],
      [[.73,.4],[.77,.41],[.79,.46],[.78,.54],[.755,.59],[.74,.56],[.72,.49]],
      [[.835,.54],[.86,.52],[.89,.55],[.9,.6],[.87,.64],[.84,.61]],
      [[.09,.61],[.13,.59],[.16,.62],[.15,.67],[.12,.7],[.09,.67]],
      [[.32,.11],[.335,.09],[.35,.12],[.34,.17],[.325,.18]],
      [[.59,.53],[.62,.51],[.65,.53],[.66,.57],[.64,.61],[.61,.6]],
      [[.68,.64],[.72,.62],[.755,.65],[.75,.71],[.73,.76],[.69,.73]],
      [[.28,.51],[.29,.48],[.305,.49],[.31,.54],[.3,.57]],
      [[.915,.39],[.93,.37],[.947,.4],[.94,.44],[.925,.45]]
    ];
    var lg=x.createLinearGradient(0,120,0,880);lg.addColorStop(0,'#b5b68f');lg.addColorStop(.17,'#758b73');lg.addColorStop(.47,'#477766');lg.addColorStop(.78,'#718667');lg.addColorStop(1,'#b6ae82');
    land.forEach(function(poly,index){x.beginPath();poly.forEach(function(p,i){var px=p[0]*c.width,py=p[1]*c.height;if(i===0)x.moveTo(px,py);else x.lineTo(px,py);});x.closePath();x.fillStyle=lg;x.fill();x.strokeStyle='rgba(174,224,188,.38)';x.lineWidth=3;x.stroke();
      x.save();x.clip();var stripe=x.createLinearGradient(0,poly.reduce(function(a,p){return a+p[1]*c.height;},0)/poly.length-100,0,poly.reduce(function(a,p){return a+p[1]*c.height;},0)/poly.length+100);stripe.addColorStop(0,'rgba(231,229,184,.24)');stripe.addColorStop(.5,'rgba(36,83,67,.02)');stripe.addColorStop(1,'rgba(227,217,166,.18)');x.fillStyle=stripe;x.fillRect(0,0,c.width,c.height);x.restore();
    });
    // Atmospheric swirls, subtle terrain contours, and sparse island flecks.
    x.lineWidth=1.4;for(var k=0;k<40;k++){var sx=Math.random()*c.width,sy=100+Math.random()*800;x.beginPath();x.ellipse(sx,sy,25+Math.random()*95,4+Math.random()*14,Math.random()*.5,0,Math.PI*2);x.strokeStyle='rgba(180,218,195,'+(0.035+Math.random()*.045)+')';x.stroke();}
    for(var n=0;n<900;n++){var px=Math.random()*c.width,py=Math.random()*c.height;if(Math.random()>.5){x.fillStyle='rgba(212,226,174,.28)';x.fillRect(px,py,1.2,1.2);}}
    // Polar ice caps and translucent cloud-like streaks.
    var ice=x.createLinearGradient(0,0,0,170);ice.addColorStop(0,'rgba(222,246,241,.85)');ice.addColorStop(1,'rgba(204,236,230,0)');x.fillStyle=ice;x.fillRect(0,0,c.width,180);var ice2=x.createLinearGradient(0,840,0,1024);ice2.addColorStop(0,'rgba(204,236,230,0)');ice2.addColorStop(1,'rgba(225,246,242,.82)');x.fillStyle=ice2;x.fillRect(0,840,c.width,184);
    for(var cl=0;cl<100;cl++){var cx=Math.random()*c.width,cy=170+Math.random()*660;x.beginPath();x.ellipse(cx,cy,25+Math.random()*85,3+Math.random()*8,Math.random()*.4,0,Math.PI*2);x.fillStyle='rgba(224,241,244,.045)';x.fill();}
    return c;
  }
  var textureCanvas=makePlanetTexture(),planetTexture=new THREE.CanvasTexture(textureCanvas);planetTexture.anisotropy=renderer.capabilities.getMaxAnisotropy();planetTexture.encoding=THREE.sRGBEncoding;
  var globe=new THREE.Group();globe.rotation.z=THREE.MathUtils.degToRad(23.4);scene.add(globe);
  var planet=new THREE.Mesh(new THREE.SphereGeometry(1.55,112,88),new THREE.MeshPhongMaterial({map:planetTexture,bumpMap:planetTexture,bumpScale:.045,specular:new THREE.Color(0x385a70),shininess:19,emissive:new THREE.Color(0x092643),emissiveMap:planetTexture,emissiveIntensity:.31}));globe.add(planet);
  var atmos=new THREE.Mesh(new THREE.SphereGeometry(1.68,96,72),new THREE.ShaderMaterial({transparent:true,side:THREE.BackSide,blending:THREE.AdditiveBlending,depthWrite:false,vertexShader:'varying vec3 vNormal; varying vec3 vView; void main(){ vec4 mvPosition=modelViewMatrix*vec4(position,1.0); vNormal=normalize(normalMatrix*normal); vView=normalize(-mvPosition.xyz); gl_Position=projectionMatrix*mvPosition; }',fragmentShader:'varying vec3 vNormal; varying vec3 vView; void main(){ float f=pow(1.0-max(dot(normalize(vNormal),normalize(vView)),0.0),2.4); gl_FragColor=vec4(0.18,0.62,1.0,f*0.9); }'}));globe.add(atmos);
  var orbit=new THREE.Group();orbit.rotation.set(.48,.1,.19);scene.add(orbit);var particleMats=[new THREE.MeshBasicMaterial({color:0x9bf4ff}),new THREE.MeshBasicMaterial({color:0x5dcfff}),new THREE.MeshBasicMaterial({color:0xffe3ad})],particles=[];
  for(var i=0;i<70;i++){var a=i/70*Math.PI*2,rad=1.83+(Math.random()-.5)*.1,mesh=new THREE.Mesh(new THREE.SphereGeometry(.012+Math.random()*.012,8,8),particleMats[i%particleMats.length]);mesh.position.set(Math.cos(a)*rad,Math.sin(a)*rad*.42,(Math.random()-.5)*.12);orbit.add(mesh);particles.push({mesh:mesh,a:a,r:rad,w:.27+Math.random()*.19});}
  var ringPoints=[];for(var ri=0;ri<=240;ri++){var ra=ri/240*Math.PI*2;ringPoints.push(new THREE.Vector3(Math.cos(ra)*1.83,Math.sin(ra)*.42*1.83,0));}var ring=new THREE.LineLoop(new THREE.BufferGeometry().setFromPoints(ringPoints),new THREE.LineBasicMaterial({color:0x5bc8ee,transparent:true,opacity:.17}));orbit.add(ring);
  var speedInput=document.getElementById('rotationSpeed'),speedValue=document.getElementById('speedValue'),speed=parseFloat(speedInput.value);speedInput.addEventListener('input',function(){speed=parseFloat(speedInput.value);speedValue.textContent=speed.toFixed(2)+'×';});
  var drag=false,lastX=0,lastY=0,rotX=0,rotY=0,targetDistance=6.7;renderer.domElement.style.cursor='grab';renderer.domElement.addEventListener('pointerdown',function(e){drag=true;lastX=e.clientX;lastY=e.clientY;renderer.domElement.setPointerCapture(e.pointerId);renderer.domElement.style.cursor='grabbing';});renderer.domElement.addEventListener('pointermove',function(e){if(!drag)return;var dx=e.clientX-lastX,dy=e.clientY-lastY;lastX=e.clientX;lastY=e.clientY;rotY+=dx*.006;rotX=Math.max(-1.15,Math.min(1.15,rotX+dy*.004));});function endDrag(){drag=false;renderer.domElement.style.cursor='grab';}renderer.domElement.addEventListener('pointerup',endDrag);renderer.domElement.addEventListener('pointercancel',endDrag);
  function setZoom(delta){targetDistance=Math.max(4.2,Math.min(9.8,targetDistance+delta));}document.getElementById('zoomIn').addEventListener('click',function(){setZoom(-.55);});document.getElementById('zoomOut').addEventListener('click',function(){setZoom(.55);});window.addEventListener('wheel',function(e){setZoom(e.deltaY>0?.32:-.32);},{passive:true});
  var clock=new THREE.Clock();function animate(){requestAnimationFrame(animate);var dt=Math.min(clock.getDelta(),.04);if(!drag)globe.rotation.y+=speed*dt*.24;globe.rotation.y+=rotY*.025;globe.rotation.x+=(rotX-globe.rotation.x)*.06;rotY*=.92;camera.position.z+=(targetDistance-camera.position.z)*.08;particles.forEach(function(p){p.a+=dt*p.w; p.mesh.position.x=Math.cos(p.a)*p.r;p.mesh.position.y=Math.sin(p.a)*p.r*.42;});orbit.rotation.y+=dt*.08;stars.rotation.y+=dt*.002;renderer.render(scene,camera);}animate();
  window.addEventListener('resize',function(){camera.aspect=window.innerWidth/window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth,window.innerHeight);});
})();
</script>
</body>
</html>
Open the Pelagic procedural-globe demo

3. Glass origami crane

The third Luna artifact arrived as SVG rather than HTML. I preserved that original vector file and wrapped it in a minimal HTML preview so it can sit beside the two browser scenes. The artwork combines folded crane shapes with a glass-sphere composition, using vector paths and SVG effects instead of a 3D runtime.
This format is the lightest of the three: it does not need WebGL or a JavaScript 3D library. The preview below keeps the SVG loaded as an image, which also prevents the vector file from executing as page markup. The original SVG is available directly as well.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="color-scheme" content="dark">
<title>Glass Origami Crane</title>
<style>html,body{width:100%;height:100%;margin:0;background:#06111d}body{display:grid;place-items:center}img{display:block;width:100%;height:100%;object-fit:contain}</style>
</head>
<body><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiByb2xlPSJpbWciIGFyaWEtbGFiZWxsZWRieT0idGl0bGUgZGVzYyI+CiAgPHRpdGxlIGlkPSJ0aXRsZSI+T3JpZ2FtaSBjcmFuZSBpbiBhIGdsYXNzIHNwaGVyZTwvdGl0bGU+CiAgPGRlc2MgaWQ9ImRlc2MiPkEgZGV0YWlsZWQgZm9sZGVkIHBhcGVyIGNyYW5lIGZsb2F0cyBpbnNpZGUgYSBsdW1pbm91cywgcmVmcmFjdGl2ZSBjcnlzdGFsIHNwaGVyZS48L2Rlc2M+CiAgPGRlZnM+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9Im9yYiIgY3g9IjM0JSIgY3k9IjI2JSIgcj0iNzYlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9Ii45NCIvPjxzdG9wIG9mZnNldD0iLjEyIiBzdG9wLWNvbG9yPSIjZWZmYWZmIiBzdG9wLW9wYWNpdHk9Ii40NSIvPjxzdG9wIG9mZnNldD0iLjQzIiBzdG9wLWNvbG9yPSIjYThlYWZmIiBzdG9wLW9wYWNpdHk9Ii4xMyIvPjxzdG9wIG9mZnNldD0iLjcyIiBzdG9wLWNvbG9yPSIjNTQ5YWM4IiBzdG9wLW9wYWNpdHk9Ii4xMiIvPjxzdG9wIG9mZnNldD0iLjkxIiBzdG9wLWNvbG9yPSIjZTdmYmZmIiBzdG9wLW9wYWNpdHk9Ii40Ii8+PHN0b3Agb2Zmc2V0PSIuOTciIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iLjg4Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjOGJkZmZmIiBzdG9wLW9wYWNpdHk9Ii4yNSIvPgogICAgPC9yYWRpYWxHcmFkaWVudD4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0iaW50ZXJpb3IiIGN4PSI0MyUiIGN5PSIzOCUiIHI9IjY3JSI+PHN0b3Agc3RvcC1jb2xvcj0iIzE1MmE0MiIvPjxzdG9wIG9mZnNldD0iLjU4IiBzdG9wLWNvbG9yPSIjMGMxZDMxIi8+PHN0b3Agb2Zmc2V0PSIuODIiIHN0b3AtY29sb3I9IiMxMzI2M2IiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwYTE1MjYiLz48L3JhZGlhbEdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyaW0iIHgxPSIuMTUiIHkxPSIuMDgiIHgyPSIuODgiIHkyPSIuOSI+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIuOTUiLz48c3RvcCBvZmZzZXQ9Ii4yMyIgc3RvcC1jb2xvcj0iI2M3ZjJmZiIgc3RvcC1vcGFjaXR5PSIuMDgiLz48c3RvcCBvZmZzZXQ9Ii41NSIgc3RvcC1jb2xvcj0iI2U3ZmNmZiIgc3RvcC1vcGFjaXR5PSIuMDMiLz48c3RvcCBvZmZzZXQ9Ii44MyIgc3RvcC1jb2xvcj0iIzhiZDdmYSIgc3RvcC1vcGFjaXR5PSIuMTQiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iLjc1Ii8+PC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icGFwZXIiIHgxPSIuMSIgeTE9Ii4xIiB4Mj0iLjgyIiB5Mj0iLjkzIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmNGQ5Ii8+PHN0b3Agb2Zmc2V0PSIuMjgiIHN0b3AtY29sb3I9IiNmZmQ3OWMiLz48c3RvcCBvZmZzZXQ9Ii42MyIgc3RvcC1jb2xvcj0iI2Y1YTg3NSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2I5NGQ1ZCIvPjwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9IndpbmdBIiB4MT0iLjE4IiB5MT0iLjAyIiB4Mj0iLjg0IiB5Mj0iMSI+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZjZlNCIvPjxzdG9wIG9mZnNldD0iLjQyIiBzdG9wLWNvbG9yPSIjZmZkZWE5Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZTg4YTdiIi8+PC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0id2luZ0IiIHgxPSIuMTIiIHkxPSIuMDgiIHgyPSIuOSIgeTI9Ii44NyI+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZjBjYiIvPjxzdG9wIG9mZnNldD0iLjQ3IiBzdG9wLWNvbG9yPSIjZjdiNzg2Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjYmM1NjY4Ii8+PC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZm9sZCIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIHN0b3AtY29sb3I9IiNmZmY5ZTkiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNjZjYzNzAiLz48L2xpbmVhckdyYWRpZW50PgogICAgPHJhZGlhbEdyYWRpZW50IGlkPSJpbm5lckdsb3ciPjxzdG9wIHN0b3AtY29sb3I9IiNmZmQ5YTAiIHN0b3Atb3BhY2l0eT0iLjI0Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZjY4Yjc3IiBzdG9wLW9wYWNpdHk9IjAiLz48L3JhZGlhbEdyYWRpZW50PgogICAgPGZpbHRlciBpZD0ic29mdFNoYWRvdyIgeD0iLS4zNSIgeT0iLS4zNSIgd2lkdGg9IjEuNyIgaGVpZ2h0PSIxLjgiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIwIi8+PC9maWx0ZXI+CiAgICA8ZmlsdGVyIGlkPSJwYXBlclNoYWRvdyIgeD0iLS4zIiB5PSItLjMiIHdpZHRoPSIxLjYiIGhlaWdodD0iMS43Ij48ZmVHYXVzc2lhbkJsdXIgaW49IlNvdXJjZUFscGhhIiBzdGREZXZpYXRpb249IjkiIHJlc3VsdD0iYiIvPjxmZU9mZnNldCBkeT0iMTQiIGR4PSI0IiByZXN1bHQ9Im8iLz48ZmVDb2xvck1hdHJpeCBpbj0ibyIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMC4wMSAwIDAgMCAwIDAuMDIgMCAwIDAgMCAwLjA0IDAgMCAwIC43MiAwIiByZXN1bHQ9InMiLz48ZmVNZXJnZT48ZmVNZXJnZU5vZGUgaW49InMiLz48ZmVNZXJnZU5vZGUgaW49IlNvdXJjZUdyYXBoaWMiLz48L2ZlTWVyZ2U+PC9maWx0ZXI+CiAgICA8ZmlsdGVyIGlkPSJnbGFzc0Jsb29tIiB4PSItLjQiIHk9Ii0uNCIgd2lkdGg9IjEuOCIgaGVpZ2h0PSIxLjgiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjUiIHJlc3VsdD0iYmx1ciIvPjxmZU1lcmdlPjxmZU1lcmdlTm9kZSBpbj0iYmx1ciIvPjxmZU1lcmdlTm9kZSBpbj0iU291cmNlR3JhcGhpYyIvPjwvZmVNZXJnZT48L2ZpbHRlcj4KICAgIDxmaWx0ZXIgaWQ9IndhcnAiIHg9Ii0uMTIiIHk9Ii0uMTIiIHdpZHRoPSIxLjI0IiBoZWlnaHQ9IjEuMjQiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuMDEyIC4wMiIgbnVtT2N0YXZlcz0iMiIgc2VlZD0iOCIgcmVzdWx0PSJub2lzZSIvPjxmZURpc3BsYWNlbWVudE1hcCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJub2lzZSIgc2NhbGU9IjUiIHhDaGFubmVsU2VsZWN0b3I9IlIiIHlDaGFubmVsU2VsZWN0b3I9IkciLz48L2ZpbHRlcj4KICAgIDxjbGlwUGF0aCBpZD0ic3BoZXJlQ2xpcCI+PGNpcmNsZSBjeD0iNTAwIiBjeT0iNTAwIiByPSIzNDciLz48L2NsaXBQYXRoPgogICAgPGNsaXBQYXRoIGlkPSJjcmFuZUNsaXAiPjxwYXRoIGQ9Ik0yMDUgMjc4aDYwMHY0NjVIMjA1eiIvPjwvY2xpcFBhdGg+CiAgICA8cGF0dGVybiBpZD0iZ3JhaW4iIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PGNpcmNsZSBjeD0iNSIgY3k9IjkiIHI9Ii44IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIuMiIvPjxjaXJjbGUgY3g9IjMxIiBjeT0iMjgiIHI9Ii43IiBmaWxsPSIjYzlmM2ZmIiBvcGFjaXR5PSIuMTYiLz48cGF0aCBkPSJNMTQgMzhsMy0yIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1vcGFjaXR5PSIuMSIvPjwvcGF0dGVybj4KICA8L2RlZnM+CgogIDxlbGxpcHNlIGN4PSI1MDAiIGN5PSI4NjQiIHJ4PSIyNzAiIHJ5PSI0MCIgZmlsbD0iIzA2MTIxZCIgb3BhY2l0eT0iLjI2IiBmaWx0ZXI9InVybCgjc29mdFNoYWRvdykiLz4KICA8Y2lyY2xlIGN4PSI1MDAiIGN5PSI1MDAiIHI9IjM2MCIgZmlsbD0iI2JkZGZmMCIgb3BhY2l0eT0iLjEyIiBmaWx0ZXI9InVybCgjc29mdFNoYWRvdykiLz4KICA8Y2lyY2xlIGN4PSI1MDAiIGN5PSI1MDAiIHI9IjM1MSIgZmlsbD0idXJsKCNpbnRlcmlvcikiIHN0cm9rZT0iI2YxZmRmZiIgc3Ryb2tlLW9wYWNpdHk9Ii42IiBzdHJva2Utd2lkdGg9IjQiLz4KICA8ZyBjbGlwLXBhdGg9InVybCgjc3BoZXJlQ2xpcCkiPgogICAgPGVsbGlwc2UgY3g9IjQ1MiIgY3k9IjQxNSIgcng9IjMwMCIgcnk9IjI1MCIgZmlsbD0idXJsKCNpbm5lckdsb3cpIi8+CiAgICA8cGF0aCBkPSJNMTgxIDY3NWMxNjgtMTE4IDQ4Mi0xMzEgNjUzLTM3IiBmaWxsPSJub25lIiBzdHJva2U9IiM4YmNmZjAiIHN0cm9rZS1vcGFjaXR5PSIuMTIiIHN0cm9rZS13aWR0aD0iMzAiIGZpbHRlcj0idXJsKCNnbGFzc0Jsb29tKSIvPgogICAgPGcgb3BhY2l0eT0iLjgiIGZpbGw9IiNmZmYzZDIiPjxjaXJjbGUgY3g9IjMxMCIgY3k9IjQyNSIgcj0iMiIvPjxjaXJjbGUgY3g9Ijc0MCIgY3k9IjU3MCIgcj0iMS43Ii8+PGNpcmNsZSBjeD0iNjQyIiBjeT0iMzU1IiByPSIxLjMiLz48Y2lyY2xlIGN4PSIzOTAiIGN5PSI2NzQiIHI9IjEuNCIvPjxjaXJjbGUgY3g9IjU2NiIgY3k9IjMyNiIgcj0iMS4xIi8+PC9nPgogICAgPGcgZmlsdGVyPSJ1cmwoI3BhcGVyU2hhZG93KSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCA2KSI+CiAgICAgIDxlbGxpcHNlIGN4PSI1MTMiIGN5PSI1ODIiIHJ4PSIyMjciIHJ5PSI5MSIgZmlsbD0iIzAxMDcxMSIgb3BhY2l0eT0iLjQ2IiBmaWx0ZXI9InVybCgjc29mdFNoYWRvdykiLz4KICAgICAgPGcgZmlsdGVyPSJ1cmwoI3dhcnApIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgICAgICA8IS0tIEJyb2FkIHJhaXNlZCB3aW5nIC0tPgogICAgICAgIDxwYXRoIGQ9Ik00OTMgNTAwIDI2NiAzMjkgNDUzIDU4NyA1MTYgNTUyIDU3MiA1MDVaIiBmaWxsPSJ1cmwoI3dpbmdBKSIgc3Ryb2tlPSIjZmZmM2Q1IiBzdHJva2Utb3BhY2l0eT0iLjc1IiBzdHJva2Utd2lkdGg9IjIuNCIvPgogICAgICAgIDxwYXRoIGQ9Ik0yNjYgMzI5IDQ1MyA1ODcgNDExIDQzNFoiIGZpbGw9IiNmZmVhYzEiIG9wYWNpdHk9Ii43NiIvPgogICAgICAgIDxwYXRoIGQ9Im0yNjYgMzI5IDE5OCAxNTAgNTIgNzMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2I5Njk2NyIgc3Ryb2tlLW9wYWNpdHk9Ii43IiBzdHJva2Utd2lkdGg9IjMiLz4KICAgICAgICA8cGF0aCBkPSJtNDUzIDU4NyAxMS0xMDggNTIgNzMiIGZpbGw9IiNlOTlhODIiIG9wYWNpdHk9Ii43NyIvPgogICAgICAgIDxwYXRoIGQ9Ik0yNzcgMzQzIDQxMSA0MzQgNDUzIDU3NSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmOWU5IiBzdHJva2Utb3BhY2l0eT0iLjciIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICAgIDwhLS0gRmFyIHdpbmcgYW5kIGl0cyBjcmlzcCBmb2xkZWQgZmFjZXRzIC0tPgogICAgICAgIDxwYXRoIGQ9Ik01MzUgNTAwIDc0NCAzMDIgNjQ4IDU4NSA1NzIgNTUzIDUwMCA1MjlaIiBmaWxsPSJ1cmwoI3dpbmdCKSIgc3Ryb2tlPSIjZmZlOGM0IiBzdHJva2Utb3BhY2l0eT0iLjcyIiBzdHJva2Utd2lkdGg9IjIuMyIvPgogICAgICAgIDxwYXRoIGQ9Im03NDQgMzAyLTE5MCAxNzYtNDYgNTEgMTQwIDU2WiIgZmlsbD0iI2Y1YmQ4YyIgb3BhY2l0eT0iLjg1Ii8+CiAgICAgICAgPHBhdGggZD0ibTc0NCAzMDItMTkwIDE3NiA5NC0yNVoiIGZpbGw9IiNmZmYxZDQiIG9wYWNpdHk9Ii44MiIvPgogICAgICAgIDxwYXRoIGQ9Im01NTQgNDc4IDk0LTI1LTUyIDEzMiIgZmlsbD0iI2Q3N2Q3OSIgb3BhY2l0eT0iLjcyIi8+CiAgICAgICAgPHBhdGggZD0ibTc0NCAzMDItMTM5IDE0Ny01MSAxMDQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZjdlMiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2Utb3BhY2l0eT0iLjgiLz4KICAgICAgICA8IS0tIEZvbGRlZCBib2R5LCB0YWlsIGFuZCBjZW50cmFsIHJpZGdlIC0tPgogICAgICAgIDxwYXRoIGQ9Im00OTAgNTA2LTE0MSAxNDMgMTU1LTYzIDY5LTY1WiIgZmlsbD0idXJsKCNwYXBlcikiIHN0cm9rZT0iI2Y4ZDQ5ZSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICAgICAgPHBhdGggZD0ibTM0OSA2NDkgMTIxLTEwNyAzNCA0NFoiIGZpbGw9IiNkNjZmNzAiIG9wYWNpdHk9Ii44MyIvPgogICAgICAgIDxwYXRoIGQ9Im00OTAgNTA2IDYyIDE1LTY5IDY1LTM0LTQ0WiIgZmlsbD0iI2ZmZjBjZiIgb3BhY2l0eT0iLjcyIi8+CiAgICAgICAgPHBhdGggZD0ibTUxNCA1MTEgMTQ2IDEwMy0xMDUtMzItNzIgNFoiIGZpbGw9InVybCgjcGFwZXIpIiBzdHJva2U9IiNmM2MzOGYiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICAgIDxwYXRoIGQ9Im02NjAgNjE0LTExNi01Ny02MSAyOVoiIGZpbGw9IiNiZDU5NmIiIG9wYWNpdHk9Ii44Ii8+CiAgICAgICAgPHBhdGggZD0ibTUxNiA1NTIgNDAtMzEgMTA0IDkzLTg3LTQ2WiIgZmlsbD0iI2ZmZTRiOCIgb3BhY2l0eT0iLjc2Ii8+CiAgICAgICAgPCEtLSBMb25nIG5lY2ssIGZvbGRlZCBiZWFrIGFuZCBoZWFkIC0tPgogICAgICAgIDxwYXRoIGQ9Im01MzYgNTA0IDExMi01MSA2NS00Mi01NSA4Mi0xMTEgNjVaIiBmaWxsPSJ1cmwoI3BhcGVyKSIgc3Ryb2tlPSIjZjlkNmE2IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgICAgICA8cGF0aCBkPSJtNjQ4IDQ1MyA2NS00Mi01NSA4Mi0zMSAyMFoiIGZpbGw9IiNjYjY0NzAiIG9wYWNpdHk9Ii44OCIvPgogICAgICAgIDxwYXRoIGQ9Im03MTMgNDExIDY1LTEwLTY2IDI3LTE0LThaIiBmaWxsPSIjZmZmMGQwIiBzdHJva2U9IiNmNmMzOGQiIHN0cm9rZS13aWR0aD0iMS41Ii8+CiAgICAgICAgPHBhdGggZD0ibTcxMyA0MTEgNjUtMTAtNjYgMjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2FlNTk2OSIgc3Ryb2tlLXdpZHRoPSIxLjYiLz4KICAgICAgICA8cGF0aCBkPSJtNjQ1IDQ1NyA0NS0zNC0yMSA3MCIgZmlsbD0iI2Y2YmQ5MSIgb3BhY2l0eT0iLjg1Ii8+CiAgICAgICAgPCEtLSBGaW5lIGNyZWFzZSBsaW5lcyBhbmQgcGFwZXIgZWRnZXMgLS0+CiAgICAgICAgPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOGQ0YjVjIiBzdHJva2Utb3BhY2l0eT0iLjQ1IiBzdHJva2Utd2lkdGg9IjEuNiI+CiAgICAgICAgICA8cGF0aCBkPSJtMjY2IDMyOSAxODcgMjU4bTkxLTg3IDIwMC0xOThNMzQ5IDY0OWwxNDItMTQzbTE2OSAxMDgtMTQ2LTEwMm04NC00IDc1LTk1Ii8+CiAgICAgICAgICA8cGF0aCBkPSJtNDExIDQzNCA0MiAxNTNtMTAxLTEwOSA5NCA3NW0tMTQzLTEgNDgtMzMiIHN0cm9rZT0iI2ZmZjdlNSIgc3Ryb2tlLW9wYWNpdHk9Ii42NSIvPgogICAgICAgIDwvZz4KICAgICAgPC9nPgogICAgICA8cGF0aCBkPSJNMzI1IDM2MGM1OCAyOSA4OSA3NSAxMTMgMTI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBvcGFjaXR5PSIuNCIvPgogICAgPC9nPgogICAgPGVsbGlwc2UgY3g9IjM0MCIgY3k9IjM3MCIgcng9IjE1MiIgcnk9Ijk0IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIuMDciIHRyYW5zZm9ybT0icm90YXRlKDM1IDM0MCAzNzApIi8+CiAgPC9nPgogIDxjaXJjbGUgY3g9IjUwMCIgY3k9IjUwMCIgcj0iMzUxIiBmaWxsPSJ1cmwoI29yYikiIHN0cm9rZT0idXJsKCNyaW0pIiBzdHJva2Utd2lkdGg9IjkiLz4KICA8Y2lyY2xlIGN4PSI1MDAiIGN5PSI1MDAiIHI9IjM1OSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTZmYmZmIiBzdHJva2Utb3BhY2l0eT0iLjQ1IiBzdHJva2Utd2lkdGg9IjIiLz4KICA8Y2lyY2xlIGN4PSI1MDAiIGN5PSI1MDAiIHI9IjM0NiIgZmlsbD0idXJsKCNncmFpbikiIG9wYWNpdHk9Ii4zIi8+CiAgPCEtLSBMb25nIGN1cnZlZCBzdHVkaW8gcmVmbGVjdGlvbnMgb24gdGhlIHBvbGlzaGVkIHNoZWxsIC0tPgogIDxwYXRoIGQ9Ik0yNjkgMjgyYzY5LTgwIDE1NS0xMjAgMjQ2LTExOSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjE0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIG9wYWNpdHk9Ii43OCIgZmlsdGVyPSJ1cmwoI2dsYXNzQmxvb20pIi8+CiAgPHBhdGggZD0iTTI3NiAyOTVjNTgtNjUgMTI1LTk5IDIwMy0xMDkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIG9wYWNpdHk9Ii45NiIvPgogIDxwYXRoIGQ9Ik0yMzggMzg4YzEzLTI3IDI2LTQ5IDQxLTY2IiBmaWxsPSJub25lIiBzdHJva2U9IiNkZmY4ZmYiIHN0cm9rZS13aWR0aD0iNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBvcGFjaXR5PSIuNjUiLz4KICA8cGF0aCBkPSJNNzAyIDczMGM0Ny0zNiA4Mi04NCAxMDItMTM5IiBmaWxsPSJub25lIiBzdHJva2U9IiNlZWZjZmYiIHN0cm9rZS13aWR0aD0iOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBvcGFjaXR5PSIuNjYiIGZpbHRlcj0idXJsKCNnbGFzc0Jsb29tKSIvPgogIDxwYXRoIGQ9Ik03MDkgNzIyYzM4LTMyIDY2LTcxIDgyLTExMyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgb3BhY2l0eT0iLjc4Ii8+CiAgPGVsbGlwc2UgY3g9IjMzNyIgY3k9IjIyNyIgcng9IjMxIiByeT0iMTIiIGZpbGw9IiNmZmYiIG9wYWNpdHk9Ii40NCIgdHJhbnNmb3JtPSJyb3RhdGUoLTM1IDMzNyAyMjcpIi8+CiAgPGNpcmNsZSBjeD0iNzQ2IiBjeT0iMzA3IiByPSI4IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIuNzMiIGZpbHRlcj0idXJsKCNnbGFzc0Jsb29tKSIvPgo8L3N2Zz4K" alt="A folded glass origami crane"></body>
</html>
Open the glass-crane preview · View the original SVG

What this sample can tell us

The set shows three different frontend deliverables: a small game scene, an interactive globe, and vector illustration. The contrast is useful for browsing the artifacts, but it does not establish a pass rate or prove how GPT-6 Luna performs across ordinary software tasks. A stronger comparison would use the same prompts, settings, browser, and scoring checklist for both models, then repeat each task several times.

Read Next

AI Models • 2 min read

GPT-6 Sol Browser Coding Test: Floating Isles, Blue Horizon & Glass Crane

Explore three supplied GPT-6 Sol browser artifacts: Floating Isles wizard quest, Blue Horizon procedural globe, and a glass-sphere origami crane, embedded as isolated previews.

Mohid Mirza
Always Updating Lists • 4 min read

Top 10 Best Budget AI Models Right Now (August 2026)

The price of solid intelligence has collapsed. Here are the top 10 best budget AI models in August 2026 balancing high benchmark performance with rock-bottom API rates and open-weight efficiency.

Mohid Mirza
AI Models • 3 min read

Grok 4.7 Browser Coding Test: Glass Crane, Procedural Globe, and a Game Cut Short

Hands-on Grok 4.7 CLI test with embedded SVG crane and interactive Three.js globe HTML, browser observations, and an explicit account of the wizard-game request that failed at the CLI quota limit.

Mohid Mirza
← Back to Articles Directory