<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Aurora — Fluid Gradient</title> <style> *{margin:0;padding:0;box-sizing:border-box} html,body{width:100%;height:100%;overflow:hidden;background:#04060a; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif} #c{display:block;width:100%;height:100%} .bar{ position:fixed;left:50%;bottom:22px;transform:translateX(-50%); display:flex;align-items:center;gap:8px; padding:8px 10px;border-radius:999px; background:rgba(10,14,20,0.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.12);box-shadow:0 10px 40px rgba(0,0,0,0.45); z-index:10;user-select:none;max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:center; } .btn{ display:inline-flex;align-items:center;justify-content:center; height:38px;min-width:38px;padding:0 10px;border-radius:999px;border:none; background:transparent;color:#eaf1ff;cursor:pointer;font-size:12px;font-weight:600;letter-spacing:.3px; transition:background .15s ease,transform .1s ease; } .btn:hover{background:rgba(255,255,255,0.12)} .btn:active{transform:scale(.94)} .btn svg{width:18px;height:18px} .icon{padding:0;width:38px} .sep{width:1px;height:24px;background:rgba(255,255,255,0.14);margin:0 2px} input[type=range].scrub{ -webkit-appearance:none;appearance:none;width:150px;height:4px;border-radius:999px; background:rgba(255,255,255,0.22);outline:none;cursor:pointer; } input[type=range].scrub::-webkit-slider-thumb{ -webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#eaf1ff;border:none; box-shadow:0 1px 4px rgba(0,0,0,.4)} input[type=range].scrub::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#eaf1ff;border:none} .exp{display:flex;gap:4px} .exp .btn{height:30px;min-width:0;padding:0 11px;font-size:11px;background:rgba(255,255,255,0.09)} .exp .btn:hover{background:rgba(255,255,255,0.2)} .toast{ position:fixed;left:50%;top:20px;transform:translateX(-50%); background:rgba(10,14,20,0.72);color:#eaf1ff;padding:8px 16px;border-radius:999px;font-size:12px; border:1px solid rgba(255,255,255,0.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:20} .toast.show{opacity:1} </style> </head> <body> <canvas id="c"></canvas> <div class="bar"> <button class="btn icon" id="rewind" title="Rewind to start" aria-label="Rewind"> <svg viewBox="0 0 24 24"><polygon points="11 18 3 12 11 6" fill="currentColor"/><polygon points="21 18 13 12 21 6" fill="currentColor"/><rect x="2" y="6" width="1.6" height="12" rx="0.8" fill="currentColor"/></svg> </button> <button class="btn icon" id="play" title="Play / Pause" aria-label="Play or pause"> <svg id="playIcon" viewBox="0 0 24 24"></svg> </button> <input type="range" class="scrub" id="scrub" min="0" max="1000" value="0" aria-label="Timeline"> <div class="sep"></div> <div class="exp"> <button class="btn" data-exp="png">PNG</button> <button class="btn" data-exp="jpg">JPG</button> <button class="btn" data-exp="svg">SVG</button> <button class="btn" data-exp="mp4">MP4</button> </div> </div> <div class="toast" id="toast"></div> <script> (function(){ var canvas = document.getElementById('c'); var gl = canvas.getContext('webgl', { preserveDrawingBuffer:true, antialias:true, premultipliedAlpha:false }) || canvas.getContext('experimental-webgl', { preserveDrawingBuffer:true }); if(!gl){ document.body.innerHTML = '<div style="color:#eaf1ff;padding:40px;font-family:sans-serif">WebGL is not supported in this browser.</div>'; return; } var vsrc = 'attribute vec2 a_pos; void main(){ gl_Position = vec4(a_pos,0.0,1.0); }'; var fsrc = [ 'precision highp float;', '#define RIPPLES 6', 'uniform float u_time; uniform vec2 u_res;', 'uniform vec2 u_mouse; uniform float u_mstr; uniform float u_seed;', 'uniform vec3 u_ripples[RIPPLES];', 'float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }', 'float noise(vec2 p){ vec2 i=floor(p), f=fract(p);', ' float a=hash(i), b=hash(i+vec2(1.0,0.0)), c=hash(i+vec2(0.0,1.0)), d=hash(i+vec2(1.0,1.0));', ' vec2 u=f*f*(3.0-2.0*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }', 'float fbm(vec2 p){ float v=0.0, a=0.5; for(int i=0;i<5;i++){ v+=a*noise(p); p=p*2.02+vec2(1.7,9.2); a*=0.5; } return v; }', 'void main(){', ' vec2 uv = gl_FragCoord.xy / u_res.xy;', ' vec2 asp = vec2(u_res.x/u_res.y, 1.0);', ' vec2 p = uv; p.x *= u_res.x/u_res.y; p *= 2.4;', // per-load random seed: rotate + offset the noise field so every session is a different gradient ' float sd = u_seed;', ' float ca = cos(sd*0.017), sa = sin(sd*0.017);', ' p = mat2(ca,-sa,sa,ca)*p + vec2(sd*0.13, sd*0.09);', // cursor warps the flow toward/around itself while hovering ' vec2 md = (uv - u_mouse) * asp;', ' float mdist = length(md);', ' float mfall = exp(-mdist*3.5) * u_mstr;', ' p += normalize(md + 1e-4) * mfall * 0.55;', ' float t = u_time * 0.10;', ' vec2 q = vec2(fbm(p+vec2(0.0,t)), fbm(p+vec2(5.2,-t*0.9)));', ' vec2 r = vec2(fbm(p+2.0*q+vec2(1.7,9.2)+0.12*t), fbm(p+2.0*q+vec2(8.3,2.8)-0.10*t));', ' float f = fbm(p+2.5*r);', ' vec3 azure = vec3(0.30,0.72,1.00);', ' vec3 blue = vec3(0.10,0.34,0.98);', ' vec3 turq = vec3(0.06,0.85,0.76);', ' vec3 green = vec3(0.13,0.83,0.52);', ' vec3 orange = vec3(1.00,0.55,0.22);', ' vec3 col = mix(blue, azure, smoothstep(0.15,0.85,f));', ' col = mix(col, turq, smoothstep(0.30,0.95,r.x));', ' col = mix(col, green, smoothstep(0.35,0.98,q.y));', ' col = mix(col, orange, smoothstep(0.78,0.98,f)*0.30);', ' float glow = smoothstep(0.55,1.0,f);', ' col += glow*glow*0.45*vec3(0.35,0.75,1.0);', ' col += pow(max(r.x,0.0),3.0)*0.35*turq;', // soft glow that follows the cursor ' col += u_mstr * exp(-mdist*5.0) * 0.45 * vec3(0.55,0.85,1.0);', // expanding rings from clicks ' for(int i=0;i<RIPPLES;i++){', ' float age = u_ripples[i].z; if(age < 0.0) continue;', ' vec2 rd = (uv - u_ripples[i].xy) * asp; float dd = length(rd);', ' float radius = age * 0.55;', ' float ring = exp(-pow((dd-radius)/0.045, 2.0));', ' float decay = exp(-age*1.9);', ' col += ring * decay * 0.8 * vec3(0.5,0.85,1.0);', ' }', ' float vig = smoothstep(1.35,0.25,length(uv-0.5));', ' col *= 0.82 + 0.28*vig;', ' col = pow(max(col,0.0), vec3(0.90));', ' gl_FragColor = vec4(col,1.0);', '}' ].join('\n'); function compile(type, src){ var s=gl.createShader(type); gl.shaderSource(s,src); gl.compileShader(s); if(!gl.getShaderParameter(s,gl.COMPILE_STATUS)) console.error(gl.getShaderInfoLog(s)); return s; } var prog=gl.createProgram(); gl.attachShader(prog, compile(gl.VERTEX_SHADER, vsrc)); gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, fsrc)); gl.linkProgram(prog); gl.useProgram(prog); var buf=gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 3,-1, -1,3]), gl.STATIC_DRAW); var loc=gl.getAttribLocation(prog,'a_pos'); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc,2,gl.FLOAT,false,0,0); var uTime=gl.getUniformLocation(prog,'u_time'), uRes=gl.getUniformLocation(prog,'u_res'); var uMouse=gl.getUniformLocation(prog,'u_mouse'), uMStr=gl.getUniformLocation(prog,'u_mstr'); var uSeed=gl.getUniformLocation(prog,'u_seed'), uRipples=gl.getUniformLocation(prog,'u_ripples'); function resize(){ var dpr=Math.min(window.devicePixelRatio||1, 2); var w=Math.max(1, Math.floor(canvas.clientWidth*dpr)), h=Math.max(1, Math.floor(canvas.clientHeight*dpr)); if(canvas.width!==w||canvas.height!==h){ canvas.width=w; canvas.height=h; } gl.viewport(0,0,canvas.width,canvas.height); } window.addEventListener('resize', resize); var DURATION=16.0, playing=true, scrubbing=false, recording=false, last=performance.now(); var t=Math.random()*DURATION; // random starting phase var seed=Math.random()*1000.0; // random field per load var scrub=document.getElementById('scrub'), playIcon=document.getElementById('playIcon'); // pointer influence (smoothed) + click ripples var mx=0.5, my=0.5, mxT=0.5, myT=0.5, mStr=0.0, mStrT=0.0; var ripples=[], rippleBuf=new Float32Array(18); function addRipple(x,y){ ripples.push({x:x,y:y,birth:performance.now()}); if(ripples.length>6) ripples.shift(); } function render(){ resize(); gl.uniform1f(uTime,t); gl.uniform2f(uRes,canvas.width,canvas.height); gl.uniform2f(uMouse,mx,my); gl.uniform1f(uMStr,mStr); gl.uniform1f(uSeed,seed); var now=performance.now(); for(var i=ripples.length-1;i>=0;i--){ if((now-ripples[i].birth)/1000 > 2.2) ripples.splice(i,1); } for(var j=0;j<6;j++){ if(j<ripples.length){ rippleBuf[j*3]=ripples[j].x; rippleBuf[j*3+1]=ripples[j].y; rippleBuf[j*3+2]=(now-ripples[j].birth)/1000; } else { rippleBuf[j*3]=0; rippleBuf[j*3+1]=0; rippleBuf[j*3+2]=-1; } } gl.uniform3fv(uRipples, rippleBuf); gl.drawArrays(gl.TRIANGLES,0,3); } function setPlayIcon(){ playIcon.innerHTML = playing ? '<rect x="6" y="5" width="4" height="14" rx="1" fill="currentColor"/><rect x="14" y="5" width="4" height="14" rx="1" fill="currentColor"/>' : '<polygon points="7 4 20 12 7 20" fill="currentColor"/>'; } function loop(now){ var dt=Math.min((now-last)/1000, 0.05); last=now; var kp=Math.min(1,dt*10), ks=Math.min(1,dt*6); mx+=(mxT-mx)*kp; my+=(myT-my)*kp; mStr+=(mStrT-mStr)*ks; if(!recording){ if(playing && !scrubbing){ t+=dt; if(t>DURATION) t-=DURATION; scrub.value=String(Math.round((t/DURATION)*1000)); } render(); } requestAnimationFrame(loop); } document.getElementById('play').addEventListener('click', function(){ playing=!playing; setPlayIcon(); }); document.getElementById('rewind').addEventListener('click', function(){ t=0; scrub.value='0'; }); scrub.addEventListener('input', function(){ t=(parseFloat(scrub.value)/1000)*DURATION; }); scrub.addEventListener('pointerdown', function(){ scrubbing=true; }); window.addEventListener('pointerup', function(){ scrubbing=false; }); // hover warps + glows the field; clicks/taps drop expanding ripples — makes every export unique function uvFrom(e){ return [e.clientX/window.innerWidth, 1-e.clientY/window.innerHeight]; } canvas.addEventListener('pointermove', function(e){ var u=uvFrom(e); mxT=u[0]; myT=u[1]; mStrT=1.0; }); canvas.addEventListener('pointerdown', function(e){ var u=uvFrom(e); mxT=u[0]; myT=u[1]; mStrT=1.0; addRipple(u[0],u[1]); }); canvas.addEventListener('pointerleave', function(){ mStrT=0.0; }); canvas.addEventListener('pointercancel', function(){ mStrT=0.0; }); canvas.addEventListener('pointerup', function(e){ if(e.pointerType!=='mouse') mStrT=0.0; }); var toast=document.getElementById('toast'), toastT; function showToast(m){ toast.textContent=m; toast.classList.add('show'); clearTimeout(toastT); toastT=setTimeout(function(){ toast.classList.remove('show'); },1800); } function download(url,name){ var a=document.createElement('a'); a.href=url; a.download=name; document.body.appendChild(a); a.click(); a.remove(); } function exportImage(type,ext,q){ render(); try{ download(canvas.toDataURL(type,q),'aurora-gradient.'+ext); showToast('Saved '+ext.toUpperCase()); }catch(e){ showToast('Export blocked'); } } function exportSVG(){ render(); var w=canvas.width,h=canvas.height,png=canvas.toDataURL('image/png'); var svg='<svg xmlns="http://www.w3.org/2000/svg" width="'+w+'" height="'+h+'" viewBox="0 0 '+w+' '+h+'"><image width="'+w+'" height="'+h+'" href="'+png+'"/></svg>'; download(URL.createObjectURL(new Blob([svg],{type:'image/svg+xml'})),'aurora-gradient.svg'); showToast('Saved SVG'); } function exportVideo(){ if(recording) return; if(!window.MediaRecorder || !canvas.captureStream){ showToast('Video not supported'); return; } // Count down first so you can move onto the canvas and hover/click — the // recording captures whatever you do live for the full 5 seconds. var n=3; showToast('Recording in '+n+'… hover & click the gradient'); var cd=setInterval(function(){ n--; if(n>0){ showToast('Recording in '+n+'… hover & click the gradient'); } else { clearInterval(cd); beginRec(); } }, 1000); } function beginRec(){ // preserveDrawingBuffer:true (needed for image export) stops captureStream // from auto-emitting frames, so we push them manually with requestFrame(). var stream = canvas.captureStream(0); var track = stream.getVideoTracks()[0]; var manual = !!(track && track.requestFrame); if(!manual){ stream = canvas.captureStream(30); } var cand=['video/mp4;codecs=avc1.42E01E','video/mp4','video/webm;codecs=vp9','video/webm'], mime=''; for(var i=0;i<cand.length;i++){ if(MediaRecorder.isTypeSupported(cand[i])){ mime=cand[i]; break; } } var rec; try{ rec=new MediaRecorder(stream, mime?{mimeType:mime, videoBitsPerSecond:12000000}:undefined); } catch(e){ showToast('Video not supported'); return; } var chunks=[]; rec.ondataavailable=function(e){ if(e.data&&e.data.size) chunks.push(e.data); }; rec.onstop=function(){ recording=false; if(!chunks.length){ showToast('Recording failed'); return; } var isMp4=(rec.mimeType||mime).indexOf('mp4')!==-1; download(URL.createObjectURL(new Blob(chunks,{type:isMp4?'video/mp4':'video/webm'})),'aurora-gradient.'+(isMp4?'mp4':'webm')); showToast(isMp4?'Saved MP4':'Saved WEBM (mp4 unsupported)'); }; recording=true; var startT=t, recStart=performance.now(); showToast('Recording 5s — keep interacting!'); rec.start(); (function grab(now){ var el=((now||performance.now())-recStart)/1000; t=startT+el; if(t>DURATION) t-=DURATION; render(); if(manual) track.requestFrame(); if(el<5){ requestAnimationFrame(grab); } else { setTimeout(function(){ if(rec.state!=='inactive') rec.stop(); }, 90); } })(recStart); } var buttons=document.querySelectorAll('[data-exp]'); for(var b=0;b<buttons.length;b++){ buttons[b].addEventListener('click', (function(el){ return function(){ var k=el.getAttribute('data-exp'); if(k==='png') exportImage('image/png','png'); else if(k==='jpg') exportImage('image/jpeg','jpg',0.92); else if(k==='svg') exportSVG(); else if(k==='mp4') exportVideo(); }; })(buttons[b])); } setPlayIcon(); resize(); requestAnimationFrame(loop); })(); </script> </body> </html>

Code & assets

Design System