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.
Co-Founder & Lead Programmer of AcceleratedLogic AI
1. Aetherfall: The Shards of Dawn
<!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 <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>✦ 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> move <span class="key">SPACE</span> 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>
2. Pelagic: A Living Globe
<!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>
3. Glass origami crane
<!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>
What this sample can tell us
Read Next
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.
GPT-6.1 Sol Pro: Reasoning Mode and Cost Tradeoffs
Why Sol Pro is an execution mode of GPT-6.1 Sol, how it differs from reasoning effort, and why equal token rates can produce different task bills.
GPT-6.1 Sol: API Specs, Reasoning Controls, and Costs
Verified GPT-6.1 Sol limits and pricing, the Responses API tool contract, and a practical way to evaluate a migration from GPT-6 Sol.