asciify-engine 4.20.0 → 4.22.0

package/dist/field.js

@@ -1 +1 @@
-var e={none:3,flow:1,orb:2,drift:4,swell:5,caustics:6,contour:7,aurora:8,ripple:9,halo:10,interference:11,mesh:12,cascade:13,constellation:14},t=e=>e?"\nconst float VSCALE=6.;\nvec4 decodeFluid(vec4 t){return vec4((t.xy*2.-1.)*VSCALE,t.z,t.w);}\nvec4 encodeFluid(vec4 v){return vec4(clamp(v.xy/VSCALE*.5+.5,0.,1.),clamp(v.z,0.,1.),1.);}":"\nvec4 decodeFluid(vec4 t){return t;}\nvec4 encodeFluid(vec4 v){return vec4(v.xyz,1.);}",n="#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform vec2 uTexel;\nout vec4 outColor;\nvec2 here(){return gl_FragCoord.xy*uTexel;}\n",r=n+"\nuniform sampler2D uVelocity;\nuniform vec2 uFrom, uTo, uForce;\nuniform float uAspect, uRadius;\nfloat segment(vec2 p,vec2 a,vec2 b){vec2 pa=p-a,ba=b-a;float h=clamp(dot(pa,ba)/max(dot(ba,ba),1e-8),0.,1.);return length(pa-ba*h);}\nvoid main(){\n  vec2 uv=here(),scale=vec2(uAspect,1.);\n  float d=segment(uv*scale,uFrom*scale,uTo*scale);\n  outColor=vec4(texture(uVelocity,uv).xy+uForce*exp(-d*d/(uRadius*uRadius)),0.,1.);\n}",i=n+"\nuniform sampler2D uVelocity;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uVelocity,uv-vec2(uTexel.x,0.)).y,r=texture(uVelocity,uv+vec2(uTexel.x,0.)).y;\n  float t=texture(uVelocity,uv+vec2(0.,uTexel.y)).x,b=texture(uVelocity,uv-vec2(0.,uTexel.y)).x;\n  outColor=vec4(.5*(r-l-t+b),0.,0.,1.);\n}",o=n+"\nuniform sampler2D uVelocity, uCurl;\nuniform float uStrength, uDt;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uCurl,uv-vec2(uTexel.x,0.)).x,r=texture(uCurl,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uCurl,uv+vec2(0.,uTexel.y)).x,b=texture(uCurl,uv-vec2(0.,uTexel.y)).x,c=texture(uCurl,uv).x;\n  vec2 force=.5*vec2(abs(t)-abs(b),abs(r)-abs(l));\n  force=force/(length(force)+1e-4)*uStrength*c;\n  force.y=-force.y;\n  outColor=vec4(clamp(texture(uVelocity,uv).xy+force*uDt,-1000.,1000.),0.,1.);\n}",a=n+"\nuniform sampler2D uVelocity;\nvoid main(){\n  vec2 uv=here(),c=texture(uVelocity,uv).xy;\n  float l=texture(uVelocity,uv-vec2(uTexel.x,0.)).x,r=texture(uVelocity,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uVelocity,uv+vec2(0.,uTexel.y)).y,b=texture(uVelocity,uv-vec2(0.,uTexel.y)).y;\n  if(uv.x-uTexel.x<0.)l=-c.x;\n  if(uv.x+uTexel.x>1.)r=-c.x;\n  if(uv.y+uTexel.y>1.)t=-c.y;\n  if(uv.y-uTexel.y<0.)b=-c.y;\n  outColor=vec4(.5*(r-l+t-b),0.,0.,1.);\n}",l=n+"\nuniform sampler2D uSource;\nuniform float uAmount;\nvoid main(){outColor=vec4(texture(uSource,here()).x*uAmount,0.,0.,1.);}",s=n+"\nuniform sampler2D uPressure, uDivergence;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uPressure,uv-vec2(uTexel.x,0.)).x,r=texture(uPressure,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uPressure,uv+vec2(0.,uTexel.y)).x,b=texture(uPressure,uv-vec2(0.,uTexel.y)).x;\n  outColor=vec4((l+r+b+t-texture(uDivergence,uv).x)*.25,0.,0.,1.);\n}",u=n+"\nuniform sampler2D uPressure, uVelocity;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uPressure,uv-vec2(uTexel.x,0.)).x,r=texture(uPressure,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uPressure,uv+vec2(0.,uTexel.y)).x,b=texture(uPressure,uv-vec2(0.,uTexel.y)).x;\n  outColor=vec4(texture(uVelocity,uv).xy-vec2(r-l,t-b),0.,1.);\n}",c=n+"\nuniform sampler2D uVelocity;\nuniform float uDt, uDissipation;\nvoid main(){\n  vec2 uv=here();\n  vec2 back=uv-uDt*texture(uVelocity,uv).xy*uTexel;\n  outColor=vec4(texture(uVelocity,back).xy/(1.+uDissipation*uDt),0.,1.);\n}";var f=class{constructor(e,t){this.previous=null,this.peak=0,this.width=e,this.height=t;const n=e*t;this.pixels=new Uint8Array(4*n),this.signal=new Float32Array(n),this.offsetX=new Float32Array(n),this.offsetY=new Float32Array(n),this.driftX=new Float32Array(n),this.driftY=new Float32Array(n),this.u=new Float32Array(n),this.v=new Float32Array(n),this.ink=new Float32Array(n),this.a=new Float32Array(n),this.b=new Float32Array(n),this.c=new Float32Array(n),this.pressure=new Float32Array(n),this.pressureNext=new Float32Array(n),this.divergence=new Float32Array(n),this.curl=new Float32Array(n)}get active(){return this.peak>2e-4}clear(){for(const e of[this.u,this.v,this.ink,this.a,this.b,this.c,this.pressure,this.pressureNext,this.divergence,this.curl,this.signal,this.pixels,this.offsetX,this.offsetY,this.driftX,this.driftY])e.fill(0);this.previous=null,this.peak=0}leave(){this.previous=null}move(e,t,n,r=performance.now()){if(!Number.isFinite(e+t+n+r))return;e=Math.max(0,Math.min(1,e)),t=Math.max(0,Math.min(1,t)),n=Math.max(.1,Math.min(1,n));const i=this.previous;if(this.previous={x:e,y:t,time:r},!i)return;const o=(e-i.x)*(this.width-1),a=(t-i.y)*(this.height-1),l=Math.hypot(o,a);if(l<.001)return;const s=Math.min(this.width,this.height),u=r>i.time?Math.max(1/240,(r-i.time)/1e3):1/60,c=Math.min(12,l/s/u),f=1-Math.exp(-c/2.2),h=s*(.022+.075*n)*(.65+.95*f),d=Math.min(128,Math.max(1,Math.ceil(l/(.4*h)))),m=l/h*(.32+.22*f)/d,v=o/l,p=a/l,g=-p,x=v,y=l*(2+18*f)/d;for(let n=0;n<d;n++){const r=(n+.5)/d,o=(i.x+(e-i.x)*r)*(this.width-1),a=(i.y+(t-i.y)*r)*(this.height-1),l=Math.max(1,Math.floor(o-3*h)),s=Math.min(this.width-2,Math.ceil(o+3*h)),u=Math.max(1,Math.floor(a-3*h)),c=Math.min(this.height-2,Math.ceil(a+3*h));for(let e=u;e<=c;e++)for(let t=l;t<=s;t++){const n=((t-o)*v+(e-a)*p)/h,r=((t-o)*g+(e-a)*x)/h,i=Math.exp(-n*n*.65-r*r*1.7),l=e*this.width+t;this.ink[l]=1-(1-this.ink[l])*Math.exp(-i*m);const s=1-r*r*.55,u=n*r*.7;this.u[l]=Math.max(-80,Math.min(80,this.u[l]+(v*s+g*u)*i*y)),this.v[l]=Math.max(-80,Math.min(80,this.v[l]+(p*s+x*u)*i*y))}}this.peak=1}read(e,t,n){const r=0|(t=Math.max(.5,Math.min(this.width-1.5,t))),i=0|(n=Math.max(.5,Math.min(this.height-1.5,n))),o=t-r,a=n-i,l=i*this.width+r;return(e[l]*(1-o)+e[l+1]*o)*(1-a)+(e[l+this.width]*(1-o)+e[l+this.width+1]*o)*a}sample(e,t){return this.read(this.signal,e*(this.width-1),t*(this.height-1))}displacement(e,t,n){n[0]=this.read(this.offsetX,e*(this.width-1),t*(this.height-1)),n[1]=this.read(this.offsetY,e*(this.width-1),t*(this.height-1))}step(e){if(!this.active||!Number.isFinite(e))return;let t=Math.max(0,Math.min(.05,e));const n=this.width,r=this.height;for(;t>1e-7;){const e=Math.min(1/60,t);t-=e;const i=Math.exp(-1.9*e),o=Math.exp(-3.2*e);for(let t=1;t<r-1;t++)for(let a=1;a<n-1;a++){const l=t*n+a,s=Math.max(.5,Math.min(n-1.5,a-this.u[l]*e)),u=Math.max(.5,Math.min(r-1.5,t-this.v[l]*e)),c=0|s,f=0|u,h=s-c,d=u-f,m=f*n+c,v=(1-h)*(1-d),p=h*(1-d),g=(1-h)*d,x=h*d;this.a[l]=(this.u[m]*v+this.u[m+1]*p+this.u[m+n]*g+this.u[m+n+1]*x)*i,this.b[l]=(this.v[m]*v+this.v[m+1]*p+this.v[m+n]*g+this.v[m+n+1]*x)*i,this.c[l]=(this.ink[m]*v+this.ink[m+1]*p+this.ink[m+n]*g+this.ink[m+n+1]*x)*o}[this.u,this.a]=[this.a,this.u],[this.v,this.b]=[this.b,this.v],[this.ink,this.c]=[this.c,this.ink];for(let e=1;e<r-1;e++)for(let t=1;t<n-1;t++){const r=e*n+t;this.curl[r]=.5*(this.v[r+1]-this.v[r-1]-this.u[r+n]+this.u[r-n])}for(let t=1;t<r-1;t++)for(let r=1;r<n-1;r++){const i=t*n+r,o=Math.abs(this.curl[i+1])-Math.abs(this.curl[i-1]),a=Math.abs(this.curl[i+n])-Math.abs(this.curl[i-n]),l=Math.hypot(o,a)+1e-4,s=this.curl[i]*e*10,u=Math.hypot(this.u[i],this.v[i]);this.u[i]+=a/l*s,this.v[i]-=o/l*s;const c=Math.min(1,u/(Math.hypot(this.u[i],this.v[i])+1e-6));this.u[i]*=c,this.v[i]*=c,this.divergence[i]=-.5*(this.u[i+1]-this.u[i-1]+this.v[i+n]-this.v[i-n])}this.pressure.fill(0);for(let e=0;e<4;e++){for(let e=1;e<r-1;e++)for(let t=1;t<n-1;t++){const r=e*n+t;this.pressureNext[r]=.25*(this.divergence[r]+this.pressure[r-1]+this.pressure[r+1]+this.pressure[r-n]+this.pressure[r+n])}[this.pressure,this.pressureNext]=[this.pressureNext,this.pressure]}let a=0;for(let t=1;t<r-1;t++)for(let r=1;r<n-1;r++){const i=t*n+r;this.u[i]=Math.max(-80,Math.min(80,this.u[i]-.5*(this.pressure[i+1]-this.pressure[i-1]))),this.v[i]=Math.max(-80,Math.min(80,this.v[i]-.5*(this.pressure[i+n]-this.pressure[i-n]))),this.driftX[i]+=(3.6*this.u[i]-58*this.offsetX[i]-12*this.driftX[i])*e,this.driftY[i]+=(3.6*this.v[i]-58*this.offsetY[i]-12*this.driftY[i])*e,this.offsetX[i]=Math.max(-2,Math.min(2,this.offsetX[i]+this.driftX[i]*e)),this.offsetY[i]=Math.max(-2,Math.min(2,this.offsetY[i]+this.driftY[i]*e)),this.signal[i]=1-Math.exp(.06*-Math.hypot(this.u[i],this.v[i])-.16*this.ink[i]),a=Math.max(a,this.signal[i])}this.peak=a}if(this.active)for(let e=0;e<this.ink.length;e++){const t=Math.round(65535*Math.min(1,this.signal[e]));this.pixels[4*e]=t>>>8,this.pixels[4*e+1]=255&t,this.pixels[4*e+2]=Math.round(128+63.5*this.offsetX[e]),this.pixels[4*e+3]=Math.round(128+63.5*this.offsetY[e])}else this.clear()}},h=["none","flow","orb","drift","swell","caustics","contour","aurora","ripple","halo","interference","mesh","cascade","constellation"],d=["glyph","dot","pixel","mosaic","lego","voxel","disco","dither","hex","led","cmyk","stipple","engraving","crosshatch","woodblock","risograph","pointillism"],m=[{value:"fluid",label:"Fluid",description:"An ink-in-water wake that bends the image and swirls the characters."},{value:"lantern",label:"Lantern",description:"A soft light follows the pointer and lifts the characters it passes, without distortion."},{value:"trail",label:"Trail",description:"The Asciify Trail: in the wake, sparse characters fill in and dense ones open up, then settle. No distortion."},{value:"none",label:"Off",description:"The field stays still under the pointer."}],v={radius:.13,strength:.5,trail:.45,follow:12},p={strength:.55,radius:.45},g={radius:.075,force:1,dissipation:1.6,refraction:.03,glow:.55,resolution:128,curl:24},x={charset:" .,:-=+*#%@",cellSize:12,cellAspect:1,cellFit:"pixel",font:'ui-monospace, "SF Mono", Menlo, Consolas, monospace',fontWeight:500,glyphScale:.8,mark:"glyph",dotScale:.9,color:"ink",ink:"#f3ba32",highlight:"auto",background:"transparent",brightness:0,contrast:1,gamma:1,invert:!1,levels:"auto",blend:"auto",saturation:1.1,shade:.5,backdrop:0,fit:"cover",focus:{x:.5,y:.5},vignette:0,drift:0,scene:"flow",scale:1,clear:!1,speed:1,hover:"fluid",fluid:g,lantern:v,trail:p,maxPixelRatio:2,respectReducedMotion:!0},y=(e,t,n,r)=>"number"==typeof e&&Number.isFinite(e)?Math.min(n,Math.max(t,e)):r,b=(e,t)=>"string"==typeof e&&/^#([\da-f]{3}|[\da-f]{6})$/i.test(e.trim())?e.trim().toLowerCase():t;function E(e){const t=Intl.Segmenter;return(t?Array.from(new t(void 0,{granularity:"grapheme"}).segment(e),e=>e.segment):Array.from(e)).filter(e=>"\n"!==e&&"\r"!==e&&"\t"!==e).slice(0,256)}function w(e={},t=x){const n="string"==typeof e.charset&&E(e.charset).length>=2?e.charset:t.charset,r=t.fluid||g,i=void 0===e.fluid?t.fluid:e.fluid,o=!1!==i&&(()=>{const e=!0!==i&&i?{...r,...i}:r;return{radius:y(e.radius,.005,.5,g.radius),force:y(e.force,0,8,g.force),dissipation:y(e.dissipation,.05,20,g.dissipation),refraction:y(e.refraction,0,.5,g.refraction),glow:y(e.glow,0,2,g.glow),resolution:Math.round(y(e.resolution,16,512,g.resolution)),curl:y(e.curl,0,80,g.curl)}})(),a=h.includes(e.scene)?e.scene:t.scene,l=!!e.clear&&"object"==typeof e.clear&&("element"in e.clear||"nodeType"in e.clear),s=void 0===e.clear||l?t.clear:e.clear,u=!!s&&{x:y(s.x,-.5,1.5,.25),y:y(s.y,-.5,1.5,.3),width:y(s.width,0,2,.5),height:y(s.height,0,2,.4),feather:y(s.feather,.005,1,.12),shape:"rect"===s.shape?"rect":"ellipse"};return{charset:n,cellSize:y(e.cellSize,3,96,t.cellSize),cellAspect:y(e.cellAspect,.3,2,t.cellAspect),cellFit:"fill"===e.cellFit||"pixel"===e.cellFit?e.cellFit:t.cellFit,font:"string"==typeof e.font&&e.font.trim()?e.font:t.font,fontWeight:Math.round(y(e.fontWeight,100,900,t.fontWeight)),glyphScale:y(e.glyphScale,.3,1.6,t.glyphScale),mark:d.includes(e.mark)?e.mark:t.mark,dotScale:y(e.dotScale,.1,1.4,t.dotScale),color:"source"===e.color||"ink"===e.color?e.color:t.color,ink:b(e.ink,t.ink),highlight:"auto"===e.highlight?"auto":b(e.highlight,t.highlight),background:"transparent"===e.background?"transparent":b(e.background,t.background),brightness:y(e.brightness,-1,1,t.brightness),contrast:y(e.contrast,0,4,t.contrast),gamma:y(e.gamma,.2,5,t.gamma),invert:"boolean"==typeof e.invert?e.invert:t.invert,levels:"none"===e.levels||"auto"===e.levels?e.levels:t.levels,blend:"auto"===e.blend||"coarse"===e.blend||"on"===e.blend||"off"===e.blend?e.blend:t.blend,saturation:y(e.saturation,0,3,t.saturation),shade:y(e.shade,0,1,t.shade),backdrop:y(e.backdrop,0,1,t.backdrop),fit:"contain"===e.fit||"cover"===e.fit?e.fit:t.fit,focus:{x:y(e.focus?.x,0,1,t.focus.x),y:y(e.focus?.y,0,1,t.focus.y)},vignette:y(e.vignette,0,1,t.vignette),drift:y(e.drift,0,2,t.drift),scene:a,scale:y(e.scale,.2,6,t.scale),clear:u,speed:y(e.speed,0,5,t.speed),hover:"fluid"===e.hover||"lantern"===e.hover||"trail"===e.hover||"none"===e.hover?e.hover:t.hover,fluid:o,lantern:{radius:y(e.lantern?.radius,.02,.6,t.lantern.radius),strength:y(e.lantern?.strength,0,1.5,t.lantern.strength),trail:y(e.lantern?.trail,0,3,t.lantern.trail),follow:y(e.lantern?.follow,1,60,t.lantern.follow)},trail:{strength:y(e.trail?.strength,0,1,t.trail.strength),radius:y(e.trail?.radius,.1,1,t.trail.radius)},maxPixelRatio:y(e.maxPixelRatio,.5,4,t.maxPixelRatio),respectReducedMotion:"boolean"==typeof e.respectReducedMotion?e.respectReducedMotion:t.respectReducedMotion}}function T(e,t,n,r,i,o={x:.5,y:.5}){if(!(e>0&&t>0&&n>0&&r>0))return{scale:[1,1],offset:[0,0]};const a=e/t,l=n/r,s=l>a,u="cover"===i?s?[a/l,1]:[1,l/a]:s?[1,l/a]:[a/l,1];return{scale:u,offset:"cover"===i?[(1-u[0])*o.x,(1-u[1])*o.y]:[.5*(1-u[0]),.5*(1-u[1])]}}function M(e,t,n,r){const i=Math.max(2,Math.round(e*n)),o=Math.max(2,Math.round(i*t)),a=Math.min(16,Math.max(1,r)),l=Math.ceil(r/a);return{width:o,height:i,columns:a,rows:l,atlasWidth:a*o,atlasHeight:l*i}}function R(e){const t=e.replace("#",""),n=3===t.length?t.split("").map(e=>e+e).join(""):t,r=Number.parseInt(n,16);return Number.isFinite(r)&&6===n.length?[(r>>16&255)/255,(r>>8&255)/255,(255&r)/255]:[0,0,0]}function k(e){const t=new Uint32Array(256);let n=0;for(let r=0;r+3<e.length;r+=4)e[r+3]<8||(t[Math.round(.2126*e[r]+.7152*e[r+1]+.0722*e[r+2])]++,n++);if(!n)return[0,1];const r=e=>{let r=0;for(let i=0;i<256;i++)if(r+=t[i],r>=n*e)return i/255;return 1},i=r(.02),o=r(.98);return o-i<.08?[0,1]:[i,o]}var F=e=>"fluid"!==e.hover||e.fluid?e.hover:"none";function A(e,t,n=24,r=.12,i="ellipse"){return e.width>0&&e.height>0&&{x:(t.left-n-e.left)/e.width,y:(t.top-n-e.top)/e.height,width:(t.width+2*n)/e.width,height:(t.height+2*n)/e.height,feather:r,shape:i}}var S,L=/\.(mp4|webm|mov|m4v|ogv)(\?|#|$)/i,D=/swiftshader|llvmpipe|softpipe|software|basic render/i;function C(){if(S)return S;if("undefined"==typeof document||void 0===globalThis.WebGL2RenderingContext)return S="none";try{const e=document.createElement("canvas").getContext("webgl2");if(!e)return S="none";const t=e.getExtension("WEBGL_debug_renderer_info"),n=String(e.getParameter(t?t.UNMASKED_RENDERER_WEBGL:e.RENDERER)??"");return e.getExtension("WEBGL_lose_context")?.loseContext(),S=D.test(n)?"software":"gpu"}catch{return S="none"}}function _(e={}){const t=C();return"gpu"===t||"software"===t&&!!e.allowSoftware}function P(n,h={}){const m=e=>"undefined"!=typeof HTMLElement&&e instanceof HTMLElement,v=e=>{const t=e.clear;return m(t)?{element:{element:t},rest:{...e,clear:void 0}}:t&&"object"==typeof t&&m(t.element)?{element:t,rest:{...e,clear:void 0}}:{element:null,rest:e}};let p=v(h).element,g=w(v(h).rest);const x=h.onError,y=n.getContext("webgl2",{alpha:!0,antialias:!1,depth:!1,stencil:!1,premultipliedAlpha:!0,powerPreference:"high-performance"});if(!y)throw new Error("WebGL2 is not available for the glyph field.");const b=y;n.setAttribute("role","img"),n.setAttribute("aria-label",h.label??"ASCII artwork"),n.dataset.renderer="glyph-field";let S=!1;const D=b.getExtension("KHR_parallel_shader_compile");let C,_,P=null,U=null,B=null,I=null,X=[],H=[],N=null,q=!1,G=null,V=null;const O=[];let z=0,j=0,W=1,Y=0,$=M(g.cellSize,g.cellAspect,1,2),K=2,J=0,Q=0,Z=0,ee=null,te=!1,ne=null,re=0,ie=0,oe=0,ae=null,le=0,se=!0,ue=0,ce=[0,1],fe=-1/0,he=0,de=0,me=0,ve=!0,pe=!1,ge=!1,xe=!1,ye=!1,be=!0,Ee=null,we=null,Te=1/60,Me=0,Re=0,ke=[];const Fe=new Float32Array(16),Ae=()=>{if(!p)return;const{element:e,padding:t=32,feather:r=.16,shape:i="rect"}=p,o=A(n.getBoundingClientRect(),e.getBoundingClientRect(),t,r,i),a=g.clear;JSON.stringify(a)!==JSON.stringify(o)&&(g={...g,clear:o},ve=!0)},Se={target:null,at:null,strength:0,trail:[]},Le=new Float32Array(36);let De=null,Ce=null,_e=!1;const Pe=()=>{if(!z||!j)return null;const e=z/j,t=Math.round(e>=1?128:128*e),n=Math.round(e>=1?128/e:128);return De&&De.width===t&&De.height===n||(De=new f(t,n),Ce||(Ce=je(b.LINEAR)),b.bindTexture(b.TEXTURE_2D,Ce),b.texImage2D(b.TEXTURE_2D,0,b.RGBA8,t,n,0,b.RGBA,b.UNSIGNED_BYTE,De.pixels),_e=!0),De};let Ue=0;const Be="function"==typeof matchMedia?matchMedia("(prefers-reduced-motion: reduce)"):null,Ie=()=>g.respectReducedMotion&&!!Be?.matches;let Xe;const He=new Promise(e=>{Xe=e});let Ne=!0;const qe=e=>x?.(e instanceof Error?e:new Error(String(e))),Ge=(e,t)=>{const n=b.createShader(e);return O.push(n),b.shaderSource(n,t),b.compileShader(n),n},Ve=e=>{V??(V=Ge(b.VERTEX_SHADER,"#version 300 es\nvoid main(){vec2 p=vec2((gl_VertexID<<1)&2,gl_VertexID&2);gl_Position=vec4(p*2.-1.,0.,1.);}"));const t=b.createProgram(),n=Ge(b.FRAGMENT_SHADER,e);return b.attachShader(t,V),b.attachShader(t,n),b.linkProgram(t),{program:t,locations:null,fragment:n}},Oe=(e,t=!1)=>{if(e.locations)return!0;const{program:n,fragment:r}=e;if(!t&&D&&!b.getProgramParameter(n,D.COMPLETION_STATUS_KHR))return!1;if(!b.getProgramParameter(n,b.LINK_STATUS)){if(b.isContextLost())return!1;throw new Error(b.getShaderInfoLog(r)||b.getProgramInfoLog(n)||"Glyph field program failed to link.")}const i={};for(let e=b.getProgramParameter(n,b.ACTIVE_UNIFORMS)-1;e>=0;e--){const t=b.getActiveUniform(n,e).name.replace(/\[0\]$/,"");i[t]=b.getUniformLocation(n,t)}return e.locations=i,!0},ze=(e=!1)=>!!P&&!!U&&Oe(P,e)&&Oe(U,e),je=e=>{const t=b.createTexture();return b.bindTexture(b.TEXTURE_2D,t),b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MIN_FILTER,e),b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MAG_FILTER,e===b.LINEAR_MIPMAP_LINEAR?b.LINEAR:e),b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_S,b.CLAMP_TO_EDGE),b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_T,b.CLAMP_TO_EDGE),t},We=()=>{I&&(b.deleteTexture(I.ink),b.deleteTexture(I.under),b.deleteFramebuffer(I.buffer),I=null)},Ye=()=>function(e,t,n,r,i,o,a){if("fill"!==e||!(i>0&&o>0))return[a.width,a.height];const l=t*r,s=l*n;return[i/Math.max(1,Math.floor(i/s+1e-6)),o/Math.max(1,Math.floor(o/l+1e-6))]}(g.cellFit,g.cellSize,g.cellAspect,W,z,j,$),$e=()=>!!g.fluid&&"fluid"===F(g),Ke=()=>{N?.release(),q=!1,X.forEach(e=>b.deleteTexture(e)),H.forEach(e=>b.deleteFramebuffer(e)),X=[],H=[]};function Je(){B&&b.deleteProgram(B.program),B=Ve((e=>`#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform sampler2D uPrevious;\nuniform vec2 uSize;\nuniform float uAspect, uDt, uDecay, uEnergyDecay, uRadius, uSplat;\nuniform vec2 uFrom, uTo, uForce;\nout vec4 outColor;\n${t(e)}\nfloat segment(vec2 p,vec2 a,vec2 b){vec2 pa=p-a,ba=b-a;float h=clamp(dot(pa,ba)/max(dot(ba,ba),1e-8),0.,1.);return length(pa-ba*h);}\nvoid main(){\n  vec2 uv=gl_FragCoord.xy/uSize;\n  vec4 here=decodeFluid(texture(uPrevious,uv));\n  vec4 state=decodeFluid(texture(uPrevious,uv-uDt*here.xy*vec2(1./uAspect,1.)));\n  state.xy*=exp(-uDt*uDecay);\n  state.z*=exp(-uDt*uEnergyDecay);\n  if(uSplat>.5){\n    vec2 scale=vec2(uAspect,1.);\n    float d=segment(uv*scale,uFrom*scale,uTo*scale);\n    float g=exp(-d*d/(uRadius*uRadius));\n    state.xy+=uForce*g;\n    state.z=min(1.,state.z+g*min(1.,length(uForce)*.5+.08));\n  }\n  float speed=length(state.xy);\n  if(speed>5.)state.xy*=5./speed;\n  outColor=encodeFluid(state);\n}`)(S)),N?.dispose(),N=S?null:function(e,t,n){const f={splat:t(r),curl:t(i),vorticity:t(o),divergence:t(a),fade:t(l),pressure:t(s),gradient:t(u),advect:t(c)},h=Object.values(f);let d=0,m=0,v=[],p=[],g=null,x=null;const y=t=>{const n=e.createTexture();e.bindTexture(e.TEXTURE_2D,n),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texImage2D(e.TEXTURE_2D,0,e.RGBA16F,d,m,0,e.RGBA,e.HALF_FLOAT,null);const r=e.createFramebuffer();return e.bindFramebuffer(e.FRAMEBUFFER,r),e.framebufferTexture2D(e.FRAMEBUFFER,e.COLOR_ATTACHMENT0,e.TEXTURE_2D,n,0),e.checkFramebufferStatus(e.FRAMEBUFFER)!==e.FRAMEBUFFER_COMPLETE?(e.deleteFramebuffer(r),e.deleteTexture(n),null):(e.viewport(0,0,d,m),e.clearColor(0,0,0,1),e.clear(e.COLOR_BUFFER_BIT),{texture:n,buffer:r})},b=t=>{t&&(e.deleteTexture(t.texture),e.deleteFramebuffer(t.buffer))},E=()=>{[...v,...p,g,x].forEach(b),v=[],p=[],g=x=null},w=(t,n)=>{const r=t.locations;return e.useProgram(t.program),e.bindFramebuffer(e.FRAMEBUFFER,n.buffer),e.uniform2f(r.uTexel,1/d,1/m),r},T=(t,n,r,i)=>{e.activeTexture(e.TEXTURE0+r),e.bindTexture(e.TEXTURE_2D,i),e.uniform1i(t[n],r)},M=()=>e.drawArrays(e.TRIANGLES,0,3),R=e=>{const t=e[0];e[0]=e[1],e[1]=t};return{resize(t,n){E(),d=t,m=n;const r=[y(e.LINEAR),y(e.LINEAR),y(e.NEAREST),y(e.NEAREST),y(e.NEAREST),y(e.NEAREST)];return e.bindFramebuffer(e.FRAMEBUFFER,null),r.some(e=>!e)?(r.forEach(b),!1):(v=[r[0],r[1]],p=[r[2],r[3]],g=r[4],x=r[5],!0)},ready:()=>h.every(n),step(t,n){if(!v.length||!g||!x)return;let r;e.viewport(0,0,d,m),t&&(r=w(f.splat,v[1]),T(r,"uVelocity",0,v[0].texture),e.uniform2f(r.uFrom,t.from[0],t.from[1]),e.uniform2f(r.uTo,t.to[0],t.to[1]),e.uniform2f(r.uForce,t.force[0],t.force[1]),e.uniform1f(r.uAspect,n.aspect),e.uniform1f(r.uRadius,n.radius),M(),R(v)),n.curl>0&&(r=w(f.curl,x),T(r,"uVelocity",0,v[0].texture),M(),r=w(f.vorticity,v[1]),T(r,"uVelocity",0,v[0].texture),T(r,"uCurl",1,x.texture),e.uniform1f(r.uStrength,n.curl),e.uniform1f(r.uDt,n.dt),M(),R(v)),r=w(f.divergence,g),T(r,"uVelocity",0,v[0].texture),M(),r=w(f.fade,p[1]),T(r,"uSource",0,p[0].texture),e.uniform1f(r.uAmount,.8),M(),R(p);for(let e=0;e<20;e++)r=w(f.pressure,p[1]),T(r,"uPressure",0,p[0].texture),T(r,"uDivergence",1,g.texture),M(),R(p);r=w(f.gradient,v[1]),T(r,"uPressure",0,p[0].texture),T(r,"uVelocity",1,v[0].texture),M(),R(v),r=w(f.advect,v[1]),T(r,"uVelocity",0,v[0].texture),e.uniform1f(r.uDt,n.dt),e.uniform1f(r.uDissipation,n.dissipation),M(),R(v),e.bindFramebuffer(e.FRAMEBUFFER,null)},get velocity(){return v[0]?.texture??null},get size(){return[d,m]},release:E,dispose(){E(),h.forEach(({program:t})=>e.deleteProgram(t))}}}(b,Ve,e=>Oe(e))}const Qe=()=>{Ke();const e=g.fluid;if(!(e&&$e()&&z&&j))return;B||Je();const t=e.resolution,n=z/j;if(J=n>=1?t:Math.max(8,Math.round(t*n)),Q=n>=1?Math.max(8,Math.round(t/n)):t,q=!!N&&N.resize(J,Q),q)return void(Z=0);const r=()=>{Ke();for(let e=0;e<2;e++){const e=je(b.LINEAR);b.texImage2D(b.TEXTURE_2D,0,S?b.RGBA8:b.RGBA16F,J,Q,0,b.RGBA,S?b.UNSIGNED_BYTE:b.HALF_FLOAT,null);const t=b.createFramebuffer();b.bindFramebuffer(b.FRAMEBUFFER,t),b.framebufferTexture2D(b.FRAMEBUFFER,b.COLOR_ATTACHMENT0,b.TEXTURE_2D,e,0),X.push(e),H.push(t)}return b.checkFramebufferStatus(b.FRAMEBUFFER)===b.FRAMEBUFFER_COMPLETE};if(!r()){if(S)throw new Error("The glyph field could not allocate its fluid buffers.");S=!0,Ze(),Je(),r()}for(const e of H)b.bindFramebuffer(b.FRAMEBUFFER,e),b.viewport(0,0,J,Q),b.clearColor(S?.5:0,S?.5:0,0,1),b.clear(b.COLOR_BUFFER_BIT);b.bindFramebuffer(b.FRAMEBUFFER,null),Z=0};function Ze(){P&&b.deleteProgram(P.program),U&&b.deleteProgram(U.program),We(),P=Ve((e=>`#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform sampler2D uSource, uFluid;\nuniform vec2 uResolution, uCell;\nuniform float uCount, uBlend;\nconst float BAYER[16]=float[16](0.,8.,2.,10.,12.,4.,14.,6.,3.,11.,1.,9.,15.,7.,13.,5.);\nuniform vec4 uSourceMap;\nuniform int uScene;\nuniform vec3 uInk, uHighlight;\nuniform vec4 uBackground;\nuniform float uBrightness, uContrast, uGamma, uInvert, uVignette, uSourceColor;\nuniform float uRefraction, uGlow, uTime, uDrift, uFluidOn, uLod, uSaturation, uBackdrop, uShade, uHighlightAuto, uFluidMode;\nuniform vec2 uFluidTexel;\nuniform int uHoverMode;\nuniform vec3 uLight;\nuniform vec3 uTrail[12];\nuniform float uLightRadius, uLightGain, uClock, uFlicker, uTrailAmount;\nuniform sampler2D uTrailMap;\nuniform vec2 uLevels;\nuniform int uMark;\nuniform float uScale, uClearFeather, uClearShape;\nuniform vec4 uClear;\nuniform vec4 uPulse[4];\nlayout(location=0) out vec4 outInk;\nlayout(location=1) out vec4 outUnder;\n${t(e)}\nfloat hash(vec2 p){p=fract(p*vec2(123.34,456.21));p+=dot(p,p+45.32);return fract(p.x*p.y);}\nfloat noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.-2.*f);\n  return mix(mix(hash(i),hash(i+vec2(1,0)),u.x),mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),u.x),u.y);}\nfloat fbm(vec2 p){float v=0.,a=.5;for(int i=0;i<5;i++){v+=a*noise(p);p=p*2.03+vec2(1.7,9.2);a*=.5;}return v;}\nvec3 generated(vec2 uv,float aspect){\n  vec2 p=(uv-.5)*vec2(aspect,1.)*uScale;\n  if(uScene==1){\n    float t=uTime*.08;\n    vec2 q=vec2(fbm(p*1.6+t),fbm(p*1.6-t+3.1));\n    return vec3(smoothstep(.28,.86,fbm(p*1.8+q*1.6+vec2(t*.6,-t*.4))));\n  }\n  if(uScene==2){\n    float r=.36,d=length(p),a=uTime*.25;\n    vec3 l=normalize(vec3(cos(a)*.8,.55,sin(a)*.6+.6));\n    if(d<r){\n      vec3 n=normalize(vec3(p.x,-p.y,sqrt(r*r-d*d)));\n      float diffuse=max(dot(n,l),0.),rim=pow(1.-n.z,2.5);\n      float lon=atan(n.x,n.z)+uTime*.35,lat=asin(clamp(n.y,-1.,1.));\n      float bands=.5+.25*sin(lat*14.)+.25*sin(lon*6.);\n      return vec3(clamp(diffuse*.85+rim*.5+bands*.12,0.,1.));\n    }\n    return vec3(exp(-pow((d-r)*9.,2.))*.35);\n  }\n  if(uScene==4){\n    // Drift: a few broad lobes that wander slowly. Built for halftone, where large soft shapes read best.\n    float t=uTime*.045;\n    vec2 q=p*1.15;\n    vec2 w=vec2(fbm(q*.7+vec2(t,-t*.7)),fbm(q*.7+vec2(4.3-t*.8,t+1.7)));\n    float n=fbm(q+w*1.3+vec2(t*.4,t*.25));\n    return vec3(smoothstep(.36,.74,n));\n  }\n  if(uScene==5){\n    // Swell: three crossing swells, the second bent by the first, so crests roll diagonally instead of pooling.\n    float t=uTime;\n    float s=sin((dot(p,vec2(.94,.33))/.95-t/9.)*6.2831853);\n    float c=sin((dot(p,vec2(.6,-.8))/.58-t/13.)*6.2831853+s*.9);\n    float k=sin((dot(p,vec2(-.29,.96))/.36+t/17.)*6.2831853);\n    return vec3(smoothstep(.3,.9,.5+.5*(s*.5+c*.35+k*.15)));\n  }\n  // The kit's background scenes. Each starts a little way in, so a reduced-motion still is already composed.\n  float t=uTime+40.,px=uCell.y/uResolution.y*uScale;\n  if(uScene==6){\n    // Caustics: light focused by a moving water surface. Two layers of warped sine waves drift against each other; each draws\n    // smooth filaments along its zero line, about a character wide. Where they cross the light lifts a little, never to a blot.\n    float tt=t*.12,a=0.,b=0.;\n    for(int l=0;l<2;l++){\n      float f=float(l),sc=5.4+f*2.4;\n      vec2 q=(l==0?p:mat2(.8,-.6,.6,.8)*p)*sc;\n      q+=vec2(sin(q.y*.45+tt*(1.+f*.3)),cos(q.x*.4-tt*(.8+f*.4)))*1.3;\n      float v=sin(q.x+1.4*sin(q.y*.7+tt))+sin(q.y*1.1+1.2*sin(q.x*.8-tt*1.3))*.9;\n      float wv=max(fwidth(v),1e-4);\n      float line=(1.-smoothstep(.2,1.5,abs(v)/wv))*(l==0?.78:.62)+exp(-abs(v)/(wv*5.))*.16;\n      if(l==0)a=line;else b=line;\n    }\n    float pulse=.85+.15*sin(tt*3.+p.x*1.7-p.y*1.1);\n    float light=max(a,b)+.3*min(a,b);\n    return vec3(clamp(light*light*pulse,0.,.78));\n  }\n  if(uScene==7){\n    // Contour: a slow terrain read as survey lines about a character wide at any size; every fifth is an index line.\n    float tt=t*.02;\n    vec2 q=p*1.15+vec2(tt,-tt*.6);\n    float h=noise(q)*.62+noise(q*2.07+3.1)*.27+noise(q*4.3-tt+7.)*.11;\n    h+=.08*sin(tt*2.+p.x*.8);\n    float k=h*13.,w=max(fwidth(k),1e-4),d=abs(fract(k+.5)-.5)/w;\n    float major=mod(floor(k+.5),5.)<.5?1.:0.;\n    return vec3((1.-smoothstep(.35,1.25-major*.25,d))*mix(.55,1.,major));\n  }\n  if(uScene==8){\n    // Aurora: three curtains at different distances hang from the top. Far ones sit higher and dimmer; the nearest is tallest\n    // and brightest. Each folds slowly and is brightest along its lower hem, fading upward. The rays are set per character\n    // column, so the curtains read as vertical strokes at any stage size, from a small card to a phone.\n    float tt=t*.05,a=0.,cw=uCell.x/uResolution.x;\n    float col=floor(uv.x/cw+.5);\n    for(int n=0;n<3;n++){\n      float f=float(n),near=f/2.;\n      float x=p.x*(1.3-near*.4)+f*3.7;\n      float hem=-.28+near*.3+.16*sin(x*1.3+tt*(.9+f*.25)+f*2.)+.045*sin(x*3.4-tt*1.5+f);\n      float d=hem-p.y;\n      float body=d>0.?exp(-d/(.14+near*.26))*(.45+.55*exp(-d/.03)):exp(-d*d/.0002);\n      float fold=.5+.5*sin(x*2.1+tt*.9+f*1.7+.7*sin(x*.8-tt*.6));\n      float ray=mix(hash(vec2(col,f*7.1)),noise(vec2(col*.18+f*9.,tt*.7+f)),.55);\n      float layer=clamp(body*(.1+.9*fold*fold)*(.2+.8*ray)*(.4+near*.6)*4.2,0.,1.);\n      a=1.-(1.-a)*(1.-layer);\n    }\n    return vec3(smoothstep(.12,.9,a));\n  }\n  if(uScene==9){\n    // Ripple: still water. Drops land here and there, each a few rings that widen and fade; the pointer drops its own.\n    float tone=0.,g=.72;\n    vec2 q=p/g,id=floor(q);\n    for(int j=-1;j<=1;j++)for(int i=-1;i<=1;i++){\n      vec2 c=id+vec2(i,j),h=vec2(hash(c),hash(c+7.3));\n      float period=5.+h.x*5.,age=fract(t*.3/period*4.+h.y);\n      vec2 at=(c+.2+.6*h)*g;\n      float d=length(p-at),r=age*.62;\n      float rings=max(0.,cos((d-r)*34.))*exp(-pow((d-r)/.11,2.));\n      tone+=rings*pow(1.-age,1.8)*smoothstep(0.,.06,age)*(.7+.3*h.x);\n    }\n    return vec3(clamp(tone*1.25,0.,1.));\n  }\n  if(uScene==10){\n    // Halo: a slow breathing corona that frames the content, its rays turning. The ring fits the stage: wide on a desktop\n    // hero, tall on a phone, so the whole halo stays on screen; the middle stays empty for a headline.\n    vec2 r=vec2(min(.46,aspect*.4),min(.34,.36/max(aspect,.01)*.5+.2));\n    vec2 e=p/r;\n    float d=length(e),a=atan(e.y,e.x),tt=t*.07,k=min(r.x,r.y);\n    float breathe=1.+.04*sin(tt*3.1);\n    float rays=.5+.5*noise(vec2(a*3.2+tt,tt*.5))*(.6+.4*noise(vec2(a*7.-tt*1.2,3.+tt*.4)));\n    float s=(d-breathe)*k;\n    float rim=exp(-pow(s/.03,2.));\n    float corona=exp(-max(0.,s)/(.1+.08*rays))*smoothstep(-.04,.015,s)*rays*smoothstep(.36,.12,s);\n    return vec3(clamp(rim*(.55+.45*rays)+corona*.85,0.,1.));\n  }\n  if(uScene==11){\n    // Interference: two ring grids from slowly orbiting centres. Where they cross, broad moire bands open and close.\n    float tt=t*.05;\n    vec2 a=vec2(-.3+.12*sin(tt),.07*cos(tt*1.3)),b=vec2(.3+.1*cos(tt*.8),-.06*sin(tt*1.1));\n    float f=6.2831853/max(px*4.6,.004);\n    float m=cos(length(p-a)*f)+cos(length(p-b)*f);\n    return vec3(smoothstep(.7,2.,m));\n  }\n  if(uScene==12){\n    // Mesh: four soft lights on slow Lissajous paths, a gradient mesh written in characters.\n    float tt=t*.07,m=0.;\n    for(int n=0;n<4;n++){\n      float f=float(n)*1.7;\n      vec2 c=vec2(.66*sin(tt*(.7+f*.13)+f),.34*cos(tt*(.9-f*.07)+f*1.3));\n      float s=.3+.07*sin(tt+f);\n      m+=exp(-dot(p-c,p-c)/(s*s))*(.8-float(n)*.1);\n    }\n    return vec3(smoothstep(.06,1.1,m));\n  }\n  if(uScene==13){\n    // Cascade: streaks fall in three depths. Far ones are frequent, faint, short and slow; near ones rare, long, bright and\n    // quick. Each has a bright head and a tail that fades behind it, and a column can carry two streaks at once.\n    float tone=0.,cw=uCell.x/uResolution.x,ch=uCell.y/uResolution.y;\n    float col=floor(uv.x/cw+.5);\n    for(int n=0;n<3;n++){\n      float f=float(n);\n      for(int k=0;k<2;k++){\n        float seed=f*13.1+float(k)*41.7,h=hash(vec2(col,seed));\n        if(h<1.-(.5-f*.15))continue;\n        float speed=(.045+f*.07)*(.75+.5*hash(vec2(col,seed+2.)));\n        float tail=.12+f*.16,y=fract(t*speed+hash(vec2(col,seed+5.)))*(1.+tail*2.)-tail;\n        float d=y-uv.y;\n        if(d<0.||d>tail)continue;\n        float head=d<ch*1.2?1.:0.;\n        tone=max(tone,max(head*(.55+f*.22),pow(1.-d/tail,1.7)*(.28+f*.3)));\n      }\n    }\n    return vec3(clamp(tone,0.,1.));\n  }\n  if(uScene==14){\n    // Constellation: points wander in their own cells; neighbours close enough are linked by fine lines. Each point is a\n    // bright core in a soft halo, so it reads at card size as well as full width.\n    float g=.23,tt=t*.18;\n    vec2 q=p/g,id=floor(q);\n    vec2 pts[9];\n    for(int j=-1;j<=1;j++)for(int i=-1;i<=1;i++){\n      vec2 c=id+vec2(i,j);\n      float h=hash(c),k=hash(c+3.7);\n      pts[(j+1)*3+i+1]=c+.5+.36*vec2(sin(tt*(.6+h)+h*6.28),cos(tt*(.5+k)+k*6.28));\n    }\n    float line=0.,star=0.,lw=max(px/g,.02);\n    for(int n=0;n<9;n++){\n      vec2 e=q-pts[n];\n      float d2=dot(e,e),tw=.8+.2*sin(tt*3.+float(n)*1.7);\n      star=max(star,max(exp(-d2/(lw*lw*1.6)),.38*exp(-d2/(lw*lw*7.)))*tw);\n      for(int m=n+1;m<9;m++){\n        vec2 a=pts[n],ba=pts[m]-a;\n        float len=length(ba);\n        if(len>1.35)continue;\n        float hh=clamp(dot(q-a,ba)/dot(ba,ba),0.,1.);\n        float d=length(q-a-ba*hh);\n        line=max(line,(1.-smoothstep(lw*.3,lw*.75,d))*smoothstep(1.35,.6,len)*.72);\n      }\n    }\n    return vec3(clamp(max(line,star),0.,1.));\n  }\n  return vec3(0.);\n}\nvoid main(){\n  vec2 cell=floor(gl_FragCoord.xy);\n  vec2 uv=(cell+.5)*uCell/uResolution;\n  float aspect=uResolution.x/uResolution.y;\n  vec4 fluid=vec4(0.);\n  // lift: signed tone change. The solver's flow brightens one side of each eddy and opens the other into gaps.\n  float lift=0.,wake=0.,bend=1.,swirl=0.,speed=0.;\n  if(uFluidOn>.5){\n    vec4 raw=texture(uFluid,vec2(uv.x,1.-uv.y));\n    if(uFluidMode>.5){\n      vec2 v=raw.xy*uFluidTexel*vec2(aspect,1.);\n      fluid=vec4(v,0.,1.);\n      swirl=clamp(dot(v,vec2(.4,.65))*uGlow*.32,-.65,.65);\n      speed=clamp(length(v)*uGlow*.055,0.,.38);\n      bend=.4;\n    } else {\n      fluid=decodeFluid(raw);\n      wake=clamp(fluid.z*uGlow,0.,1.);\n      lift=wake*.55;\n    }\n  }\n  vec2 drift=uDrift*.006*vec2(sin(uv.y*5.3+uTime*.6),cos(uv.x*4.1-uTime*.5));\n  vec2 sampleAt=uv-vec2(fluid.x/aspect,-fluid.y)*uRefraction*bend+drift;\n  vec3 rgb,glow=vec3(0.);\n  if(uScene==0){\n    vec2 s=sampleAt*uSourceMap.xy+uSourceMap.zw;\n    bool inside=!(s.x<0.||s.y<0.||s.x>1.||s.y>1.);\n    rgb=inside?textureLod(uSource,s,uLod).rgb:vec3(0.);\n    if(uBackdrop>0.){\n      vec2 b=(uv-vec2(fluid.x/aspect,-fluid.y)*uRefraction*bend*.5)*uSourceMap.xy+uSourceMap.zw;\n      glow=(b.x<0.||b.y<0.||b.x>1.||b.y>1.)?vec3(0.):textureLod(uSource,b,uLod+3.).rgb*uBackdrop;\n    }\n  } else rgb=generated(sampleAt,aspect);\n  float tone=dot(rgb,vec3(.2126,.7152,.0722));\n  tone=clamp((tone-uLevels.x)/max(uLevels.y-uLevels.x,.01),0.,1.);\n  tone=clamp((tone-.5)*uContrast+.5+uBrightness,0.,1.);\n  tone=pow(tone,1./uGamma);\n  if(uInvert>.5)tone=1.-tone;\n  float flick=0.,trailFold=0.;\n  if(uHoverMode==2){\n    // Lantern: a soft light and its fading tail lift the characters they pass. Nothing moves the image.\n    vec2 ap=vec2(aspect,1.),d=(uv-uLight.xy)*ap;\n    float r2=uLightRadius*uLightRadius,glowL=uLight.z*exp(-dot(d,d)/r2);\n    for(int i=0;i<12;i++){vec2 e=(uv-uTrail[i].xy)*ap;glowL+=uTrail[i].z*exp(-dot(e,e)/(r2*.55));}\n    glowL=min(glowL,1.);\n    float grain=fract(sin(dot(cell,vec2(12.9898,78.233)))*43758.5453);\n    lift=glowL*uLightGain*(.7+.6*grain);\n    wake=glowL*.4;\n    // A few letters at the light's rim step up the ramp and back, as if being retyped.\n    flick=uFlicker*step(.9,fract(grain*13.7+floor(uClock*7.+grain*5.)*.37))*glowL*(1.-glowL)*4.;\n  }\n  if(uHoverMode==3){\n    // Trail: the studio's ink field, as a 16-bit density. Sparse marks fill in, dense marks open up.\n    vec4 ink=texture(uTrailMap,uv);\n    float density=(ink.r*65280.+ink.g*255.)/65535.*uTrailAmount;\n    float t=clamp(density/.38,0.,1.);\n    trailFold=t*t*(3.-2.*t);\n  }\n  if(uFluidMode>.5&&uHoverMode==1){\n    // Dark ground: any motion lights the characters. Lit ground: the flow lights one side of each eddy and opens the other.\n    // A little cell-to-cell grain keeps the lit area a shimmer of letters rather than a solid block.\n    float grain=fract(sin(dot(cell,vec2(12.9898,78.233)))*43758.5453);\n    lift=mix(abs(swirl)*.5+speed,swirl+speed*.35,smoothstep(.12,.55,tone))*(.65+.7*grain);\n    wake=clamp(lift*1.6,0.,1.);\n  }\n  tone=clamp(tone+lift,0.,1.);\n  tone+=(1.-2.*tone)*trailFold;\n  // Pulses: rings sent by the interface (field.pulse()), e.g. on a save or a notification.\n  for(int i=0;i<4;i++){\n    if(uPulse[i].w<=0.)continue;\n    float dist=length((uv-uPulse[i].xy)*vec2(aspect,1.)),front=uPulse[i].z*.95;\n    float ring=exp(-pow((dist-front)/.1,2.))*uPulse[i].w*exp(-uPulse[i].z*.85);\n    tone=clamp(tone+ring*.85,0.,1.);\n  }\n  tone*=1.-uVignette*smoothstep(.35,1.05,length((uv-.5)*vec2(min(aspect,1.8),1.)*2.));\n  if(uClear.z>0.){\n    // Clear zone: the field fades out around content so text above it stays readable.\n    vec2 half_=uClear.zw*.5*vec2(aspect,1.),q=(uv-uClear.xy-uClear.zw*.5)*vec2(aspect,1.);\n    float dz;\n    if(uClearShape>.5){vec2 e=abs(q)-half_;dz=length(max(e,0.))+min(max(e.x,e.y),0.);}\n    else dz=(length(q/max(half_,vec2(1e-4)))-1.)*min(half_.x,half_.y);\n    tone*=smoothstep(0.,uClearFeather,dz);\n  }\n  // Blend: a shade between two characters takes the upper one in the share of cells a 4x4 Bayer pattern gives it.\n  float level=tone*(uCount-1.),upper=fract(level)>=.5?1.:0.;\n  if(uBlend>.5&&tone>.02&&tone<.98){\n    ivec2 q=ivec2(mod(gl_FragCoord.xy,4.));\n    upper=fract(level)>(BAYER[q.y*4+q.x]+.5)/16.?1.:0.;\n  }\n  float index=min(uCount-1.,floor(level)+upper+(flick>.5&&tone>.02?1.:0.));\n  vec3 hue=rgb/max(max(rgb.r,rgb.g),max(rgb.b,.03));\n  hue=mix(vec3(dot(hue,vec3(.2126,.7152,.0722))),hue,uSaturation);\n  vec3 ink=mix(uInk*mix(1.,.3+.7*tone,uShade),clamp(hue*(.38+.62*tone),0.,1.),uSourceColor);\n  vec3 lifted=uHighlightAuto>.5?ink/max(max(ink.r,ink.g),max(ink.b,.06)):uHighlight;\n  ink=mix(ink,lifted,wake*.7);\n  float underAlpha=max(uBackground.a,min(1.,max(glow.r,max(glow.g,glow.b))));\n  vec3 under=min(uBackground.rgb*uBackground.a+glow,vec3(underAlpha));\n  // Glyphs keep their atlas index, exact in 8 bits; the other marks keep the tone, and empty where the charset is blank.\n  outInk=vec4(ink,uMark==0?index/255.:uMark==1?(tone>.003?tone:0.):index>0.?max(tone,1./255.):0.);\n  outUnder=vec4(under,underAlpha);\n}`)(S)),U=Ve("#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform sampler2D uAtlas, uCells, uUnder;\nuniform vec2 uResolution, uCell, uPitch;\nuniform float uColumns, uDotScale, uSourceColor;\nuniform int uMark;\nout vec4 outColor;\nconst float BAYER[16]=float[16](0.,8.,2.,10.,12.,4.,14.,6.,3.,11.,1.,9.,15.,7.,13.,5.);\n// The Studio's print defaults: screen angle -35deg, roughness .35, seed 7, registration .2 and its coral second ink.\nconst vec2 DIR=vec2(.81915,-.57358);\nconst float ROUGH=.35,SEED=7.;\nconst vec3 SECOND=vec3(.925,.404,.322);\nfloat hash(vec2 p){p=fract(p*vec2(123.34,456.21));p+=dot(p,p+45.32);return fract(p.x*p.y);}\n// Coverage of a signed distance given in device pixels.\nfloat cover(float d){return clamp(.5-d,0.,1.);}\nfloat box(vec2 p,vec2 lo,vec2 hi){vec2 a=clamp(p-lo,0.,1.)*clamp(hi-p,0.,1.);return a.x*a.y;}\nfloat disc(vec2 p,vec2 c,float r){return r>.05?cover(length(p-c)-r):0.;}\nfloat ellipse(vec2 p,vec2 c,vec2 r,float a){vec2 d=p-c;d=vec2(cos(a)*d.x+sin(a)*d.y,-sin(a)*d.x+cos(a)*d.y);float k=length(d/r);return cover((k-1.)*min(r.x,r.y));}\n// World-anchored parallel cuts across direction d: period and width in cell heights, so lines run on from cell to cell.\nfloat cuts(vec2 w,vec2 d,float period,float width,float px){\n  if(width<=0.)return 0.;\n  float proj=dot(vec2(-d.y,d.x),w);\n  return cover((abs(fract(proj/period+.5)-.5)*period-width*.5)*px);\n}\n// Lays an ink over what is already down, multiplying where they overlap, as transparent inks do on paper.\nvoid lay(inout vec3 rgb,inout float a,vec3 c,float k){\n  float next=a+k*(1.-a);\n  rgb=next>0.?(rgb*a*(1.-k)+mix(c,rgb*c,a)*k)/next:c;\n  a=next;\n}\nvoid main(){\n  vec2 frag=vec2(gl_FragCoord.x,uResolution.y-gl_FragCoord.y);\n  // The pitch is the atlas cell, or a fractional one under cellFit 'fill', where each glyph sits centred in its stretched cell.\n  vec2 cell=floor(frag/uPitch);\n  vec4 ink=texelFetch(uCells,ivec2(cell),0),under=texelFetch(uUnder,ivec2(cell),0);\n  vec2 local=frag-cell*uPitch;\n  float coverage;\n  vec3 rgb=ink.rgb;\n  if(uMark==0){\n    float index=floor(ink.a*255.+.5);\n    ivec2 tile=ivec2(int(mod(index,uColumns)),int(floor(index/uColumns)));\n    vec2 texel=floor(local-floor((uPitch-uCell)*.5));\n    coverage=all(greaterThanEqual(texel,vec2(0.)))&&all(lessThan(texel,uCell))?texelFetch(uAtlas,tile*ivec2(uCell)+ivec2(texel),0).a:0.;\n  } else if(uMark==1){\n    // Halftone: dot area follows tone, so midtones read true; edges are antialiased to one device pixel.\n    float r=sqrt(ink.a)*min(uPitch.x,uPitch.y)*.5*uDotScale;\n    coverage=ink.a>.003?clamp(r-length(local-uPitch*.5)+.5,0.,1.):0.;\n  } else if(ink.a<=0.){\n    coverage=0.;\n  } else {\n    float tone=ink.a,side=min(uPitch.x,uPitch.y);\n    vec2 q=local/uPitch,c=uPitch*.5,p=local+.5;\n    // Tiles fade with the tone in one ink, as the Studio's do; in source colour the colour already carries it.\n    float fade=uSourceColor>.5?1.:tone,gap=max(.5,uPitch.x*.06),grain=hash(cell+SEED);\n    vec2 w=(cell+q)*uPitch/uPitch.y;\n    if(uMark==2)coverage=fade;\n    else if(uMark==3)coverage=box(p,vec2(0.),uPitch-gap)*fade;\n    else if(uMark==4){\n      // Lego: a gapped brick, lit from above, with a raised stud ringed by its shadow.\n      coverage=box(p,vec2(0.),uPitch-gap)*fade;\n      rgb*=1.06-.14*q.y;\n      float r=side*.28,d=length(local-c)-r,lit=clamp(dot(c-local,vec2(.6,.8))/r,-1.,1.);\n      rgb=mix(rgb,mix(rgb,vec3(1.),.2+.12*lit),cover(d));\n      rgb=mix(rgb,rgb*.72,cover(abs(d)-max(.5,side*.04)));\n    } else if(uMark==5){\n      // Voxel: an isometric cube; top, left and right faces at full, .72 and .42 strength.\n      float h=.5*abs(q.x-.5);\n      coverage=cover(-min(q.y-h,1.-h-q.y)*uPitch.y)*cover(-min(q.x,1.-q.x)*uPitch.x);\n      coverage*=mix(q.x<.5?.72:.42,1.,cover((q.y-(.5-h))*uPitch.y))*fade;\n    } else if(uMark==6){\n      // Disco: a gapped mirror tile, its upper facet catching light and its lower in shade.\n      coverage=box(p,vec2(0.),uPitch-gap)*fade;\n      rgb=q.y<.35?mix(rgb,vec3(1.),.1+grain*.25):q.y>.65?rgb*.75:rgb;\n    } else if(uMark==7){\n      // Dither: an ordered 4x4 Bayer screen at about five dots a cell, lit where the cell's tone passes the threshold.\n      ivec2 b=ivec2(mod(floor(frag/max(1.,floor(side/5.))),4.));\n      coverage=tone>(BAYER[b.y*4+b.x]+.5)/16.?1.:0.;\n    } else if(uMark==8){\n      // Hex: a flat-topped hexagon filling the cell.\n      vec2 h=abs((local-c)/(uPitch*.49));\n      coverage=cover(max(h.y-.866,h.x*.866+h.y*.5-.866)*side*.49)*fade;\n    } else if(uMark==9){\n      // LED: a round lamp with a soft halo and a specular glint, separated by an unlit matrix.\n      float r=side*.39,d=length(local-c);\n      coverage=max(cover(d-r),.3*exp(-pow(max(0.,d-r)/(side*.12),2.)))*fade;\n      rgb=mix(rgb,vec3(1.),.35*disc(local,uPitch*vec2(.43,.4),side*.11));\n    } else if(uMark==10){\n      // CMYK: the cell's hue separated into offset cyan, magenta and yellow dots, each sized by its share of the tone. The\n      // key screen carries the neutral share in the ink's own lightness, since a light ink on a dark page has no black.\n      float top=max(rgb.r,max(rgb.g,rgb.b)),low=min(rgb.r,min(rgb.g,rgb.b));\n      vec3 cmy=(top-rgb)/max(top,.001);\n      float a=0.;vec3 col=vec3(1.);\n      lay(col,a,vec3(top),disc(local,c,side*.48*sqrt(tone*low/max(top,.001))));\n      lay(col,a,vec3(0.,1.,1.),disc(local,uPitch*vec2(.36,.36),side*.48*sqrt(tone*cmy.x)));\n      lay(col,a,vec3(1.,0.,1.),disc(local,uPitch*vec2(.64,.36),side*.48*sqrt(tone*cmy.y)));\n      lay(col,a,vec3(1.,1.,0.),disc(local,uPitch*vec2(.5,.66),side*.48*sqrt(tone*cmy.z)));\n      rgb=col;coverage=a;\n    } else if(uMark==11||uMark==16){\n      // Stipple and pointillism: four jittered marks a cell, their size following the tone.\n      coverage=0.;vec3 col=rgb;\n      for(int m=0;m<4;m++){\n        vec2 o=vec2(float(m%2),float(m/2));\n        float j=hash(cell*2.+o+SEED),jy=hash(cell+o*11.+SEED+1.);\n        vec2 at=((o+.5)/2.+(vec2(j,jy)-.5)*ROUGH*.28)*uPitch;\n        float r=min(min(min(at.x,uPitch.x-at.x),min(at.y,uPitch.y-at.y)),side*min(.245,.21*sqrt(tone)*(1.-ROUGH*j*.35)));\n        float k=uMark==11?disc(local,at,r):ellipse(local,at,vec2(r,r*.64),j*3.14159);\n        if(uMark==16&&k>coverage)col=uSourceColor>.5?clamp(rgb+(j-.5)*ROUGH*.25*vec3(1.,-.4,-1.),0.,1.):rgb*(1.+(j-.5)*ROUGH*.5);\n        coverage=max(coverage,k);\n      }\n      rgb=col;\n    } else if(uMark==12||uMark==13){\n      // Engraving and crosshatch: parallel cuts whose weight follows the tone; crossings join only in the darker tones.\n      float cv=tone*(1.-ROUGH*grain*.3),px=uPitch.y;\n      coverage=cuts(w,DIR,.5,min(.47,.36*cv),px);\n      if(uMark==13){\n        coverage=max(coverage,cuts(w,vec2(-DIR.y,DIR.x),.5,min(.47,.36*max(0.,cv*1.5-.3)),px)*step(.2,cv));\n        coverage=max(coverage,cuts(w,normalize(DIR+vec2(-DIR.y,DIR.x)),.5,min(.47,.36*max(0.,cv*2.-1.2)),px)*step(.6,cv));\n      }\n    } else if(uMark==14){\n      // Woodblock: broad carved bands in five stepped weights, their edges wavering along the grain.\n      float cv=ceil(tone*(1.-ROUGH*grain*.3)*5.)/5.,width=min(.94,.72*cv);\n      float proj=dot(vec2(-DIR.y,DIR.x),w),line=floor(proj+.5),along=dot(DIR,w);\n      float cut=sin(along*5.3+line*1.9+SEED)*.5+sin(along*13.1+line)*.25;\n      coverage=cover((abs(proj-line)-width*.5*(1.+ROUGH*cut*.5))*uPitch.y);\n    } else if(uMark==15){\n      // Risograph: two offset screens, the main ink and the coral second ink, misregistered along the screen angle.\n      float split=uSourceColor>.5?clamp(.5+(rgb.r-rgb.b)*.5,0.,1.):.5,r=side*min(.48,.44*sqrt(tone));\n      float a=0.;vec3 col=rgb;\n      lay(col,a,rgb,disc(local,c,r*sqrt(.35+(1.-split)*.65)));\n      lay(col,a,SECOND,disc(local,c+DIR*.2*.38*side,r*sqrt(.3+split*.7)*(1.-ROUGH*hash(cell+SEED+13.)*.3)));\n      rgb=col;coverage=a;\n    } else coverage=0.;\n  }\n  outColor=vec4(rgb*coverage+under.rgb*(1.-coverage),coverage+under.a*(1.-coverage));\n}"),D||ze(!0)}const et=()=>`${g.fontWeight} ${Math.max(1,$.height*g.glyphScale)}px ${g.font}`,tt=()=>{const e=E(g.charset);K=e.length,$=M(g.cellSize,g.cellAspect,W,K),Y=W;const t=document.createElement("canvas");t.width=$.atlasWidth,t.height=$.atlasHeight;const n=t.getContext("2d");n.fillStyle="#fff",n.textAlign="center",n.textBaseline="alphabetic",n.font=et();const r=n.measureText("M"),i=r.actualBoundingBoxAscent||$.height*g.glyphScale*.7,o=r.actualBoundingBoxDescent||0,a=($.height+i-o)/2;e.forEach((e,t)=>{const r=t%$.columns*$.width+$.width/2,i=Math.floor(t/$.columns)*$.height+a,o=n.measureText(e).width;n.save(),n.beginPath(),n.rect(r-$.width/2,i-a,$.width,$.height),n.clip(),n.translate(r,i),o>.96*$.width&&n.scale(.96*$.width/o,1),n.fillText(e,0,0),n.restore()}),b.bindTexture(b.TEXTURE_2D,C),b.pixelStorei(b.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!1),b.texImage2D(b.TEXTURE_2D,0,b.RGBA8,b.RGBA,b.UNSIGNED_BYTE,t),t.width=t.height=1,ve=!0},nt="undefined"==typeof document?void 0:document.fonts,rt=()=>{if(!nt?.load)return;const e=et();nt.load(e,E(g.charset).join("")).then(()=>{pe||ge||et()!==e||(tt(),Tt())},()=>{})},it=e=>e.trim().replace(/^["']|["']$/g,"").toLowerCase(),ot=e=>{const t=e.fontfaces??[],n=g.font.split(",").map(it);t.some(e=>n.includes(it(e.family)))&&rt()},at=()=>{if(ce=[0,1],ee&&"none"!==g.levels)try{const e=document.createElement("canvas");e.width=e.height=64;const t=e.getContext("2d",{willReadFrequently:!0});ee===ae&&(t.imageSmoothingQuality="medium"),t.drawImage(ee,0,0,64,64),ce=k(t.getImageData(0,0,64,64).data)}catch{ce=[0,1]}},lt=()=>{if(!ee)return;const e=performance.now();ee instanceof HTMLVideoElement&&!(e-fe>1500)||(at(),fe=e),b.bindTexture(b.TEXTURE_2D,_),b.pixelStorei(b.UNPACK_FLIP_Y_WEBGL,!1),b.pixelStorei(b.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!1);try{b.texImage2D(b.TEXTURE_2D,0,b.RGBA8,b.RGBA,b.UNSIGNED_BYTE,ee),b.generateMipmap(b.TEXTURE_2D)}catch(e){qe(e)}},st=()=>{S=!b.getExtension("EXT_color_buffer_float")&&!b.getExtension("EXT_color_buffer_half_float"),Ze(),G=b.createVertexArray(),C=je(b.NEAREST),_=je(b.LINEAR_MIPMAP_LINEAR),b.bindTexture(b.TEXTURE_2D,_),b.texImage2D(b.TEXTURE_2D,0,b.RGBA8,1,1,0,b.RGBA,b.UNSIGNED_BYTE,new Uint8Array([0,0,0,255])),b.generateMipmap(b.TEXTURE_2D),z=j=0,Y=0,ut(),rt(),ee&&lt()};function ut(){const e=n.clientWidth||n.clientHeight?{width:n.clientWidth,height:n.clientHeight}:n.getBoundingClientRect(),t=Math.min(globalThis.devicePixelRatio||1,g.maxPixelRatio),r=Math.max(1,Math.round(e.width*t)),i=Math.max(1,Math.round(e.height*t));if(r===z&&i===j&&t===W)return!1;const o=!z||Math.abs(r/i-z/j)>.01;return W=t,z=r,j=i,n.width=z,n.height=j,Y!==W&&tt(),(o||$e()&&!X.length&&!q)&&Qe(),ve=!0,!0}let ct=null,ft=[0,0,0],ht=[1,1,1],dt=[0,0,0,0],mt=T(1,1,1,1,"cover"),vt=null,pt=0,gt=0,xt=0,yt=0;const bt=()=>{ct!==g&&(ct=g,ft=R(g.ink),ht=R("auto"===g.highlight?"#ffffff":g.highlight),dt="transparent"===g.background?[0,0,0,0]:[...R(g.background),1]),vt===g&&pt===z&&gt===j&&xt===re&&yt===ie||(vt=g,pt=z,gt=j,xt=re,yt=ie,mt=T(z,j,re||1,ie||1,g.fit,g.focus));const t=g.fluid,n=ee&&le?$.height/j*le*mt.scale[1]:1,r=(()=>{const[e,t]=Ye(),n=Math.ceil(z/e-1e-4),r=Math.ceil(j/t-1e-4);if(I&&I.columns===n&&I.rows===r)return I;We();const i=()=>{const e=je(b.NEAREST);return b.texStorage2D(b.TEXTURE_2D,1,S?b.RGBA8:b.RGBA16F,n,r),e},o=i(),a=i(),l=b.createFramebuffer();return b.bindFramebuffer(b.FRAMEBUFFER,l),b.framebufferTexture2D(b.FRAMEBUFFER,b.COLOR_ATTACHMENT0,b.TEXTURE_2D,o,0),b.framebufferTexture2D(b.FRAMEBUFFER,b.COLOR_ATTACHMENT1,b.TEXTURE_2D,a,0),b.drawBuffers([b.COLOR_ATTACHMENT0,b.COLOR_ATTACHMENT1]),I={ink:o,under:a,buffer:l,columns:n,rows:r}})(),i=P.locations,o=U.locations,a=F(g),l=!Ie();b.bindFramebuffer(b.FRAMEBUFFER,r.buffer),b.viewport(0,0,r.columns,r.rows),b.useProgram(P.program),b.activeTexture(b.TEXTURE0),b.bindTexture(b.TEXTURE_2D,_),b.uniform1i(i.uSource,0),b.activeTexture(b.TEXTURE2),b.bindTexture(b.TEXTURE_2D,(q?N?.velocity:X[Z])??_),b.uniform1i(i.uFluid,2),b.activeTexture(b.TEXTURE3),b.bindTexture(b.TEXTURE_2D,Ce??_),b.uniform1i(i.uTrailMap,3),b.uniform1f(i.uFluidMode,q?1:0),b.uniform1i(i.uHoverMode,"fluid"===a?1:"lantern"===a?2:"trail"===a&&_e?3:0),b.uniform1f(i.uTrailAmount,g.trail.strength),b.uniform3f(i.uLight,Se.at?.[0]??-1,Se.at?.[1]??-1,"lantern"===a?Se.strength:0),b.uniform3fv(i.uTrail,Le),b.uniform1f(i.uLightRadius,g.lantern.radius),b.uniform1f(i.uLightGain,g.lantern.strength),b.uniform1f(i.uClock,performance.now()/1e3),b.uniform1f(i.uFlicker,l?1:0),b.uniform2f(i.uFluidTexel,1/Math.max(1,J),1/Math.max(1,Q)),b.uniform2f(i.uResolution,z,j);const[s,u]=Ye();var c;b.uniform2f(i.uCell,s,u),b.uniform1f(i.uCount,K),b.uniform1f(i.uBlend,"on"===g.blend||K<=9&&("coarse"===g.blend||"auto"===g.blend&&te)?1:0),b.uniform4f(i.uSourceMap,mt.scale[0],mt.scale[1],mt.offset[0],mt.offset[1]),b.uniform1i(i.uScene,ee?0:(c=g.scene,e[c]??3)),b.uniform1i(i.uMark,d.indexOf(g.mark)),b.uniform1f(i.uScale,g.scale);const f=g.clear;b.uniform4f(i.uClear,f?f.x:0,f?f.y:0,f?f.width:0,f?f.height:0),b.uniform1f(i.uClearFeather,f?f.feather:.1),b.uniform1f(i.uClearShape,f&&"rect"===f.shape?1:0);const h=performance.now();Fe.fill(0);for(let e=0;e<ke.length;e++){const t=ke[e],n=4*e;Fe[n]=t.x,Fe[n+1]=t.y,Fe[n+2]=(h-t.born)/1e3,Fe[n+3]=t.strength}b.uniform4fv(i.uPulse,Fe),b.uniform3fv(i.uInk,ft),b.uniform3fv(i.uHighlight,ht),b.uniform1f(i.uHighlightAuto,"auto"===g.highlight?1:0),b.uniform4fv(i.uBackground,dt),b.uniform1f(i.uBrightness,g.brightness),b.uniform1f(i.uContrast,g.contrast),b.uniform1f(i.uGamma,g.gamma),b.uniform1f(i.uInvert,g.invert?1:0),b.uniform1f(i.uVignette,g.vignette),b.uniform1f(i.uSourceColor,"source"===g.color?1:0),b.uniform1f(i.uRefraction,t?t.refraction*(l?1:.25):0),b.uniform1f(i.uGlow,t?t.glow:0),b.uniform1f(i.uTime,me),b.uniform1f(i.uDrift,l?g.drift:0),b.uniform1f(i.uFluidOn,t&&"fluid"===a&&(X.length||q)?1:0),b.uniform1f(i.uLod,Math.max(0,Math.log2(Math.max(1,n))-.5)),b.uniform1f(i.uSaturation,g.saturation),b.uniform1f(i.uShade,g.shade),b.uniform1f(i.uBackdrop,ee?g.backdrop:0),b.uniform2f(i.uLevels,ee&&"auto"===g.levels?ce[0]:0,ee&&"auto"===g.levels?ce[1]:1),b.bindVertexArray(G),b.drawArrays(b.TRIANGLES,0,3),b.bindFramebuffer(b.FRAMEBUFFER,null),b.viewport(0,0,z,j),b.useProgram(U.program),b.activeTexture(b.TEXTURE1),b.bindTexture(b.TEXTURE_2D,C),b.uniform1i(o.uAtlas,1),b.activeTexture(b.TEXTURE4),b.bindTexture(b.TEXTURE_2D,r.ink),b.uniform1i(o.uCells,4),b.activeTexture(b.TEXTURE5),b.bindTexture(b.TEXTURE_2D,r.under),b.uniform1i(o.uUnder,5),b.uniform2f(o.uResolution,z,j),b.uniform2f(o.uCell,$.width,$.height),b.uniform2f(o.uPitch,s,u),b.uniform1f(o.uColumns,$.columns),b.uniform1f(o.uDotScale,g.dotScale),b.uniform1i(o.uMark,d.indexOf(g.mark)),b.uniform1f(o.uSourceColor,"source"===g.color?1:0),b.drawArrays(b.TRIANGLES,0,3)},Et=()=>!pe&&!ge&&!xe&&(be||Ne)&&!("undefined"!=typeof document&&document.hidden),wt=e=>{if(he=0,!Et())return;const t=(e-de)/1e3,n=Math.min(1/30,Math.max(1/480,t));de=e,Te=.9*Te+.1*Math.min(t,.25),Me=Te>1/24?Me+1:0;try{Me>45&&Re<2&&(Me=0,Re++,1===Re&&W>1?(g={...g,maxPixelRatio:1},ut()):Re=2);const t=ze(),r=!(ye||Re>=2&&!(ee instanceof HTMLVideoElement)||(!(ee instanceof HTMLVideoElement)||ee.paused||ee.ended)&&(Ie()||!(!ee&&"none"!==g.scene||g.drift>0)));r&&(me+=n*g.speed),ee instanceof HTMLVideoElement&&ee.readyState>=2&&se&&(se=!("requestVideoFrameCallback"in ee),lt(),ve=!0);const i=F(g);let o="fluid"===i&&(null!==we||e<Ue);if(o?((e,t)=>{const n=g.fluid;if(!n||!H.length&&!q)return;if(q?!N?.ready():!B||!Oe(B))return;const r=z/j,i=we;if(we=null,q&&N){const o=5200*n.force*(Ie()?.35:1);return i&&(Ue=t+1e3*Math.min(9,6/Math.max(.3,n.dissipation))),void N.step(i?{from:i.from,to:i.to,force:[(i.to[0]-i.from[0])*o,(i.to[1]-i.from[1])*o]}:null,{dt:Math.min(e,1/60),radius:1.1*n.radius,curl:n.curl,dissipation:n.dissipation,aspect:r})}let o=0,a=0;if(i){const e=(Ie()?1:3)*n.force;o=(i.to[0]-i.from[0])*r*e*4,a=(i.to[1]-i.from[1])*e*4,Ue=t+7/Math.min(n.dissipation,1.1*n.dissipation)*1e3}const l=B.locations;b.bindFramebuffer(b.FRAMEBUFFER,H[1-Z]),b.viewport(0,0,J,Q),b.useProgram(B.program),b.activeTexture(b.TEXTURE0),b.bindTexture(b.TEXTURE_2D,X[Z]),b.uniform1i(l.uPrevious,0),b.uniform2f(l.uSize,J,Q),b.uniform1f(l.uAspect,r),b.uniform1f(l.uDt,e),b.uniform1f(l.uDecay,n.dissipation),b.uniform1f(l.uEnergyDecay,1.1*n.dissipation),b.uniform1f(l.uRadius,n.radius),b.uniform1f(l.uSplat,i?1:0),b.uniform2f(l.uFrom,i?.from[0]??0,i?.from[1]??0),b.uniform2f(l.uTo,i?.to[0]??0,i?.to[1]??0),b.uniform2f(l.uForce,o,a),b.drawArrays(b.TRIANGLES,0,3),Z=1-Z})(n,e):we=null,"lantern"===i&&(o=((e,t)=>{const n=g.lantern,r=Se.target;if(r){const i=Se.at;if(i)if(Ie())i[0]=r[0],i[1]=r[1];else{const t=1-Math.exp(-n.follow*e);i[0]+=(r[0]-i[0])*t,i[1]+=(r[1]-i[1])*t}else Se.at=[r[0],r[1]];const o=Se.at,a=Se.trail[Se.trail.length-1];n.trail>0&&(!a||t-a.born>28&&Math.hypot(o[0]-a.x,o[1]-a.y)>.004)&&(Se.trail.push({x:o[0],y:o[1],born:t}),Se.trail.length>12&&Se.trail.shift())}Se.strength+=((r?1:0)-Se.strength)*(1-Math.exp(-e*(r?9:5)));const i=Se.trail;for(let e=i.length-1;e>=0;e--)n.trail>0&&t-i[e].born<4e3*n.trail||i.splice(e,1);Le.fill(0);for(let e=0;e<i.length;e++){const r=i[e];Le[3*e]=r.x,Le[3*e+1]=r.y,Le[3*e+2]=.55*Math.exp(-(t-r.born)/1e3/Math.max(.01,n.trail))}return Se.strength>.003||i.length>0})(n,e)||o),"trail"===i){const e=!!De?.active;o=(e=>{const t=Pe();return!(!t||!t.active||(t.step(e),b.bindTexture(b.TEXTURE_2D,Ce),b.texSubImage2D(b.TEXTURE_2D,0,0,0,t.width,t.height,b.RGBA,b.UNSIGNED_BYTE,t.pixels),_e=!0,0))})(n)||o,e&&!De?.active&&(ve=!0)}if(ke.length){for(let t=ke.length-1;t>=0;t--)e-ke[t].born>=2400&&ke.splice(t,1);o=!0,ke.length||(ve=!0)}t&&(r||o||ve)&&(bt(),ve=!1,!Ne||oe&&!ee||(Ne=!1,Xe())),(r||o||we||!t)&&(he=requestAnimationFrame(wt))}catch(e){xe=!0,qe(e)}};function Tt(){!he&&Et()&&(de=performance.now(),he=requestAnimationFrame(wt))}const Mt=(e,t)=>{const r=n.getBoundingClientRect();if(!r.width||!r.height)return null;const i=(e-r.left)/r.width,o=(t-r.top)/r.height;return i<-.05||i>1.05||o<-.05||o>1.05?null:[i,1-o]},Rt=e=>{const t=F(g);if("none"===t||ye)return Ee=null,void(Se.target=null);if("lantern"===t)return Se.target=e?[e[0],1-e[1]]:null,Ee=null,void Tt();if("trail"===t){const t=Pe();if(!t)return;return e?t.move(e[0],1-e[1],g.trail.radius,performance.now()):t.leave(),Ee=null,void Tt()}e?(Ee&&(we=we?{from:we.from,to:e}:{from:Ee,to:e}),Ee=e,Tt()):Ee=null},kt=e=>Rt(Mt(e.clientX,e.clientY)),Ft=()=>{Ee=null,De?.leave(),Se.target&&(Se.target=null,Tt())},At=h.interactionTarget??window;At.addEventListener("pointermove",kt,{passive:!0}),At.addEventListener("pointerdown",kt,{passive:!0}),document.addEventListener("pointerleave",Ft),At!==window&&At.addEventListener("pointerleave",Ft);const St="function"==typeof ResizeObserver?new ResizeObserver(()=>{const e=ut();Ae(),(e||ve)&&Tt()}):null;St?.observe(n),p&&St?.observe(p.element);const Lt="function"==typeof IntersectionObserver?new IntersectionObserver(([e])=>{be=e.isIntersecting,be&&(ve=!0,Tt())},{rootMargin:"120px"}):null;Lt?.observe(n);const Dt=()=>{document.hidden||(ve=!0,Tt())};document.addEventListener("visibilitychange",Dt);const Ct=()=>{ve=!0,Tt()};Be?.addEventListener?.("change",Ct),nt?.addEventListener?.("loadingdone",ot);const _t=e=>{e.preventDefault(),ge=!0,he&&cancelAnimationFrame(he),he=0},Pt=()=>{ge=!1,O.length=0,V=null,P=U=B=null,I=null,X=[],H=[],N=null,q=!1,Ce=null,De=null,_e=!1;try{st(),ve=!0,Tt()}catch(e){qe(e)}};n.addEventListener("webglcontextlost",_t),n.addEventListener("webglcontextrestored",Pt);const Ut=()=>{ne&&(ne.pause(),ne.removeAttribute("src"),ne.load(),ne=null),ue&&ee instanceof HTMLVideoElement&&"cancelVideoFrameCallback"in ee&&ee.cancelVideoFrameCallback(ue),ue=0},Bt=()=>{ae?.close(),ae=null},It=async e=>{const t=await createImageBitmap(e,{premultiplyAlpha:"none"}),n=[t.width,t.height],r=function(e,t,n,r,i,o,a=8){if(!(n>=16&&r>=16&&e>0&&t>0&&i>0))return 1;const l=a/i/("cover"===o?Math.min(e/n,t/r):Math.max(e/n,t/r));return l>.5?1:2**-Math.floor(Math.log2(1/l))}(t.width,t.height,z,j,$.height,g.fit);if(1===r)return{element:t,owned:!0,natural:n};try{return{element:await createImageBitmap(t,{resizeWidth:Math.max(1,Math.round(t.width*r)),resizeHeight:Math.max(1,Math.round(t.height*r)),resizeQuality:"medium",premultiplyAlpha:"none"}),owned:!0,natural:n}}finally{t.close()}},Xt=e=>new Promise((t,n)=>{const r=new Image;r.crossOrigin="anonymous",r.decoding="async",r.onload=()=>t({element:r,owned:!1}),r.onerror=()=>n(new Error("The glyph field could not load this image.")),r.src=e}),Ht=async e=>{const t=++oe;if(!e)return Ut(),Bt(),ee=null,re=ie=le=0,te=!1,ve=!0,void Tt();try{const n=await(async e=>{if("string"!=typeof e)return e instanceof HTMLImageElement&&!e.complete?e.decode().then(()=>({element:e,owned:!1})):e instanceof HTMLVideoElement&&e.readyState<2?new Promise((t,n)=>{e.addEventListener("loadeddata",()=>t({element:e,owned:!1}),{once:!0}),e.addEventListener("error",()=>n(new Error("The glyph field could not load this video.")),{once:!0})}):{element:e,owned:!1};if(L.test(e))return new Promise((t,n)=>{const r=document.createElement("video");r.crossOrigin="anonymous",r.muted=!0,r.loop=!0,r.playsInline=!0,r.preload="auto",r.addEventListener("loadeddata",()=>{r.play().catch(()=>{}),t({element:r,owned:!0})},{once:!0}),r.addEventListener("error",()=>n(new Error("The glyph field could not load this video.")),{once:!0}),r.src=e});if("function"!=typeof createImageBitmap||"function"!=typeof fetch)return Xt(e);let t;try{t=await(await fetch(e).then(e=>{if(!e.ok)throw new Error("The glyph field could not load this image.");return e})).blob()}catch(t){if(t instanceof Error&&t.message.startsWith("The glyph field"))throw t;return Xt(e)}if(!/svg/i.test(t.type))try{return await It(t)}catch{}const n=URL.createObjectURL(t);try{return await Xt(n)}finally{URL.revokeObjectURL(n)}})(e),{element:r,owned:i}=n;if(pe||t!==oe)return void(i&&r instanceof HTMLVideoElement?(r.pause(),r.removeAttribute("src"),r.load()):i&&r.close());Ut(),Bt(),ne=i&&r instanceof HTMLVideoElement?r:null,!i||r instanceof HTMLVideoElement||(ae=r),ee=r,te="string"==typeof e||e instanceof HTMLImageElement||e instanceof HTMLVideoElement,le=r instanceof HTMLVideoElement?r.videoHeight:r instanceof HTMLImageElement?r.naturalHeight:r.height,re=n.natural?.[0]??(r instanceof HTMLVideoElement?r.videoWidth:r instanceof HTMLImageElement?r.naturalWidth:r.width),ie=n.natural?.[1]??le,se=!0,r instanceof HTMLVideoElement&&(e=>{const t=e;if(!t.requestVideoFrameCallback)return;const n=()=>{pe||ee!==e||(se=!0,Tt(),ue=t.requestVideoFrameCallback(n))};ue=t.requestVideoFrameCallback(n)})(r),ge||lt(),ve=!0,Tt()}catch(e){Ne&&t===oe&&(Ne=!1,Xe()),qe(e)}};st(),Ae();const Nt=h.source??null;return Nt?(oe=1,Ht(Nt)):Tt(),{canvas:n,ready:He,get settings(){return g},update(e){const t=g,{element:r,rest:i}=v(e);"clear"in e&&(p&&p.element!==r?.element&&St?.unobserve(p.element),p=r,r&&St?.observe(r.element)),g=w(r?{...i,clear:g.clear}:i,g),Ae(),e.label&&n.setAttribute("aria-label",e.label),g.maxPixelRatio!==t.maxPixelRatio&&ut(),g.charset===t.charset&&g.cellSize===t.cellSize&&g.cellAspect===t.cellAspect&&g.font===t.font&&g.fontWeight===t.fontWeight&&g.glyphScale===t.glyphScale||(tt(),rt()),g.levels!==t.levels&&at();((!!t.fluid&&"fluid"===F(t))!==$e()||g.fluid&&t.fluid&&g.fluid.resolution!==t.fluid.resolution)&&Qe(),"source"in e&&Ht(e.source??null),ve=!0,Tt()},setSource:Ht,pointer(e,t=0){if(null===e)return void Rt(null);const r=n.getBoundingClientRect();Rt(Mt(r.left+e,r.top+t))},redraw(){if(!(pe||ge||xe)&&z)try{ze(!0)&&bt()}catch(e){xe=!0,qe(e)}},pulse(e={}){if(pe||Ie())return;const t=n.getBoundingClientRect();if(!t.width||!t.height)return;let r=e.x??t.width/2,i=e.y??t.height/2;if(e.element){const n=e.element.getBoundingClientRect();r=n.left+n.width/2-t.left,i=n.top+n.height/2-t.top}const o=Math.max(0,Math.min(2,e.strength??1));ke=[...ke,{x:r/t.width,y:i/t.height,born:performance.now(),strength:o}].slice(-4),Tt()},play(){ye=!1,ee instanceof HTMLVideoElement&&ee.play().catch(()=>{}),ve=!0,Tt()},pause(){ye=!0,ee instanceof HTMLVideoElement&&ee.pause()},resize(){ut()&&Tt()},destroy(){if(!pe&&(pe=!0,he&&cancelAnimationFrame(he),At.removeEventListener("pointermove",kt),At.removeEventListener("pointerdown",kt),document.removeEventListener("pointerleave",Ft),At.removeEventListener("pointerleave",Ft),document.removeEventListener("visibilitychange",Dt),Be?.removeEventListener?.("change",Ct),nt?.removeEventListener?.("loadingdone",ot),n.removeEventListener("webglcontextlost",_t),n.removeEventListener("webglcontextrestored",Pt),St?.disconnect(),Lt?.disconnect(),Ut(),Bt(),ee=null,!ge)){Ke(),We(),b.deleteTexture(C),b.deleteTexture(_);for(const e of[P,U,B])e&&b.deleteProgram(e.program);N?.dispose(),Ce&&b.deleteTexture(Ce),O.forEach(e=>b.deleteShader(e)),G&&b.deleteVertexArray(G)}}}}export{g as DEFAULT_FIELD_FLUID,v as DEFAULT_FIELD_LANTERN,x as DEFAULT_FIELD_SETTINGS,p as DEFAULT_FIELD_TRAIL,m as FIELD_HOVERS,d as FIELD_MARKS,h as FIELD_SCENES,F as activeFieldHover,M as fieldCellLayout,A as fieldClearFromRects,E as fieldGlyphs,k as fieldLevels,T as fieldSourceRect,C as glyphFieldTier,_ as isGlyphFieldSupported,P as mountGlyphField,w as normalizeFieldSettings};//# sourceMappingURL=field.js.map
+var e={none:3,flow:1,orb:2,drift:4,swell:5,caustics:6,contour:7,aurora:8,ripple:9,halo:10,interference:11,mesh:12,cascade:13,constellation:14},t=e=>e?"\nconst float VSCALE=6.;\nvec4 decodeFluid(vec4 t){return vec4((t.xy*2.-1.)*VSCALE,t.z,t.w);}\nvec4 encodeFluid(vec4 v){return vec4(clamp(v.xy/VSCALE*.5+.5,0.,1.),clamp(v.z,0.,1.),1.);}":"\nvec4 decodeFluid(vec4 t){return t;}\nvec4 encodeFluid(vec4 v){return vec4(v.xyz,1.);}",n="#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform vec2 uTexel;\nout vec4 outColor;\nvec2 here(){return gl_FragCoord.xy*uTexel;}\n",r=n+"\nuniform sampler2D uVelocity;\nuniform vec2 uFrom, uTo, uForce;\nuniform float uAspect, uRadius;\nfloat segment(vec2 p,vec2 a,vec2 b){vec2 pa=p-a,ba=b-a;float h=clamp(dot(pa,ba)/max(dot(ba,ba),1e-8),0.,1.);return length(pa-ba*h);}\nvoid main(){\n  vec2 uv=here(),scale=vec2(uAspect,1.);\n  float d=segment(uv*scale,uFrom*scale,uTo*scale);\n  outColor=vec4(texture(uVelocity,uv).xy+uForce*exp(-d*d/(uRadius*uRadius)),0.,1.);\n}",i=n+"\nuniform sampler2D uVelocity;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uVelocity,uv-vec2(uTexel.x,0.)).y,r=texture(uVelocity,uv+vec2(uTexel.x,0.)).y;\n  float t=texture(uVelocity,uv+vec2(0.,uTexel.y)).x,b=texture(uVelocity,uv-vec2(0.,uTexel.y)).x;\n  outColor=vec4(.5*(r-l-t+b),0.,0.,1.);\n}",o=n+"\nuniform sampler2D uVelocity, uCurl;\nuniform float uStrength, uDt;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uCurl,uv-vec2(uTexel.x,0.)).x,r=texture(uCurl,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uCurl,uv+vec2(0.,uTexel.y)).x,b=texture(uCurl,uv-vec2(0.,uTexel.y)).x,c=texture(uCurl,uv).x;\n  vec2 force=.5*vec2(abs(t)-abs(b),abs(r)-abs(l));\n  force=force/(length(force)+1e-4)*uStrength*c;\n  force.y=-force.y;\n  outColor=vec4(clamp(texture(uVelocity,uv).xy+force*uDt,-1000.,1000.),0.,1.);\n}",a=n+"\nuniform sampler2D uVelocity;\nvoid main(){\n  vec2 uv=here(),c=texture(uVelocity,uv).xy;\n  float l=texture(uVelocity,uv-vec2(uTexel.x,0.)).x,r=texture(uVelocity,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uVelocity,uv+vec2(0.,uTexel.y)).y,b=texture(uVelocity,uv-vec2(0.,uTexel.y)).y;\n  if(uv.x-uTexel.x<0.)l=-c.x;\n  if(uv.x+uTexel.x>1.)r=-c.x;\n  if(uv.y+uTexel.y>1.)t=-c.y;\n  if(uv.y-uTexel.y<0.)b=-c.y;\n  outColor=vec4(.5*(r-l+t-b),0.,0.,1.);\n}",l=n+"\nuniform sampler2D uSource;\nuniform float uAmount;\nvoid main(){outColor=vec4(texture(uSource,here()).x*uAmount,0.,0.,1.);}",s=n+"\nuniform sampler2D uPressure, uDivergence;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uPressure,uv-vec2(uTexel.x,0.)).x,r=texture(uPressure,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uPressure,uv+vec2(0.,uTexel.y)).x,b=texture(uPressure,uv-vec2(0.,uTexel.y)).x;\n  outColor=vec4((l+r+b+t-texture(uDivergence,uv).x)*.25,0.,0.,1.);\n}",u=n+"\nuniform sampler2D uPressure, uVelocity;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uPressure,uv-vec2(uTexel.x,0.)).x,r=texture(uPressure,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uPressure,uv+vec2(0.,uTexel.y)).x,b=texture(uPressure,uv-vec2(0.,uTexel.y)).x;\n  outColor=vec4(texture(uVelocity,uv).xy-vec2(r-l,t-b),0.,1.);\n}",c=n+"\nuniform sampler2D uVelocity;\nuniform float uDt, uDissipation;\nvoid main(){\n  vec2 uv=here();\n  vec2 back=uv-uDt*texture(uVelocity,uv).xy*uTexel;\n  outColor=vec4(texture(uVelocity,back).xy/(1.+uDissipation*uDt),0.,1.);\n}";var f=class{constructor(e,t){this.previous=null,this.peak=0,this.width=e,this.height=t;const n=e*t;this.pixels=new Uint8Array(4*n),this.signal=new Float32Array(n),this.offsetX=new Float32Array(n),this.offsetY=new Float32Array(n),this.driftX=new Float32Array(n),this.driftY=new Float32Array(n),this.u=new Float32Array(n),this.v=new Float32Array(n),this.ink=new Float32Array(n),this.a=new Float32Array(n),this.b=new Float32Array(n),this.c=new Float32Array(n),this.pressure=new Float32Array(n),this.pressureNext=new Float32Array(n),this.divergence=new Float32Array(n),this.curl=new Float32Array(n)}get active(){return this.peak>2e-4}clear(){for(const e of[this.u,this.v,this.ink,this.a,this.b,this.c,this.pressure,this.pressureNext,this.divergence,this.curl,this.signal,this.pixels,this.offsetX,this.offsetY,this.driftX,this.driftY])e.fill(0);this.previous=null,this.peak=0}leave(){this.previous=null}move(e,t,n,r=performance.now()){if(!Number.isFinite(e+t+n+r))return;e=Math.max(0,Math.min(1,e)),t=Math.max(0,Math.min(1,t)),n=Math.max(.1,Math.min(1,n));const i=this.previous;if(this.previous={x:e,y:t,time:r},!i)return;const o=(e-i.x)*(this.width-1),a=(t-i.y)*(this.height-1),l=Math.hypot(o,a);if(l<.001)return;const s=Math.min(this.width,this.height),u=r>i.time?Math.max(1/240,(r-i.time)/1e3):1/60,c=Math.min(12,l/s/u),f=1-Math.exp(-c/2.2),h=s*(.022+.075*n)*(.65+.95*f),d=Math.min(128,Math.max(1,Math.ceil(l/(.4*h)))),m=l/h*(.32+.22*f)/d,v=o/l,p=a/l,g=-p,x=v,y=l*(2+18*f)/d;for(let n=0;n<d;n++){const r=(n+.5)/d,o=(i.x+(e-i.x)*r)*(this.width-1),a=(i.y+(t-i.y)*r)*(this.height-1),l=Math.max(1,Math.floor(o-3*h)),s=Math.min(this.width-2,Math.ceil(o+3*h)),u=Math.max(1,Math.floor(a-3*h)),c=Math.min(this.height-2,Math.ceil(a+3*h));for(let e=u;e<=c;e++)for(let t=l;t<=s;t++){const n=((t-o)*v+(e-a)*p)/h,r=((t-o)*g+(e-a)*x)/h,i=Math.exp(-n*n*.65-r*r*1.7),l=e*this.width+t;this.ink[l]=1-(1-this.ink[l])*Math.exp(-i*m);const s=1-r*r*.55,u=n*r*.7;this.u[l]=Math.max(-80,Math.min(80,this.u[l]+(v*s+g*u)*i*y)),this.v[l]=Math.max(-80,Math.min(80,this.v[l]+(p*s+x*u)*i*y))}}this.peak=1}read(e,t,n){const r=0|(t=Math.max(.5,Math.min(this.width-1.5,t))),i=0|(n=Math.max(.5,Math.min(this.height-1.5,n))),o=t-r,a=n-i,l=i*this.width+r;return(e[l]*(1-o)+e[l+1]*o)*(1-a)+(e[l+this.width]*(1-o)+e[l+this.width+1]*o)*a}sample(e,t){return this.read(this.signal,e*(this.width-1),t*(this.height-1))}displacement(e,t,n){n[0]=this.read(this.offsetX,e*(this.width-1),t*(this.height-1)),n[1]=this.read(this.offsetY,e*(this.width-1),t*(this.height-1))}step(e){if(!this.active||!Number.isFinite(e))return;let t=Math.max(0,Math.min(.05,e));const n=this.width,r=this.height;for(;t>1e-7;){const e=Math.min(1/60,t);t-=e;const i=Math.exp(-1.9*e),o=Math.exp(-3.2*e);for(let t=1;t<r-1;t++)for(let a=1;a<n-1;a++){const l=t*n+a,s=Math.max(.5,Math.min(n-1.5,a-this.u[l]*e)),u=Math.max(.5,Math.min(r-1.5,t-this.v[l]*e)),c=0|s,f=0|u,h=s-c,d=u-f,m=f*n+c,v=(1-h)*(1-d),p=h*(1-d),g=(1-h)*d,x=h*d;this.a[l]=(this.u[m]*v+this.u[m+1]*p+this.u[m+n]*g+this.u[m+n+1]*x)*i,this.b[l]=(this.v[m]*v+this.v[m+1]*p+this.v[m+n]*g+this.v[m+n+1]*x)*i,this.c[l]=(this.ink[m]*v+this.ink[m+1]*p+this.ink[m+n]*g+this.ink[m+n+1]*x)*o}[this.u,this.a]=[this.a,this.u],[this.v,this.b]=[this.b,this.v],[this.ink,this.c]=[this.c,this.ink];for(let e=1;e<r-1;e++)for(let t=1;t<n-1;t++){const r=e*n+t;this.curl[r]=.5*(this.v[r+1]-this.v[r-1]-this.u[r+n]+this.u[r-n])}for(let t=1;t<r-1;t++)for(let r=1;r<n-1;r++){const i=t*n+r,o=Math.abs(this.curl[i+1])-Math.abs(this.curl[i-1]),a=Math.abs(this.curl[i+n])-Math.abs(this.curl[i-n]),l=Math.hypot(o,a)+1e-4,s=this.curl[i]*e*10,u=Math.hypot(this.u[i],this.v[i]);this.u[i]+=a/l*s,this.v[i]-=o/l*s;const c=Math.min(1,u/(Math.hypot(this.u[i],this.v[i])+1e-6));this.u[i]*=c,this.v[i]*=c,this.divergence[i]=-.5*(this.u[i+1]-this.u[i-1]+this.v[i+n]-this.v[i-n])}this.pressure.fill(0);for(let e=0;e<4;e++){for(let e=1;e<r-1;e++)for(let t=1;t<n-1;t++){const r=e*n+t;this.pressureNext[r]=.25*(this.divergence[r]+this.pressure[r-1]+this.pressure[r+1]+this.pressure[r-n]+this.pressure[r+n])}[this.pressure,this.pressureNext]=[this.pressureNext,this.pressure]}let a=0;for(let t=1;t<r-1;t++)for(let r=1;r<n-1;r++){const i=t*n+r;this.u[i]=Math.max(-80,Math.min(80,this.u[i]-.5*(this.pressure[i+1]-this.pressure[i-1]))),this.v[i]=Math.max(-80,Math.min(80,this.v[i]-.5*(this.pressure[i+n]-this.pressure[i-n]))),this.driftX[i]+=(3.6*this.u[i]-58*this.offsetX[i]-12*this.driftX[i])*e,this.driftY[i]+=(3.6*this.v[i]-58*this.offsetY[i]-12*this.driftY[i])*e,this.offsetX[i]=Math.max(-2,Math.min(2,this.offsetX[i]+this.driftX[i]*e)),this.offsetY[i]=Math.max(-2,Math.min(2,this.offsetY[i]+this.driftY[i]*e)),this.signal[i]=1-Math.exp(.06*-Math.hypot(this.u[i],this.v[i])-.16*this.ink[i]),a=Math.max(a,this.signal[i])}this.peak=a}if(this.active)for(let e=0;e<this.ink.length;e++){const t=Math.round(65535*Math.min(1,this.signal[e]));this.pixels[4*e]=t>>>8,this.pixels[4*e+1]=255&t,this.pixels[4*e+2]=Math.round(128+63.5*this.offsetX[e]),this.pixels[4*e+3]=Math.round(128+63.5*this.offsetY[e])}else this.clear()}},h=["none","flow","orb","drift","swell","caustics","contour","aurora","ripple","halo","interference","mesh","cascade","constellation"],d=["glyph","dot","pixel","mosaic","lego","voxel","disco","dither","hex","led","cmyk","stipple","engraving","crosshatch","woodblock","risograph","pointillism"],m=[{value:"fluid",label:"Fluid",description:"An ink-in-water wake that bends the image and swirls the characters."},{value:"lantern",label:"Lantern",description:"A soft light follows the pointer and lifts the characters it passes, without distortion."},{value:"trail",label:"Trail",description:"The Asciify Trail: in the wake, sparse characters fill in and dense ones open up, then settle. No distortion."},{value:"loupe",label:"Loupe",description:"A glass loupe glides after the pointer and magnifies the characters it covers."},{value:"reveal",label:"Reveal",description:"Under a soft spotlight the characters take the source image's own colours. Best over a photo or video in one ink."},{value:"none",label:"Off",description:"The field stays still under the pointer."}],v={radius:.13,strength:.5,trail:.45,follow:12},p={strength:.55,radius:.45},g={radius:.075,force:1,dissipation:1.6,refraction:.03,glow:.55,resolution:128,curl:24},x={charset:" .,:-=+*#%@",cellSize:12,cellAspect:1,cellFit:"pixel",font:'ui-monospace, "SF Mono", Menlo, Consolas, monospace',fontWeight:500,glyphScale:.8,mark:"glyph",dotScale:.9,color:"ink",ink:"#f3ba32",highlight:"auto",background:"transparent",brightness:0,contrast:1,gamma:1,invert:!1,levels:"auto",blend:"auto",saturation:1.1,shade:.5,backdrop:0,fit:"cover",focus:{x:.5,y:.5},vignette:0,drift:0,scene:"flow",scale:1,clear:!1,speed:1,hover:"fluid",fluid:g,lantern:v,trail:p,maxPixelRatio:2,respectReducedMotion:!0},y=(e,t,n,r)=>"number"==typeof e&&Number.isFinite(e)?Math.min(n,Math.max(t,e)):r,b=(e,t)=>"string"==typeof e&&/^#([\da-f]{3}|[\da-f]{6})$/i.test(e.trim())?e.trim().toLowerCase():t;function E(e){const t=Intl.Segmenter;return(t?Array.from(new t(void 0,{granularity:"grapheme"}).segment(e),e=>e.segment):Array.from(e)).filter(e=>"\n"!==e&&"\r"!==e&&"\t"!==e).slice(0,256)}function w(e={},t=x){const n="string"==typeof e.charset&&E(e.charset).length>=2?e.charset:t.charset,r=t.fluid||g,i=void 0===e.fluid?t.fluid:e.fluid,o=!1!==i&&(()=>{const e=!0!==i&&i?{...r,...i}:r;return{radius:y(e.radius,.005,.5,g.radius),force:y(e.force,0,8,g.force),dissipation:y(e.dissipation,.05,20,g.dissipation),refraction:y(e.refraction,0,.5,g.refraction),glow:y(e.glow,0,2,g.glow),resolution:Math.round(y(e.resolution,16,512,g.resolution)),curl:y(e.curl,0,80,g.curl)}})(),a=h.includes(e.scene)?e.scene:t.scene,l=!!e.clear&&"object"==typeof e.clear&&("element"in e.clear||"nodeType"in e.clear),s=void 0===e.clear||l?t.clear:e.clear,u=!!s&&{x:y(s.x,-.5,1.5,.25),y:y(s.y,-.5,1.5,.3),width:y(s.width,0,2,.5),height:y(s.height,0,2,.4),feather:y(s.feather,.005,1,.12),shape:"rect"===s.shape?"rect":"ellipse"};return{charset:n,cellSize:y(e.cellSize,3,96,t.cellSize),cellAspect:y(e.cellAspect,.3,2,t.cellAspect),cellFit:"fill"===e.cellFit||"pixel"===e.cellFit?e.cellFit:t.cellFit,font:"string"==typeof e.font&&e.font.trim()?e.font:t.font,fontWeight:Math.round(y(e.fontWeight,100,900,t.fontWeight)),glyphScale:y(e.glyphScale,.3,1.6,t.glyphScale),mark:d.includes(e.mark)?e.mark:t.mark,dotScale:y(e.dotScale,.1,1.4,t.dotScale),color:"source"===e.color||"ink"===e.color?e.color:t.color,ink:b(e.ink,t.ink),highlight:"auto"===e.highlight?"auto":b(e.highlight,t.highlight),background:"transparent"===e.background?"transparent":b(e.background,t.background),brightness:y(e.brightness,-1,1,t.brightness),contrast:y(e.contrast,0,4,t.contrast),gamma:y(e.gamma,.2,5,t.gamma),invert:"boolean"==typeof e.invert?e.invert:t.invert,levels:"none"===e.levels||"auto"===e.levels?e.levels:t.levels,blend:"auto"===e.blend||"coarse"===e.blend||"on"===e.blend||"off"===e.blend?e.blend:t.blend,saturation:y(e.saturation,0,3,t.saturation),shade:y(e.shade,0,1,t.shade),backdrop:y(e.backdrop,0,1,t.backdrop),fit:"contain"===e.fit||"cover"===e.fit?e.fit:t.fit,focus:{x:y(e.focus?.x,0,1,t.focus.x),y:y(e.focus?.y,0,1,t.focus.y)},vignette:y(e.vignette,0,1,t.vignette),drift:y(e.drift,0,2,t.drift),scene:a,scale:y(e.scale,.2,6,t.scale),clear:u,speed:y(e.speed,0,5,t.speed),hover:m.some(t=>t.value===e.hover)?e.hover:t.hover,fluid:o,lantern:{radius:y(e.lantern?.radius,.02,.6,t.lantern.radius),strength:y(e.lantern?.strength,0,1.5,t.lantern.strength),trail:y(e.lantern?.trail,0,3,t.lantern.trail),follow:y(e.lantern?.follow,1,60,t.lantern.follow)},trail:{strength:y(e.trail?.strength,0,1,t.trail.strength),radius:y(e.trail?.radius,.1,1,t.trail.radius)},maxPixelRatio:y(e.maxPixelRatio,.5,4,t.maxPixelRatio),respectReducedMotion:"boolean"==typeof e.respectReducedMotion?e.respectReducedMotion:t.respectReducedMotion}}function T(e,t,n,r,i,o={x:.5,y:.5}){if(!(e>0&&t>0&&n>0&&r>0))return{scale:[1,1],offset:[0,0]};const a=e/t,l=n/r,s=l>a,u="cover"===i?s?[a/l,1]:[1,l/a]:s?[1,l/a]:[a/l,1];return{scale:u,offset:"cover"===i?[(1-u[0])*o.x,(1-u[1])*o.y]:[.5*(1-u[0]),.5*(1-u[1])]}}function M(e,t,n,r){const i=Math.max(2,Math.round(e*n)),o=Math.max(2,Math.round(i*t)),a=Math.min(16,Math.max(1,r)),l=Math.ceil(r/a);return{width:o,height:i,columns:a,rows:l,atlasWidth:a*o,atlasHeight:l*i}}function R(e){const t=e.replace("#",""),n=3===t.length?t.split("").map(e=>e+e).join(""):t,r=Number.parseInt(n,16);return Number.isFinite(r)&&6===n.length?[(r>>16&255)/255,(r>>8&255)/255,(255&r)/255]:[0,0,0]}function k(e){const t=new Uint32Array(256);let n=0;for(let r=0;r+3<e.length;r+=4)e[r+3]<8||(t[Math.round(.2126*e[r]+.7152*e[r+1]+.0722*e[r+2])]++,n++);if(!n)return[0,1];const r=e=>{let r=0;for(let i=0;i<256;i++)if(r+=t[i],r>=n*e)return i/255;return 1},i=r(.02),o=r(.98);return o-i<.08?[0,1]:[i,o]}var F=e=>"fluid"!==e.hover||e.fluid?e.hover:"none";function A(e,t,n=24,r=.12,i="ellipse"){return e.width>0&&e.height>0&&{x:(t.left-n-e.left)/e.width,y:(t.top-n-e.top)/e.height,width:(t.width+2*n)/e.width,height:(t.height+2*n)/e.height,feather:r,shape:i}}var L,S=/\.(mp4|webm|mov|m4v|ogv)(\?|#|$)/i,D=/swiftshader|llvmpipe|softpipe|software|basic render/i;function C(){if(L)return L;if("undefined"==typeof document||void 0===globalThis.WebGL2RenderingContext)return L="none";try{const e=document.createElement("canvas").getContext("webgl2");if(!e)return L="none";const t=e.getExtension("WEBGL_debug_renderer_info"),n=String(e.getParameter(t?t.UNMASKED_RENDERER_WEBGL:e.RENDERER)??"");return e.getExtension("WEBGL_lose_context")?.loseContext(),L=D.test(n)?"software":"gpu"}catch{return L="none"}}function _(e={}){const t=C();return"gpu"===t||"software"===t&&!!e.allowSoftware}function P(n,h={}){const m=e=>"undefined"!=typeof HTMLElement&&e instanceof HTMLElement,v=e=>{const t=e.clear;return m(t)?{element:{element:t},rest:{...e,clear:void 0}}:t&&"object"==typeof t&&m(t.element)?{element:t,rest:{...e,clear:void 0}}:{element:null,rest:e}};let p=v(h).element,g=w(v(h).rest);const x=h.onError,y=n.getContext("webgl2",{alpha:!0,antialias:!1,depth:!1,stencil:!1,premultipliedAlpha:!0,powerPreference:"high-performance"});if(!y)throw new Error("WebGL2 is not available for the glyph field.");const b=y;n.setAttribute("role","img"),n.setAttribute("aria-label",h.label??"ASCII artwork"),n.dataset.renderer="glyph-field";let L=!1;const D=b.getExtension("KHR_parallel_shader_compile");let C,_,P=null,U=null,B=null,I=null,X=[],H=[],q=null,G=!1,N=null,V=null;const z=[];let O=0,j=0,W=1,Y=0,$=M(g.cellSize,g.cellAspect,1,2),K=2,J=0,Q=0,Z=0,ee=null,te=!1,ne=null,re=0,ie=0,oe=0,ae=null,le=0,se=!0,ue=0,ce=[0,1],fe=-1/0,he=0,de=0,me=0,ve=!0,pe=!1,ge=!1,xe=!1,ye=!1,be=!0,Ee=null,we=null,Te=1/60,Me=0,Re=0,ke=[];const Fe=new Float32Array(16),Ae=()=>{if(!p)return;const{element:e,padding:t=32,feather:r=.16,shape:i="rect"}=p,o=A(n.getBoundingClientRect(),e.getBoundingClientRect(),t,r,i),a=g.clear;JSON.stringify(a)!==JSON.stringify(o)&&(g={...g,clear:o},ve=!0)},Le=e=>"lantern"===e||"loupe"===e||"reveal"===e,Se={target:null,at:null,strength:0,trail:[]},De=new Float32Array(36);let Ce=null,_e=null,Pe=!1;const Ue=()=>{if(!O||!j)return null;const e=O/j,t=Math.round(e>=1?128:128*e),n=Math.round(e>=1?128/e:128);return Ce&&Ce.width===t&&Ce.height===n||(Ce=new f(t,n),_e||(_e=We(b.LINEAR)),b.bindTexture(b.TEXTURE_2D,_e),b.texImage2D(b.TEXTURE_2D,0,b.RGBA8,t,n,0,b.RGBA,b.UNSIGNED_BYTE,Ce.pixels),Pe=!0),Ce};let Be=0;const Ie="function"==typeof matchMedia?matchMedia("(prefers-reduced-motion: reduce)"):null,Xe=()=>g.respectReducedMotion&&!!Ie?.matches;let He;const qe=new Promise(e=>{He=e});let Ge=!0;const Ne=e=>x?.(e instanceof Error?e:new Error(String(e))),Ve=(e,t)=>{const n=b.createShader(e);return z.push(n),b.shaderSource(n,t),b.compileShader(n),n},ze=e=>{V??(V=Ve(b.VERTEX_SHADER,"#version 300 es\nvoid main(){vec2 p=vec2((gl_VertexID<<1)&2,gl_VertexID&2);gl_Position=vec4(p*2.-1.,0.,1.);}"));const t=b.createProgram(),n=Ve(b.FRAGMENT_SHADER,e);return b.attachShader(t,V),b.attachShader(t,n),b.linkProgram(t),{program:t,locations:null,fragment:n}},Oe=(e,t=!1)=>{if(e.locations)return!0;const{program:n,fragment:r}=e;if(!t&&D&&!b.getProgramParameter(n,D.COMPLETION_STATUS_KHR))return!1;if(!b.getProgramParameter(n,b.LINK_STATUS)){if(b.isContextLost())return!1;throw new Error(b.getShaderInfoLog(r)||b.getProgramInfoLog(n)||"Glyph field program failed to link.")}const i={};for(let e=b.getProgramParameter(n,b.ACTIVE_UNIFORMS)-1;e>=0;e--){const t=b.getActiveUniform(n,e).name.replace(/\[0\]$/,"");i[t]=b.getUniformLocation(n,t)}return e.locations=i,!0},je=(e=!1)=>!!P&&!!U&&Oe(P,e)&&Oe(U,e),We=e=>{const t=b.createTexture();return b.bindTexture(b.TEXTURE_2D,t),b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MIN_FILTER,e),b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MAG_FILTER,e===b.LINEAR_MIPMAP_LINEAR?b.LINEAR:e),b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_S,b.CLAMP_TO_EDGE),b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_T,b.CLAMP_TO_EDGE),t},Ye=()=>{I&&(b.deleteTexture(I.ink),b.deleteTexture(I.under),b.deleteFramebuffer(I.buffer),I=null)},$e=()=>function(e,t,n,r,i,o,a){if("fill"!==e||!(i>0&&o>0))return[a.width,a.height];const l=t*r,s=l*n;return[i/Math.max(1,Math.floor(i/s+1e-6)),o/Math.max(1,Math.floor(o/l+1e-6))]}(g.cellFit,g.cellSize,g.cellAspect,W,O,j,$),Ke=()=>!!g.fluid&&"fluid"===F(g),Je=()=>{q?.release(),G=!1,X.forEach(e=>b.deleteTexture(e)),H.forEach(e=>b.deleteFramebuffer(e)),X=[],H=[]};function Qe(){B&&b.deleteProgram(B.program),B=ze((e=>`#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform sampler2D uPrevious;\nuniform vec2 uSize;\nuniform float uAspect, uDt, uDecay, uEnergyDecay, uRadius, uSplat;\nuniform vec2 uFrom, uTo, uForce;\nout vec4 outColor;\n${t(e)}\nfloat segment(vec2 p,vec2 a,vec2 b){vec2 pa=p-a,ba=b-a;float h=clamp(dot(pa,ba)/max(dot(ba,ba),1e-8),0.,1.);return length(pa-ba*h);}\nvoid main(){\n  vec2 uv=gl_FragCoord.xy/uSize;\n  vec4 here=decodeFluid(texture(uPrevious,uv));\n  vec4 state=decodeFluid(texture(uPrevious,uv-uDt*here.xy*vec2(1./uAspect,1.)));\n  state.xy*=exp(-uDt*uDecay);\n  state.z*=exp(-uDt*uEnergyDecay);\n  if(uSplat>.5){\n    vec2 scale=vec2(uAspect,1.);\n    float d=segment(uv*scale,uFrom*scale,uTo*scale);\n    float g=exp(-d*d/(uRadius*uRadius));\n    state.xy+=uForce*g;\n    state.z=min(1.,state.z+g*min(1.,length(uForce)*.5+.08));\n  }\n  float speed=length(state.xy);\n  if(speed>5.)state.xy*=5./speed;\n  outColor=encodeFluid(state);\n}`)(L)),q?.dispose(),q=L?null:function(e,t,n){const f={splat:t(r),curl:t(i),vorticity:t(o),divergence:t(a),fade:t(l),pressure:t(s),gradient:t(u),advect:t(c)},h=Object.values(f);let d=0,m=0,v=[],p=[],g=null,x=null;const y=t=>{const n=e.createTexture();e.bindTexture(e.TEXTURE_2D,n),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texImage2D(e.TEXTURE_2D,0,e.RGBA16F,d,m,0,e.RGBA,e.HALF_FLOAT,null);const r=e.createFramebuffer();return e.bindFramebuffer(e.FRAMEBUFFER,r),e.framebufferTexture2D(e.FRAMEBUFFER,e.COLOR_ATTACHMENT0,e.TEXTURE_2D,n,0),e.checkFramebufferStatus(e.FRAMEBUFFER)!==e.FRAMEBUFFER_COMPLETE?(e.deleteFramebuffer(r),e.deleteTexture(n),null):(e.viewport(0,0,d,m),e.clearColor(0,0,0,1),e.clear(e.COLOR_BUFFER_BIT),{texture:n,buffer:r})},b=t=>{t&&(e.deleteTexture(t.texture),e.deleteFramebuffer(t.buffer))},E=()=>{[...v,...p,g,x].forEach(b),v=[],p=[],g=x=null},w=(t,n)=>{const r=t.locations;return e.useProgram(t.program),e.bindFramebuffer(e.FRAMEBUFFER,n.buffer),e.uniform2f(r.uTexel,1/d,1/m),r},T=(t,n,r,i)=>{e.activeTexture(e.TEXTURE0+r),e.bindTexture(e.TEXTURE_2D,i),e.uniform1i(t[n],r)},M=()=>e.drawArrays(e.TRIANGLES,0,3),R=e=>{const t=e[0];e[0]=e[1],e[1]=t};return{resize(t,n){E(),d=t,m=n;const r=[y(e.LINEAR),y(e.LINEAR),y(e.NEAREST),y(e.NEAREST),y(e.NEAREST),y(e.NEAREST)];return e.bindFramebuffer(e.FRAMEBUFFER,null),r.some(e=>!e)?(r.forEach(b),!1):(v=[r[0],r[1]],p=[r[2],r[3]],g=r[4],x=r[5],!0)},ready:()=>h.every(n),step(t,n){if(!v.length||!g||!x)return;let r;e.viewport(0,0,d,m),t&&(r=w(f.splat,v[1]),T(r,"uVelocity",0,v[0].texture),e.uniform2f(r.uFrom,t.from[0],t.from[1]),e.uniform2f(r.uTo,t.to[0],t.to[1]),e.uniform2f(r.uForce,t.force[0],t.force[1]),e.uniform1f(r.uAspect,n.aspect),e.uniform1f(r.uRadius,n.radius),M(),R(v)),n.curl>0&&(r=w(f.curl,x),T(r,"uVelocity",0,v[0].texture),M(),r=w(f.vorticity,v[1]),T(r,"uVelocity",0,v[0].texture),T(r,"uCurl",1,x.texture),e.uniform1f(r.uStrength,n.curl),e.uniform1f(r.uDt,n.dt),M(),R(v)),r=w(f.divergence,g),T(r,"uVelocity",0,v[0].texture),M(),r=w(f.fade,p[1]),T(r,"uSource",0,p[0].texture),e.uniform1f(r.uAmount,.8),M(),R(p);for(let e=0;e<20;e++)r=w(f.pressure,p[1]),T(r,"uPressure",0,p[0].texture),T(r,"uDivergence",1,g.texture),M(),R(p);r=w(f.gradient,v[1]),T(r,"uPressure",0,p[0].texture),T(r,"uVelocity",1,v[0].texture),M(),R(v),r=w(f.advect,v[1]),T(r,"uVelocity",0,v[0].texture),e.uniform1f(r.uDt,n.dt),e.uniform1f(r.uDissipation,n.dissipation),M(),R(v),e.bindFramebuffer(e.FRAMEBUFFER,null)},get velocity(){return v[0]?.texture??null},get size(){return[d,m]},release:E,dispose(){E(),h.forEach(({program:t})=>e.deleteProgram(t))}}}(b,ze,e=>Oe(e))}const Ze=()=>{Je();const e=g.fluid;if(!(e&&Ke()&&O&&j))return;B||Qe();const t=e.resolution,n=O/j;if(J=n>=1?t:Math.max(8,Math.round(t*n)),Q=n>=1?Math.max(8,Math.round(t/n)):t,G=!!q&&q.resize(J,Q),G)return void(Z=0);const r=()=>{Je();for(let e=0;e<2;e++){const e=We(b.LINEAR);b.texImage2D(b.TEXTURE_2D,0,L?b.RGBA8:b.RGBA16F,J,Q,0,b.RGBA,L?b.UNSIGNED_BYTE:b.HALF_FLOAT,null);const t=b.createFramebuffer();b.bindFramebuffer(b.FRAMEBUFFER,t),b.framebufferTexture2D(b.FRAMEBUFFER,b.COLOR_ATTACHMENT0,b.TEXTURE_2D,e,0),X.push(e),H.push(t)}return b.checkFramebufferStatus(b.FRAMEBUFFER)===b.FRAMEBUFFER_COMPLETE};if(!r()){if(L)throw new Error("The glyph field could not allocate its fluid buffers.");L=!0,et(),Qe(),r()}for(const e of H)b.bindFramebuffer(b.FRAMEBUFFER,e),b.viewport(0,0,J,Q),b.clearColor(L?.5:0,L?.5:0,0,1),b.clear(b.COLOR_BUFFER_BIT);b.bindFramebuffer(b.FRAMEBUFFER,null),Z=0};function et(){P&&b.deleteProgram(P.program),U&&b.deleteProgram(U.program),Ye(),P=ze((e=>`#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform sampler2D uSource, uFluid;\nuniform vec2 uResolution, uCell;\nuniform float uCount, uBlend;\nconst float BAYER[16]=float[16](0.,8.,2.,10.,12.,4.,14.,6.,3.,11.,1.,9.,15.,7.,13.,5.);\nuniform vec4 uSourceMap;\nuniform int uScene;\nuniform vec3 uInk, uHighlight;\nuniform vec4 uBackground;\nuniform float uBrightness, uContrast, uGamma, uInvert, uVignette, uSourceColor;\nuniform float uRefraction, uGlow, uTime, uDrift, uFluidOn, uLod, uSaturation, uBackdrop, uShade, uHighlightAuto, uFluidMode;\nuniform vec2 uFluidTexel;\nuniform int uHoverMode;\nuniform vec3 uLight;\nuniform vec3 uTrail[12];\nuniform float uLightRadius, uLightGain, uClock, uFlicker, uTrailAmount;\nuniform sampler2D uTrailMap;\nuniform vec2 uLevels;\nuniform int uMark;\nuniform float uScale, uClearFeather, uClearShape;\nuniform vec4 uClear;\nuniform vec4 uPulse[4];\nlayout(location=0) out vec4 outInk;\nlayout(location=1) out vec4 outUnder;\n${t(e)}\nfloat hash(vec2 p){p=fract(p*vec2(123.34,456.21));p+=dot(p,p+45.32);return fract(p.x*p.y);}\nfloat noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.-2.*f);\n  return mix(mix(hash(i),hash(i+vec2(1,0)),u.x),mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),u.x),u.y);}\nfloat fbm(vec2 p){float v=0.,a=.5;for(int i=0;i<5;i++){v+=a*noise(p);p=p*2.03+vec2(1.7,9.2);a*=.5;}return v;}\nvec3 generated(vec2 uv,float aspect){\n  vec2 p=(uv-.5)*vec2(aspect,1.)*uScale;\n  if(uScene==1){\n    float t=uTime*.08;\n    vec2 q=vec2(fbm(p*1.6+t),fbm(p*1.6-t+3.1));\n    return vec3(smoothstep(.28,.86,fbm(p*1.8+q*1.6+vec2(t*.6,-t*.4))));\n  }\n  if(uScene==2){\n    float r=.36,d=length(p),a=uTime*.25;\n    vec3 l=normalize(vec3(cos(a)*.8,.55,sin(a)*.6+.6));\n    if(d<r){\n      vec3 n=normalize(vec3(p.x,-p.y,sqrt(r*r-d*d)));\n      float diffuse=max(dot(n,l),0.),rim=pow(1.-n.z,2.5);\n      float lon=atan(n.x,n.z)+uTime*.35,lat=asin(clamp(n.y,-1.,1.));\n      float bands=.5+.25*sin(lat*14.)+.25*sin(lon*6.);\n      return vec3(clamp(diffuse*.85+rim*.5+bands*.12,0.,1.));\n    }\n    return vec3(exp(-pow((d-r)*9.,2.))*.35);\n  }\n  if(uScene==4){\n    // Drift: a few broad lobes that wander slowly. Built for halftone, where large soft shapes read best.\n    float t=uTime*.045;\n    vec2 q=p*1.15;\n    vec2 w=vec2(fbm(q*.7+vec2(t,-t*.7)),fbm(q*.7+vec2(4.3-t*.8,t+1.7)));\n    float n=fbm(q+w*1.3+vec2(t*.4,t*.25));\n    return vec3(smoothstep(.36,.74,n));\n  }\n  if(uScene==5){\n    // Swell: three crossing swells, the second bent by the first, so crests roll diagonally instead of pooling.\n    float t=uTime;\n    float s=sin((dot(p,vec2(.94,.33))/.95-t/9.)*6.2831853);\n    float c=sin((dot(p,vec2(.6,-.8))/.58-t/13.)*6.2831853+s*.9);\n    float k=sin((dot(p,vec2(-.29,.96))/.36+t/17.)*6.2831853);\n    return vec3(smoothstep(.3,.9,.5+.5*(s*.5+c*.35+k*.15)));\n  }\n  // The kit's background scenes. Each starts a little way in, so a reduced-motion still is already composed.\n  float t=uTime+40.,px=uCell.y/uResolution.y*uScale;\n  if(uScene==6){\n    // Caustics: light focused by a moving water surface. Two layers of warped sine waves drift against each other; each draws\n    // smooth filaments along its zero line, about a character wide. Where they cross the light lifts a little, never to a blot.\n    float tt=t*.12,a=0.,b=0.;\n    for(int l=0;l<2;l++){\n      float f=float(l),sc=5.4+f*2.4;\n      vec2 q=(l==0?p:mat2(.8,-.6,.6,.8)*p)*sc;\n      q+=vec2(sin(q.y*.45+tt*(1.+f*.3)),cos(q.x*.4-tt*(.8+f*.4)))*1.3;\n      float v=sin(q.x+1.4*sin(q.y*.7+tt))+sin(q.y*1.1+1.2*sin(q.x*.8-tt*1.3))*.9;\n      float wv=max(fwidth(v),1e-4);\n      float line=(1.-smoothstep(.2,1.5,abs(v)/wv))*(l==0?.78:.62)+exp(-abs(v)/(wv*5.))*.16;\n      if(l==0)a=line;else b=line;\n    }\n    float pulse=.85+.15*sin(tt*3.+p.x*1.7-p.y*1.1);\n    float light=max(a,b)+.3*min(a,b);\n    return vec3(clamp(light*light*pulse,0.,.78));\n  }\n  if(uScene==7){\n    // Contour: a slow terrain read as survey lines about a character wide at any size; every fifth is an index line.\n    float tt=t*.02;\n    vec2 q=p*1.15+vec2(tt,-tt*.6);\n    float h=noise(q)*.62+noise(q*2.07+3.1)*.27+noise(q*4.3-tt+7.)*.11;\n    h+=.08*sin(tt*2.+p.x*.8);\n    float k=h*13.,w=max(fwidth(k),1e-4),d=abs(fract(k+.5)-.5)/w;\n    float major=mod(floor(k+.5),5.)<.5?1.:0.;\n    return vec3((1.-smoothstep(.35,1.25-major*.25,d))*mix(.55,1.,major));\n  }\n  if(uScene==8){\n    // Aurora: three curtains at different distances hang from the top. Far ones sit higher and dimmer; the nearest is tallest\n    // and brightest. Each folds slowly and is brightest along its lower hem, fading upward. The rays are set per character\n    // column, so the curtains read as vertical strokes at any stage size, from a small card to a phone.\n    float tt=t*.05,a=0.,cw=uCell.x/uResolution.x;\n    float col=floor(uv.x/cw+.5);\n    for(int n=0;n<3;n++){\n      float f=float(n),near=f/2.;\n      float x=p.x*(1.3-near*.4)+f*3.7;\n      float hem=-.28+near*.3+.16*sin(x*1.3+tt*(.9+f*.25)+f*2.)+.045*sin(x*3.4-tt*1.5+f);\n      float d=hem-p.y;\n      float body=d>0.?exp(-d/(.14+near*.26))*(.45+.55*exp(-d/.03)):exp(-d*d/.0002);\n      float fold=.5+.5*sin(x*2.1+tt*.9+f*1.7+.7*sin(x*.8-tt*.6));\n      float ray=mix(hash(vec2(col,f*7.1)),noise(vec2(col*.18+f*9.,tt*.7+f)),.55);\n      float layer=clamp(body*(.1+.9*fold*fold)*(.2+.8*ray)*(.4+near*.6)*4.2,0.,1.);\n      a=1.-(1.-a)*(1.-layer);\n    }\n    return vec3(smoothstep(.12,.9,a));\n  }\n  if(uScene==9){\n    // Ripple: still water. Drops land here and there, each a few rings that widen and fade; the pointer drops its own.\n    float tone=0.,g=.72;\n    vec2 q=p/g,id=floor(q);\n    for(int j=-1;j<=1;j++)for(int i=-1;i<=1;i++){\n      vec2 c=id+vec2(i,j),h=vec2(hash(c),hash(c+7.3));\n      float period=5.+h.x*5.,age=fract(t*.3/period*4.+h.y);\n      vec2 at=(c+.2+.6*h)*g;\n      float d=length(p-at),r=age*.62;\n      float rings=max(0.,cos((d-r)*34.))*exp(-pow((d-r)/.11,2.));\n      tone+=rings*pow(1.-age,1.8)*smoothstep(0.,.06,age)*(.7+.3*h.x);\n    }\n    return vec3(clamp(tone*1.25,0.,1.));\n  }\n  if(uScene==10){\n    // Halo: a slow breathing corona that frames the content, its rays turning. The ring fits the stage: wide on a desktop\n    // hero, tall on a phone, so the whole halo stays on screen; the middle stays empty for a headline.\n    vec2 r=vec2(min(.46,aspect*.4),min(.34,.36/max(aspect,.01)*.5+.2));\n    vec2 e=p/r;\n    float d=length(e),a=atan(e.y,e.x),tt=t*.07,k=min(r.x,r.y);\n    float breathe=1.+.04*sin(tt*3.1);\n    float rays=.5+.5*noise(vec2(a*3.2+tt,tt*.5))*(.6+.4*noise(vec2(a*7.-tt*1.2,3.+tt*.4)));\n    float s=(d-breathe)*k;\n    float rim=exp(-pow(s/.03,2.));\n    float corona=exp(-max(0.,s)/(.1+.08*rays))*smoothstep(-.04,.015,s)*rays*smoothstep(.36,.12,s);\n    return vec3(clamp(rim*(.55+.45*rays)+corona*.85,0.,1.));\n  }\n  if(uScene==11){\n    // Interference: two ring grids from slowly orbiting centres. Where they cross, broad moire bands open and close.\n    float tt=t*.05;\n    vec2 a=vec2(-.3+.12*sin(tt),.07*cos(tt*1.3)),b=vec2(.3+.1*cos(tt*.8),-.06*sin(tt*1.1));\n    float f=6.2831853/max(px*4.6,.004);\n    float m=cos(length(p-a)*f)+cos(length(p-b)*f);\n    return vec3(smoothstep(.7,2.,m));\n  }\n  if(uScene==12){\n    // Mesh: four soft lights on slow Lissajous paths, a gradient mesh written in characters.\n    float tt=t*.07,m=0.;\n    for(int n=0;n<4;n++){\n      float f=float(n)*1.7;\n      vec2 c=vec2(.66*sin(tt*(.7+f*.13)+f),.34*cos(tt*(.9-f*.07)+f*1.3));\n      float s=.3+.07*sin(tt+f);\n      m+=exp(-dot(p-c,p-c)/(s*s))*(.8-float(n)*.1);\n    }\n    return vec3(smoothstep(.06,1.1,m));\n  }\n  if(uScene==13){\n    // Cascade: streaks fall in three depths. Far ones are frequent, faint, short and slow; near ones rare, long, bright and\n    // quick. Each has a bright head and a tail that fades behind it, and a column can carry two streaks at once.\n    float tone=0.,cw=uCell.x/uResolution.x,ch=uCell.y/uResolution.y;\n    float col=floor(uv.x/cw+.5);\n    for(int n=0;n<3;n++){\n      float f=float(n);\n      for(int k=0;k<2;k++){\n        float seed=f*13.1+float(k)*41.7,h=hash(vec2(col,seed));\n        if(h<1.-(.5-f*.15))continue;\n        float speed=(.045+f*.07)*(.75+.5*hash(vec2(col,seed+2.)));\n        float tail=.12+f*.16,y=fract(t*speed+hash(vec2(col,seed+5.)))*(1.+tail*2.)-tail;\n        float d=y-uv.y;\n        if(d<0.||d>tail)continue;\n        float head=d<ch*1.2?1.:0.;\n        tone=max(tone,max(head*(.55+f*.22),pow(1.-d/tail,1.7)*(.28+f*.3)));\n      }\n    }\n    return vec3(clamp(tone,0.,1.));\n  }\n  if(uScene==14){\n    // Constellation: points wander in their own cells; neighbours close enough are linked by fine lines. Each point is a\n    // bright core in a soft halo, so it reads at card size as well as full width.\n    float g=.23,tt=t*.18;\n    vec2 q=p/g,id=floor(q);\n    vec2 pts[9];\n    for(int j=-1;j<=1;j++)for(int i=-1;i<=1;i++){\n      vec2 c=id+vec2(i,j);\n      float h=hash(c),k=hash(c+3.7);\n      pts[(j+1)*3+i+1]=c+.5+.36*vec2(sin(tt*(.6+h)+h*6.28),cos(tt*(.5+k)+k*6.28));\n    }\n    float line=0.,star=0.,lw=max(px/g,.02);\n    for(int n=0;n<9;n++){\n      vec2 e=q-pts[n];\n      float d2=dot(e,e),tw=.8+.2*sin(tt*3.+float(n)*1.7);\n      star=max(star,max(exp(-d2/(lw*lw*1.6)),.38*exp(-d2/(lw*lw*7.)))*tw);\n      for(int m=n+1;m<9;m++){\n        vec2 a=pts[n],ba=pts[m]-a;\n        float len=length(ba);\n        if(len>1.35)continue;\n        float hh=clamp(dot(q-a,ba)/dot(ba,ba),0.,1.);\n        float d=length(q-a-ba*hh);\n        line=max(line,(1.-smoothstep(lw*.3,lw*.75,d))*smoothstep(1.35,.6,len)*.72);\n      }\n    }\n    return vec3(clamp(max(line,star),0.,1.));\n  }\n  return vec3(0.);\n}\nvoid main(){\n  vec2 cell=floor(gl_FragCoord.xy);\n  vec2 uv=(cell+.5)*uCell/uResolution;\n  float aspect=uResolution.x/uResolution.y;\n  vec4 fluid=vec4(0.);\n  // lift: signed tone change. The solver's flow brightens one side of each eddy and opens the other into gaps.\n  float lift=0.,wake=0.,bend=1.,swirl=0.,speed=0.;\n  if(uFluidOn>.5){\n    vec4 raw=texture(uFluid,vec2(uv.x,1.-uv.y));\n    if(uFluidMode>.5){\n      vec2 v=raw.xy*uFluidTexel*vec2(aspect,1.);\n      fluid=vec4(v,0.,1.);\n      swirl=clamp(dot(v,vec2(.4,.65))*uGlow*.32,-.65,.65);\n      speed=clamp(length(v)*uGlow*.055,0.,.38);\n      bend=.4;\n    } else {\n      fluid=decodeFluid(raw);\n      wake=clamp(fluid.z*uGlow,0.,1.);\n      lift=wake*.55;\n    }\n  }\n  vec2 drift=uDrift*.006*vec2(sin(uv.y*5.3+uTime*.6),cos(uv.x*4.1-uTime*.5));\n  vec2 sampleAt=uv-vec2(fluid.x/aspect,-fluid.y)*uRefraction*bend+drift;\n  float spot=0.;\n  if(uHoverMode==4||uHoverMode==5){\n    vec2 d=(uv-uLight.xy)*vec2(aspect,1.);\n    float q2=dot(d,d)/(uLightRadius*uLightRadius*2.2);\n    // Loupe: flat-topped zoom with a soft rim. Reveal: a soft spot in the source's colours.\n    if(uHoverMode==4) sampleAt-=(uv-uLight.xy)*exp(-q2*q2)*.45*uLight.z*min(1.,uLightGain*1.6);\n    else spot=exp(-q2*1.6)*uLight.z*min(1.,uLightGain*1.6);\n  }\n  vec3 rgb,glow=vec3(0.);\n  if(uScene==0){\n    vec2 s=sampleAt*uSourceMap.xy+uSourceMap.zw;\n    bool inside=!(s.x<0.||s.y<0.||s.x>1.||s.y>1.);\n    rgb=inside?textureLod(uSource,s,uLod).rgb:vec3(0.);\n    if(uBackdrop>0.){\n      vec2 b=(uv-vec2(fluid.x/aspect,-fluid.y)*uRefraction*bend*.5)*uSourceMap.xy+uSourceMap.zw;\n      glow=(b.x<0.||b.y<0.||b.x>1.||b.y>1.)?vec3(0.):textureLod(uSource,b,uLod+3.).rgb*uBackdrop;\n    }\n  } else rgb=generated(sampleAt,aspect);\n  float tone=dot(rgb,vec3(.2126,.7152,.0722));\n  tone=clamp((tone-uLevels.x)/max(uLevels.y-uLevels.x,.01),0.,1.);\n  tone=clamp((tone-.5)*uContrast+.5+uBrightness,0.,1.);\n  tone=pow(tone,1./uGamma);\n  if(uInvert>.5)tone=1.-tone;\n  float flick=0.,trailFold=0.;\n  // Reveal: under the spot the characters take the source's own colour and a little more ink.\n  if(spot>0.)lift=spot*.22;\n  if(uHoverMode==2){\n    // Lantern: a soft light and its fading tail lift the characters they pass. Nothing moves the image.\n    vec2 ap=vec2(aspect,1.),d=(uv-uLight.xy)*ap;\n    float r2=uLightRadius*uLightRadius,glowL=uLight.z*exp(-dot(d,d)/r2);\n    for(int i=0;i<12;i++){vec2 e=(uv-uTrail[i].xy)*ap;glowL+=uTrail[i].z*exp(-dot(e,e)/(r2*.55));}\n    glowL=min(glowL,1.);\n    float grain=fract(sin(dot(cell,vec2(12.9898,78.233)))*43758.5453);\n    lift=glowL*uLightGain*(.7+.6*grain);\n    wake=glowL*.4;\n    // A few letters at the light's rim step up the ramp and back, as if being retyped.\n    flick=uFlicker*step(.9,fract(grain*13.7+floor(uClock*7.+grain*5.)*.37))*glowL*(1.-glowL)*4.;\n  }\n  if(uHoverMode==3){\n    // Trail: the studio's ink field, as a 16-bit density. Sparse marks fill in, dense marks open up.\n    vec4 ink=texture(uTrailMap,uv);\n    float density=(ink.r*65280.+ink.g*255.)/65535.*uTrailAmount;\n    float t=clamp(density/.38,0.,1.);\n    trailFold=t*t*(3.-2.*t);\n  }\n  if(uFluidMode>.5&&uHoverMode==1){\n    // Dark ground: any motion lights the characters. Lit ground: the flow lights one side of each eddy and opens the other.\n    // A little cell-to-cell grain keeps the lit area a shimmer of letters rather than a solid block.\n    float grain=fract(sin(dot(cell,vec2(12.9898,78.233)))*43758.5453);\n    lift=mix(abs(swirl)*.5+speed,swirl+speed*.35,smoothstep(.12,.55,tone))*(.65+.7*grain);\n    wake=clamp(lift*1.6,0.,1.);\n  }\n  tone=clamp(tone+lift,0.,1.);\n  tone+=(1.-2.*tone)*trailFold;\n  // Pulses: rings sent by the interface (field.pulse()), e.g. on a save or a notification.\n  for(int i=0;i<4;i++){\n    if(uPulse[i].w<=0.)continue;\n    float dist=length((uv-uPulse[i].xy)*vec2(aspect,1.)),front=uPulse[i].z*.95;\n    float ring=exp(-pow((dist-front)/.1,2.))*uPulse[i].w*exp(-uPulse[i].z*.85);\n    tone=clamp(tone+ring*.85,0.,1.);\n  }\n  tone*=1.-uVignette*smoothstep(.35,1.05,length((uv-.5)*vec2(min(aspect,1.8),1.)*2.));\n  if(uClear.z>0.){\n    // Clear zone: the field fades out around content so text above it stays readable.\n    vec2 half_=uClear.zw*.5*vec2(aspect,1.),q=(uv-uClear.xy-uClear.zw*.5)*vec2(aspect,1.);\n    float dz;\n    if(uClearShape>.5){vec2 e=abs(q)-half_;dz=length(max(e,0.))+min(max(e.x,e.y),0.);}\n    else dz=(length(q/max(half_,vec2(1e-4)))-1.)*min(half_.x,half_.y);\n    tone*=smoothstep(0.,uClearFeather,dz);\n  }\n  // Blend: a shade between two characters takes the upper one in the share of cells a 4x4 Bayer pattern gives it.\n  float level=tone*(uCount-1.),upper=fract(level)>=.5?1.:0.;\n  if(uBlend>.5&&tone>.02&&tone<.98){\n    ivec2 q=ivec2(mod(gl_FragCoord.xy,4.));\n    upper=fract(level)>(BAYER[q.y*4+q.x]+.5)/16.?1.:0.;\n  }\n  float index=min(uCount-1.,floor(level)+upper+(flick>.5&&tone>.02?1.:0.));\n  vec3 hue=rgb/max(max(rgb.r,rgb.g),max(rgb.b,.03));\n  hue=mix(vec3(dot(hue,vec3(.2126,.7152,.0722))),hue,uSaturation);\n  vec3 ink=mix(uInk*mix(1.,.3+.7*tone,uShade),clamp(hue*(.38+.62*tone),0.,1.),uSourceColor);\n  vec3 lifted=uHighlightAuto>.5?ink/max(max(ink.r,ink.g),max(ink.b,.06)):uHighlight;\n  ink=mix(ink,lifted,wake*.7);\n  if(spot>0.)ink=mix(ink,clamp(rgb/max(max(rgb.r,rgb.g),max(rgb.b,.08))*(.45+.55*tone),0.,1.),spot);\n  float underAlpha=max(uBackground.a,min(1.,max(glow.r,max(glow.g,glow.b))));\n  vec3 under=min(uBackground.rgb*uBackground.a+glow,vec3(underAlpha));\n  // Glyphs keep their atlas index, exact in 8 bits; the other marks keep the tone, and empty where the charset is blank.\n  outInk=vec4(ink,uMark==0?index/255.:uMark==1?(tone>.003?tone:0.):index>0.?max(tone,1./255.):0.);\n  outUnder=vec4(under,underAlpha);\n}`)(L)),U=ze("#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform sampler2D uAtlas, uCells, uUnder;\nuniform vec2 uResolution, uCell, uPitch;\nuniform float uColumns, uDotScale, uSourceColor;\nuniform int uMark;\nout vec4 outColor;\nconst float BAYER[16]=float[16](0.,8.,2.,10.,12.,4.,14.,6.,3.,11.,1.,9.,15.,7.,13.,5.);\n// The Studio's print defaults: screen angle -35deg, roughness .35, seed 7, registration .2 and its coral second ink.\nconst vec2 DIR=vec2(.81915,-.57358);\nconst float ROUGH=.35,SEED=7.;\nconst vec3 SECOND=vec3(.925,.404,.322);\nfloat hash(vec2 p){p=fract(p*vec2(123.34,456.21));p+=dot(p,p+45.32);return fract(p.x*p.y);}\n// Coverage of a signed distance given in device pixels.\nfloat cover(float d){return clamp(.5-d,0.,1.);}\nfloat box(vec2 p,vec2 lo,vec2 hi){vec2 a=clamp(p-lo,0.,1.)*clamp(hi-p,0.,1.);return a.x*a.y;}\nfloat disc(vec2 p,vec2 c,float r){return r>.05?cover(length(p-c)-r):0.;}\nfloat ellipse(vec2 p,vec2 c,vec2 r,float a){vec2 d=p-c;d=vec2(cos(a)*d.x+sin(a)*d.y,-sin(a)*d.x+cos(a)*d.y);float k=length(d/r);return cover((k-1.)*min(r.x,r.y));}\n// World-anchored parallel cuts across direction d: period and width in cell heights, so lines run on from cell to cell.\nfloat cuts(vec2 w,vec2 d,float period,float width,float px){\n  if(width<=0.)return 0.;\n  float proj=dot(vec2(-d.y,d.x),w);\n  return cover((abs(fract(proj/period+.5)-.5)*period-width*.5)*px);\n}\n// Lays an ink over what is already down, multiplying where they overlap, as transparent inks do on paper.\nvoid lay(inout vec3 rgb,inout float a,vec3 c,float k){\n  float next=a+k*(1.-a);\n  rgb=next>0.?(rgb*a*(1.-k)+mix(c,rgb*c,a)*k)/next:c;\n  a=next;\n}\nvoid main(){\n  vec2 frag=vec2(gl_FragCoord.x,uResolution.y-gl_FragCoord.y);\n  // The pitch is the atlas cell, or a fractional one under cellFit 'fill', where each glyph sits centred in its stretched cell.\n  vec2 cell=floor(frag/uPitch);\n  vec4 ink=texelFetch(uCells,ivec2(cell),0),under=texelFetch(uUnder,ivec2(cell),0);\n  vec2 local=frag-cell*uPitch;\n  float coverage;\n  vec3 rgb=ink.rgb;\n  if(uMark==0){\n    float index=floor(ink.a*255.+.5);\n    ivec2 tile=ivec2(int(mod(index,uColumns)),int(floor(index/uColumns)));\n    vec2 texel=floor(local-floor((uPitch-uCell)*.5));\n    coverage=all(greaterThanEqual(texel,vec2(0.)))&&all(lessThan(texel,uCell))?texelFetch(uAtlas,tile*ivec2(uCell)+ivec2(texel),0).a:0.;\n  } else if(uMark==1){\n    // Halftone: dot area follows tone, so midtones read true; edges are antialiased to one device pixel.\n    float r=sqrt(ink.a)*min(uPitch.x,uPitch.y)*.5*uDotScale;\n    coverage=ink.a>.003?clamp(r-length(local-uPitch*.5)+.5,0.,1.):0.;\n  } else if(ink.a<=0.){\n    coverage=0.;\n  } else {\n    float tone=ink.a,side=min(uPitch.x,uPitch.y);\n    vec2 q=local/uPitch,c=uPitch*.5,p=local+.5;\n    // Tiles fade with the tone in one ink, as the Studio's do; in source colour the colour already carries it.\n    float fade=uSourceColor>.5?1.:tone,gap=max(.5,uPitch.x*.06),grain=hash(cell+SEED);\n    vec2 w=(cell+q)*uPitch/uPitch.y;\n    if(uMark==2)coverage=fade;\n    else if(uMark==3)coverage=box(p,vec2(0.),uPitch-gap)*fade;\n    else if(uMark==4){\n      // Lego: a gapped brick, lit from above, with a raised stud ringed by its shadow.\n      coverage=box(p,vec2(0.),uPitch-gap)*fade;\n      rgb*=1.06-.14*q.y;\n      float r=side*.28,d=length(local-c)-r,lit=clamp(dot(c-local,vec2(.6,.8))/r,-1.,1.);\n      rgb=mix(rgb,mix(rgb,vec3(1.),.2+.12*lit),cover(d));\n      rgb=mix(rgb,rgb*.72,cover(abs(d)-max(.5,side*.04)));\n    } else if(uMark==5){\n      // Voxel: an isometric cube; top, left and right faces at full, .72 and .42 strength.\n      float h=.5*abs(q.x-.5);\n      coverage=cover(-min(q.y-h,1.-h-q.y)*uPitch.y)*cover(-min(q.x,1.-q.x)*uPitch.x);\n      coverage*=mix(q.x<.5?.72:.42,1.,cover((q.y-(.5-h))*uPitch.y))*fade;\n    } else if(uMark==6){\n      // Disco: a gapped mirror tile, its upper facet catching light and its lower in shade.\n      coverage=box(p,vec2(0.),uPitch-gap)*fade;\n      rgb=q.y<.35?mix(rgb,vec3(1.),.1+grain*.25):q.y>.65?rgb*.75:rgb;\n    } else if(uMark==7){\n      // Dither: an ordered 4x4 Bayer screen at about five dots a cell, lit where the cell's tone passes the threshold.\n      ivec2 b=ivec2(mod(floor(frag/max(1.,floor(side/5.))),4.));\n      coverage=tone>(BAYER[b.y*4+b.x]+.5)/16.?1.:0.;\n    } else if(uMark==8){\n      // Hex: a flat-topped hexagon filling the cell.\n      vec2 h=abs((local-c)/(uPitch*.49));\n      coverage=cover(max(h.y-.866,h.x*.866+h.y*.5-.866)*side*.49)*fade;\n    } else if(uMark==9){\n      // LED: a round lamp with a soft halo and a specular glint, separated by an unlit matrix.\n      float r=side*.39,d=length(local-c);\n      coverage=max(cover(d-r),.3*exp(-pow(max(0.,d-r)/(side*.12),2.)))*fade;\n      rgb=mix(rgb,vec3(1.),.35*disc(local,uPitch*vec2(.43,.4),side*.11));\n    } else if(uMark==10){\n      // CMYK: the cell's hue separated into offset cyan, magenta and yellow dots, each sized by its share of the tone. The\n      // key screen carries the neutral share in the ink's own lightness, since a light ink on a dark page has no black.\n      float top=max(rgb.r,max(rgb.g,rgb.b)),low=min(rgb.r,min(rgb.g,rgb.b));\n      vec3 cmy=(top-rgb)/max(top,.001);\n      float a=0.;vec3 col=vec3(1.);\n      lay(col,a,vec3(top),disc(local,c,side*.48*sqrt(tone*low/max(top,.001))));\n      lay(col,a,vec3(0.,1.,1.),disc(local,uPitch*vec2(.36,.36),side*.48*sqrt(tone*cmy.x)));\n      lay(col,a,vec3(1.,0.,1.),disc(local,uPitch*vec2(.64,.36),side*.48*sqrt(tone*cmy.y)));\n      lay(col,a,vec3(1.,1.,0.),disc(local,uPitch*vec2(.5,.66),side*.48*sqrt(tone*cmy.z)));\n      rgb=col;coverage=a;\n    } else if(uMark==11||uMark==16){\n      // Stipple and pointillism: four jittered marks a cell, their size following the tone.\n      coverage=0.;vec3 col=rgb;\n      for(int m=0;m<4;m++){\n        vec2 o=vec2(float(m%2),float(m/2));\n        float j=hash(cell*2.+o+SEED),jy=hash(cell+o*11.+SEED+1.);\n        vec2 at=((o+.5)/2.+(vec2(j,jy)-.5)*ROUGH*.28)*uPitch;\n        float r=min(min(min(at.x,uPitch.x-at.x),min(at.y,uPitch.y-at.y)),side*min(.245,.21*sqrt(tone)*(1.-ROUGH*j*.35)));\n        float k=uMark==11?disc(local,at,r):ellipse(local,at,vec2(r,r*.64),j*3.14159);\n        if(uMark==16&&k>coverage)col=uSourceColor>.5?clamp(rgb+(j-.5)*ROUGH*.25*vec3(1.,-.4,-1.),0.,1.):rgb*(1.+(j-.5)*ROUGH*.5);\n        coverage=max(coverage,k);\n      }\n      rgb=col;\n    } else if(uMark==12||uMark==13){\n      // Engraving and crosshatch: parallel cuts whose weight follows the tone; crossings join only in the darker tones.\n      float cv=tone*(1.-ROUGH*grain*.3),px=uPitch.y;\n      coverage=cuts(w,DIR,.5,min(.47,.36*cv),px);\n      if(uMark==13){\n        coverage=max(coverage,cuts(w,vec2(-DIR.y,DIR.x),.5,min(.47,.36*max(0.,cv*1.5-.3)),px)*step(.2,cv));\n        coverage=max(coverage,cuts(w,normalize(DIR+vec2(-DIR.y,DIR.x)),.5,min(.47,.36*max(0.,cv*2.-1.2)),px)*step(.6,cv));\n      }\n    } else if(uMark==14){\n      // Woodblock: broad carved bands in five stepped weights, their edges wavering along the grain.\n      float cv=ceil(tone*(1.-ROUGH*grain*.3)*5.)/5.,width=min(.94,.72*cv);\n      float proj=dot(vec2(-DIR.y,DIR.x),w),line=floor(proj+.5),along=dot(DIR,w);\n      float cut=sin(along*5.3+line*1.9+SEED)*.5+sin(along*13.1+line)*.25;\n      coverage=cover((abs(proj-line)-width*.5*(1.+ROUGH*cut*.5))*uPitch.y);\n    } else if(uMark==15){\n      // Risograph: two offset screens, the main ink and the coral second ink, misregistered along the screen angle.\n      float split=uSourceColor>.5?clamp(.5+(rgb.r-rgb.b)*.5,0.,1.):.5,r=side*min(.48,.44*sqrt(tone));\n      float a=0.;vec3 col=rgb;\n      lay(col,a,rgb,disc(local,c,r*sqrt(.35+(1.-split)*.65)));\n      lay(col,a,SECOND,disc(local,c+DIR*.2*.38*side,r*sqrt(.3+split*.7)*(1.-ROUGH*hash(cell+SEED+13.)*.3)));\n      rgb=col;coverage=a;\n    } else coverage=0.;\n  }\n  outColor=vec4(rgb*coverage+under.rgb*(1.-coverage),coverage+under.a*(1.-coverage));\n}"),D||je(!0)}const tt=()=>`${g.fontWeight} ${Math.max(1,$.height*g.glyphScale)}px ${g.font}`,nt=()=>{const e=E(g.charset);K=e.length,$=M(g.cellSize,g.cellAspect,W,K),Y=W;const t=document.createElement("canvas");t.width=$.atlasWidth,t.height=$.atlasHeight;const n=t.getContext("2d");n.fillStyle="#fff",n.textAlign="center",n.textBaseline="alphabetic",n.font=tt();const r=n.measureText("M"),i=r.actualBoundingBoxAscent||$.height*g.glyphScale*.7,o=r.actualBoundingBoxDescent||0,a=($.height+i-o)/2;e.forEach((e,t)=>{const r=t%$.columns*$.width+$.width/2,i=Math.floor(t/$.columns)*$.height+a,o=n.measureText(e).width;n.save(),n.beginPath(),n.rect(r-$.width/2,i-a,$.width,$.height),n.clip(),n.translate(r,i),o>.96*$.width&&n.scale(.96*$.width/o,1),n.fillText(e,0,0),n.restore()}),b.bindTexture(b.TEXTURE_2D,C),b.pixelStorei(b.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!1),b.texImage2D(b.TEXTURE_2D,0,b.RGBA8,b.RGBA,b.UNSIGNED_BYTE,t),t.width=t.height=1,ve=!0},rt="undefined"==typeof document?void 0:document.fonts,it=()=>{if(!rt?.load)return;const e=tt();rt.load(e,E(g.charset).join("")).then(()=>{pe||ge||tt()!==e||(nt(),Mt())},()=>{})},ot=e=>e.trim().replace(/^["']|["']$/g,"").toLowerCase(),at=e=>{const t=e.fontfaces??[],n=g.font.split(",").map(ot);t.some(e=>n.includes(ot(e.family)))&&it()},lt=()=>{if(ce=[0,1],ee&&"none"!==g.levels)try{const e=document.createElement("canvas");e.width=e.height=64;const t=e.getContext("2d",{willReadFrequently:!0});ee===ae&&(t.imageSmoothingQuality="medium"),t.drawImage(ee,0,0,64,64),ce=k(t.getImageData(0,0,64,64).data)}catch{ce=[0,1]}},st=()=>{if(!ee)return;const e=performance.now();ee instanceof HTMLVideoElement&&!(e-fe>1500)||(lt(),fe=e),b.bindTexture(b.TEXTURE_2D,_),b.pixelStorei(b.UNPACK_FLIP_Y_WEBGL,!1),b.pixelStorei(b.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!1);try{b.texImage2D(b.TEXTURE_2D,0,b.RGBA8,b.RGBA,b.UNSIGNED_BYTE,ee),b.generateMipmap(b.TEXTURE_2D)}catch(e){Ne(e)}},ut=()=>{L=!b.getExtension("EXT_color_buffer_float")&&!b.getExtension("EXT_color_buffer_half_float"),et(),N=b.createVertexArray(),C=We(b.NEAREST),_=We(b.LINEAR_MIPMAP_LINEAR),b.bindTexture(b.TEXTURE_2D,_),b.texImage2D(b.TEXTURE_2D,0,b.RGBA8,1,1,0,b.RGBA,b.UNSIGNED_BYTE,new Uint8Array([0,0,0,255])),b.generateMipmap(b.TEXTURE_2D),O=j=0,Y=0,ct(),it(),ee&&st()};function ct(){const e=n.clientWidth||n.clientHeight?{width:n.clientWidth,height:n.clientHeight}:n.getBoundingClientRect(),t=Math.min(globalThis.devicePixelRatio||1,g.maxPixelRatio),r=Math.max(1,Math.round(e.width*t)),i=Math.max(1,Math.round(e.height*t));if(r===O&&i===j&&t===W)return!1;const o=!O||Math.abs(r/i-O/j)>.01;return W=t,O=r,j=i,n.width=O,n.height=j,Y!==W&&nt(),(o||Ke()&&!X.length&&!G)&&Ze(),ve=!0,!0}let ft=null,ht=[0,0,0],dt=[1,1,1],mt=[0,0,0,0],vt=T(1,1,1,1,"cover"),pt=null,gt=0,xt=0,yt=0,bt=0;const Et=()=>{ft!==g&&(ft=g,ht=R(g.ink),dt=R("auto"===g.highlight?"#ffffff":g.highlight),mt="transparent"===g.background?[0,0,0,0]:[...R(g.background),1]),pt===g&&gt===O&&xt===j&&yt===re&&bt===ie||(pt=g,gt=O,xt=j,yt=re,bt=ie,vt=T(O,j,re||1,ie||1,g.fit,g.focus));const t=g.fluid,n=ee&&le?$.height/j*le*vt.scale[1]:1,r=(()=>{const[e,t]=$e(),n=Math.ceil(O/e-1e-4),r=Math.ceil(j/t-1e-4);if(I&&I.columns===n&&I.rows===r)return I;Ye();const i=()=>{const e=We(b.NEAREST);return b.texStorage2D(b.TEXTURE_2D,1,L?b.RGBA8:b.RGBA16F,n,r),e},o=i(),a=i(),l=b.createFramebuffer();return b.bindFramebuffer(b.FRAMEBUFFER,l),b.framebufferTexture2D(b.FRAMEBUFFER,b.COLOR_ATTACHMENT0,b.TEXTURE_2D,o,0),b.framebufferTexture2D(b.FRAMEBUFFER,b.COLOR_ATTACHMENT1,b.TEXTURE_2D,a,0),b.drawBuffers([b.COLOR_ATTACHMENT0,b.COLOR_ATTACHMENT1]),I={ink:o,under:a,buffer:l,columns:n,rows:r}})(),i=P.locations,o=U.locations,a=F(g),l=!Xe();b.bindFramebuffer(b.FRAMEBUFFER,r.buffer),b.viewport(0,0,r.columns,r.rows),b.useProgram(P.program),b.activeTexture(b.TEXTURE0),b.bindTexture(b.TEXTURE_2D,_),b.uniform1i(i.uSource,0),b.activeTexture(b.TEXTURE2),b.bindTexture(b.TEXTURE_2D,(G?q?.velocity:X[Z])??_),b.uniform1i(i.uFluid,2),b.activeTexture(b.TEXTURE3),b.bindTexture(b.TEXTURE_2D,_e??_),b.uniform1i(i.uTrailMap,3),b.uniform1f(i.uFluidMode,G?1:0),b.uniform1i(i.uHoverMode,"fluid"===a?1:"lantern"===a?2:"trail"===a&&Pe?3:"loupe"===a?4:"reveal"===a?5:0),b.uniform1f(i.uTrailAmount,g.trail.strength),b.uniform3f(i.uLight,Se.at?.[0]??-1,Se.at?.[1]??-1,Le(a)?Se.strength:0),b.uniform3fv(i.uTrail,De),b.uniform1f(i.uLightRadius,g.lantern.radius),b.uniform1f(i.uLightGain,g.lantern.strength),b.uniform1f(i.uClock,performance.now()/1e3),b.uniform1f(i.uFlicker,l?1:0),b.uniform2f(i.uFluidTexel,1/Math.max(1,J),1/Math.max(1,Q)),b.uniform2f(i.uResolution,O,j);const[s,u]=$e();var c;b.uniform2f(i.uCell,s,u),b.uniform1f(i.uCount,K),b.uniform1f(i.uBlend,"on"===g.blend||K<=9&&("coarse"===g.blend||"auto"===g.blend&&te)?1:0),b.uniform4f(i.uSourceMap,vt.scale[0],vt.scale[1],vt.offset[0],vt.offset[1]),b.uniform1i(i.uScene,ee?0:(c=g.scene,e[c]??3)),b.uniform1i(i.uMark,d.indexOf(g.mark)),b.uniform1f(i.uScale,g.scale);const f=g.clear;b.uniform4f(i.uClear,f?f.x:0,f?f.y:0,f?f.width:0,f?f.height:0),b.uniform1f(i.uClearFeather,f?f.feather:.1),b.uniform1f(i.uClearShape,f&&"rect"===f.shape?1:0);const h=performance.now();Fe.fill(0);for(let e=0;e<ke.length;e++){const t=ke[e],n=4*e;Fe[n]=t.x,Fe[n+1]=t.y,Fe[n+2]=(h-t.born)/1e3,Fe[n+3]=t.strength}b.uniform4fv(i.uPulse,Fe),b.uniform3fv(i.uInk,ht),b.uniform3fv(i.uHighlight,dt),b.uniform1f(i.uHighlightAuto,"auto"===g.highlight?1:0),b.uniform4fv(i.uBackground,mt),b.uniform1f(i.uBrightness,g.brightness),b.uniform1f(i.uContrast,g.contrast),b.uniform1f(i.uGamma,g.gamma),b.uniform1f(i.uInvert,g.invert?1:0),b.uniform1f(i.uVignette,g.vignette),b.uniform1f(i.uSourceColor,"source"===g.color?1:0),b.uniform1f(i.uRefraction,t?t.refraction*(l?1:.25):0),b.uniform1f(i.uGlow,t?t.glow:0),b.uniform1f(i.uTime,me),b.uniform1f(i.uDrift,l?g.drift:0),b.uniform1f(i.uFluidOn,t&&"fluid"===a&&(X.length||G)?1:0),b.uniform1f(i.uLod,Math.max(0,Math.log2(Math.max(1,n))-.5)),b.uniform1f(i.uSaturation,g.saturation),b.uniform1f(i.uShade,g.shade),b.uniform1f(i.uBackdrop,ee?g.backdrop:0),b.uniform2f(i.uLevels,ee&&"auto"===g.levels?ce[0]:0,ee&&"auto"===g.levels?ce[1]:1),b.bindVertexArray(N),b.drawArrays(b.TRIANGLES,0,3),b.bindFramebuffer(b.FRAMEBUFFER,null),b.viewport(0,0,O,j),b.useProgram(U.program),b.activeTexture(b.TEXTURE1),b.bindTexture(b.TEXTURE_2D,C),b.uniform1i(o.uAtlas,1),b.activeTexture(b.TEXTURE4),b.bindTexture(b.TEXTURE_2D,r.ink),b.uniform1i(o.uCells,4),b.activeTexture(b.TEXTURE5),b.bindTexture(b.TEXTURE_2D,r.under),b.uniform1i(o.uUnder,5),b.uniform2f(o.uResolution,O,j),b.uniform2f(o.uCell,$.width,$.height),b.uniform2f(o.uPitch,s,u),b.uniform1f(o.uColumns,$.columns),b.uniform1f(o.uDotScale,g.dotScale),b.uniform1i(o.uMark,d.indexOf(g.mark)),b.uniform1f(o.uSourceColor,"source"===g.color?1:0),b.drawArrays(b.TRIANGLES,0,3)},wt=()=>!pe&&!ge&&!xe&&(be||Ge)&&!("undefined"!=typeof document&&document.hidden),Tt=e=>{if(he=0,!wt())return;const t=(e-de)/1e3,n=Math.min(1/30,Math.max(1/480,t));de=e,Te=.9*Te+.1*Math.min(t,.25),Me=Te>1/24?Me+1:0;try{Me>45&&Re<2&&(Me=0,Re++,1===Re&&W>1?(g={...g,maxPixelRatio:1},ct()):Re=2);const t=je(),r=!(ye||Re>=2&&!(ee instanceof HTMLVideoElement)||(!(ee instanceof HTMLVideoElement)||ee.paused||ee.ended)&&(Xe()||!(!ee&&"none"!==g.scene||g.drift>0)));r&&(me+=n*g.speed),ee instanceof HTMLVideoElement&&ee.readyState>=2&&se&&(se=!("requestVideoFrameCallback"in ee),st(),ve=!0);const i=F(g);let o="fluid"===i&&(null!==we||e<Be);if(o?((e,t)=>{const n=g.fluid;if(!n||!H.length&&!G)return;if(G?!q?.ready():!B||!Oe(B))return;const r=O/j,i=we;if(we=null,G&&q){const o=5200*n.force*(Xe()?.35:1);return i&&(Be=t+1e3*Math.min(9,6/Math.max(.3,n.dissipation))),void q.step(i?{from:i.from,to:i.to,force:[(i.to[0]-i.from[0])*o,(i.to[1]-i.from[1])*o]}:null,{dt:Math.min(e,1/60),radius:1.1*n.radius,curl:n.curl,dissipation:n.dissipation,aspect:r})}let o=0,a=0;if(i){const e=(Xe()?1:3)*n.force;o=(i.to[0]-i.from[0])*r*e*4,a=(i.to[1]-i.from[1])*e*4,Be=t+7/Math.min(n.dissipation,1.1*n.dissipation)*1e3}const l=B.locations;b.bindFramebuffer(b.FRAMEBUFFER,H[1-Z]),b.viewport(0,0,J,Q),b.useProgram(B.program),b.activeTexture(b.TEXTURE0),b.bindTexture(b.TEXTURE_2D,X[Z]),b.uniform1i(l.uPrevious,0),b.uniform2f(l.uSize,J,Q),b.uniform1f(l.uAspect,r),b.uniform1f(l.uDt,e),b.uniform1f(l.uDecay,n.dissipation),b.uniform1f(l.uEnergyDecay,1.1*n.dissipation),b.uniform1f(l.uRadius,n.radius),b.uniform1f(l.uSplat,i?1:0),b.uniform2f(l.uFrom,i?.from[0]??0,i?.from[1]??0),b.uniform2f(l.uTo,i?.to[0]??0,i?.to[1]??0),b.uniform2f(l.uForce,o,a),b.drawArrays(b.TRIANGLES,0,3),Z=1-Z})(n,e):we=null,Le(i)&&(o=((e,t)=>{const n=g.lantern,r=Se.target;if(r){const i=Se.at;if(i)if(Xe())i[0]=r[0],i[1]=r[1];else{const t=1-Math.exp(-n.follow*e);i[0]+=(r[0]-i[0])*t,i[1]+=(r[1]-i[1])*t}else Se.at=[r[0],r[1]];const o=Se.at,a=Se.trail[Se.trail.length-1];n.trail>0&&(!a||t-a.born>28&&Math.hypot(o[0]-a.x,o[1]-a.y)>.004)&&(Se.trail.push({x:o[0],y:o[1],born:t}),Se.trail.length>12&&Se.trail.shift())}Se.strength+=((r?1:0)-Se.strength)*(1-Math.exp(-e*(r?9:5)));const i=Se.trail;for(let e=i.length-1;e>=0;e--)n.trail>0&&t-i[e].born<4e3*n.trail||i.splice(e,1);De.fill(0);for(let e=0;e<i.length;e++){const r=i[e];De[3*e]=r.x,De[3*e+1]=r.y,De[3*e+2]=.55*Math.exp(-(t-r.born)/1e3/Math.max(.01,n.trail))}return Se.strength>.003||i.length>0})(n,e)||o),"trail"===i){const e=!!Ce?.active;o=(e=>{const t=Ue();return!(!t||!t.active||(t.step(e),b.bindTexture(b.TEXTURE_2D,_e),b.texSubImage2D(b.TEXTURE_2D,0,0,0,t.width,t.height,b.RGBA,b.UNSIGNED_BYTE,t.pixels),Pe=!0,0))})(n)||o,e&&!Ce?.active&&(ve=!0)}if(ke.length){for(let t=ke.length-1;t>=0;t--)e-ke[t].born>=2400&&ke.splice(t,1);o=!0,ke.length||(ve=!0)}t&&(r||o||ve)&&(Et(),ve=!1,!Ge||oe&&!ee||(Ge=!1,He())),(r||o||we||!t)&&(he=requestAnimationFrame(Tt))}catch(e){xe=!0,Ne(e)}};function Mt(){!he&&wt()&&(de=performance.now(),he=requestAnimationFrame(Tt))}const Rt=(e,t)=>{const r=n.getBoundingClientRect();if(!r.width||!r.height)return null;const i=(e-r.left)/r.width,o=(t-r.top)/r.height;return i<-.05||i>1.05||o<-.05||o>1.05?null:[i,1-o]},kt=e=>{const t=F(g);if("none"===t||ye)return Ee=null,void(Se.target=null);if(Le(t))return Se.target=e?[e[0],1-e[1]]:null,Ee=null,void Mt();if("trail"===t){const t=Ue();if(!t)return;return e?t.move(e[0],1-e[1],g.trail.radius,performance.now()):t.leave(),Ee=null,void Mt()}e?(Ee&&(we=we?{from:we.from,to:e}:{from:Ee,to:e}),Ee=e,Mt()):Ee=null},Ft=e=>kt(Rt(e.clientX,e.clientY)),At=()=>{Ee=null,Ce?.leave(),Se.target&&(Se.target=null,Mt())},Lt=h.interactionTarget??window;Lt.addEventListener("pointermove",Ft,{passive:!0}),Lt.addEventListener("pointerdown",Ft,{passive:!0}),document.addEventListener("pointerleave",At),Lt!==window&&Lt.addEventListener("pointerleave",At);const St="function"==typeof ResizeObserver?new ResizeObserver(()=>{const e=ct();Ae(),(e||ve)&&Mt()}):null;St?.observe(n),p&&St?.observe(p.element);const Dt="function"==typeof IntersectionObserver?new IntersectionObserver(([e])=>{be=e.isIntersecting,be&&(ve=!0,Mt())},{rootMargin:"120px"}):null;Dt?.observe(n);const Ct=()=>{document.hidden||(ve=!0,Mt())};document.addEventListener("visibilitychange",Ct);const _t=()=>{ve=!0,Mt()};Ie?.addEventListener?.("change",_t),rt?.addEventListener?.("loadingdone",at);const Pt=e=>{e.preventDefault(),ge=!0,he&&cancelAnimationFrame(he),he=0},Ut=()=>{ge=!1,z.length=0,V=null,P=U=B=null,I=null,X=[],H=[],q=null,G=!1,_e=null,Ce=null,Pe=!1;try{ut(),ve=!0,Mt()}catch(e){Ne(e)}};n.addEventListener("webglcontextlost",Pt),n.addEventListener("webglcontextrestored",Ut);const Bt=()=>{ne&&(ne.pause(),ne.removeAttribute("src"),ne.load(),ne=null),ue&&ee instanceof HTMLVideoElement&&"cancelVideoFrameCallback"in ee&&ee.cancelVideoFrameCallback(ue),ue=0},It=()=>{ae?.close(),ae=null},Xt=async e=>{const t=await createImageBitmap(e,{premultiplyAlpha:"none"}),n=[t.width,t.height],r=function(e,t,n,r,i,o,a=8){if(!(n>=16&&r>=16&&e>0&&t>0&&i>0))return 1;const l=a/i/("cover"===o?Math.min(e/n,t/r):Math.max(e/n,t/r));return l>.5?1:2**-Math.floor(Math.log2(1/l))}(t.width,t.height,O,j,$.height,g.fit);if(1===r)return{element:t,owned:!0,natural:n};try{return{element:await createImageBitmap(t,{resizeWidth:Math.max(1,Math.round(t.width*r)),resizeHeight:Math.max(1,Math.round(t.height*r)),resizeQuality:"medium",premultiplyAlpha:"none"}),owned:!0,natural:n}}finally{t.close()}},Ht=e=>new Promise((t,n)=>{const r=new Image;r.crossOrigin="anonymous",r.decoding="async",r.onload=()=>t({element:r,owned:!1}),r.onerror=()=>n(new Error("The glyph field could not load this image.")),r.src=e}),qt=async e=>{const t=++oe;if(!e)return Bt(),It(),ee=null,re=ie=le=0,te=!1,ve=!0,void Mt();try{const n=await(async e=>{if("string"!=typeof e)return e instanceof HTMLImageElement&&!e.complete?e.decode().then(()=>({element:e,owned:!1})):e instanceof HTMLVideoElement&&e.readyState<2?new Promise((t,n)=>{e.addEventListener("loadeddata",()=>t({element:e,owned:!1}),{once:!0}),e.addEventListener("error",()=>n(new Error("The glyph field could not load this video.")),{once:!0})}):{element:e,owned:!1};if(S.test(e))return new Promise((t,n)=>{const r=document.createElement("video");r.crossOrigin="anonymous",r.muted=!0,r.loop=!0,r.playsInline=!0,r.preload="auto",r.addEventListener("loadeddata",()=>{r.play().catch(()=>{}),t({element:r,owned:!0})},{once:!0}),r.addEventListener("error",()=>n(new Error("The glyph field could not load this video.")),{once:!0}),r.src=e});if("function"!=typeof createImageBitmap||"function"!=typeof fetch)return Ht(e);let t;try{t=await(await fetch(e).then(e=>{if(!e.ok)throw new Error("The glyph field could not load this image.");return e})).blob()}catch(t){if(t instanceof Error&&t.message.startsWith("The glyph field"))throw t;return Ht(e)}if(!/svg/i.test(t.type))try{return await Xt(t)}catch{}const n=URL.createObjectURL(t);try{return await Ht(n)}finally{URL.revokeObjectURL(n)}})(e),{element:r,owned:i}=n;if(pe||t!==oe)return void(i&&r instanceof HTMLVideoElement?(r.pause(),r.removeAttribute("src"),r.load()):i&&r.close());Bt(),It(),ne=i&&r instanceof HTMLVideoElement?r:null,!i||r instanceof HTMLVideoElement||(ae=r),ee=r,te="string"==typeof e||e instanceof HTMLImageElement||e instanceof HTMLVideoElement,le=r instanceof HTMLVideoElement?r.videoHeight:r instanceof HTMLImageElement?r.naturalHeight:r.height,re=n.natural?.[0]??(r instanceof HTMLVideoElement?r.videoWidth:r instanceof HTMLImageElement?r.naturalWidth:r.width),ie=n.natural?.[1]??le,se=!0,r instanceof HTMLVideoElement&&(e=>{const t=e;if(!t.requestVideoFrameCallback)return;const n=()=>{pe||ee!==e||(se=!0,Mt(),ue=t.requestVideoFrameCallback(n))};ue=t.requestVideoFrameCallback(n)})(r),ge||st(),ve=!0,Mt()}catch(e){Ge&&t===oe&&(Ge=!1,He()),Ne(e)}};ut(),Ae();const Gt=h.source??null;return Gt?(oe=1,qt(Gt)):Mt(),{canvas:n,ready:qe,get settings(){return g},update(e){const t=g,{element:r,rest:i}=v(e);"clear"in e&&(p&&p.element!==r?.element&&St?.unobserve(p.element),p=r,r&&St?.observe(r.element)),g=w(r?{...i,clear:g.clear}:i,g),Ae(),e.label&&n.setAttribute("aria-label",e.label),g.maxPixelRatio!==t.maxPixelRatio&&ct(),g.charset===t.charset&&g.cellSize===t.cellSize&&g.cellAspect===t.cellAspect&&g.font===t.font&&g.fontWeight===t.fontWeight&&g.glyphScale===t.glyphScale||(nt(),it()),g.levels!==t.levels&&lt();((!!t.fluid&&"fluid"===F(t))!==Ke()||g.fluid&&t.fluid&&g.fluid.resolution!==t.fluid.resolution)&&Ze(),"source"in e&&qt(e.source??null),ve=!0,Mt()},setSource:qt,pointer(e,t=0){if(null===e)return void kt(null);const r=n.getBoundingClientRect();kt(Rt(r.left+e,r.top+t))},redraw(){if(!(pe||ge||xe)&&O)try{je(!0)&&Et()}catch(e){xe=!0,Ne(e)}},pulse(e={}){if(pe||Xe())return;const t=n.getBoundingClientRect();if(!t.width||!t.height)return;let r=e.x??t.width/2,i=e.y??t.height/2;if(e.element){const n=e.element.getBoundingClientRect();r=n.left+n.width/2-t.left,i=n.top+n.height/2-t.top}const o=Math.max(0,Math.min(2,e.strength??1));ke=[...ke,{x:r/t.width,y:i/t.height,born:performance.now(),strength:o}].slice(-4),Mt()},play(){ye=!1,ee instanceof HTMLVideoElement&&ee.play().catch(()=>{}),ve=!0,Mt()},pause(){ye=!0,ee instanceof HTMLVideoElement&&ee.pause()},resize(){ct()&&Mt()},destroy(){if(!pe&&(pe=!0,he&&cancelAnimationFrame(he),Lt.removeEventListener("pointermove",Ft),Lt.removeEventListener("pointerdown",Ft),document.removeEventListener("pointerleave",At),Lt.removeEventListener("pointerleave",At),document.removeEventListener("visibilitychange",Ct),Ie?.removeEventListener?.("change",_t),rt?.removeEventListener?.("loadingdone",at),n.removeEventListener("webglcontextlost",Pt),n.removeEventListener("webglcontextrestored",Ut),St?.disconnect(),Dt?.disconnect(),Bt(),It(),ee=null,!ge)){Je(),Ye(),b.deleteTexture(C),b.deleteTexture(_);for(const e of[P,U,B])e&&b.deleteProgram(e.program);q?.dispose(),_e&&b.deleteTexture(_e),z.forEach(e=>b.deleteShader(e)),N&&b.deleteVertexArray(N)}}}}export{g as DEFAULT_FIELD_FLUID,v as DEFAULT_FIELD_LANTERN,x as DEFAULT_FIELD_SETTINGS,p as DEFAULT_FIELD_TRAIL,m as FIELD_HOVERS,d as FIELD_MARKS,h as FIELD_SCENES,F as activeFieldHover,M as fieldCellLayout,A as fieldClearFromRects,E as fieldGlyphs,k as fieldLevels,T as fieldSourceRect,C as glyphFieldTier,_ as isGlyphFieldSupported,P as mountGlyphField,w as normalizeFieldSettings};//# sourceMappingURL=field.js.map

package/dist/hover-guide-CAfsLjFZ.d.cts

@@ -0,0 +1,190 @@
+type AmbientMotion = 'none' | 'relight' | 'sheen' | 'glow' | 'shimmer' | 'parallax' | 'push' | 'focus' | 'mist' | 'current' | 'develop';
+/** Retired after 4.21: each still loads, as its closest photo-aware replacement. */
+type LegacyAmbientMotion = 'caustics' | 'grain' | 'trace' | 'tidal' | 'weave' | 'breeze' | 'reform' | 'print' | 'unfold';
+declare const DEPRECATED_MOTIONS: Readonly<Record<LegacyAmbientMotion, AmbientMotion>>;
+declare const MOTION_STYLES: readonly [{
+    readonly value: "none";
+    readonly mode: "none";
+    readonly group: "Still";
+    readonly label: "Off";
+    readonly description: "Keep the image still. Hover stays available.";
+}, {
+    readonly value: "relight";
+    readonly mode: "relight";
+    readonly group: "Light";
+    readonly label: "Relight";
+    readonly description: "A key light circles the subject and models its own relief, like moving a lamp around a sculpture.";
+}, {
+    readonly value: "sheen";
+    readonly mode: "sheen";
+    readonly group: "Light";
+    readonly label: "Specular sweep";
+    readonly description: "One slow pass of light glances across the highlights and follows their form, then rests.";
+}, {
+    readonly value: "glow";
+    readonly mode: "glow";
+    readonly group: "Light";
+    readonly label: "Highlight bloom";
+    readonly description: "The brightest areas breathe a soft halo into their surroundings. Shadows stay deep.";
+}, {
+    readonly value: "shimmer";
+    readonly mode: "shimmer";
+    readonly group: "Light";
+    readonly label: "Glints";
+    readonly description: "Sparse glints on bright fine detail, like light on water, metal or an eye. Everything else holds still.";
+}, {
+    readonly value: "parallax";
+    readonly mode: "parallax";
+    readonly group: "Depth";
+    readonly label: "Parallax";
+    readonly description: "A slow camera drift: the subject moves against its background, read from the photo’s own depth cues.";
+}, {
+    readonly value: "push";
+    readonly mode: "push";
+    readonly group: "Depth";
+    readonly label: "Slow push";
+    readonly description: "A gentle push toward the subject and back, with nearer areas moving slightly more.";
+}, {
+    readonly value: "focus";
+    readonly mode: "focus";
+    readonly group: "Depth";
+    readonly label: "Focus pull";
+    readonly description: "Focus racks from the subject to the background and back; the characters soften out of focus.";
+}, {
+    readonly value: "mist";
+    readonly mode: "mist";
+    readonly group: "Atmosphere";
+    readonly label: "Mist";
+    readonly description: "Soft mist drifts through the distance and plain areas, leaving the subject clear.";
+}, {
+    readonly value: "current";
+    readonly mode: "current";
+    readonly group: "Atmosphere";
+    readonly label: "Drift";
+    readonly description: "Sky, water and smooth grounds flow slowly, like a cinemagraph; detailed areas hold still.";
+}, {
+    readonly value: "develop";
+    readonly mode: "develop";
+    readonly group: "Reveal";
+    readonly label: "Develop";
+    readonly description: "The image holds, fades, then develops back in from its highlights to its shadows, like a print in the tray.";
+}];
+
+/** One public catalog for the hero, studio, documentation and integrations. */
+declare const SURFACE_HOVERS: readonly [{
+    readonly value: "none";
+    readonly label: "Off";
+    readonly group: "Still";
+    readonly description: "Keep the artwork still under the pointer.";
+}, {
+    readonly value: "trail";
+    readonly label: "Trail";
+    readonly group: "Change characters";
+    readonly description: "A fluid wake changes character density and settles behind your cursor.";
+}, {
+    readonly value: "dissolve";
+    readonly label: "Dissolve";
+    readonly group: "Change characters";
+    readonly description: "Erase a soft path through the characters; the image gradually reforms.";
+}, {
+    readonly value: "contour";
+    readonly label: "Contour";
+    readonly group: "Change characters";
+    readonly description: "Fine tonal rings trace your path without moving the grid.";
+}, {
+    readonly value: "etch";
+    readonly label: "Emboss";
+    readonly group: "Change characters";
+    readonly description: "Press a light-and-shadow impression into the characters; the grid stays fixed.";
+}, {
+    readonly value: "ripple";
+    readonly label: "Ripple rings";
+    readonly group: "Change characters";
+    readonly description: "Expanding light-and-shadow rings follow your stroke. Faster movement excites stronger rings; the grid stays still.";
+}, {
+    readonly value: "bleed";
+    readonly label: "Ink bleed";
+    readonly group: "Change characters";
+    readonly description: "Ink wells up where the cursor rests, spreads along the paper grain, then dries back.";
+}, {
+    readonly value: "water";
+    readonly label: "Water";
+    readonly group: "Move the image";
+    readonly description: "Soft ripples refract the image and settle after your stroke.";
+}, {
+    readonly value: "silk";
+    readonly label: "Silk";
+    readonly group: "Move the image";
+    readonly description: "Directional folds follow the movement of your hand.";
+}, {
+    readonly value: "vortex";
+    readonly label: "Vortex";
+    readonly group: "Move the image";
+    readonly description: "A swirling wake curls through the image.";
+}, {
+    readonly value: "magnetic";
+    readonly label: "Magnetic Pull";
+    readonly group: "Move the image";
+    readonly description: "The image gathers toward your stroke, then relaxes.";
+}, {
+    readonly value: "scatter";
+    readonly label: "Scatter";
+    readonly group: "Move the image";
+    readonly description: "Characters scatter in soft drifts from your stroke, then spring back into place.";
+}, {
+    readonly value: "elastic";
+    readonly label: "Elastic";
+    readonly group: "Move the image";
+    readonly description: "Push the image with your stroke; it recoils past its rest once, then settles.";
+}, {
+    readonly value: "lens";
+    readonly label: "Lens wake";
+    readonly group: "Move the image";
+    readonly description: "A soft magnifying wake brings details closer, then relaxes back into focus.";
+}, {
+    readonly value: "smudge";
+    readonly label: "Smudge";
+    readonly group: "Move the image";
+    readonly description: "Drag the image in the direction of your stroke; a smooth, lingering pull settles without a bounce.";
+}, {
+    readonly value: "loupe";
+    readonly label: "Loupe";
+    readonly group: "Follow the cursor";
+    readonly description: "A glass loupe glides after the cursor and magnifies what it covers, easing through a soft rim.";
+}, {
+    readonly value: "reveal";
+    readonly label: "Reveal";
+    readonly group: "Follow the cursor";
+    readonly description: "A soft spotlight shows the original photograph through the characters.";
+}, {
+    readonly value: "repel";
+    readonly label: "Repel";
+    readonly group: "Follow the cursor";
+    readonly description: "Characters part around the cursor and spring back with one soft rebound when it leaves.";
+}, {
+    readonly value: "tilt";
+    readonly label: "Tilt";
+    readonly group: "Follow the cursor";
+    readonly description: "The image leans toward the cursor; bright areas sit nearer and move more, like a parallax card.";
+}, {
+    readonly value: "haze";
+    readonly label: "Heat haze";
+    readonly group: "Follow the cursor";
+    readonly description: "A rising shimmer bends the characters above the cursor, livelier while you move.";
+}];
+/** Retired hover IDs and the effect each one now plays. Saved settings and old integrations keep working. */
+declare const DEPRECATED_SURFACE_HOVERS: {
+    readonly rake: "silk";
+};
+type DeprecatedSurfaceHover = keyof typeof DEPRECATED_SURFACE_HOVERS;
+type SurfaceHover = typeof SURFACE_HOVERS[number]['value'];
+
+/** Where a hover may act. `all` is the whole artwork; `subject` keeps it on the subject; `outside` keeps it off. */
+type HoverScope = 'all' | 'subject' | 'outside';
+declare const HOVER_SCOPES: readonly {
+    value: HoverScope;
+    label: string;
+    description: string;
+}[];
+
+export { type AmbientMotion as A, type DeprecatedSurfaceHover as D, type HoverScope as H, type LegacyAmbientMotion as L, MOTION_STYLES as M, type SurfaceHover as S, DEPRECATED_SURFACE_HOVERS as a, DEPRECATED_MOTIONS as b, HOVER_SCOPES as c, SURFACE_HOVERS as d };