GPT-6 Sol Browser Coding Test: Floating Isles, Blue Horizon & Glass Crane
A second three-piece set: a crystal-collecting wizard game, a living planet, and an illuminated origami crane.
Co-Founder & Lead Programmer of AcceleratedLogic AI
1. Floating Isles: Wizard Quest
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Floating Isles · Wizard Quest</title>
<style>
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#b8dfff;color:#203252;font-family:Inter,ui-sans-serif,system-ui,sans-serif}canvas{display:block}#game{position:fixed;inset:0;touch-action:none}
#hud{position:fixed;top:20px;left:20px;display:flex;gap:10px;align-items:stretch;pointer-events:none;z-index:2}.chip{min-width:126px;border:1px solid rgba(255,255,255,.8);border-radius:17px;background:rgba(255,255,255,.77);box-shadow:0 9px 30px rgba(79,94,150,.13);backdrop-filter:blur(12px);padding:12px 17px}.label{display:block;color:#65789b;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-bottom:3px}.value{font-weight:800;font-size:24px;letter-spacing:-.045em;line-height:1.1}.heart{color:#ed648d;letter-spacing:.04em}
#objective{position:fixed;top:20px;right:20px;max-width:248px;padding:13px 17px;border:1px solid rgba(255,255,255,.8);border-radius:17px;background:rgba(255,255,255,.76);box-shadow:0 9px 30px rgba(79,94,150,.13);backdrop-filter:blur(12px);font-size:12px;line-height:1.5;font-weight:650;z-index:2}#objective strong{display:block;color:#7e5cc6;font-size:10px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:3px}
#controls{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:10px 17px;border-radius:50px;border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.72);backdrop-filter:blur(12px);color:#586f98;font-size:11px;font-weight:700;white-space:nowrap;pointer-events:none;z-index:2}
#notice{position:fixed;top:92px;left:50%;transform:translate(-50%,-10px);padding:10px 18px;border-radius:99px;color:#4b327b;background:rgba(255,255,255,.91);box-shadow:0 8px 26px rgba(55,48,105,.15);font-size:13px;font-weight:800;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:3}#notice.show{opacity:1;transform:translate(-50%,0)}
#overlay{position:fixed;inset:0;display:grid;place-items:center;background:linear-gradient(140deg,rgba(68,78,159,.31),rgba(37,106,155,.2));backdrop-filter:blur(9px);z-index:5}.card{width:min(430px,calc(100vw - 32px));border:1px solid rgba(255,255,255,.85);border-radius:28px;padding:33px 36px 31px;text-align:center;background:rgba(255,255,255,.91);box-shadow:0 24px 80px rgba(38,58,114,.23)}.glyph{font-size:38px;margin-bottom:3px}.card small{display:block;color:#8a6bc3;font-size:11px;font-weight:850;letter-spacing:.19em;text-transform:uppercase}.card h1{margin:8px 0 11px;font-size:36px;line-height:1.06;letter-spacing:-.06em;color:#25385c}.card p{margin:0 0 23px;font-size:14px;line-height:1.6;color:#667798}.card button{border:0;border-radius:13px;padding:13px 26px;background:linear-gradient(135deg,#906be0,#5f9fe1);color:white;font:800 14px inherit;cursor:pointer;box-shadow:0 8px 20px rgba(110,98,200,.26)}.card button:hover{filter:brightness(1.07)}.hidden{display:none!important}
@media(max-width:650px){#hud{top:10px;left:10px;gap:6px}.chip{min-width:91px;padding:9px 11px}.value{font-size:19px}#objective{top:10px;right:10px;max-width:132px;padding:9px 11px;font-size:10px}#controls{bottom:10px;font-size:9px;padding:8px 11px}.card{padding:27px 24px}}
</style>
</head>
<body>
<div id="game"></div>
<div id="hud"><div class="chip"><span class="label">Crystals</span><span id="score" class="value">0 / 8</span></div><div class="chip"><span class="label">Health</span><span id="health" class="value heart">♥ ♥ ♥ ♥ ♥</span></div></div>
<div id="objective"><strong>Your quest</strong>Collect all eight sky crystals. Cross the bridges and avoid the elemental sentries.</div>
<div id="controls">W A S D move · Space jump · Drag to orbit · Scroll to zoom</div>
<div id="notice" role="status" aria-live="polite"></div>
<div id="overlay"><div class="card"><div class="glyph">✦</div><small>Floating Isles</small><h1 id="overlayTitle">Wizard Quest</h1><p id="overlayText">Gather eight glowing crystals across the sky islands. Leap, explore, and dodge the elemental turrets.</p><button id="play">Begin adventure</button></div></div>
<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.1/build/three.module.js';
const host=document.getElementById('game'),scoreEl=document.getElementById('score'),healthEl=document.getElementById('health'),overlay=document.getElementById('overlay'),overlayTitle=document.getElementById('overlayTitle'),overlayText=document.getElementById('overlayText'),playButton=document.getElementById('play'),notice=document.getElementById('notice');
const scene=new THREE.Scene();scene.background=new THREE.Color(0xb7dcf5);scene.fog=new THREE.FogExp2(0xb9d8f4,.011);
const camera=new THREE.PerspectiveCamera(60,innerWidth/innerHeight,.1,250);camera.position.set(0,8,14);
const renderer=new THREE.WebGLRenderer({antialias:true,powerPreference:'high-performance'});renderer.setPixelRatio(Math.min(devicePixelRatio,2));renderer.setSize(innerWidth,innerHeight);renderer.shadowMap.enabled=true;renderer.shadowMap.type=THREE.PCFSoftShadowMap;renderer.outputColorSpace=THREE.SRGBColorSpace;renderer.toneMapping=THREE.ACESFilmicToneMapping;renderer.toneMappingExposure=1.35;host.appendChild(renderer.domElement);
const ambient=new THREE.HemisphereLight(0xe5f7ff,0x6f648e,2.1);scene.add(ambient);const sun=new THREE.DirectionalLight(0xfff1cc,2.8);sun.position.set(-15,24,13);sun.castShadow=true;sun.shadow.mapSize.set(2048,2048);sun.shadow.camera.left=-35;sun.shadow.camera.right=35;sun.shadow.camera.top=35;sun.shadow.camera.bottom=-35;sun.shadow.camera.near=1;sun.shadow.camera.far=80;sun.shadow.bias=-.0004;scene.add(sun);
const mat=(color,roughness=1,emissive=0x000000)=>new THREE.MeshStandardMaterial({color,roughness,emissive});
const grass=[0x86d8a8,0xa3e6bd,0x8cd4c8,0xd5eaa9,0xa5d5bc],earth=mat(0x997db0),rock=mat(0xb8a8ca),trunk=mat(0x8b6c83),leafColors=[0xffa9c8,0xf6b0dc,0xbfa4ed,0xffd5a0,0x9fc9e9];
const islands=[{x:0,z:0,r:6.9},{x:10,z:-1,r:4.9},{x:-9,z:-4,r:4.8},{x:-4,z:-11,r:4.7},{x:10,z:-12,r:4.8}];
const bridges=[[0,1],[0,2],[0,3],[1,4],[3,4]],bridgeData=[];const decorative=new THREE.Group();scene.add(decorative);
function mesh(geometry,material,parent=scene,x=0,y=0,z=0){const o=new THREE.Mesh(geometry,material);o.position.set(x,y,z);parent.add(o);return o}
function random(a,b){return a+Math.random()*(b-a)}
function makeTree(parent,x,z,s=1){const group=new THREE.Group();group.position.set(x,0,z);parent.add(group);const stem=mesh(new THREE.CylinderGeometry(.11*s,.17*s,.9*s,6),trunk,group,0,.45*s,0);stem.castShadow=true;const crown=mesh(new THREE.IcosahedronGeometry(.67*s,1),mat(leafColors[Math.floor(Math.random()*leafColors.length)]),group,0,1.22*s,0);crown.castShadow=true;mesh(new THREE.IcosahedronGeometry(.39*s,1),crown.material,group,.37*s,1.03*s,.17*s).castShadow=true}
function makeIsland(data,index){const g=new THREE.Group();g.position.set(data.x,0,data.z);scene.add(g);const cap=mesh(new THREE.CylinderGeometry(data.r,data.r*.95,.56,12),mat(grass[index]),g,0,-.28,0);cap.castShadow=true;cap.receiveShadow=true;const under=mesh(new THREE.CylinderGeometry(data.r*.94,.7,2.7,12,1),earth,g,0,-1.85,0);under.castShadow=true;under.receiveShadow=true;const point=mesh(new THREE.ConeGeometry(data.r*.63,3.2,10),rock,g,0,-4.78,0);point.rotation.z=Math.PI;point.castShadow=true;for(let i=0;i<10;i++){let a=i/10*Math.PI*2+index,rad=random(data.r*.65,data.r*.87);let x=Math.cos(a)*rad,z=Math.sin(a)*rad;if(index===0&&Math.abs(z)<2&&x>0)continue;makeTree(g,x,z,random(.6,1.1))}for(let i=0;i<16;i++){let a=Math.random()*Math.PI*2,rad=random(1,data.r*.8);let flower=mesh(new THREE.SphereGeometry(.075,6,4),new THREE.MeshBasicMaterial({color:i%2?0xffe8aa:0xffb4db}),g,Math.cos(a)*rad,.08,Math.sin(a)*rad);flower.scale.y=.45}return g}
islands.forEach(makeIsland);
function makeBridge(a,b){const A=islands[a],B=islands[b],dx=B.x-A.x,dz=B.z-A.z,len=Math.hypot(dx,dz),ux=dx/len,uz=dz/len,start=2.8,end=2.7,blen=len-start-end,cx=A.x+ux*(start+blen/2),cz=A.z+uz*(start+blen/2);const bridge=mesh(new THREE.BoxGeometry(2.5,.3,blen),mat(0xdac2a8),scene,cx,-.13,cz);bridge.rotation.y=Math.atan2(dx,dz);bridge.receiveShadow=true;bridge.castShadow=true;const railMat=mat(0xf9e4ca);for(const side of [-1,1]){const rail=mesh(new THREE.BoxGeometry(.13,.15,blen),railMat,scene,cx+(-uz)*side*1.19,.26,cz+ux*side*1.19);rail.rotation.y=bridge.rotation.y;rail.castShadow=true;for(let j=0;j<Math.floor(blen/2);j++){const t=(j+.5)/Math.floor(blen/2)-.5;mesh(new THREE.BoxGeometry(.16,.65,.16),railMat,scene,cx+ux*t*blen-uz*side*1.18,.01,cz+uz*t*blen+ux*side*1.18).castShadow=true}}bridgeData.push({ax:A.x+ux*start,az:A.z+uz*start,bx:B.x-ux*end,bz:B.z-uz*end,width:1.3})}
bridges.forEach(pair=>makeBridge(...pair));
// Distant cloud banks and small floating fragments create depth without assets.
const clouds=[];for(let i=0;i<27;i++){const c=new THREE.Group();c.position.set(random(-80,80),random(-13,-7),random(-85,50));for(let j=0;j<4;j++){const puff=mesh(new THREE.IcosahedronGeometry(random(1.5,3.3),1),new THREE.MeshBasicMaterial({color:0xffffff,transparent:true,opacity:.5,depthWrite:false}),c,j*2.1,random(-.4,.4),random(-.5,.5));puff.scale.y=.46}scene.add(c);clouds.push(c)}
for(let i=0;i<18;i++){let x=random(-30,30),z=random(-29,14);if(islands.some(v=>Math.hypot(v.x-x,v.z-z)<v.r+2))continue;const shard=mesh(new THREE.ConeGeometry(random(.5,1.1),random(1.5,3),5),mat(0xb8a5cf),scene,x,random(-8,-5),z);shard.rotation.z=Math.PI}
const motes=[];const moteGeo=new THREE.OctahedronGeometry(.065,0);for(let i=0;i<110;i++){let m=mesh(moteGeo,new THREE.MeshBasicMaterial({color:i%3?0xffffff:0xf5e7ab,transparent:true,opacity:.8}),scene,random(-25,25),random(.4,7),random(-25,12));motes.push({mesh:m,base:m.position.y,phase:random(0,6.3),speed:random(.6,1.5)})}
// Wizard model: layered robe, face, brim, pointed hat, staff and glowing tip.
const wizard=new THREE.Group();scene.add(wizard);const robe=mesh(new THREE.CylinderGeometry(.28,.48,1.12,8),mat(0x7855bd),wizard,0,.78,0);robe.castShadow=true;const robeTrim=mesh(new THREE.CylinderGeometry(.485,.49,.09,8),mat(0xe3cba9),wizard,0,.27,0);robeTrim.castShadow=true;const face=mesh(new THREE.SphereGeometry(.29,12,8),mat(0xffd6ba),wizard,0,1.52,0);face.castShadow=true;const beard=mesh(new THREE.ConeGeometry(.21,.37,6),mat(0xf7f2ed),wizard,0,1.31,.2);beard.rotation.x=Math.PI;const brim=mesh(new THREE.CylinderGeometry(.55,.58,.11,12),mat(0x533d91),wizard,0,1.81,0);brim.castShadow=true;const hat=mesh(new THREE.ConeGeometry(.43,.95,10),mat(0x6548a9),wizard,0,2.31,0);hat.castShadow=true;const band=mesh(new THREE.CylinderGeometry(.44,.44,.08,10),mat(0xffcb83),wizard,0,1.9,0);const star=mesh(new THREE.OctahedronGeometry(.075,0),new THREE.MeshBasicMaterial({color:0xffe08b}),wizard,0,2.15,.39);const staff=mesh(new THREE.CylinderGeometry(.045,.055,1.65,6),mat(0x9d7181),wizard,-.44,1.12,.04);staff.rotation.z=-.12;mesh(new THREE.OctahedronGeometry(.18,0),new THREE.MeshBasicMaterial({color:0x97ecff}),wizard,-.53,2.01,.04);const staffLight=new THREE.PointLight(0x8eefff,1.4,3);staffLight.position.set(-.53,2.01,.04);wizard.add(staffLight);
const shadow=mesh(new THREE.CircleGeometry(.54,20),new THREE.MeshBasicMaterial({color:0x314b75,transparent:true,opacity:.2,depthWrite:false}),scene,0,.025,0);shadow.rotation.x=-Math.PI/2;
const crystalPositions=[[2,1],[-3,2],[10,-1],[12,-3],[-9,-4],[-4,-11],[10,-12],[8,-14]];const crystals=[];const crystalMat=new THREE.MeshStandardMaterial({color:0xc9a4ff,emissive:0x8f55e5,emissiveIntensity:1.8,metalness:.15,roughness:.2});for(let i=0;i<crystalPositions.length;i++){let [x,z]=crystalPositions[i],group=new THREE.Group();group.position.set(x,1.15,z);scene.add(group);const gem=mesh(new THREE.OctahedronGeometry(.45,0),crystalMat,group);gem.castShadow=true;const ring=mesh(new THREE.TorusGeometry(.57,.024,6,32),new THREE.MeshBasicMaterial({color:0xf8e9ff,transparent:true,opacity:.7}),group);ring.rotation.x=Math.PI/2;const light=new THREE.PointLight(0xc996ff,1.15,3.2);group.add(light);crystals.push({group,base:1.15,phase:i*1.7,collected:false})}
const turrets=[];const turretPositions=[[12.7,-.4],[-10.5,-5.5],[-3,-13.6],[11.8,-10.2]];for(let i=0;i<turretPositions.length;i++){const [x,z]=turretPositions[i],g=new THREE.Group();g.position.set(x,0,z);scene.add(g);const pedestal=mesh(new THREE.CylinderGeometry(.54,.68,.78,8),mat(0x8995bd),g,0,.39,0);pedestal.castShadow=true;const coreColor=i%2?0x60bdf3:0xff9b8c;const core=mesh(new THREE.IcosahedronGeometry(.46,0),new THREE.MeshStandardMaterial({color:coreColor,emissive:coreColor,emissiveIntensity:1.3,roughness:.2}),g,0,1.15,0);core.castShadow=true;const halo=mesh(new THREE.TorusGeometry(.67,.055,6,24),new THREE.MeshBasicMaterial({color:coreColor}),g,0,1.15,0);halo.rotation.x=.48;const light=new THREE.PointLight(coreColor,1.4,5);light.position.y=1.2;g.add(light);turrets.push({group:g,core,halo,color:coreColor,cooldown:1+i*.6})}
const projectiles=[],projectileGeo=new THREE.SphereGeometry(.19,10,8);function fire(t){const start=t.group.position.clone().add(new THREE.Vector3(0,1.2,0)),target=player.pos.clone().add(new THREE.Vector3(0,1.1,0)),dir=target.sub(start).normalize(),m=mesh(projectileGeo,new THREE.MeshBasicMaterial({color:t.color}),scene,start.x,start.y,start.z);const glow=new THREE.PointLight(t.color,1,2);m.add(glow);projectiles.push({mesh:m,velocity:dir.multiplyScalar(7.7),life:3.2})}
const player={pos:new THREE.Vector3(0,0,3),vel:new THREE.Vector3(),vertical:0,grounded:true,health:5,score:0,invulnerable:0};const keys=new Set();let active=false,finished=false,drag=false,lastX=0,lastY=0,cameraYaw=0,cameraPitch=.48,cameraDist=10.5,clock=0,noticeTimer=0,respawn=new THREE.Vector3(0,0,3);const camTarget=new THREE.Vector3();
function supported(x,z){for(const island of islands)if(Math.hypot(x-island.x,z-island.z)<island.r-.25)return true;for(const b of bridgeData){let dx=b.bx-b.ax,dz=b.bz-b.az,t=Math.max(0,Math.min(1,((x-b.ax)*dx+(z-b.az)*dz)/(dx*dx+dz*dz))),px=b.ax+t*dx,pz=b.az+t*dz;if(Math.hypot(x-px,z-pz)<b.width-.1)return true}return false}
function showNotice(message){notice.textContent=message;notice.classList.add('show');noticeTimer=2.1}
let audio;function sound(type){try{audio??=new (window.AudioContext||window.webkitAudioContext)();if(audio.state==='suspended')audio.resume();const start=audio.currentTime,osc=audio.createOscillator(),gain=audio.createGain();osc.type=type==='hurt'?'sawtooth':'sine';osc.frequency.setValueAtTime(type==='jump'?330:type==='collect'?630:220,start);osc.frequency.exponentialRampToValueAtTime(type==='jump'?510:type==='collect'?1100:100,start+.19);gain.gain.setValueAtTime(.0001,start);gain.gain.exponentialRampToValueAtTime(.09,start+.02);gain.gain.exponentialRampToValueAtTime(.0001,start+.25);osc.connect(gain).connect(audio.destination);osc.start(start);osc.stop(start+.27)}catch{}}
function updateHUD(){scoreEl.textContent=player.score+' / '+crystals.length;healthEl.textContent='♥ '.repeat(player.health).trim()||'—'}
function damage(){if(player.invulnerable>0||!active)return;player.health--;player.invulnerable=1.3;sound('hurt');updateHUD();if(player.health<=0){end(false)}else showNotice('Ouch! Keep moving')}
function end(won){active=false;finished=true;overlay.classList.remove('hidden');overlayTitle.textContent=won?'The sky is yours!':'The magic fades';overlayText.textContent=won?'You collected every crystal and saved the floating isles.':'The elemental sentries got the better of you. Try another route through the islands.';playButton.textContent='Play again';if(won)sound('collect')}
function reset(){player.pos.set(0,0,3);player.vel.set(0,0,0);player.vertical=0;player.grounded=true;player.health=5;player.score=0;player.invulnerable=0;respawn.set(0,0,3);crystals.forEach(c=>{c.collected=false;c.group.visible=true});projectiles.forEach(p=>scene.remove(p.mesh));projectiles.length=0;turrets.forEach((t,i)=>t.cooldown=1+i*.6);updateHUD();finished=false;active=true;overlay.classList.add('hidden');showNotice('Find all eight crystals ✦')}
playButton.addEventListener('click',()=>{sound('collect');reset()});addEventListener('keydown',e=>{if(['Space','ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(e.code))e.preventDefault();keys.add(e.code);if(e.code==='Space'&&active&&player.grounded){player.vertical=6.8;player.grounded=false;sound('jump')}if(e.code==='Enter'&&!active)reset()});addEventListener('keyup',e=>keys.delete(e.code));addEventListener('blur',()=>keys.clear());renderer.domElement.addEventListener('pointerdown',e=>{drag=true;lastX=e.clientX;lastY=e.clientY;renderer.domElement.setPointerCapture(e.pointerId)});renderer.domElement.addEventListener('pointermove',e=>{if(!drag)return;cameraYaw-=(e.clientX-lastX)*.005;cameraPitch=Math.max(.18,Math.min(1.15,cameraPitch+(e.clientY-lastY)*.004));lastX=e.clientX;lastY=e.clientY});renderer.domElement.addEventListener('pointerup',()=>drag=false);renderer.domElement.addEventListener('pointercancel',()=>drag=false);renderer.domElement.addEventListener('wheel',e=>{e.preventDefault();cameraDist=Math.max(6,Math.min(17,cameraDist+e.deltaY*.009))},{passive:false});addEventListener('resize',()=>{camera.aspect=innerWidth/innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth,innerHeight)});
function updatePlayer(dt){const f=new THREE.Vector3(-Math.sin(cameraYaw),0,-Math.cos(cameraYaw)),r=new THREE.Vector3(Math.cos(cameraYaw),0,-Math.sin(cameraYaw)),input=new THREE.Vector3();if(keys.has('KeyW')||keys.has('ArrowUp'))input.add(f);if(keys.has('KeyS')||keys.has('ArrowDown'))input.sub(f);if(keys.has('KeyD')||keys.has('ArrowRight'))input.add(r);if(keys.has('KeyA')||keys.has('ArrowLeft'))input.sub(r);if(input.lengthSq()>0)input.normalize();const wanted=input.multiplyScalar(player.grounded?6.4:5.2),rate=Math.min(1,dt*(player.grounded?12:5));player.vel.lerp(wanted,rate);player.pos.x+=player.vel.x*dt;player.pos.z+=player.vel.z*dt;player.vertical-=16*dt;player.pos.y+=player.vertical*dt;const onGround=supported(player.pos.x,player.pos.z);if(onGround&&player.pos.y<=0&&player.vertical<=0){player.pos.y=0;player.vertical=0;player.grounded=true;if(islands.some(v=>Math.hypot(player.pos.x-v.x,player.pos.z-v.z)<v.r-1))respawn.set(player.pos.x,0,player.pos.z)}else player.grounded=false;if(player.pos.y< -12){damage();player.pos.copy(respawn);player.pos.y=0;player.vel.set(0,0,0);player.vertical=0;player.grounded=true}if(player.invulnerable>0)player.invulnerable-=dt;wizard.position.copy(player.pos);wizard.rotation.y=input.lengthSq()>0?Math.atan2(-player.vel.x,-player.vel.z):wizard.rotation.y;wizard.visible=player.invulnerable<=0||Math.floor(clock*12)%2===0;const walking=player.grounded&&player.vel.length()>1;robe.rotation.z=walking?Math.sin(clock*11)*.035:0;wizard.position.y+=walking?Math.abs(Math.sin(clock*11))*.045:0;shadow.position.set(player.pos.x,.025,player.pos.z);shadow.visible=onGround&&player.pos.y<2;shadow.material.opacity=Math.max(.03,.2-player.pos.y*.045)}
function updateGame(dt){updatePlayer(dt);for(const c of crystals){if(c.collected)continue;c.group.rotation.y+=dt*1.4;c.group.position.y=c.base+Math.sin(clock*2.5+c.phase)*.17;if(c.group.position.distanceTo(player.pos.clone().add(new THREE.Vector3(0,1,0)))<.82){c.collected=true;c.group.visible=false;player.score++;sound('collect');updateHUD();showNotice('Crystal collected! '+player.score+' / '+crystals.length);if(player.score===crystals.length)end(true)}}for(const t of turrets){t.cooldown-=dt;const distance=t.group.position.distanceTo(player.pos);if(t.cooldown<=0&&distance<13&&distance>1.7){fire(t);t.cooldown=2+Math.random()*.85}t.core.rotation.y+=dt*.9;t.halo.rotation.z+=dt*.65}for(let i=projectiles.length-1;i>=0;i--){const p=projectiles[i];p.mesh.position.addScaledVector(p.velocity,dt);p.life-=dt;if(p.mesh.position.distanceTo(player.pos.clone().add(new THREE.Vector3(0,1,0)))<.54){damage();p.life=0}if(p.life<=0){scene.remove(p.mesh);projectiles.splice(i,1)}}}
const daySky=new THREE.Color(0xb7dcf5),nightSky=new THREE.Color(0x17254d),dayFog=new THREE.Color(0xb9d8f4),nightFog=new THREE.Color(0x24305b),temp=new THREE.Color();
let previous=performance.now();function animate(now){requestAnimationFrame(animate);const dt=Math.min(.05,(now-previous)/1000);previous=now;clock+=dt;const day=.5+.5*Math.sin(clock*.11+.8),light=.22+.78*day;scene.background=temp.copy(nightSky).lerp(daySky,light);scene.fog.color.copy(nightFog).lerp(dayFog,light);ambient.intensity=1.05+1.1*light;sun.intensity=.35+2.45*light;sun.position.set(Math.cos(clock*.11)*22,10+Math.sin(clock*.11)*15,12);for(const m of motes){m.mesh.position.y=m.base+Math.sin(clock*m.speed+m.phase)*.32;m.mesh.rotation.y+=dt}for(const c of clouds)c.position.x+=dt*.18;if(active)updateGame(dt);else{wizard.position.copy(player.pos);wizard.position.y+=Math.sin(clock*2)*.025}for(const c of crystals)if(!c.collected&&!active){c.group.rotation.y+=dt;c.group.position.y=c.base+Math.sin(clock*2+c.phase)*.17}if(noticeTimer>0){noticeTimer-=dt;if(noticeTimer<=0)notice.classList.remove('show')}const focus=player.pos.clone().add(new THREE.Vector3(0,1.2,0));camTarget.lerp(focus,Math.min(1,dt*5));const cp=Math.cos(cameraPitch),desired=camTarget.clone().add(new THREE.Vector3(Math.sin(cameraYaw)*cp*cameraDist,Math.sin(cameraPitch)*cameraDist,Math.cos(cameraYaw)*cp*cameraDist));camera.position.lerp(desired,Math.min(1,dt*5));camera.lookAt(camTarget);renderer.render(scene,camera)}requestAnimationFrame(animate);
</script>
</body>
</html>
2. The Blue Horizon: procedural globe
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Procedural Globe</title>
<style>
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#030a18;color:#e8f8ff;font-family:Inter,ui-sans-serif,system-ui,sans-serif}
#scene{position:fixed;inset:0}canvas{display:block} .panel{position:fixed;left:clamp(18px,4vw,54px);bottom:clamp(18px,5vh,48px);width:min(310px,calc(100vw - 36px));padding:19px 22px 17px;border:1px solid rgba(155,218,255,.26);border-radius:17px;background:rgba(8,23,47,.64);box-shadow:0 16px 50px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(17px)}
.eyebrow{font-size:10px;letter-spacing:.27em;color:#79d8fb;text-transform:uppercase;font-weight:700}.title{font-size:22px;letter-spacing:-.04em;font-weight:650;margin:4px 0 16px}.row{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#bcdded;margin-bottom:11px}.row output{font-variant-numeric:tabular-nums;color:#fff}input[type=range]{width:100%;margin:0;accent-color:#78e3ff;cursor:pointer}.hint{margin-top:13px;color:#89a8ba;font-size:11px;line-height:1.5} .loading{position:fixed;inset:0;display:grid;place-items:center;background:#030a18;color:#bdeeff;letter-spacing:.16em;font-size:13px;z-index:5;transition:opacity .6s} .loading.hide{opacity:0;pointer-events:none}
</style>
</head>
<body>
<div id="scene"></div><div class="loading" id="loading">FORMING A WORLD</div>
<div class="panel"><div class="eyebrow">A living planet</div><div class="title">The Blue Horizon</div><div class="row"><label for="speed">Rotation speed</label><output id="speedValue">0.40×</output></div><input id="speed" type="range" min="0" max="2" value="0.4" step="0.01" aria-label="Globe rotation speed"><div class="hint">Drag to turn · Scroll to zoom</div></div>
<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.1/build/three.module.js';
const host=document.getElementById('scene'), speed=document.getElementById('speed'), speedValue=document.getElementById('speedValue');
const scene=new THREE.Scene(); scene.background=new THREE.Color(0x030a18); scene.fog=new THREE.FogExp2(0x030a18,.012);
const camera=new THREE.PerspectiveCamera(42,innerWidth/innerHeight,.1,100); camera.position.set(0,.15,6.4);
const renderer=new THREE.WebGLRenderer({antialias:true,alpha:false,powerPreference:'high-performance'}); renderer.setPixelRatio(Math.min(devicePixelRatio,2)); renderer.setSize(innerWidth,innerHeight); renderer.outputColorSpace=THREE.SRGBColorSpace; renderer.toneMapping=THREE.ACESFilmicToneMapping; renderer.toneMappingExposure=1.35; host.appendChild(renderer.domElement);
scene.add(new THREE.AmbientLight(0x4a8bb9,1.05)); const sun=new THREE.DirectionalLight(0xfff5da,3.1); sun.position.set(-3,2.5,5); scene.add(sun); const rim=new THREE.DirectionalLight(0x38bafb,1.5); rim.position.set(4,-1,-3); scene.add(rim);
// A deterministic, seam-safe terrain field assembled from continental lobes.
const fract=x=>x-Math.floor(x), hash=(x,y)=>fract(Math.sin(x*127.1+y*311.7)*43758.5453);
function noise(x,y){const ix=Math.floor(x),iy=Math.floor(y),fx=x-ix,fy=y-iy,u=fx*fx*(3-2*fx),v=fy*fy*(3-2*fy);return THREE.MathUtils.lerp(THREE.MathUtils.lerp(hash(ix,iy),hash(ix+1,iy),u),THREE.MathUtils.lerp(hash(ix,iy+1),hash(ix+1,iy+1),u),v)}
function wrapDelta(a,b){let d=Math.abs(a-b);return Math.min(d,2*Math.PI-d)}
const lobes=[[-2.06,.78,.56,.51,1.18],[-1.55,.46,.42,.42,1.05],[-2.39,.19,.34,.26,.73],[-1.23,-.56,.38,.74,1.02],[-1.55,-1.08,.26,.33,.65],[.21,.83,.7,.48,.93],[1.06,.79,.83,.48,1.15],[2.04,.61,.61,.46,.96],[2.6,.2,.37,.36,.78],[.31,-.31,.43,.68,1.1],[.16,-.95,.34,.36,.56],[2.35,-.86,.45,.3,.95],[2.62,-.52,.24,.2,.52],[-.68,1.15,.28,.22,.72]];
function height(lon,lat){let broad=0;for(const [x,y,rx,ry,w] of lobes){const dx=wrapDelta(lon,x)/rx,dy=(lat-y)/ry; broad=Math.max(broad,w*Math.exp(-1.65*(dx*dx+dy*dy)))}const warp=noise(lon*3.4+8,lat*3.4+8)-.5, n=noise(lon*11+warp*2,lat*11)-.5, detail=noise(lon*28,lat*28)-.5;return broad+.27*n+.085*detail-(Math.abs(lat)>1.37?.06:0)}
function makePlanetTexture(){const w=1024,h=512,c=document.createElement('canvas');c.width=w;c.height=h;const ctx=c.getContext('2d'),img=ctx.createImageData(w,h),d=img.data;for(let y=0;y<h;y++){let lat=(.5-y/h)*Math.PI;for(let x=0;x<w;x++){let lon=(x/w-.5)*2*Math.PI, elev=height(lon,lat),i=(y*w+x)*4, micro=noise(x*.08,y*.08)-.5, wave=noise(x*.019,y*.019);let r,g,b;if(elev>.43){const mountain=Math.max(0,Math.min(1,(elev-.7)*2.1));const dry=Math.max(0,Math.min(1,(Math.abs(lat)-.27)*1.5));r=43+mountain*100+dry*26+micro*19;g=105+mountain*68-dry*24+micro*25;b=83+mountain*68-dry*16+micro*12;if(elev<.47){r=135;g=177;b=137}if(Math.abs(lat)>1.16){const ice=Math.min(1,(Math.abs(lat)-1.16)*3.8);r=r*(1-ice)+224*ice;g=g*(1-ice)+239*ice;b=b*(1-ice)+239*ice}}else{let shallow=Math.max(0,1-Math.abs(elev-.43)*5);r=5+shallow*23+wave*5;g=42+shallow*84+wave*11;b=89+shallow*103+wave*15}d[i]=r;d[i+1]=g;d[i+2]=b;d[i+3]=255}}ctx.putImageData(img,0,0);const t=new THREE.CanvasTexture(c);t.colorSpace=THREE.SRGBColorSpace;t.anisotropy=renderer.capabilities.getMaxAnisotropy();return t}
function makeCloudTexture(){const c=document.createElement('canvas');c.width=1024;c.height=512;const ctx=c.getContext('2d'),im=ctx.createImageData(c.width,c.height),d=im.data;for(let y=0;y<c.height;y++)for(let x=0;x<c.width;x++){const nx=x/1024*13,ny=y/512*8;const field=.55*noise(nx,ny)+.29*noise(nx*2.4+4,ny*2.4)+.16*noise(nx*5.1,ny*5.1);const a=Math.min(125,Math.max(0,(field-.57)*750));const i=(y*1024+x)*4;d[i]=235;d[i+1]=248;d[i+2]=255;d[i+3]=a}ctx.putImageData(im,0,0);const t=new THREE.CanvasTexture(c);t.colorSpace=THREE.SRGBColorSpace;return t}
const globe=new THREE.Group();scene.add(globe);globe.rotation.z=-.18;
const sphere=new THREE.Mesh(new THREE.SphereGeometry(1.65,96,64),new THREE.MeshStandardMaterial({map:makePlanetTexture(),roughness:.82,metalness:0}));globe.add(sphere);
const clouds=new THREE.Mesh(new THREE.SphereGeometry(1.673,72,48),new THREE.MeshLambertMaterial({map:makeCloudTexture(),transparent:true,depthWrite:false,opacity:.68}));globe.add(clouds);
const atmosphere=new THREE.Mesh(new THREE.SphereGeometry(1.77,64,48),new THREE.ShaderMaterial({transparent:true,depthWrite:false,side:THREE.BackSide,uniforms:{glowColor:{value:new THREE.Color(0x55bfff)}},vertexShader:'varying vec3 vNormal; varying vec3 vView; void main(){vNormal=normalize(normalMatrix*normal); vec4 p=modelViewMatrix*vec4(position,1.0);vView=normalize(-p.xyz);gl_Position=projectionMatrix*p;}',fragmentShader:'uniform vec3 glowColor; varying vec3 vNormal; varying vec3 vView; void main(){float f=pow(1.0-abs(dot(vNormal,vView)),2.3);gl_FragColor=vec4(glowColor,f*.39);}'}));globe.add(atmosphere);
const halo=new THREE.Mesh(new THREE.SphereGeometry(1.91,48,32),new THREE.MeshBasicMaterial({color:0x27aaff,transparent:true,opacity:.035,side:THREE.BackSide,depthWrite:false}));globe.add(halo);
// Inclined orbit with many independent luminous particles and a faint track.
const orbit=new THREE.Group();orbit.rotation.set(.54,.3,-.18);scene.add(orbit);const ringPts=[];for(let i=0;i<=256;i++){const a=i/256*Math.PI*2;ringPts.push(new THREE.Vector3(Math.cos(a)*2.32,Math.sin(a)*2.32,0))}const ring=new THREE.LineLoop(new THREE.BufferGeometry().setFromPoints(ringPts.slice(0,-1)),new THREE.LineBasicMaterial({color:0x6fcaff,transparent:true,opacity:.2,depthWrite:false}));orbit.add(ring);
const particleGeo=new THREE.BufferGeometry(),particleCount=115,positions=new Float32Array(particleCount*3),sizes=[];for(let i=0;i<particleCount;i++)sizes.push(.018+Math.random()*.038);particleGeo.setAttribute('position',new THREE.BufferAttribute(positions,3));const particleTexture=document.createElement('canvas');particleTexture.width=64;particleTexture.height=64;const pc=particleTexture.getContext('2d'),grad=pc.createRadialGradient(32,32,0,32,32,32);grad.addColorStop(0,'rgba(255,255,255,1)');grad.addColorStop(.18,'rgba(181,239,255,.95)');grad.addColorStop(.55,'rgba(78,188,255,.35)');grad.addColorStop(1,'rgba(78,188,255,0)');pc.fillStyle=grad;pc.fillRect(0,0,64,64);const points=new THREE.Points(particleGeo,new THREE.PointsMaterial({map:new THREE.CanvasTexture(particleTexture),size:.095,transparent:true,depthWrite:false,blending:THREE.AdditiveBlending,color:0xc1f2ff,sizeAttenuation:true}));orbit.add(points);
const starsGeo=new THREE.BufferGeometry(),stars=new Float32Array(650*3);for(let i=0;i<650;i++){const a=Math.random()*Math.PI*2,z=Math.random()*2-1,r=Math.sqrt(1-z*z),dist=16+Math.random()*24;stars.set([Math.cos(a)*r*dist,z*dist,Math.sin(a)*r*dist],i*3)}starsGeo.setAttribute('position',new THREE.BufferAttribute(stars,3));scene.add(new THREE.Points(starsGeo,new THREE.PointsMaterial({color:0x9acfff,size:.045,transparent:true,opacity:.7,sizeAttenuation:true,depthWrite:false})));
let drag=false,lastX=0,lastY=0,targetX=.25,targetY=-.4,distance=6.4,targetDistance=6.4;const canvas=renderer.domElement;canvas.style.touchAction='none';canvas.addEventListener('pointerdown',e=>{drag=true;lastX=e.clientX;lastY=e.clientY;canvas.setPointerCapture(e.pointerId)});canvas.addEventListener('pointermove',e=>{if(!drag)return;targetY+=(e.clientX-lastX)*.006;targetX=Math.max(-1.35,Math.min(1.35,targetX+(e.clientY-lastY)*.006));lastX=e.clientX;lastY=e.clientY});canvas.addEventListener('pointerup',()=>drag=false);canvas.addEventListener('pointercancel',()=>drag=false);canvas.addEventListener('wheel',e=>{e.preventDefault();targetDistance=Math.max(3.6,Math.min(10,targetDistance+e.deltaY*.004))},{passive:false});speed.addEventListener('input',()=>speedValue.value=Number(speed.value).toFixed(2)+'×');
addEventListener('resize',()=>{camera.aspect=innerWidth/innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth,innerHeight)});
let previous=performance.now(),elapsed=0;function animate(now){requestAnimationFrame(animate);const dt=Math.min(.05,(now-previous)/1000);previous=now;elapsed+=dt;targetY+=dt*.11*Number(speed.value);globe.rotation.x+=(targetX-globe.rotation.x)*Math.min(1,dt*8);globe.rotation.y+=(targetY-globe.rotation.y)*Math.min(1,dt*8);clouds.rotation.y+=dt*.012;orbit.rotation.z+=dt*.035;for(let i=0;i<particleCount;i++){const a=i/particleCount*Math.PI*2+elapsed*(.3+(i%5)*.035),r=2.31+Math.sin(i*37.3)*.035;positions[i*3]=Math.cos(a)*r;positions[i*3+1]=Math.sin(a)*r;positions[i*3+2]=Math.sin(a*3+i)*.035}particleGeo.attributes.position.needsUpdate=true;distance+=(targetDistance-distance)*Math.min(1,dt*7);camera.position.z=distance;camera.lookAt(0,0,0);renderer.render(scene,camera)}requestAnimationFrame(animate);document.getElementById('loading').classList.add('hide');
</script>
</body>
</html>
3. Glass Sphere · Origami Crane
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Glass Sphere · Origami Crane</title>
<style>
html,body{height:100%;margin:0;background:#07111c;overflow:hidden}
svg{display:block;width:100%;height:100%}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" role="img" aria-label="A luminous folded paper crane suspended inside a photorealistic glass sphere">
<defs>
<radialGradient id="background" cx="50%" cy="37%" r="75%"><stop stop-color="#253d55"/><stop offset=".52" stop-color="#102335"/><stop offset="1" stop-color="#040b15"/></radialGradient>
<radialGradient id="sphere" cx="36%" cy="24%" r="77%"><stop stop-color="#ebfbff" stop-opacity=".38"/><stop offset=".17" stop-color="#a7d8ed" stop-opacity=".1"/><stop offset=".53" stop-color="#526f8b" stop-opacity=".07"/><stop offset=".82" stop-color="#9ac5d8" stop-opacity=".2"/><stop offset=".96" stop-color="#d7f4ff" stop-opacity=".5"/><stop offset="1" stop-color="#dff8ff" stop-opacity=".8"/></radialGradient>
<radialGradient id="inside" cx="43%" cy="32%" r="75%"><stop stop-color="#d7f8ff" stop-opacity=".19"/><stop offset=".52" stop-color="#4b8aa5" stop-opacity=".04"/><stop offset=".82" stop-color="#0b1e33" stop-opacity=".19"/><stop offset="1" stop-color="#07111c" stop-opacity=".44"/></radialGradient>
<linearGradient id="rim" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#ffffff" stop-opacity=".99"/><stop offset=".25" stop-color="#adddff" stop-opacity=".27"/><stop offset=".55" stop-color="#fff" stop-opacity=".04"/><stop offset=".78" stop-color="#d4f7ff" stop-opacity=".52"/><stop offset="1" stop-color="#fff" stop-opacity=".95"/></linearGradient>
<linearGradient id="wingLeft" x1=".12" y1=".02" x2=".93" y2=".98"><stop stop-color="#fffef1"/><stop offset=".43" stop-color="#f3d5b4"/><stop offset="1" stop-color="#9f6984"/></linearGradient>
<linearGradient id="wingRight" x1=".1" y1=".04" x2=".92" y2="1"><stop stop-color="#fffef5"/><stop offset=".43" stop-color="#f4d9c7"/><stop offset="1" stop-color="#8d6a9a"/></linearGradient>
<linearGradient id="body" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#fffce9"/><stop offset=".42" stop-color="#e7cbb7"/><stop offset="1" stop-color="#9c7c95"/></linearGradient>
<linearGradient id="fold" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#f9e6ce"/><stop offset="1" stop-color="#ad8197"/></linearGradient>
<linearGradient id="neck" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#fff9e3"/><stop offset=".55" stop-color="#eec9bd"/><stop offset="1" stop-color="#9a7590"/></linearGradient>
<linearGradient id="caustic" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#d6faff" stop-opacity="0"/><stop offset=".52" stop-color="#d6faff" stop-opacity=".48"/><stop offset="1" stop-color="#d6faff" stop-opacity="0"/></linearGradient>
<filter id="blur8"><feGaussianBlur stdDeviation="8"/></filter>
<filter id="blur18"><feGaussianBlur stdDeviation="18"/></filter>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="13"/></filter>
<filter id="craneShadow" x="-30%" y="-30%" width="160%" height="170%"><feDropShadow dx="0" dy="14" stdDeviation="15" flood-color="#0d2037" flood-opacity=".65"/></filter>
<clipPath id="orbClip"><circle cx="500" cy="478" r="343"/></clipPath>
</defs>
<rect width="1000" height="1000" fill="url(#background)"/>
<g opacity=".75" fill="#a4dceb"><circle cx="120" cy="150" r="1.3"/><circle cx="813" cy="162" r="1.1"/><circle cx="888" cy="620" r="1.2"/><circle cx="158" cy="718" r="1.4"/><circle cx="738" cy="783" r=".9"/><circle cx="289" cy="96" r=".8"/></g>
<ellipse cx="504" cy="865" rx="267" ry="34" fill="#020b13" opacity=".75" filter="url(#blur18)"/>
<ellipse cx="503" cy="840" rx="189" ry="13" fill="#87c3dd" opacity=".16" filter="url(#blur8)"/>
<circle cx="500" cy="478" r="354" fill="#c9f2ff" opacity=".23" filter="url(#blur18)"/>
<circle cx="500" cy="478" r="343" fill="url(#sphere)"/>
<g clip-path="url(#orbClip)">
<circle cx="500" cy="478" r="343" fill="url(#inside)"/>
<ellipse cx="499" cy="686" rx="240" ry="79" fill="#08192a" opacity=".34" filter="url(#blur18)"/>
<ellipse cx="485" cy="687" rx="156" ry="24" fill="#c7eeff" opacity=".12" filter="url(#blur18)"/>
<path d="M184 341 Q383 218 599 158 Q392 300 206 523" fill="none" stroke="url(#caustic)" stroke-width="15" opacity=".45" filter="url(#blur8)"/>
<path d="M788 264 Q685 382 787 592" fill="none" stroke="#d8faff" stroke-width="14" opacity=".16" filter="url(#blur8)"/>
<!-- The crane is built from individually shaded folded facets. -->
<g filter="url(#craneShadow)" stroke-linejoin="round" stroke-linecap="round">
<!-- rear wing: long swept plane and folded ribs -->
<path d="M491 509 L281 252 L326 432 L423 542 Z" fill="url(#wingLeft)" stroke="#fff0df" stroke-width="2.2"/>
<path d="M281 252 L395 481 L491 509 Z" fill="#fff9e9" opacity=".84" stroke="#fff9ef" stroke-width="1.3"/>
<path d="M281 252 L326 432 L395 481 Z" fill="#cba7a2" opacity=".52"/>
<path d="M326 432 L423 542 L395 481 Z" fill="#9d7c96" opacity=".58"/>
<path d="M281 252 L395 481 M326 432 L395 481 M395 481 L491 509" fill="none" stroke="#a77f8b" stroke-width="2" opacity=".48"/>
<path d="M317 335 L372 465 M338 382 L397 480" stroke="#fff9eb" stroke-width="1.8" opacity=".5"/>
<!-- far tail, with a visible reverse fold -->
<path d="M512 520 L631 361 L582 545 L554 567 Z" fill="url(#fold)" stroke="#f7e8dc" stroke-width="2"/>
<path d="M631 361 L581 545 L540 526 Z" fill="#f2d4c6"/>
<path d="M631 361 L574 476 L581 545" fill="none" stroke="#a67f94" stroke-width="1.7" opacity=".66"/>
<path d="M575 473 L602 457 L582 545" fill="#b68b9c" opacity=".48"/>
<!-- neck, bent head, beak -->
<path d="M535 515 L650 357 L679 294 L703 309 L687 381 L591 539 Z" fill="url(#neck)" stroke="#fff4e3" stroke-width="2.4"/>
<path d="M650 357 L679 294 L703 309 L687 381 Z" fill="#fff9e6" opacity=".8"/>
<path d="M679 294 L733 315 L700 327 L687 381 Z" fill="#ead0c5" stroke="#fff5e6" stroke-width="2"/>
<path d="M733 315 L700 327 L747 334 Z" fill="#a67d91"/>
<path d="M650 357 L591 539 L687 381 M679 294 L700 327" fill="none" stroke="#aa8a96" stroke-width="1.8" opacity=".65"/>
<circle cx="713" cy="317" r="2.1" fill="#3d3546"/>
<!-- body underside and folded belly -->
<path d="M405 504 L529 488 L602 541 L512 621 L431 578 Z" fill="url(#body)" stroke="#fff7e8" stroke-width="2.5"/>
<path d="M405 504 L507 534 L512 621 L431 578 Z" fill="#b68f9b" opacity=".56"/>
<path d="M507 534 L602 541 L512 621 Z" fill="#f7dbc6" opacity=".9"/>
<path d="M405 504 L507 534 L602 541 M507 534 L512 621 M431 578 L512 621" fill="none" stroke="#9d7a8f" stroke-width="2.1" opacity=".55"/>
<path d="M455 552 L505 582 L555 558" fill="none" stroke="#fff7e6" stroke-width="2" opacity=".48"/>
<!-- near wing catches the key light -->
<path d="M461 512 L371 222 L485 357 L594 532 L513 550 Z" fill="url(#wingRight)" stroke="#fff9e8" stroke-width="2.7"/>
<path d="M371 222 L450 442 L461 512 L485 357 Z" fill="#fffef0" opacity=".93"/>
<path d="M371 222 L594 532 L485 357 Z" fill="#f6dfcc" opacity=".74"/>
<path d="M485 357 L594 532 L513 550 L461 512 Z" fill="#b6949c" opacity=".6"/>
<path d="M371 222 L485 357 L594 532 M450 442 L461 512 L513 550 M485 357 L461 512" fill="none" stroke="#ad8b97" stroke-width="2.2" opacity=".6"/>
<path d="M391 294 L474 475 M414 362 L488 500 M493 374 L553 488" fill="none" stroke="#fffdf0" stroke-width="1.7" opacity=".47"/>
<path d="M371 222 L383 269 L431 375" fill="none" stroke="#fff" stroke-width="3.2" opacity=".6"/>
</g>
<!-- Glass refraction: subtle displaced echo of the crane at the curved edge. -->
<path d="M229 457 Q273 591 398 668" fill="none" stroke="#e6fbff" stroke-width="9" opacity=".13" filter="url(#blur8)"/>
<path d="M775 421 Q818 552 719 666" fill="none" stroke="#d8f4ff" stroke-width="11" opacity=".18" filter="url(#blur8)"/>
<path d="M179 480 Q181 701 398 797" fill="none" stroke="#c0edff" stroke-width="35" opacity=".07"/>
<ellipse cx="397" cy="241" rx="188" ry="83" transform="rotate(-29 397 241)" fill="#fff" opacity=".075" filter="url(#blur18)"/>
<path d="M226 365 C252 262 341 192 448 168" fill="none" stroke="#fff" stroke-width="13" opacity=".38" filter="url(#blur8)"/>
<path d="M240 338 C275 244 346 199 420 180" fill="none" stroke="#fff" stroke-width="4" opacity=".57"/>
<path d="M585 157 C704 190 776 279 799 382" fill="none" stroke="#fff" stroke-width="17" opacity=".19" filter="url(#blur8)"/>
<path d="M755 606 Q702 739 566 788" fill="none" stroke="#fff" stroke-width="18" opacity=".18" filter="url(#blur8)"/>
<path d="M330 729 Q502 832 667 720" fill="none" stroke="#e8fbff" stroke-width="3" opacity=".2"/>
<circle cx="304" cy="251" r="8" fill="#fff" opacity=".6" filter="url(#blur8)"/>
<circle cx="307" cy="247" r="2.8" fill="#fff" opacity=".94"/>
</g>
<circle cx="500" cy="478" r="343" fill="none" stroke="url(#rim)" stroke-width="9"/>
<circle cx="500" cy="478" r="339" fill="none" stroke="#e7faff" stroke-opacity=".17" stroke-width="2"/>
<path d="M210 297 A343 343 0 0 1 477 136" fill="none" stroke="#fff" stroke-width="3" opacity=".58" stroke-linecap="round"/>
<path d="M714 745 A343 343 0 0 1 546 818" fill="none" stroke="#eaffff" stroke-width="5" opacity=".49" stroke-linecap="round"/>
</svg>
</body>
</html>
What this sample can tell us
Read Next
GPT-6 Luna Browser Coding Test: Aetherfall, Pelagic & Glass Crane
A hands-on look at three GPT-6 Luna creative-coding artifacts: the Aetherfall wizard game, Pelagic procedural globe, and glass origami crane, with interactive previews and scope notes.
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.