https://rentaltide.com/assets/meshGradient-DuhqA3lJ.js

1import{W as ae,S as re,a as ne,O as oe,P as ie,V as T,b as G,c as se,d as ue,M as le}from"./vendor-three-Bkgm7PG_.js";import{aU as H}from"./index-BBlr5mjY.js";import"./vendor-icons-DdDstFZX.js";const ce=1200;function de(r,t){let x=0,m=0,l=0,i=0,s=0,f=r==="A-",g=!1,w=!1;const _=[];return{begin(v){x||(x=v)},frame(v,c,b){if(w||!x||(m++,m<=3))return;if(!g&&m<=12&&(_.push(v),m===12)){g=!0;const A=_.slice().sort((B,C)=>B-C);A[Math.floor(A.length/2)]>20&&t("shrink")}const y=c-x;if(!(y<400)){if(y<2e3){l=v>32?l+1:0,l>=3&&(w=!0,t("dispose"));return}if(b<30){if(!s)s=c;else if(c-s>=3e3){w=!0,t("dispose");return}}else s=0;f||(b<45?i?c-i>=2e3&&(f=!0,t("reduce")):i=c:i=0)}}}}const o=r=>[(r>>16&255)/255,(r>>8&255)/255,(r&255)/255],he=[{home:[.06,.04],radius:[1.18,.92],alpha:.95,edge:.58,colour:o(12250860)},{home:[.78,0],radius:[.96,.84],alpha:.9,edge:.56,colour:o(12510201)},{home:[.24,1.02],radius:[1.24,1.02],alpha:.92,edge:.58,colour:o(13756154)},{home:[1,.58],radius:[.72,.74],alpha:.7,edge:.6,colour:o(12906232)},{home:[.88,.92],radius:[.58,.62],alpha:.3,edge:.62,colour:o(1031867)},{home:[.66,.18],radius:[.44,.52],alpha:.25,edge:.64,colour:o(3001584)}],me=[o(15989756),o(16777215)],fe=[{home:[.06,.04],radius:[1.18,.92],alpha:.22,edge:.58,colour:o(1031867)},{home:[.78,0],radius:[.96,.84],alpha:.18,edge:.56,colour:o(3001584)},{home:[.58,1.04],radius:[.92,.96],alpha:.14,edge:.58,colour:o(8831220)},{home:[1,.58],radius:[.72,.74],alpha:.55,edge:.6,colour:o(16717)},{home:[.66,.18],radius:[.44,.52],alpha:0,edge:.64,colour:o(3001584)},{home:[.88,.92],radius:[.58,.62],alpha:0,edge:.62,colour:o(1031867)}],ve=[o(1253940),o(725792)],pe=9e5,X=6e5,ge=[[23,29,0,1.7],[27,31,2.3,.4],[29,23,4.1,3.2],[31,37,1.2,5],[37,41,5.6,2.1],[41,27,3.4,.9]],we=`
2varying vec2 vUv;
3void main() {
4  vUv = uv;
5  gl_Position = vec4(position.xy, 0.0, 1.0);
6}
7`,Ae=`
8precision highp float;
9varying vec2 vUv;
10uniform float uTime;
11uniform vec2  uRes;
12uniform float uAmp;
13uniform float uDither;
14uniform vec3  uBaseA;
15uniform vec3  uBaseB;
16uniform vec3  uColour[6];
17uniform vec2  uHome[6];
18uniform vec2  uRadius[6];
19uniform vec2  uFall[6];    /* x: alpha, y: edge */
20uniform vec4  uPhase[6];   /* x: period x, y: period y, z: phase x, w: phase y */
21
22const float TAU = 6.2831853;
23
24float hash(vec2 p) {
25  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
26}
27
28void main() {
29  /* y down, top left origin, so the uv here is the same coordinate the CSS
30     percentages are quoted in. */
31  vec2 uv = vec2(vUv.x, 1.0 - vUv.y);
32
33  /* The base: linear-gradient(168deg, A 0%, B 82%). */
34  float p = clamp((uv.y * 0.978 + (uv.x - 0.5) * 0.208) / 0.82, 0.0, 1.0);
35  vec3 col = mix(uBaseA, uBaseB, p);
36
37  for (int i = 0; i < 6; i++) {
38    /* The offset at t = 0 is subtracted, so every centre starts exactly on the
39       home the CSS mesh paints it at: frame 0 of the canvas is the CSS mesh,
40       which is what makes the crossfade invisible. */
41    vec2 c = uHome[i] + uAmp * (
42      vec2(sin(TAU * uTime / uPhase[i].x + uPhase[i].z),
43           cos(TAU * uTime / uPhase[i].y + uPhase[i].w))
44      - vec2(sin(uPhase[i].z), cos(uPhase[i].w)));
45    vec2 d = (uv - c) / uRadius[i];
46    float t = clamp(length(d) / uFall[i].y, 0.0, 1.0);
47    col = mix(col, uColour[i], uFall[i].x * (1.0 - t));
48  }
49
50  /* Plus or minus half a code value. Without it an 8 bit gradient this large
51     bands visibly, and banding is the one thing that would look cheap. */
52  col += (hash(gl_FragCoord.xy) - 0.5) * uDither;
53  gl_FragColor = vec4(col, 1.0);
54}
55`;function _e(){const r=document.createElement("canvas");return r.setAttribute("aria-hidden","true"),r.className="rt-band__canvas",r}const j=()=>document.documentElement.classList.contains("dark");async function be(r,t){const x=performance.now();let m=t.quality,l=m==="A"?pe:X;t.qa&&(l=X);let i=t.width,s=t.height,f=!1,g=!1,w=0,_=0,v=0,c=0,b=!1;const y=new Float32Array(60);let A=0,B=0,C=0;const d=new ae({canvas:r,alpha:!1,antialias:!1,depth:!1,stencil:!1,powerPreference:"high-performance",preserveDrawingBuffer:!!t.qa});d.outputColorSpace=re;const E=new ne,R=new oe(-1,1,1,-1,0,1),N=new ie(2,2),h={uTime:{value:0},uRes:{value:new T(i,s)},uAmp:{value:.13},uDither:{value:1/255},uBaseA:{value:new G},uBaseB:{value:new G},uColour:{value:Array.from({length:6},()=>new G)},uHome:{value:Array.from({length:6},()=>new T)},uRadius:{value:Array.from({length:6},()=>new T(1,1))},uFall:{value:Array.from({length:6},()=>new T)},uPhase:{value:ge.map(([e,a,n,u])=>new se(e,a,n,u))}};function k(e){const a=e?fe:he,n=e?ve:me;h.uBaseA.value.set(n[0][0],n[0][1],n[0][2]),h.uBaseB.value.set(n[1][0],n[1][1],n[1][2]),a.forEach((u,p)=>{h.uColour.value[p].set(u.colour[0],u.colour[1],u.colour[2]),h.uHome.value[p].set(u.home[0],u.home[1]),h.uRadius.value[p].set(u.radiu

55s[0],u.radius[1]),h.uFall.value[p].set(u.alpha,u.edge)})}k(j());const z=new ue({uniforms:h,vertexShader:we,fragmentShader:Ae,depthTest:!1,depthWrite:!1,transparent:!1});E.add(new le(N,z));function Q(e,a){return Math.max(.4,Math.min(window.devicePixelRatio||1,1,Math.sqrt(l/Math.max(1,e*a))))}function P(e,a){i=Math.max(1,Math.round(e)),s=Math.max(1,Math.round(a)),d.setPixelRatio(Q(i,s)),d.setSize(i,s,!1),h.uRes.value.set(i,s)}function M(){f||d.render(E,R)}const J=d.getContext();function V(){f||(d.render(E,R),J.finish())}const Z=40,$=4;let F=0;const S=t.qa||!t.onEvent?null:de(m,e=>{var a,n;if(e==="shrink"){l=Math.round(l/2),P(i,s),M();return}if(e==="reduce"){(a=t.onEvent)==null||a.call(t,"reduce");return}(n=t.onEvent)==null||n.call(t,"watchdog")});function W(){if(!g)return;w=requestAnimationFrame(W);const e=performance.now(),a=Math.min(e-v,100);if(v=e,b||(b=!0,_=e,r.classList.add("is-live"),S==null||S.begin(e)),c+=a,c<1e3/H.idle.idleFps)return;c=0,h.uTime.value=(e-_)/1e3,F++;const n=F<=Z||F%$===0,u=performance.now();if(n?V():M(),!n)return;const p=Math.max(performance.now()-u,.1);C-=y[A],y[A]=p,C+=p,A=(A+1)%60,B<60&&B++;const Y=C/B;window.__rtBandCost=Y;const K=1e3/(a||50);window.__rtBandFps=K,window.__rtHeroFps=K,S==null||S.frame(p,e,1e3/Y)}function ee(){g||f||(g=!0,v=performance.now(),w=requestAnimationFrame(W))}function U(){g=!1,cancelAnimationFrame(w)}const O=e=>{var a;e.preventDefault(),f=!0,U(),(a=t.onEvent)==null||a.call(t,"lost")};r.addEventListener("webglcontextlost",O);const I=new MutationObserver(()=>{k(j()),M()});I.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]});function D(){r.removeEventListener("webglcontextlost",O),I.disconnect(),N.dispose(),z.dispose(),d.dispose(),f||d.forceContextLoss(),r.remove()}P(i,s),await d.compileAsync(E,R);const L=performance.now()-x,te=performance.now();V();const q=performance.now()-te;if(window.__rtHeroBudget={compileMs:Math.round(L),warmMs:Math.round(q)},!t.qa&&L+q>ce)throw D(),new Error("[meshGradient] setup budget compile "+Math.round(L)+"ms warmup "+Math.round(q)+"ms");return{attachTo(e,a,n){r.parentElement!==e&&e.appendChild(r),P(a,n),M()},resize(e,a){P(e,a),M()},start:ee,stop:U,setQuality(e){m=e,t.qa||(l=Math.min(l,e==="A"?H.stage.capPxA:H.stage.capPxAMinus)),P(i,s),M()},dispose(e){U(),e&&r.isConnected?(r.classList.remove("is-live"),window.setTimeout(D,400)):D()}}}export{_e as createCanvas,be as createMeshGradient};