<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sponsor Orbit — WebGL</title> <meta name="description" content="A community/sponsor constellation: avatar and brand tokens orbit a central hub in real 3D space, rendered in WebGL. Slow orbit, pointer parallax, hover-to-inspect, click-to-ripple, light and dark themes." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" /> <style> *{margin:0;padding:0;box-sizing:border-box} :root{ /* dark (default) */ --bg:#09090c; --bg2:#101017; --ink:#f3f3f6; --muted:#9a9aa8; --tip-bg:#ffffff; --tip-ink:#111116; --line:rgba(255,255,255,.12); } body.light{ --bg:#eef0f5; --bg2:#e2e5ee; --ink:#16161d; --muted:#5b5b6a; --tip-bg:#16161d; --tip-ink:#ffffff; --line:rgba(20,20,40,.14); } html,body{height:100%} body{ background:radial-gradient(120% 90% at 50% 42%, var(--bg2), var(--bg) 70%); color:var(--ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; overflow:hidden; min-height:100vh; transition:background .4s ease, color .4s ease; } .stage{position:fixed; inset:0; z-index:1} canvas{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair} /* theme toggle */ .theme{position:fixed; top:18px; right:18px; z-index:6; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--muted); background:rgba(127,127,140,.10); border:1px solid var(--line); transition:color .2s, transform .15s, border-color .2s, background .2s} .theme:hover{color:var(--ink); border-color:var(--ink)} .theme:active{transform:scale(.9)} .theme svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* "Become a Sponsor" tooltip, anchored to the hub */ .tip{position:absolute; z-index:4; display:flex; align-items:center; gap:8px; padding:9px 14px 9px 11px; border-radius:12px; background:var(--tip-bg); color:var(--tip-ink); font-size:14px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; box-shadow:0 14px 34px -12px rgba(0,0,0,.55); transform:translate(-4px,-2px) scale(.94); transform-origin:left center; pointer-events:none; opacity:0; transition:transform .28s cubic-bezier(.22,1,.36,1), opacity .2s ease} .tip.hot{opacity:1; transform:translate(-4px,-6px) scale(1)} .tip .cur{width:15px; height:15px; flex:0 0 auto; color:var(--tip-ink)} .tip .cur svg{width:100%;height:100%;fill:currentColor} @keyframes tipIn{to{opacity:1}} /* token name tag on hover */ .tag{position:absolute; z-index:5; padding:5px 10px; border-radius:9px; background:var(--tip-bg); color:var(--tip-ink); font-size:12px; font-weight:600; white-space:nowrap; box-shadow:0 10px 24px -10px rgba(0,0,0,.5); pointer-events:none; opacity:0; transform:translate(-50%,-4px) scale(.9); transform-origin:bottom center; transition:opacity .16s ease, transform .16s cubic-bezier(.22,1,.36,1)} .tag.on{opacity:1; transform:translate(-50%,-4px) scale(1)} .tag small{display:block; font-weight:500; font-size:10.5px; opacity:.6; margin-top:1px} .hint{position:fixed; left:0; right:0; bottom:16px; text-align:center; z-index:3; color:var(--muted); font-size:11.5px; letter-spacing:.02em; pointer-events:none; opacity:0; animation:tipIn .8s ease 1s forwards} </style> </head> <body> <button class="theme" id="theme" type="button" aria-label="Toggle theme"></button> <div class="stage" id="stage"> <canvas id="gl"></canvas> <div class="tip" id="tip"> <span class="cur"><svg viewBox="0 0 16 16"><path d="M2 1.6l10.4 5.2-4.3 1.2 2.4 4.6-1.9 1-2.4-4.6L3 12.1z"/></svg></span> <span>Join our community</span> </div> <div class="tag" id="tag"></div> </div> <div class="hint">Slow orbit in 3D · hover a token · click the hub</div> <script> (function(){ var RM = matchMedia('(prefers-reduced-motion: reduce)').matches; var stage = document.getElementById('stage'); var cv = document.getElementById('gl'); var gl = cv.getContext('webgl', {alpha:true, premultipliedAlpha:true, antialias:true}); if(!gl){ stage.innerHTML = '<div style="position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:13px">WebGL is required to view this piece.</div>'; return; } /* ---------- token data ---------- */ var GRADS = [['#5aa0ff','#2b5cff'],['#37d0c0','#12988a'],['#a980ff','#6a3cff'], ['#ff7aa8','#df3f79'],['#49c86f','#159a49'],['#6a86ff','#3f4fd6']]; var ORANGE='#f4711e', AMBER='#ffb020'; var TOKENS = [ {kind:'avatar', name:'Maya Rendon', role:'Community', g:0, ini:'MR'}, {kind:'brand', name:'Northwind', role:'Sponsor', c:ORANGE, glyph:'N'}, {kind:'avatar', name:'Devon Kaye', role:'Contributor',g:1, ini:'DK'}, {kind:'brand', name:'Acme Labs', role:'Sponsor', c:ORANGE, glyph:'A'}, {kind:'avatar', name:'Priya Sundar', role:'Maintainer', g:2, ini:'PS'}, {kind:'brand', name:'Vertex', role:'Sponsor', c:AMBER, glyph:'*'}, {kind:'avatar', name:'Leah Mercer', role:'Backer', g:3, ini:'LM'}, {kind:'brand', name:'Kanso', role:'Sponsor', c:ORANGE, glyph:'K'}, {kind:'avatar', name:'Tomas Beck', role:'Contributor',g:4, ini:'TB'}, {kind:'brand', name:'Orbital', role:'Sponsor', c:AMBER, glyph:'O'}, {kind:'avatar', name:'Sana Wu', role:'Community', g:5, ini:'SW'}, {kind:'hub'} ]; var N = TOKENS.length, HUB_I = N-1; /* ---------- atlas (procedural token textures) ---------- */ var ACOLS=4, CELL=256, AROWS=Math.ceil(N/ACOLS); var atlas = document.createElement('canvas'); atlas.width = ACOLS*CELL; atlas.height = AROWS*CELL; var actx = atlas.getContext('2d'); var uv = new Array(N); var tex = gl.createTexture(); function themeColors(){ var light = document.body.classList.contains('light'); return light ? {chip:'#ffffff', chipEdge:'rgba(20,20,40,.14)', hub:'#e7eaf2', hubEdge:'rgba(20,20,40,.12)', plus:'rgba(30,30,45,.72)', dot:'rgba(30,30,50,.10)', ini:'#ffffff'} : {chip:'#191920', chipEdge:'rgba(255,255,255,.14)', hub:'#1a1a22', hubEdge:'rgba(255,255,255,.10)', plus:'rgba(255,255,255,.82)', dot:'rgba(255,255,255,.11)', ini:'#ffffff'}; } function roundToken(cx,cy,r,fill,edge){ actx.beginPath(); actx.arc(cx,cy,r,0,7); actx.closePath(); actx.fillStyle=fill; actx.fill(); if(edge){ actx.lineWidth=CELL*0.018; actx.strokeStyle=edge; actx.stroke(); } } function drawGlyph(cx,cy,r,ch,color){ actx.fillStyle=color; if(ch==='*'){ // spark actx.save(); actx.translate(cx,cy); for(var k=0;k<4;k++){ actx.rotate(Math.PI/4); actx.beginPath(); actx.moveTo(0,-r*0.62); actx.lineTo(r*0.13,0); actx.lineTo(0,r*0.62); actx.lineTo(-r*0.13,0); actx.closePath(); actx.fill(); } actx.beginPath(); actx.arc(0,0,r*0.16,0,7); actx.fill(); actx.restore(); return; } actx.font='800 '+Math.round(r*1.15)+'px Inter, sans-serif'; actx.textAlign='center'; actx.textBaseline='middle'; actx.fillText(ch, cx, cy+r*0.06); } function buildAtlas(){ var th = themeColors(); actx.clearRect(0,0,atlas.width,atlas.height); for(var i=0;i<N;i++){ var col=i%ACOLS, row=(i/ACOLS)|0; var cx=col*CELL+CELL/2, cy=row*CELL+CELL/2, R=CELL*0.44; var t=TOKENS[i]; if(t.kind==='hub'){ roundToken(cx,cy,R, th.hub, th.hubEdge); // dotted texture, clipped to circle actx.save(); actx.beginPath(); actx.arc(cx,cy,R*0.94,0,7); actx.clip(); actx.fillStyle=th.dot; var step=CELL*0.052; for(var yy=cy-R;yy<cy+R;yy+=step) for(var xx=cx-R;xx<cx+R;xx+=step){ actx.beginPath(); actx.arc(xx,yy,CELL*0.008,0,7); actx.fill(); } actx.restore(); // plus var pw=R*0.66, pt=R*0.20; actx.fillStyle=th.plus; rr(cx-pt/2, cy-pw, pt, pw*2, pt*0.5); rr(cx-pw, cy-pt/2, pw*2, pt, pt*0.5); } else if(t.kind==='brand'){ roundToken(cx,cy,R, th.chip, th.chipEdge); roundToken(cx,cy,R*0.80, t.c, null); drawGlyph(cx,cy,R*0.5, t.glyph, '#ffffff'); } else { roundToken(cx,cy,R, th.chip, th.chipEdge); var g=GRADS[t.g], grd=actx.createLinearGradient(cx,cy-R,cx,cy+R); grd.addColorStop(0,g[0]); grd.addColorStop(1,g[1]); roundToken(cx,cy,R*0.80, grd, null); actx.fillStyle=th.ini; actx.font='700 '+Math.round(R*0.52)+'px Inter, sans-serif'; actx.textAlign='center'; actx.textBaseline='middle'; actx.fillText(t.ini, cx, cy+R*0.04); } var u0=(col*CELL)/atlas.width, du=CELL/atlas.width; var vB=1-((row+1)*CELL)/atlas.height, dv=CELL/atlas.height; uv[i]={u0:u0,v0:vB,du:du,dv:dv}; } uploadAtlas(); } function rr(x,y,w,h,rad){ actx.beginPath(); actx.moveTo(x+rad,y); actx.arcTo(x+w,y,x+w,y+h,rad); actx.arcTo(x+w,y+h,x,y+h,rad); actx.arcTo(x,y+h,x,y,rad); actx.arcTo(x,y,x+w,y,rad); actx.closePath(); actx.fill(); } function uploadAtlas(){ gl.bindTexture(gl.TEXTURE_2D, tex); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,atlas); gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE); } /* ---------- shaders ---------- */ function sh(type,src){ var s=gl.createShader(type); gl.shaderSource(s,src); gl.compileShader(s); return s; } function prog(v,f){ var p=gl.createProgram(); gl.attachShader(p,sh(gl.VERTEX_SHADER,v)); gl.attachShader(p,sh(gl.FRAGMENT_SHADER,f)); gl.linkProgram(p); return p; } var quadP = prog( 'attribute vec2 a;uniform vec2 uC;uniform vec2 uH;uniform vec4 uUV;varying vec2 vT;'+ 'void main(){vT=uUV.xy+a*uUV.zw;gl_Position=vec4(uC+(a*2.0-1.0)*uH,0.0,1.0);}', 'precision mediump float;uniform sampler2D uS;uniform float uO;varying vec2 vT;'+ 'void main(){vec4 c=texture2D(uS,vT);gl_FragColor=c*uO;}' ); var qA=gl.getAttribLocation(quadP,'a'); var qC=gl.getUniformLocation(quadP,'uC'), qH=gl.getUniformLocation(quadP,'uH'); var qUV=gl.getUniformLocation(quadP,'uUV'), qO=gl.getUniformLocation(quadP,'uO'), qS=gl.getUniformLocation(quadP,'uS'); var lineP = prog( 'attribute vec2 a;void main(){gl_Position=vec4(a,0.0,1.0);}', 'precision mediump float;uniform vec4 uCol;void main(){gl_FragColor=uCol;}' ); var lA=gl.getAttribLocation(lineP,'a'), lCol=gl.getUniformLocation(lineP,'uCol'); var quadBuf=gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,quadBuf); gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([0,0, 1,0, 0,1, 1,1]),gl.STATIC_DRAW); var lineBuf=gl.createBuffer(); /* ---------- geometry / scene ---------- */ var W=0,H=0,dpr=1,M=0,K=0,TOK=0,HUB=0,CY=0; var Ri=2.45, T=24*Math.PI/180, D=6.0, FOC=6.0; var RING=2.5; function easeInOut(u){ return u<0.5 ? 4*u*u*u : 1-Math.pow(-2*u+2,3)/2; } var base=[]; for(var i=0;i<N-1;i++) base.push(i/(N-1)*Math.PI*2); function resize(){ dpr=Math.min(2,window.devicePixelRatio||1); var r=stage.getBoundingClientRect(); W=r.width; H=r.height; cv.width=Math.round(W*dpr); cv.height=Math.round(H*dpr); gl.viewport(0,0,cv.width,cv.height); M=Math.min(W,H); K=Math.min(W*0.155, H*0.37); TOK=M*0.052; HUB=M*0.165; CY=H*0.45; } new ResizeObserver(resize).observe(stage); resize(); function project(x1,y1,z1){ var p=FOC/(D-z1); return {cx:W/2 + x1*K*p, cy:CY - y1*K*p, p:p, z1:z1}; } function toClip(cx,cy){ return [cx/W*2-1, 1-cy/H*2]; } /* ---------- interaction state ---------- */ var spin=0, spinScale=1, spinScaleT=1, SPEED=RM?0:0.17; var mx=-999,my=-999, yaw=0,yawT=0, tiltA=0,tiltT=0; var hoverIdx=-1, hubHot=false, ripples=[]; var tip=document.getElementById('tip'), tag=document.getElementById('tag'); stage.addEventListener('pointermove',function(e){ var r=stage.getBoundingClientRect(); mx=e.clientX-r.left; my=e.clientY-r.top; yawT=(mx/W-0.5)*0.5; tiltT=(my/H-0.5)*0.12; }); stage.addEventListener('pointerleave',function(){ mx=my=-999; yawT=0; tiltT=0; }); stage.addEventListener('pointerdown',function(e){ var r=stage.getBoundingClientRect(), px=e.clientX-r.left, py=e.clientY-r.top; if(Math.hypot(px-W/2,py-CY) < HUB){ ripples.push(performance.now()); if(ripples.length>4) ripples.shift(); } }); /* ---------- draw ---------- */ var order=[]; for(var i=0;i<N;i++) order.push(i); function drawRing(radius, colArr){ var pts=[], n=72, sinT=Math.sin(tiltA+T), cosT=Math.cos(tiltA+T); for(var k=0;k<n;k++){ var a=k/n*Math.PI*2, z0=Math.sin(a)*radius, x0=Math.cos(a)*radius; var pr=project(x0, -z0*sinT, z0*cosT); var c=toClip(pr.cx,pr.cy); pts.push(c[0],c[1]); } gl.useProgram(lineP); gl.bindBuffer(gl.ARRAY_BUFFER,lineBuf); gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(pts),gl.DYNAMIC_DRAW); gl.enableVertexAttribArray(lA); gl.vertexAttribPointer(lA,2,gl.FLOAT,false,0,0); gl.uniform4fv(lCol, colArr); gl.drawArrays(gl.LINE_LOOP,0,n); } var frames=[]; // per-token screen info for hit-test function frame(now, dt){ spinScale += (spinScaleT-spinScale)*0.08; spin += dt*SPEED*spinScale; yaw += (yawT-yaw)*0.05; tiltA += (tiltT-tiltA)*0.05; gl.clearColor(0,0,0,0); gl.clear(gl.COLOR_BUFFER_BIT); gl.disable(gl.DEPTH_TEST); gl.enable(gl.BLEND); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); // single faint guide ring + click ripples var lc = document.body.classList.contains('light') ? [.10,.10,.16] : [1,1,1]; var la1 = document.body.classList.contains('light') ? .14 : .10; drawRing(RING,[lc[0]*la1,lc[1]*la1,lc[2]*la1,la1]); var RDUR=1.8; for(var ri=ripples.length-1;ri>=0;ri--){ var age=(now-ripples[ri])/1000; if(age>RDUR){ ripples.splice(ri,1); continue; } var u=age/RDUR, e=easeInOut(u); var rad=Ri*(0.5+e*1.7), al=Math.sin(u*Math.PI)*0.6; drawRing(rad,[lc[0]*al,lc[1]*al,lc[2]*al,al]); } // token positions var sinT=Math.sin(tiltA+T), cosT=Math.cos(tiltA+T); frames.length=0; for(var i=0;i<N;i++){ var t=TOKENS[i], x1,y1,z1; if(t.kind==='hub'){ x1=0;y1=0;z1=0; } else{ var a=base[i]+spin+yaw, z0=Math.sin(a)*Ri, x0=Math.cos(a)*Ri; x1=x0; y1=-z0*sinT; z1=z0*cosT; } var pr=project(x1,y1,z1); var isHub=(t.kind==='hub'); var half=(isHub?HUB:TOK)*pr.p; var depthN=z1/Ri; // -1 back .. +1 front var op=isHub?1:(0.5+0.5*(depthN*0.5+0.5)); frames.push({i:i,cx:pr.cx,cy:pr.cy,r:half,z1:z1,op:op,isHub:isHub}); } // hover hit-test (nearest to front) hoverIdx=-1; hubHot=false; if(mx>-500){ var best=-1,bestZ=-1e9; for(var f=0;f<frames.length;f++){ var fr=frames[f]; if(fr.isHub){ if(Math.hypot(mx-fr.cx,my-fr.cy)<fr.r){ hubHot=true; } continue; } if(Math.hypot(mx-fr.cx,my-fr.cy)<fr.r*1.05 && fr.z1>bestZ){ best=fr.i; bestZ=fr.z1; } } hoverIdx=best; } spinScaleT=(hoverIdx>=0||hubHot)?0.18:1; // sort back -> front, draw order.sort(function(a,b){ return frames[a].z1 - frames[b].z1; }); gl.useProgram(quadP); gl.bindBuffer(gl.ARRAY_BUFFER,quadBuf); gl.enableVertexAttribArray(qA); gl.vertexAttribPointer(qA,2,gl.FLOAT,false,0,0); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D,tex); gl.uniform1i(qS,0); for(var o=0;o<order.length;o++){ var fr=frames[order[o]], u=uv[fr.i]; var boost=(fr.i===hoverIdx)?1.16:(fr.isHub&&hubHot?1.06:1); var hx=(fr.r*boost)/(W/2), hy=(fr.r*boost)/(H/2); var c=toClip(fr.cx,fr.cy); gl.uniform2f(qC,c[0],c[1]); gl.uniform2f(qH,hx,hy); gl.uniform4f(qUV,u.u0,u.v0,u.du,u.dv); gl.uniform1f(qO, fr.i===hoverIdx?1:fr.op); gl.drawArrays(gl.TRIANGLE_STRIP,0,4); } // DOM overlays tip.style.left=(W/2+HUB*0.86)+'px'; tip.style.top=(CY-HUB*0.62)+'px'; tip.classList.toggle('hot',hubHot); if(hoverIdx>=0){ var ht=TOKENS[hoverIdx], hf=frames[hoverIdx]; tag.innerHTML=ht.name+'<small>'+ht.role+'</small>'; tag.style.left=hf.cx+'px'; tag.style.top=(hf.cy-hf.r-6)+'px'; tag.classList.add('on'); cv.style.cursor='pointer'; } else { tag.classList.remove('on'); cv.style.cursor=hubHot?'pointer':'crosshair'; } } var last=performance.now(); function loop(now){ var dt=Math.min(0.05,(now-last)/1000); last=now; frame(now,dt); requestAnimationFrame(loop); } // theme toggle var SUN='<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4.5"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19"/></svg>'; var MOON='<svg viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>'; var themeBtn=document.getElementById('theme'); function paint(){ themeBtn.innerHTML=document.body.classList.contains('light')?MOON:SUN; } themeBtn.addEventListener('click',function(){ document.body.classList.toggle('light'); buildAtlas(); paint(); }); buildAtlas(); paint(); requestAnimationFrame(loop); })(); </script> </body> </html>

Code & assets

Design System