AI Models
•
September 23, 2026
•
2 min read
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.
Mohid Mirza
Co-Founder & Lead Programmer of AcceleratedLogic AI
This gallery collects three browser artifacts supplied as GPT-6 Sol outputs: Floating Isles · Wizard Quest, a procedural globe titled The Blue Horizon, and Glass Sphere · Origami Crane. It is a small creative-coding sample, not a general coding benchmark or a model ranking.
The three supplied files are preserved as received. Floating Isles and The Blue Horizon load Three.js 0.160.1 from jsDelivr; the crane is a standalone HTML document with inline SVG. The 3D demos therefore need WebGL and an internet connection for the library. The exact prompts, generation settings, and repeat-run results were not included, so I make no claims about latency, reliability, or a controlled comparison with another model.
1. Floating Isles: Wizard Quest
The game asks the player to gather eight glowing crystals across floating islands. Its HUD tracks health and progress, and the control strip calls out WASD movement, Space to jump, drag-to-orbit camera movement, and scroll-to-zoom. The source also includes an opening overlay, hazards, and a game-ending state, making this a broader interaction test than a static 3D illustration.
The main tradeoff is the single-file format. It makes the demo easy to open and inspect, but the game logic, rendering, input handling, and interface all live in one HTML document. The file imports Three.js 0.160.1 from jsDelivr, so it is not fully offline as supplied.
<!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/[email protected]/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
The globe builds planet and cloud textures at runtime with canvas code, then renders the scene through Three.js. Its interface exposes a rotation-speed control, while pointer input adjusts the view. It is an atmospheric planet illustration rather than an accurate map, and the source imports Three.js 0.160.1 from jsDelivr.
This makes the globe a useful browser-generation example: it has to combine a procedural surface, a 3D scene, animation, resize handling, and input in one document. Its visual similarity to a real planet should not be confused with geographic fidelity.
<!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/[email protected]/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
The crane is delivered as HTML containing inline SVG. Its markup draws the sphere and folded-paper form with vector elements and visual effects; it does not need the Three.js runtime used by the two interactive scenes. The original document is embedded below, with a direct link for opening it on its own.
<!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
Sol's supplied set spans a stateful game, a procedural 3D scene, and vector illustration. These artifacts make it possible to inspect a few kinds of browser output, but they do not establish a pass rate or show how GPT-6 Sol performs across ordinary software tasks. A fair model comparison would need identical prompts, settings, browser conditions, and a repeated evaluation rubric.
Read Next
AI Models
•
3 min read
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.
Mohid Mirza
Always Updating Lists
•
4 min read
Top 10 Best Budget AI Models Right Now (August 2026)
The price of solid intelligence has collapsed. Here are the top 10 best budget AI models in August 2026 balancing high benchmark performance with rock-bottom API rates and open-weight efficiency.
Mohid Mirza
AI Models
•
3 min read
Grok 4.7 Browser Coding Test: Glass Crane, Procedural Globe, and a Game Cut Short
Hands-on Grok 4.7 CLI test with embedded SVG crane and interactive Three.js globe HTML, browser observations, and an explicit account of the wizard-game request that failed at the CLI quota limit.
Mohid Mirza