asciify-engine 2.0.1 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -7
- package/dist/ambient-motion-CqF5-eZ2.d.cts +24 -0
- package/dist/ambient-motion-CqF5-eZ2.d.ts +24 -0
- package/dist/characters-BNTu2oEF.d.cts +71 -0
- package/dist/characters-BNTu2oEF.d.ts +71 -0
- package/dist/core.cjs +1 -1
- package/dist/core.d.cts +3 -2
- package/dist/core.d.ts +3 -2
- package/dist/core.js +1 -1
- package/dist/hover.cjs +1 -1
- package/dist/hover.d.cts +3 -4
- package/dist/hover.d.ts +3 -4
- package/dist/hover.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/dist/studio.cjs +1 -1
- package/dist/studio.d.cts +15 -41
- package/dist/studio.d.ts +15 -41
- package/dist/studio.js +1 -1
- package/dist/{types-Cixur2pN.d.ts → types-CYKIEtDC.d.cts} +7 -7
- package/dist/{types-Cixur2pN.d.cts → types-CYKIEtDC.d.ts} +7 -7
- package/package.json +1 -15
- package/skills/asciify-engine/SKILL.md +5 -5
- package/skills/asciify-engine/references/media-api.md +2 -2
- package/skills/asciify-engine/references/studio-effects.md +2 -2
- package/skills/asciify-engine/references/studio-workspace.md +15 -0
- package/skills/asciify-engine/references/upgrading.md +14 -0
- package/dist/backgrounds.cjs +0 -1
- package/dist/backgrounds.d.cts +0 -401
- package/dist/backgrounds.d.ts +0 -401
- package/dist/backgrounds.js +0 -1
package/dist/studio.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var t=["ascii","blocks","braille","dots","lines","cross","diagonal","diamond","mixed","pixel","mosaic","lego","voxel","disco","dither"],e=["none","bayer2","bayer4","bayer8","bayer16","floyd-steinberg","atkinson","stucki","sierra","sierra-lite","burkes","jarvis","halftone","lines","noise"],i=["source-over","multiply","screen","overlay","soft-light","hard-light","color-dodge","color-burn","hue","saturation","color","luminosity"],s={original:[],mono:["#080808","#f2f2e8"],asciify:["#080808","#625b38","#a19558","#e8b900"],gameboy:["#0f380f","#306230","#8bac0f","#9bbc0f"],cga:["#000000","#55ffff","#ff55ff","#ffffff"],pico8:["#000000","#1d2b53","#7e2553","#008751","#ab5236","#5f574f","#c2c3c7","#fff1e8","#ff004d","#ffa300","#ffec27","#00e436","#29adff","#83769c","#ff77a8","#ffccaa"],c64:["#000000","#ffffff","#880000","#aaffee","#cc44cc","#00cc55","#0000aa","#eeee77","#dd8855","#664400","#ff7777","#333333","#777777","#aaff66","#0088ff","#bbbbbb"],amber:["#100b00","#5f3b00","#c98014","#ffd17c"],ice:["#081b29","#25586e","#69a6b3","#d9ece7"],risograph:["#f4ebd0","#f2594b","#2853a5","#29232e"],sepia:["#201b17","#6b5039","#b49868","#f6e6c5"],nord:["#2e3440","#4c566a","#88c0d0","#eceff4"],dusk:["#211b35","#654271","#c3788c","#f5c9a3"],forest:["#101f1b","#355747","#87a16f","#e4e3ba"],ocean:["#071b33","#17577f","#3fa7a4","#d9efde"],newsprint:["#191919","#666666","#aaaaaa","#eee9df"],custom:["#080808","#e8b900"]},a={version:1,aspectRatio:"original",style:"ascii",cellSize:7,charset:" .:-=+*#%@",colorMode:"accent",ink:"#e8b900",crop:{x:.5,y:.5,zoom:1,rotation:0},backdrop:{mode:"solid",color:"#080808",color2:"#393323",blur:12,opacity:1},color:{brightness:0,contrast:1,saturation:1,grayscale:0,tint:"#e8b900",amount:0,blend:"source-over"},dither:{algorithm:"none",palette:"mono",colors:["#080808","#e8b900"],amount:1,scale:2,threshold:.5,motion:"none",speed:1},mask:{enabled:!1,invert:!1,shapes:[]},lights:[],effects:{bloom:0,characterBloom:0,grain:0,dust:0,scanlines:0,crt:0,prism:0,vignette:0,glitch:0,pixelate:0,blur:0,blurType:"gaussian",angle:0,focus:.5,halftone:0},motion:{type:"none",speed:1},hover:{effect:"trail",strength:.55,radius:.2,edgeSafe:!1}},r=t=>t&&"object"==typeof t&&!Array.isArray(t)?t:{},o=(t,e,i,s)=>"number"==typeof t&&Number.isFinite(t)?Math.min(s,Math.max(i,t)):e,n=(t,e)=>"string"==typeof t&&/^#[\da-f]{6}$/i.test(t)?t:e,h=(t,e,i)=>e.includes(t)?t:i;function l(l={}){const c=r(l),m=a;if(void 0!==c.version&&1!==c.version)throw new Error("Unsupported studio settings version. Update asciify-engine.");const f=r(c.crop),d=r(c.backdrop),u=r(c.color),g=r(c.dither),p=r(c.mask),M=r(c.effects),x=r(c.motion),v=r(c.hover),w={...m.effects};for(const t of["bloom","characterBloom","grain","dust","scanlines","crt","prism","vignette","glitch","pixelate","halftone"])w[t]=o(M[t],0,0,1);w.blur=o(M.blur,0,0,24),w.blurType=h(M.blurType,["gaussian","directional","radial","progressive"],m.effects.blurType),w.angle=o(M.angle,0,-180,180),w.focus=o(M.focus,.5,0,1);let b=2048;return{version:1,aspectRatio:h(c.aspectRatio,["original","16:9","9:16","1:1","4:3","3:4","21:9"],"original"),style:h(c.style,t,m.style),cellSize:o(c.cellSize,7,3,60),charset:"string"==typeof c.charset&&c.charset.length?Array.from(c.charset).slice(0,128).join(""):m.charset,colorMode:h(c.colorMode,["accent","source","gray"],m.colorMode),ink:n(c.ink,m.ink),crop:{x:o(f.x,.5,0,1),y:o(f.y,.5,0,1),zoom:o(f.zoom,1,1,5),rotation:90*Math.round(o(f.rotation,0,-360,360)/90)},backdrop:{mode:h(d.mode,["solid","transparent","source","blurred","gradient"],m.backdrop.mode),color:n(d.color,m.backdrop.color),color2:n(d.color2,m.backdrop.color2),blur:o(d.blur,12,0,32),opacity:o(d.opacity,1,0,1)},color:{brightness:o(u.brightness,0,-1,1),contrast:o(u.contrast,1,0,3),saturation:o(u.saturation,1,0,3),grayscale:o(u.grayscale,0,0,1),tint:n(u.tint,m.color.tint),amount:o(u.amount,0,0,1),blend:h(u.blend,i,m.color.blend)},dither:{algorithm:h(g.algorithm,e,"none"),palette:"string"==typeof g.palette&&Object.prototype.hasOwnProperty.call(s,g.palette)?g.palette:"mono",colors:Array.isArray(g.colors)&&g.colors.length>=2?g.colors.slice(0,32).map(t=>n(t,"#000000")):[...m.dither.colors],amount:o(g.amount,1,0,2),scale:Math.round(o(g.scale,2,1,12)),threshold:o(g.threshold,.5,0,1),motion:h(g.motion,["none","drift","shimmer"],"none"),speed:o(g.speed,1,.1,3)},mask:{enabled:!0===p.enabled,invert:!0===p.invert,shapes:Array.isArray(p.shapes)?p.shapes.slice(0,64).map(t=>{const e=r(t),i=h(e.kind,["rectangle","ellipse","brush"],"rectangle"),s="brush"===i&&Array.isArray(e.points)?e.points.slice(0,b).map(t=>Array.isArray(t)?[Math.round(1e4*o(t[0],0,0,1))/1e4,Math.round(1e4*o(t[1],0,0,1))/1e4]:[0,0]):[];return b-=s.length,{kind:i,x:o(e.x,0,0,1),y:o(e.y,0,0,1),width:o(e.width,.5,0,1),height:o(e.height,.5,0,1),size:o(e.size,.05,.005,.5),points:s}}):[]},lights:Array.isArray(c.lights)?c.lights.slice(0,4).map(t=>{const e=r(t);return{x:o(e.x,.5,0,1),y:o(e.y,.5,0,1),radius:o(e.radius,.3,.02,1),intensity:o(e.intensity,.5,0,1),color:n(e.color,"#ffffff")}}):[],effects:w,motion:{type:h(x.type,["none","breathe","wave","reveal","glitch","rainbow","hologram","fire","chrome","ripple","vapor"],"none"),speed:o(x.speed,1,.1,3)},hover:{effect:h(v.effect,["none","trail","water","contour","dissolve","silk","vortex"],"trail"),strength:o(v.strength,.55,0,1),radius:o(v.radius,.2,.1,1),edgeSafe:!0===v.edgeSafe}}}function c(t){return JSON.stringify(l(t))}function m(t){if(t.length>1e5)throw new Error("Settings exceed 100 KB.");return l(JSON.parse(t))}function f(t,e,i,s,a){const r=Math.abs(a.rotation/90)%2==1,o=r?e:t,n=r?t:e,h=Math.max(i/o,s/n)*a.zoom;return{width:o*h,height:n*h,x:(i-o*h)*a.x,y:(s-n*h)*a.y,scale:h,rotated:r}}function d(t,e,i){if(Math.abs(i.crop.rotation/90)%2==1&&([t,e]=[e,t]),"original"===i.aspectRatio)return[t,e];const[s,a]=i.aspectRatio.split(":").map(Number);return t/e>s/a?[Math.round(e*s/a),e]:[t,Math.round(t*a/s)]}function u(t,e){const i={...t,...e};for(const s of["crop","backdrop","color","dither","mask","effects","motion","hover"])e[s]&&Object.assign(i,{[s]:{...t[s],...e[s]}});return l(i)}function g(t,e,i,s=12e3,a=1){const r=Math.max(2,Number.isFinite(t)?t:960),o=Math.max(2,Number.isFinite(e)?e:540),n=Math.max(1,Math.floor(Number.isFinite(s)?s:12e3)),h=Math.max(.01,Number.isFinite(a)?a:1),l=["dither","pixel","mosaic","lego","voxel","disco","dots"].includes(i.style)?1:1.65;let c=Math.max(1,Math.ceil(Math.sqrt(r*o/(n*l))/h));for(;Math.ceil(r/(c*h))*Math.ceil(o/(c*h*l))>n;)c++;const m="dither"===i.style?i.dither.scale:i.cellSize,f=Math.max(c,m)*h;return{cell:f,rowHeight:f*l,columns:Math.ceil(r/f),rows:Math.ceil(o/(f*l)),minimum:c,limited:m<c}}var p=[["ascii","Signature ASCII","Brand ink and clean characters.",{}],["print","Newsprint","Fine diffusion on warm paper.",{style:"dither",dither:{algorithm:"floyd-steinberg",palette:"newsprint"}}],["handheld","Pocket camera","Four-tone ordered dither.",{style:"dither",dither:{algorithm:"bayer4",palette:"gameboy",scale:3}}],["riso","Two inks","Limited-color print texture.",{style:"dither",dither:{algorithm:"atkinson",palette:"risograph",scale:2}}],["night","Night signal","Gray characters and optical fringe.",{ink:"#888888",effects:{prism:.7,scanlines:.2,vignette:.3}}],["terminal","Phosphor","Green glyphs with a soft glow.",{ink:"#83efad",effects:{bloom:.4,scanlines:.35,crt:.2}}],["mosaic","Mosaic study","Separated color tiles.",{style:"mosaic",cellSize:14,colorMode:"source"}],["bricks","Brickwork","Colorful studded cells.",{style:"lego",cellSize:18,colorMode:"source"}],["voxel","Little volumes","Three-face isometric tiles.",{style:"voxel",cellSize:22,colorMode:"source"}],["disco","Mirror room","Faceted tiles and warm light.",{style:"disco",cellSize:18,colorMode:"source",lights:[{x:.35,y:.25,radius:.25,intensity:.45,color:"#fff2d4"}]}],["wallpaper","Wallpaper","Living ASCII over a softened source.",{backdrop:{mode:"blurred",blur:18,opacity:.55},ink:"#f2e9c9",motion:{type:"breathe",speed:.5}}],["blueprint","Blueprint","Linework in a cool monochrome.",{style:"lines",ink:"#9bccdf",backdrop:{mode:"solid",color:"#0a1e30"}}]].map(([t,e,i,s])=>({id:t,name:e,description:i,settings:l(s)}));function M(t){const e=p.find(e=>e.id===t);if(!e)throw new Error("Unknown studio look.");return l(e.settings)}function x(t,e=Math.random){const i=p.filter(e=>e.settings.style!==t.style||e.settings.ink!==t.ink),s=M(i[Math.min(i.length-1,Math.max(0,Math.floor(e()*i.length)))].id);return s.aspectRatio=t.aspectRatio,s.crop={...t.crop},s.mask=l(t).mask,s}var v=(t,e)=>{const i=43758.5453*Math.sin(127.1*t+311.7*e);return i-Math.floor(i)};function w(t,e,i){let s=0;for(let a=1;a<i;a*=2){const i=Math.floor(t/a)%2;s=4*s+[[0,2],[3,1]][Math.floor(e/a)%2][i]}return(s+.5)/(i*i)-.5}var b={"floyd-steinberg":[[1,0,7/16],[-1,1,3/16],[0,1,5/16],[1,1,1/16]],atkinson:[[1,0,.125],[2,0,.125],[-1,1,.125],[0,1,.125],[1,1,.125],[0,2,.125]],stucki:[[1,0,8/42],[2,0,4/42],[-2,1,2/42],[-1,1,4/42],[0,1,8/42],[1,1,4/42],[2,1,2/42],[-2,2,1/42],[-1,2,2/42],[0,2,4/42],[1,2,2/42],[2,2,1/42]],sierra:[[1,0,5/32],[2,0,3/32],[-2,1,2/32],[-1,1,4/32],[0,1,5/32],[1,1,4/32],[2,1,2/32],[-1,2,2/32],[0,2,3/32],[1,2,2/32]],"sierra-lite":[[1,0,.5],[-1,1,.25],[0,1,.25]],burkes:[[1,0,.25],[2,0,4/32],[-2,1,2/32],[-1,1,4/32],[0,1,.25],[1,1,4/32],[2,1,2/32]],jarvis:[[1,0,7/48],[2,0,5/48],[-2,1,3/48],[-1,1,5/48],[0,1,7/48],[1,1,5/48],[2,1,3/48],[-2,2,1/48],[-1,2,3/48],[0,2,5/48],[1,2,3/48],[2,2,1/48]]},y=t=>[parseInt(t.slice(1,3),16),parseInt(t.slice(3,5),16),parseInt(t.slice(5,7),16)];function k(t,e,i){const s=Math.min(t*Math.max(1,i),(1-t)*Math.max(1,i),e*Math.max(1,1/i),(1-e)*Math.max(1,1/i)),a=Math.max(0,Math.min(1,(s-.035)/.105));return a*a*a*(a*(6*a-15)+10)}var E=class{constructor(t,e){this.edgeSafe=!1,this.previous=null,this.peak=0,this.mode="dissolve",this.width=t,this.height=e;const i=t*e;this.pixels=new Uint8Array(4*i),this.ink=new Float32Array(i),this.targetX=new Float32Array(i),this.targetY=new Float32Array(i),this.offsetX=new Float32Array(i),this.offsetY=new Float32Array(i),this.edge=new Float32Array(i);for(let i=0;i<e;i++)for(let s=0;s<t;s++)this.edge[i*t+s]=k(s/(t-1),i/(e-1),t/e);this.clear()}get active(){return this.peak>2e-4}setMode(t){t!==this.mode&&(this.mode=t,this.clear())}clear(){for(const t of[this.ink,this.targetX,this.targetY,this.offsetX,this.offsetY,this.pixels])t.fill(0);if(this.previous=null,this.peak=0,"dissolve"!==this.mode)for(let t=0;t<this.pixels.length;t+=4)this.pixels[t]=this.pixels[t+2]=128}leave(){this.previous=null}move(t,e,i){if(!Number.isFinite(t+e+i))return;t=Math.max(0,Math.min(1,t)),e=Math.max(0,Math.min(1,e));const s=this.previous;this.previous={x:t,y:e};const a=this.width,r=this.height,o=Math.max(1,a/r),n=Math.max(1,r/a),h=s?(t-s.x)*o:0,l=s?(e-s.y)*n:0,c=Math.hypot(h,l);if(!s&&"dissolve"!==this.mode)return;if(s&&c<1e-4)return;const m=.035+.11*Math.max(.1,Math.min(1,i)),f=Math.min(128,Math.max(1,Math.ceil(c/(.45*m)))),d=c?h/c:1,u=c?l/c:0,g=Math.min(1,c/(m*f)*2.2);for(let i=0;i<f;i++){const h=(i+.5)/f,l=s?s.x+(t-s.x)*h:t,c=s?s.y+(e-s.y)*h:e,p=Math.max(0,Math.floor((l-2.5*m/o)*(a-1))),M=Math.min(a-1,Math.ceil((l+2.5*m/o)*(a-1))),x=Math.max(0,Math.floor((c-2.5*m/n)*(r-1))),v=Math.min(r-1,Math.ceil((c+2.5*m/n)*(r-1)));for(let t=x;t<=v;t++)for(let e=p;e<=M;e++){const i=(e/(a-1)-l)*o/m,s=(t/(r-1)-c)*n/m,h=Math.exp(1.5*-(i*i+s*s)),f=t*a+e;if("dissolve"===this.mode)this.ink[f]=Math.max(this.ink[f],h);else{const t=(-i*u+s*d)*h*2.8,e="silk"===this.mode?d*t:-s*h*2.5,a="silk"===this.mode?u*t:i*h*2.5;this.targetX[f]=Math.max(-1,Math.min(1,this.targetX[f]+e*g)),this.targetY[f]=Math.max(-1,Math.min(1,this.targetY[f]+a*g))}}}this.peak=1}step(t){if(!this.active||!Number.isFinite(t))return;const e=Math.max(0,Math.min(.05,t)),i=Math.exp(-("dissolve"===this.mode?2.15:3.2)*e),s=1-Math.exp(-22*e);let a=0;for(let t=0;t<this.ink.length;t++)if("dissolve"===this.mode){this.ink[t]*=i,a=Math.max(a,this.ink[t]);const e=Math.round(65535*this.ink[t]);this.pixels[4*t]=e>>>8,this.pixels[4*t+1]=255&e}else{this.targetX[t]*=i,this.targetY[t]*=i,this.offsetX[t]+=(this.targetX[t]-this.offsetX[t])*s,this.offsetY[t]+=(this.targetY[t]-this.offsetY[t])*s,a=Math.max(a,Math.abs(this.offsetX[t]),Math.abs(this.offsetY[t]),Math.abs(this.targetX[t]),Math.abs(this.targetY[t]));const e=Math.round(this.offsetX[t]*(this.edgeSafe?this.edge[t]:1)*32767+32768),r=Math.round(this.offsetY[t]*(this.edgeSafe?this.edge[t]:1)*32767+32768);this.pixels[4*t]=e>>>8,this.pixels[4*t+1]=255&e,this.pixels[4*t+2]=r>>>8,this.pixels[4*t+3]=255&r}this.peak=a,this.active||this.clear()}sample(t,e,i){const s=Math.max(0,Math.min(this.width-1.001,t*(this.width-1))),a=Math.max(0,Math.min(this.height-1.001,e*(this.height-1))),r=Math.floor(s),o=Math.floor(a),n=s-r,h=a-o,l=o*this.width+r,c=l+this.width,m=t=>(t[l]*(1-n)+t[l+1]*n)*(1-h)+(t[c]*(1-n)+t[c+1]*n)*h;i[0]=m(this.offsetX)*(this.edgeSafe?k(t,e,this.width/this.height):1)*.08,i[1]=m(this.offsetY)*(this.edgeSafe?k(t,e,this.width/this.height):1)*.08,i[2]="dissolve"===this.mode?6*-m(this.ink):0}},S=class{constructor(t,e){this.rings=[],this.previous=null,this.elapsed=1,this.echoPeak=0,this.width=t,this.height=e,this.pixels=new Uint8Array(t*e*4),this.echo=new Float32Array(t*e)}get active(){return this.rings.length>0||this.echoPeak>2e-4}clear(){this.rings=[],this.previous=null,this.elapsed=1,this.pixels.fill(0),this.echo.fill(0),this.echoPeak=0}leave(){this.previous=null}move(t,e,i){const s=Math.max(1,this.width/this.height),a=Math.max(1,this.height/this.width);this.previous&&(Math.hypot((t-this.previous.x)*s,(e-this.previous.y)*a)<.065||this.elapsed<.3)||4!==this.rings.length&&(this.previous={x:t,y:e},this.elapsed=0,this.rings.push({x:t,y:e,age:0,radius:i}))}ringSample(t,e){const i=Math.max(1,this.width/this.height),s=Math.max(1,this.height/this.width);let a=0;for(const r of this.rings){const o=.015+r.age*(.15+.22*r.radius),n=.009+.014*r.radius,h=(Math.hypot((t-r.x)*i,(e-r.y)*s)-o)/n,l=Math.sin(Math.min(1,r.age/.07)*Math.PI/2)*Math.max(0,1-r.age/1.35)**2;a=Math.max(a,Math.exp(-h*h)*l)}return a}sample(t,e){const i=Math.max(0,Math.min(this.width-1,Math.round(t*(this.width-1)))),s=Math.max(0,Math.min(this.height-1,Math.round(e*(this.height-1))));return Math.max(this.ringSample(t,e),this.echo[s*this.width+i])}step(t){if(!Number.isFinite(t))return;const e=Math.max(0,Math.min(.05,t));this.elapsed+=e;for(const t of this.rings)t.age+=e;if(this.rings=this.rings.filter(t=>t.age<1.35),!this.active)return void this.pixels.fill(0);const i=Math.exp(-5.5*e);let s=0;for(let t=0;t<this.height;t++)for(let e=0;e<this.width;e++){const a=t*this.width+e;this.echo[a]=Math.max(this.ringSample(e/(this.width-1),t/(this.height-1)),this.echo[a]*i),s=Math.max(s,this.echo[a]);const r=Math.round(65535*this.echo[a]),o=4*a;this.pixels[o]=r>>>8,this.pixels[o+1]=255&r}this.echoPeak=s,this.active||(this.echo.fill(0),this.pixels.fill(0))}},A=class{constructor(t,e){this.previous=null,this.peak=0,this.width=t,this.height=e;const i=t*e;this.pixels=new Uint8Array(4*i),this.signal=new Float32Array(i),this.offsetX=new Float32Array(i),this.offsetY=new Float32Array(i),this.driftX=new Float32Array(i),this.driftY=new Float32Array(i),this.u=new Float32Array(i),this.v=new Float32Array(i),this.ink=new Float32Array(i),this.a=new Float32Array(i),this.b=new Float32Array(i),this.c=new Float32Array(i),this.pressure=new Float32Array(i),this.pressureNext=new Float32Array(i),this.divergence=new Float32Array(i),this.curl=new Float32Array(i)}get active(){return this.peak>2e-4}clear(){for(const t 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])t.fill(0);this.previous=null,this.peak=0}leave(){this.previous=null}move(t,e,i,s=performance.now()){if(!Number.isFinite(t+e+i+s))return;t=Math.max(0,Math.min(1,t)),e=Math.max(0,Math.min(1,e)),i=Math.max(.1,Math.min(1,i));const a=this.previous;if(this.previous={x:t,y:e,time:s},!a)return;const r=(t-a.x)*(this.width-1),o=(e-a.y)*(this.height-1),n=Math.hypot(r,o);if(n<.001)return;const h=Math.min(this.width,this.height),l=s>a.time?Math.max(1/240,(s-a.time)/1e3):1/60,c=Math.min(12,n/h/l),m=1-Math.exp(-c/2.2),f=h*(.022+.075*i)*(.65+.95*m),d=Math.min(128,Math.max(1,Math.ceil(n/(.4*f)))),u=n/f*(.32+.22*m)/d,g=r/n,p=o/n,M=-p,x=g,v=n*(2+18*m)/d;for(let i=0;i<d;i++){const s=(i+.5)/d,r=(a.x+(t-a.x)*s)*(this.width-1),o=(a.y+(e-a.y)*s)*(this.height-1),n=Math.max(1,Math.floor(r-3*f)),h=Math.min(this.width-2,Math.ceil(r+3*f)),l=Math.max(1,Math.floor(o-3*f)),c=Math.min(this.height-2,Math.ceil(o+3*f));for(let t=l;t<=c;t++)for(let e=n;e<=h;e++){const i=((e-r)*g+(t-o)*p)/f,s=((e-r)*M+(t-o)*x)/f,a=Math.exp(-i*i*.65-s*s*1.7),n=t*this.width+e;this.ink[n]=1-(1-this.ink[n])*Math.exp(-a*u);const h=1-s*s*.55,l=i*s*.7;this.u[n]=Math.max(-80,Math.min(80,this.u[n]+(g*h+M*l)*a*v)),this.v[n]=Math.max(-80,Math.min(80,this.v[n]+(p*h+x*l)*a*v))}}this.peak=1}read(t,e,i){const s=0|(e=Math.max(.5,Math.min(this.width-1.5,e))),a=0|(i=Math.max(.5,Math.min(this.height-1.5,i))),r=e-s,o=i-a,n=a*this.width+s;return(t[n]*(1-r)+t[n+1]*r)*(1-o)+(t[n+this.width]*(1-r)+t[n+this.width+1]*r)*o}sample(t,e){return this.read(this.signal,t*(this.width-1),e*(this.height-1))}displacement(t,e,i){i[0]=this.read(this.offsetX,t*(this.width-1),e*(this.height-1)),i[1]=this.read(this.offsetY,t*(this.width-1),e*(this.height-1))}step(t){if(!this.active||!Number.isFinite(t))return;let e=Math.max(0,Math.min(.05,t));const i=this.width,s=this.height;for(;e>1e-7;){const t=Math.min(1/60,e);e-=t;const a=Math.exp(-1.9*t),r=Math.exp(-3.2*t);for(let e=1;e<s-1;e++)for(let o=1;o<i-1;o++){const n=e*i+o,h=Math.max(.5,Math.min(i-1.5,o-this.u[n]*t)),l=Math.max(.5,Math.min(s-1.5,e-this.v[n]*t)),c=0|h,m=0|l,f=h-c,d=l-m,u=m*i+c,g=(1-f)*(1-d),p=f*(1-d),M=(1-f)*d,x=f*d;this.a[n]=(this.u[u]*g+this.u[u+1]*p+this.u[u+i]*M+this.u[u+i+1]*x)*a,this.b[n]=(this.v[u]*g+this.v[u+1]*p+this.v[u+i]*M+this.v[u+i+1]*x)*a,this.c[n]=(this.ink[u]*g+this.ink[u+1]*p+this.ink[u+i]*M+this.ink[u+i+1]*x)*r}[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 t=1;t<s-1;t++)for(let e=1;e<i-1;e++){const s=t*i+e;this.curl[s]=.5*(this.v[s+1]-this.v[s-1]-this.u[s+i]+this.u[s-i])}for(let e=1;e<s-1;e++)for(let s=1;s<i-1;s++){const a=e*i+s,r=Math.abs(this.curl[a+1])-Math.abs(this.curl[a-1]),o=Math.abs(this.curl[a+i])-Math.abs(this.curl[a-i]),n=Math.hypot(r,o)+1e-4,h=this.curl[a]*t*10,l=Math.hypot(this.u[a],this.v[a]);this.u[a]+=o/n*h,this.v[a]-=r/n*h;const c=Math.min(1,l/(Math.hypot(this.u[a],this.v[a])+1e-6));this.u[a]*=c,this.v[a]*=c,this.divergence[a]=-.5*(this.u[a+1]-this.u[a-1]+this.v[a+i]-this.v[a-i])}this.pressure.fill(0);for(let t=0;t<4;t++){for(let t=1;t<s-1;t++)for(let e=1;e<i-1;e++){const s=t*i+e;this.pressureNext[s]=.25*(this.divergence[s]+this.pressure[s-1]+this.pressure[s+1]+this.pressure[s-i]+this.pressure[s+i])}[this.pressure,this.pressureNext]=[this.pressureNext,this.pressure]}let o=0;for(let e=1;e<s-1;e++)for(let s=1;s<i-1;s++){const a=e*i+s;this.u[a]=Math.max(-80,Math.min(80,this.u[a]-.5*(this.pressure[a+1]-this.pressure[a-1]))),this.v[a]=Math.max(-80,Math.min(80,this.v[a]-.5*(this.pressure[a+i]-this.pressure[a-i]))),this.driftX[a]+=(3.6*this.u[a]-58*this.offsetX[a]-12*this.driftX[a])*t,this.driftY[a]+=(3.6*this.v[a]-58*this.offsetY[a]-12*this.driftY[a])*t,this.offsetX[a]=Math.max(-2,Math.min(2,this.offsetX[a]+this.driftX[a]*t)),this.offsetY[a]=Math.max(-2,Math.min(2,this.offsetY[a]+this.driftY[a]*t)),this.signal[a]=1-Math.exp(.06*-Math.hypot(this.u[a],this.v[a])-.16*this.ink[a]),o=Math.max(o,this.signal[a])}this.peak=o}if(this.active)for(let t=0;t<this.ink.length;t++){const e=Math.round(65535*Math.min(1,this.signal[t]));this.pixels[4*t]=e>>>8,this.pixels[4*t+1]=255&e,this.pixels[4*t+2]=Math.round(128+63.5*this.offsetX[t]),this.pixels[4*t+3]=Math.round(128+63.5*this.offsetY[t])}else this.clear()}};function F(t,e){const i=Math.max(0,Math.min(1,e/.38));return t+(1-2*t)*(i*i*(3-2*i))}var T=class{constructor(t=1){this.mode="water",this.amount=.55,this.radius=.2,this.lensX=.5,this.lensY=.5,this.lensStrength=0,this.previous=null,this.energy=0,this.pending=!1,this.remainder=0,t=Math.max(.25,Math.min(4,t)),this.columns=Math.round(t>=1?128:128*t),this.rows=Math.round(t>=1?128/t:128),this.xScale=Math.max(1,t),this.yScale=Math.max(1,1/t),this.heights=new Float32Array(this.columns*this.rows),this.velocity=new Float32Array(this.heights.length),this.next=new Float32Array(this.heights.length),this.normals=new Float32Array(2*this.heights.length),this.edgeMask=new Float32Array(this.heights.length);for(let e=0;e<this.rows;e++)for(let i=0;i<this.columns;i++)this.edgeMask[e*this.columns+i]=k(i/(this.columns-1),e/(this.rows-1),t);this.refraction={width:this.columns,height:this.rows,pixels:new Uint8Array(4*this.heights.length),strength:30,mode:"water",focus:[.5,.5,0,.2]},this.waterPixels=this.refraction.pixels,this.trail=new A(this.columns,this.rows),this.contour=new S(this.columns,this.rows),this.afterimage=new E(this.columns,this.rows),this.clear()}get invertsDensity(){return"trail"===this.mode}get densityTrail(){return["trail","contour","dissolve"].includes(this.mode)}get hasRefraction(){return this.active||this.lensStrength>15e-5}get active(){return["dissolve","silk","vortex"].includes(this.mode)?this.afterimage.active:"contour"===this.mode?this.contour.active:"trail"===this.mode?this.trail.active:this.pending||this.energy>15e-5}setMode(t){t!==this.mode&&(this.clear(),this.mode=t,this.refraction.mode=t,"dissolve"!==t&&"silk"!==t&&"vortex"!==t||this.afterimage.setMode(t),this.refraction.pixels="trail"===t?this.trail.pixels:"contour"===t?this.contour.pixels:["dissolve","silk","vortex"].includes(t)?this.afterimage.pixels:this.waterPixels,this.refraction.strength="water"===t?30*this.amount/.55:"silk"===t?28*this.amount:"vortex"===t?38*this.amount:0)}configure(t,e=.55,i=.2,s=!1){this.setMode(t),this.refraction.edgeSafe=s,this.afterimage.edgeSafe=s,this.amount=Number.isFinite(e)?Math.max(0,Math.min(1,e)):.55,this.radius=Number.isFinite(i)?Math.max(.1,Math.min(1,i)):.2,this.refraction.strength="water"===t?30*this.amount/.55:"silk"===t?28*this.amount:"vortex"===t?38*this.amount:0,this.refraction.focus[2]=this.densityTrail?this.amount:this.lensStrength*this.amount,this.refraction.focus[3]=this.radius}move(t,e,i){if("none"===this.mode||0===this.amount)return;if(!Number.isFinite(t+e))return;if(t=Math.max(0,Math.min(1,t)),e=Math.max(0,Math.min(1,e)),["dissolve","silk","vortex"].includes(this.mode))return void this.afterimage.move(t,e,this.radius);if("contour"===this.mode)return void this.contour.move(t,e,this.radius);if("trail"===this.mode)return void this.trail.move(t,e,this.radius,i);if("water"!==this.mode)return!this.previous&&this.lensStrength<.001&&(this.lensX=t,this.lensY=e),this.previous={x:t,y:e},void(this.pending=!0);if(!this.previous)return void(this.previous={x:t,y:e});const s=this.previous;this.previous={x:t,y:e};const a=(t-s.x)*this.xScale,r=(e-s.y)*this.yScale,o=Math.hypot(a,r);if(o<1e-5)return;const n=.035+.1*this.radius,h=3*n,l=Math.min(192,Math.max(1,Math.ceil(o/(.5*n)))),c=95*Math.min(o,1)/l;for(let i=0;i<l;i++){const a=(i+.5)/l,r=s.x+(t-s.x)*a,o=s.y+(e-s.y)*a,m=Math.max(1,Math.floor((r-h/this.xScale)*(this.columns-1))),f=Math.min(this.columns-2,Math.ceil((r+h/this.xScale)*(this.columns-1))),d=Math.max(1,Math.floor((o-h/this.yScale)*(this.rows-1))),u=Math.min(this.rows-2,Math.ceil((o+h/this.yScale)*(this.rows-1)));for(let t=d;t<=u;t++)for(let e=m;e<=f;e++){const i=(e/(this.columns-1)-r)*this.xScale,s=(t/(this.rows-1)-o)*this.yScale,a=Math.exp(-(i*i+s*s)/(n*n))*c,h=t*this.columns+e;this.velocity[h]=Math.max(-12,this.velocity[h]-a)}}this.pending=!0}leave(){this.afterimage.leave(),this.contour.leave(),this.trail.leave(),this.previous=null,"water"!==this.mode&&this.lensStrength&&(this.pending=!0)}clear(){this.trail.clear(),this.contour.clear(),this.afterimage.clear(),this.heights.fill(0),this.velocity.fill(0),this.next.fill(0),this.normals.fill(0),this.refraction.focus[2]=0,this.previous=null,this.lensStrength=0,this.energy=0,this.pending=!1,this.remainder=0;for(let t=0;t<this.waterPixels.length;t+=4)this.waterPixels[t]=this.waterPixels[t+2]=128,this.waterPixels[t+1]=this.waterPixels[t+3]=0}step(t){if(!this.active||!Number.isFinite(t))return;if(["dissolve","silk","vortex"].includes(this.mode))return void this.afterimage.step(t);if("contour"===this.mode)return void this.contour.step(t);if("trail"===this.mode)return void this.trail.step(t);if("water"!==this.mode)return void this.stepLight(Math.max(0,Math.min(.05,t)));this.remainder+=Math.max(0,Math.min(.05,t));const e=1/120,i=Math.exp(-3.8*e),s=.3*Math.min(this.columns,this.rows);for(;this.remainder+1e-8>=e;){this.remainder-=e;let t=0;for(let a=1;a<this.rows-1;a++)for(let r=1;r<this.columns-1;r++){const o=a*this.columns+r,n=this.heights[o],h=this.heights[o-1]+this.heights[o+1]+this.heights[o-this.columns]+this.heights[o+this.columns]-4*n,l=Math.min(r,a,this.columns-1-r,this.rows-1-a),c=l<5?.88+.024*l:1,m=(this.velocity[o]+(h*s*s-8*n)*e)*i*c;this.velocity[o]=m,this.next[o]=(n+m*e)*c,t=Math.max(t,Math.abs(this.next[o]),.1*Math.abs(m))}this.heights.set(this.next),this.energy=t,this.pending=!1}if(!this.active)return void this.clear();const a=.18*Math.min(this.columns,this.rows);for(let t=0;t<this.rows;t++)for(let e=0;e<this.columns;e++){const i=t*this.columns+e,s=(this.heights[t*this.columns+Math.max(0,e-1)]-this.heights[t*this.columns+Math.min(this.columns-1,e+1)])*a,r=(this.heights[Math.max(0,t-1)*this.columns+e]-this.heights[Math.min(this.rows-1,t+1)*this.columns+e])*a,o=Math.tanh(s)*(this.refraction.edgeSafe?this.edgeMask[i]:1),n=Math.tanh(r)*(this.refraction.edgeSafe?this.edgeMask[i]:1);this.normals[2*i]=o,this.normals[2*i+1]=n;const h=Math.round(32767*o+32768),l=Math.round(32767*n+32768);this.refraction.pixels[4*i]=h>>>8,this.refraction.pixels[4*i+1]=255&h,this.refraction.pixels[4*i+2]=l>>>8,this.refraction.pixels[4*i+3]=255&l}}stepLight(t){const e=this.previous,i=1-Math.exp(-30*t),s=1-Math.exp(-12*t);e&&(this.lensX+=(e.x-this.lensX)*i,this.lensY+=(e.y-this.lensY)*i),this.lensStrength+=((e?1:0)-this.lensStrength)*s,this.energy=Math.max(e?Math.abs(e.x-this.lensX)+Math.abs(e.y-this.lensY):0,Math.abs((e?1:0)-this.lensStrength)),this.pending=!1,e||this.active?this.refraction.focus=[this.lensX,this.lensY,this.lensStrength*this.amount,this.radius]:this.clear()}sample(t,e,i){if(["dissolve","silk","vortex"].includes(this.mode))return this.afterimage.sample(t,e,i),i[0]*=this.amount,i[1]*=this.amount,void(i[2]*=this.amount);if("contour"===this.mode)return i[0]=i[1]=0,void(i[2]=this.contour.sample(t,e)*this.amount*3);if("trail"===this.mode)return i[0]=i[1]=0,void(i[2]=this.trail.sample(t,e)*this.amount*3);const s=Math.max(0,Math.min(this.columns-1.001,t*(this.columns-1))),a=Math.max(0,Math.min(this.rows-1.001,e*(this.rows-1))),r=Math.floor(s),o=Math.floor(a),n=s-r,h=a-o,l=2*(o*this.columns+r),c=l+2*this.columns;for(let t=0;t<2;t++)i[t]=.08*((this.normals[l+t]*(1-n)+this.normals[l+2+t]*n)*(1-h)+(this.normals[c+t]*(1-n)+this.normals[c+2+t]*n)*h);i[0]*=this.amount/.55,i[1]*=this.amount/.55,i[2]="light"===this.mode||"scan"===this.mode?function(t,e,i,s){const[a,r,o,n]=i.focus,h=(t-a)*Math.max(1,s)/n,l=(e-r)*Math.max(1,1/s)/n;return"light"===i.mode?Math.exp(-3*(h*h+l*l))*o:"scan"===i.mode?(1.3*Math.exp(-h*h*110)-.3*Math.exp(-h*h*12))*Math.exp(-l*l*1.8)*o:0}(t,e,this.refraction,this.xScale/this.yScale):0}};function I(t){return"videoWidth"in t?[t.videoWidth,t.videoHeight]:"naturalWidth"in t?[t.naturalWidth,t.naturalHeight]:[t.width,t.height]}var R=(t=!1)=>{const e=document.createElement("canvas"),i=e.getContext("2d",{willReadFrequently:t});if(!i)throw new Error("Canvas 2D is unavailable.");return{canvas:e,ctx:i}},P=(t,e,i)=>{t.width===e&&t.height===i||(t.width=e,t.height=i)},C={blocks:" ░▒▓█",braille:" ⠁⠃⠇⡇⣇⣧⣷⣿",lines:" -═╪╬",cross:" ·+xX#",diagonal:" /╱╳",diamond:" ·◇◈◆",mixed:" .:+/◇#@"};function L(t,e={},i={}){const a=t.getContext("2d");if(!a)throw new Error("Canvas is already owned by another renderer.");const r=R(),o=R(!0),n=R(),h=R(),c=R(),m=R(),d=R(),u=R(),p=R();let M,x=l(e),k=0,E="",S=new Uint8ClampedArray(0),A=0,L=0,X=0,D=null,N="",U=new T,B=0;const Y=[0,0,0],O=Math.max(64,Math.min(4096,Number.isFinite(i.maxDimension)?i.maxDimension:960)),_=Math.max(256,Math.min(16e4,Number.isFinite(i.maxCells)?i.maxCells:12e3));let z=_;const W=Math.max(.1,Math.min(8,i.pixelRatio??1));return{canvas:t,render:function(e,i=0,l=960,R=540){if(Number.isFinite(i)||(i=0),!Number.isFinite(l)||!Number.isFinite(R)||l<1||R<1)throw new Error("Render dimensions must be positive finite numbers.");const[_,G]=I(e);if(!_||!G)return;const q=Math.min(1,O/Math.max(l,R)),$=Math.max(2,Math.round(l*q)),j=Math.max(2,Math.round(R*q));P(t,$,j),P(r.canvas,$,j),P(n.canvas,$,j),P(h.canvas,$,j),P(c.canvas,$,j),B!==$/j&&(B=$/j,U=new T(B)),U.configure(x.hover.effect,x.hover.strength,x.hover.radius,x.hover.edgeSafe),U.step(Math.max(0,Math.min(.05,i-X))),X=i;const V="currentTime"in e?e.getVideoPlaybackQuality?.().totalVideoFrames??e.currentTime:0,H=[k,$,j,V].join(":"),J="dither"===x.style,Q=g($,j,x,z,W),K=Q.cell,Z=Q.rowHeight,tt=Q.columns,et=Q.rows;if(E!==H||D!==e||A!==tt||L!==et){D=e,E=H,A=tt,L=et,r.ctx.clearRect(0,0,$,j),r.ctx.save();const t=f(_,G,$,j,x.crop);r.ctx.translate(t.x+t.width/2,t.y+t.height/2),r.ctx.rotate(x.crop.rotation*Math.PI/180),r.ctx.drawImage(e,-_*t.scale/2,-G*t.scale/2,_*t.scale,G*t.scale),r.ctx.restore(),P(o.canvas,A,L),o.ctx.clearRect(0,0,A,L),o.ctx.drawImage(r.canvas,0,0,A,L),S=o.ctx.getImageData(0,0,A,L).data;const i=x.color;for(let t=0;t<S.length;t+=4){const e=.299*S[t]+.587*S[t+1]+.114*S[t+2];for(let s=0;s<3;s++){const a=e+(S[t+s]-e)*i.saturation;S[t+s]=((a*(1-i.grayscale)+e*i.grayscale)/255-.5)*i.contrast*255+127.5+255*i.brightness}}}n.ctx.clearRect(0,0,$,j),n.ctx.globalAlpha=1,n.ctx.globalCompositeOperation="source-over";const it=i*x.motion.speed;if(J){const t=new Uint8ClampedArray(S),e=x.motion.type;if(U.active||"none"!==e)for(let i=0;i<L;i++)for(let s=0;s<A;s++){const a=s/A,r=i/L;let o=s,n=i,h=0,l=1,c=1;if(U.active&&(U.sample(a,r,Y),o-=Y[0]*A,n-=Y[1]*L,h=Y[2]/3),"wave"===e&&(n+=Math.sin(8*a+2*it+4*r)*L*.015),"ripple"===e){const t=a-.5,e=r-.5,i=.03*Math.sin(30*Math.hypot(t,e)-3*it);o+=t*i*A,n+=e*i*L}"breathe"===e&&(l=.92+.08*Math.sin(1.5*it+3*a)),"reveal"===e&&(c=Math.max(0,Math.min(1,4*(.7*Math.sin(.7*it)+.7-a)))),"glitch"===e&&v(i,Math.floor(6*it))>.93&&(o+=8*Math.sin(5*it)),"vapor"===e&&(n+=Math.sin(6*a+it)*L*.025),"fire"===e&&(n+=Math.sin(7*a+3*it+8*r)*L*.01,l=.8+.2*Math.sin(12*r-4*it)),"hologram"===e&&(c=.72+.28*Math.sin(.65*i+5*it)),"chrome"===e&&(l=.5+Math.abs(Math.sin(8*r+it)));const m=4*(i*A+s),f=4*(Math.max(0,Math.min(L-1,Math.round(n)))*A+Math.max(0,Math.min(A-1,Math.round(o))));for(let i=0;i<3;i++){const s=S[f+i]/255;let r=(["trail","contour"].includes(x.hover.effect)?F(s,h):"dissolve"===x.hover.effect?s*Math.max(0,1+h):s)*l;"rainbow"===e&&(r*=.65+.35*Math.sin(2*it+5*a+2.094*i)),"hologram"===e&&(r*=0===i?.4:1),"fire"===e&&(r*=0===i?1.3:1===i?.7:.3),t[m+i]=255*r}t[m+3]=S[f+3]*c}!function(t,e,i,a,r=0){const{algorithm:o,amount:n,threshold:h}=a,l=("custom"===a.palette?a.colors:s[a.palette]??s.mono).map(y),c=b[o],m=c?new Float32Array(3*e*3):null,f="drift"===a.motion?Math.floor(r*a.speed*3):0,d="shimmer"===a.motion?.15*Math.sin(r*a.speed*2):0;for(let s=0;s<i;s++)for(let a=0;a<e;a++){const r=4*(s*e+a),u=3*(s%3*e+a);if(0===t[r+3]){m&&(m[u]=m[u+1]=m[u+2]=0);continue}let g=0;o.startsWith("bayer")?g=w(a+f&15,s+f&15,Number(o.slice(5))):"noise"===o?g=v(a,s)-.5:"lines"===o?g=(s+f)%4/3-.5:"halftone"===o&&(g=Math.hypot(a%6-2.5,s%6-2.5)/3.54-.5);const p=128*(g*n+d+(.5-h)),M=t[r]+p+(m?.[u]??0),x=t[r+1]+p+(m?.[u+1]??0),b=t[r+2]+p+(m?.[u+2]??0);let y=0,k=0,E=0;if(l.length){let t=1/0;for(const e of l){const i=(M-e[0])**2*.299+(x-e[1])**2*.587+(b-e[2])**2*.114;i<t&&(t=i,[y,k,E]=e)}}else y=51*Math.round(M/51),k=51*Math.round(x/51),E=51*Math.round(b/51);if(t[r]=y,t[r+1]=k,t[r+2]=E,m&&c){m[u]=m[u+1]=m[u+2]=0;for(const[t,r,o]of c){const h=a+t;if(h<0||h>=e||s+r>=i)continue;const l=3*((s+r)%3*e+h);m[l]+=(M-y)*o*n,m[l+1]+=(x-k)*o*n,m[l+2]+=(b-E)*o*n}}}}(t,A,L,x.dither,i),o.ctx.putImageData(new ImageData(t,A,L),0,0),n.ctx.imageSmoothingEnabled=!1,n.ctx.drawImage(o.canvas,0,0,$,j)}else{const t=Array.from(C[x.style]??x.charset),e=n.ctx,i="ascii"===x.style||!!C[x.style],s=Math.max(3,Math.round(.92*Z)),a=Math.ceil(K+4),r=Math.ceil(Z+4),o=[t.join(""),s,a,r,x.ink,x.colorMode].join(":");i&&o!==N&&(N=o,P(d.canvas,a*t.length,r),d.ctx.clearRect(0,0,d.canvas.width,r),d.ctx.font=`${s}px monospace`,d.ctx.textBaseline="middle",d.ctx.textAlign="center",d.ctx.fillStyle="accent"===x.colorMode?x.ink:"#ffffff",t.forEach((t,e)=>d.ctx.fillText(t,e*a+a/2,r/2))),e.font=`${s}px monospace`,e.textBaseline="middle",e.textAlign="center";for(let s=0;s<L;s++)for(let o=0;o<A;o++){let n=o,h=s,l=0;U.active&&(U.sample(o/A,s/L,Y),n=Math.max(0,Math.min(A-1,o-Y[0]*A)),h=Math.max(0,Math.min(L-1,s-Y[1]*L)),l=Y[2]/3);const c=4*(Math.floor(h)*A+Math.floor(n));if(!S[c+3])continue;const m=S[c],f=S[c+1],u=S[c+2],g=(.299*m+.587*f+.114*u)/255;let p=g;["trail","contour"].includes(x.hover.effect)&&l?p=F(p,l):"dissolve"===x.hover.effect&&(p*=Math.max(0,1+l));const M=x.motion.type;let w=o*K,b=s*Z,y=1;if("breathe"===M&&(p*=.92+.08*Math.sin(1.5*it+.03*o)),"wave"===M&&(b+=Math.sin(.12*o+2*it+.08*s)*Z*.4),"ripple"===M){const t=o/A-.5,e=s/L-.5,i=Math.hypot(t,e),a=Math.sin(30*i-3*it)*K*.65;w+=t*a,b+=e*a}"fire"===M&&(b-=Math.sin(.16*o+3*it+.09*s)*Z*.35,p*=.85+.15*Math.sin(.3*s-4*it)),"hologram"===M&&(y=.72+.28*Math.sin(.65*s+5*it)),"reveal"===M&&(y=Math.max(0,Math.min(1,4*(.7*Math.sin(.7*it)+.7-o/A)))),"glitch"===M&&v(s,Math.floor(6*it))>.93&&(w+=Math.sin(5*it)*K*3),"vapor"===M&&(b+=Math.sin(.04*o+it)*Z),i||"accent"!==x.colorMode||(y*=p),e.globalAlpha=y;const k=255*(p-g);let E="source"===x.colorMode?`rgb(${m+k},${f+k},${u+k})`:"gray"===x.colorMode?`rgb(${Math.round(255*p)},${Math.round(255*p)},${Math.round(255*p)})`:x.ink;if("rainbow"===M&&(E=`hsl(${(o/A*180+40*it)%360} 70% 65%)`),"fire"===M&&(E=`hsl(${15+40*p} 90% ${30+45*p}%)`),"hologram"===M&&(E=`hsl(185 65% ${40+40*p}%)`),"chrome"===M&&(E=`hsl(210 12% ${25+70*Math.abs(Math.sin(.2*s+it))}%)`),e.fillStyle=E,i){const i=Math.max(0,Math.min(t.length-1,Math.floor(p*(t.length-1))));"accent"!==x.colorMode||["rainbow","fire","hologram","chrome"].includes(M)?e.fillText(t[i],w+K/2,b+Z/2):e.drawImage(d.canvas,i*a,0,a,r,w+(K-a)/2,b+(Z-r)/2,a,r)}else if("dots"===x.style)e.beginPath(),e.arc(w+K/2,b+Z/2,.48*K*Math.sqrt(p),0,2*Math.PI),e.fill();else if("voxel"===x.style){const t=w+K/2,i=b+Z/2;e.beginPath(),e.moveTo(t,b),e.lineTo(w+K,b+.25*Z),e.lineTo(t,i),e.lineTo(w,b+.25*Z),e.closePath(),e.fill(),e.globalAlpha=.72*y,e.beginPath(),e.moveTo(w,b+.25*Z),e.lineTo(t,i),e.lineTo(t,b+Z),e.lineTo(w,b+.75*Z),e.closePath(),e.fill(),e.globalAlpha=.42*y,e.beginPath(),e.moveTo(t,i),e.lineTo(w+K,b+.25*Z),e.lineTo(w+K,b+.75*Z),e.lineTo(t,b+Z),e.closePath(),e.fill()}else{const t="pixel"===x.style?0:Math.max(.5,.06*K);e.fillRect(w,b,K-t,Z-t),"lego"===x.style&&(e.fillStyle="rgba(255,255,255,.2)",e.beginPath(),e.arc(w+K/2,b+Z/2,.28*K,0,2*Math.PI),e.fill(),e.strokeStyle="rgba(0,0,0,.25)",e.stroke()),"disco"===x.style&&(e.fillStyle=`rgba(255,255,255,${.1+.25*v(o,s)})`,e.fillRect(w,b,K-t,.35*Z),e.fillStyle="rgba(0,0,0,.25)",e.fillRect(w,b+.65*Z,K-t,.35*Z-t))}}}n.ctx.globalAlpha=1,(x.color.amount||x.lights.length)&&(P(u.canvas,$,j),u.ctx.clearRect(0,0,$,j),u.ctx.drawImage(n.canvas,0,0)),x.color.amount&&(n.ctx.save(),n.ctx.globalCompositeOperation=x.color.blend,n.ctx.globalAlpha=x.color.amount,n.ctx.fillStyle=x.color.tint,n.ctx.fillRect(0,0,$,j),n.ctx.restore());for(const t of x.lights){const e=t.radius*Math.max($,j),i=n.ctx.createRadialGradient(t.x*$,t.y*j,0,t.x*$,t.y*j,e);i.addColorStop(0,t.color),i.addColorStop(1,"transparent"),n.ctx.save(),n.ctx.globalCompositeOperation="screen",n.ctx.globalAlpha=t.intensity,n.ctx.fillStyle=i,n.ctx.fillRect(0,0,$,j),n.ctx.restore()}if((x.color.amount||x.lights.length)&&(n.ctx.globalCompositeOperation="destination-in",n.ctx.drawImage(u.canvas,0,0),n.ctx.globalCompositeOperation="source-over"),x.mask.enabled&&x.mask.shapes.length){const t=c.ctx;t.clearRect(0,0,$,j),t.fillStyle="#fff",t.strokeStyle="#fff",t.lineCap="round",t.lineJoin="round";for(const e of x.mask.shapes){if(t.beginPath(),"ellipse"===e.kind)t.ellipse((e.x+e.width/2)*$,(e.y+e.height/2)*j,e.width*$/2,e.height*j/2,0,0,2*Math.PI);else{if("rectangle"!==e.kind){if(t.lineWidth=(e.size??.05)*$,1===e.points?.length){t.arc(e.points[0][0]*$,e.points[0][1]*j,t.lineWidth/2,0,2*Math.PI),t.fill();continue}e.points?.forEach(([e,i],s)=>s?t.lineTo(e*$,i*j):t.moveTo(e*$,i*j)),t.stroke();continue}t.rect(e.x*$,e.y*j,e.width*$,e.height*j)}t.fill()}n.ctx.globalCompositeOperation=x.mask.invert?"destination-out":"destination-in",n.ctx.drawImage(c.canvas,0,0),n.ctx.globalCompositeOperation="source-over"}const st=h.ctx;st.clearRect(0,0,$,j),st.globalAlpha=x.backdrop.opacity;const at=x.backdrop;if("solid"===at.mode&&(st.fillStyle=at.color,st.fillRect(0,0,$,j)),"gradient"===at.mode){const t=st.createLinearGradient(0,0,$,j);t.addColorStop(0,at.color),t.addColorStop(1,at.color2),st.fillStyle=t,st.fillRect(0,0,$,j)}if("source"===at.mode&&st.drawImage(r.canvas,0,0),"blurred"===at.mode){const t=Math.max(1,at.blur);P(m.canvas,Math.max(2,Math.round($/t)),Math.max(2,Math.round(j/t))),m.ctx.drawImage(r.canvas,0,0,m.canvas.width,m.canvas.height),st.imageSmoothingEnabled=!0,st.drawImage(m.canvas,0,0,$,j)}st.globalAlpha=1,x.effects.characterBloom>0&&(P(p.canvas,Math.max(2,Math.round($/3)),Math.max(2,Math.round(j/3))),p.ctx.clearRect(0,0,p.canvas.width,p.canvas.height),p.ctx.drawImage(n.canvas,0,0,p.canvas.width,p.canvas.height),st.save(),st.globalAlpha=.8*x.effects.characterBloom,st.globalCompositeOperation="screen",st.filter=`blur(${1+4*x.effects.characterBloom}px)`,st.drawImage(p.canvas,0,0,$,j),st.restore()),st.drawImage(n.canvas,0,0);const rt=Object.entries(x.effects).some(([t,e])=>!["angle","focus","blurType","characterBloom"].includes(t)&&"number"==typeof e&&e>0);a.clearRect(0,0,$,j),rt?(void 0===M&&(M=function(){const t=document.createElement("canvas"),e=t.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,antialias:!1,preserveDrawingBuffer:!0});if(!e)return null;const i=[],s=(t,s)=>{const a=e.createShader(t);if(i.push(a),e.shaderSource(a,s),e.compileShader(a),!e.getShaderParameter(a,e.COMPILE_STATUS))throw new Error(e.getShaderInfoLog(a)||"Finish shader failed");return a},a=e.createProgram();if(e.attachShader(a,s(e.VERTEX_SHADER,"attribute vec2 p;varying vec2 uv;void main(){uv=(p+1.)*.5;gl_Position=vec4(p,0.,1.);}")),e.attachShader(a,s(e.FRAGMENT_SHADER,"precision mediump float;varying vec2 uv;uniform sampler2D src;uniform vec2 size;uniform float t,bloom,grain,dust,scanlines,crt,prism,vignette,glitch,pixelate,blur,blurMode,angle,focus,halftone;\n float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}\n vec4 sampleAt(vec2 p){if(min(min(p.x,p.y),min(1.-p.x,1.-p.y))<0.)return vec4(0.);return texture2D(src,vec2(p.x,1.-p.y));}\n void main(){vec2 q=uv,c=q-.5;q=c*(1.+dot(c,c)*crt*.25)+.5;\n if(glitch>0.)q.x+=(hash(vec2(floor(q.y*35.),floor(t*5.)))-.5)*.07*glitch*step(.82,hash(vec2(floor(q.y*35.),floor(t*5.)+3.)));\n if(pixelate>0.){vec2 grid=size/(1.+pixelate*20.);q=(floor(q*grid)+.5)/grid;}\n vec4 base=sampleAt(q);float edge=smoothstep(.12,.65,length(c));\n vec2 shift=vec2(prism*3.*edge/size.x,prism*edge/size.y);\n if(prism>0.)base.rgb=vec3(sampleAt(q+shift).r,base.g,sampleAt(q-shift).b);\n vec2 dir=vec2(cos(angle),sin(angle))/size;float amount=blur;\n if(blurMode>1.5&&blurMode<2.5){dir=normalize(c+vec2(.0001))/size;amount*=length(c)*2.;}\n if(blurMode>2.5)amount*=smoothstep(.05,.5,abs(q.y-focus));\n vec4 blurred=base;\n if(amount>0.){blurred=base*.2;for(int i=1;i<=4;i++){float f=float(i)*amount*.35;vec2 off=dir*f;if(blurMode<.5)off=vec2(cos(float(i)*1.57),sin(float(i)*1.57))*amount/size;blurred+=sampleAt(q+off)*.1+sampleAt(q-off)*.1;}}\n vec3 light=vec3(0.);if(bloom>0.)for(int i=0;i<4;i++){float a=float(i)*1.5708;vec3 s=sampleAt(q+vec2(cos(a),sin(a))*6./size).rgb;light+=max(vec3(0.),s-.35)*.25;}\n vec3 col=blurred.rgb+light*bloom;col*=1.-scanlines*.4*(.5+.5*cos(q.y*size.y*3.14159));\n col*=1.-vignette*smoothstep(.15,.72,length(c));\n col+=(hash(floor(q*size)+floor(t*12.))-.5)*grain*.2;\n if(dust>0.)col+=step(1.-dust*.002,hash(floor(q*size*.25)+floor(t*2.)))*.4;\n if(halftone>0.)col*=mix(1.,smoothstep(.1,.65,length(fract(q*size/6.)-.5)),halftone);\n gl_FragColor=vec4(clamp(col,0.,1.),blurred.a);}")),e.linkProgram(a),!e.getProgramParameter(a,e.LINK_STATUS))throw new Error("Finish link failed");e.useProgram(a);const r=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,r),e.bufferData(e.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),e.STATIC_DRAW);const o=e.getAttribLocation(a,"p");e.enableVertexAttribArray(o),e.vertexAttribPointer(o,2,e.FLOAT,!1,0,0);const n=e.createTexture();e.bindTexture(e.TEXTURE_2D,n),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),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);const h=["t","bloom","grain","dust","scanlines","crt","prism","vignette","glitch","pixelate","blur","blurMode","angle","focus","halftone"],l=Object.fromEntries(h.map(t=>[t,e.getUniformLocation(a,t)])),c=e.getUniformLocation(a,"size");return{canvas:t,render(i,s,r,o=1){t.width===i.width&&t.height===i.height||(t.width=i.width,t.height=i.height,e.viewport(0,0,t.width,t.height)),e.useProgram(a),e.bindTexture(e.TEXTURE_2D,n),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,i),e.uniform2f(c,t.width/o,t.height/o);for(const t of h)e.uniform1f(l[t],"t"===t?r:"blurMode"===t?["gaussian","directional","radial","progressive"].indexOf(s.blurType):"angle"===t?s.angle*Math.PI/180:s[t]??0);return e.drawArrays(e.TRIANGLE_STRIP,0,4),t},destroy(){e.deleteTexture(n),e.deleteBuffer(r),e.deleteProgram(a),i.forEach(t=>e.deleteShader(t)),t.width=t.height=1,e.getExtension("WEBGL_lose_context")?.loseContext()}}}()),M?a.drawImage(M.render(h.canvas,x.effects,i,W),0,0):a.drawImage(h.canvas,0,0),t.dataset.studioFinish=M?"gpu":"unavailable"):(a.drawImage(h.canvas,0,0),t.dataset.studioFinish="none")},setBudget(t){z=Math.max(1500,Math.min(_,Math.round(t)))},get maxCells(){return z},configure(t){x=l(t),k++},pointer:(t,e,i)=>{U.configure(x.hover.effect,x.hover.strength,x.hover.radius,x.hover.edgeSafe),U.move(t,e,i)},leave(){U.leave()},get active(){return U.active},get settings(){return l(x)},get capabilities(){return{gpuFinish:null!==M}},invalidate(){E=""},destroy(){M?.destroy();for(const t of[r,o,n,h,c,m,d,u,p])t.canvas.width=t.canvas.height=1;D=null,S=new Uint8ClampedArray(0)}}}function X(t,e,i){return new Promise((s,a)=>{const r=()=>{l(),s()},o=()=>{l(),a(new Error("Unable to load this media. Check its format and cross-origin permissions."))},n=()=>{l(),a(new DOMException("Cancelled","AbortError"))},h=setTimeout(o,2e4),l=()=>{clearTimeout(h),t.removeEventListener(e,r),t.removeEventListener("error",o),i?.removeEventListener("abort",n)};t.addEventListener(e,r,{once:!0}),t.addEventListener("error",o,{once:!0}),i?.addEventListener("abort",n,{once:!0}),i?.aborted&&n()})}async function D(t,e){if("string"==typeof t&&t.startsWith("blob:")){const i=await fetch(t,{signal:e}),s=await i.blob();return D(new File([s],"Imported media",{type:s.type}),e)}const i="string"!=typeof t,s=i?t.name:t;if(i?"image/gif"===t.type:/\.gif(?:[?#]|$)/i.test(s)){const s=await import("gifuct-js"),{parseGIF:a,decompressFrames:r}="function"==typeof s.parseGIF?s:s.default,o=i?await t.arrayBuffer():await fetch(t,{signal:e}).then(t=>{if(!t.ok)throw new Error("GIF download failed.");return t.arrayBuffer()});if(e?.aborted)throw new DOMException("Cancelled","AbortError");const n=a(o),h=n.lsd.width,l=n.lsd.height;if(h*l>4e6)throw new Error("GIF is too large. Use a smaller GIF or an MP4.");const c=n.frames.filter(t=>"image"in t).length;if(!c||c*h*l*4>128e6)throw new Error("GIF exceeds the decoded memory budget. Use MP4 for long animations.");const m=r(n,!0);if(m.length*h*l*4>128e6)throw new Error("GIF exceeds the 128 MB decoded budget. Use MP4 for long animations.");const f=document.createElement("canvas");f.width=h,f.height=l;const d=f.getContext("2d"),u=document.createElement("canvas"),g=u.getContext("2d"),p=m.reduce((t,e)=>t+Math.max(20,e.delay),0)/1e3;let M=-1,x=null;const v=t=>{const e=(t%p+p)%p*1e3;let i=0,s=0;for(;s<m.length-1&&(i+=Math.max(20,m[s].delay),!(e<i));s++);s<M&&(d.clearRect(0,0,h,l),M=-1,x=null);for(let t=M+1;t<=s;t++){const e=m[t-1];2===e?.disposalType&&d.clearRect(e.dims.left,e.dims.top,e.dims.width,e.dims.height),3===e?.disposalType&&x&&d.putImageData(x,0,0);const i=m[t];x=3===i.disposalType?d.getImageData(0,0,h,l):null,u.width=i.dims.width,u.height=i.dims.height,g.putImageData(new ImageData(new Uint8ClampedArray(i.patch),u.width,u.height),0,0),d.drawImage(u,i.dims.left,i.dims.top)}return M=s,f};return v(0),{source:f,width:h,height:l,duration:p,animated:!0,seek:async()=>{},frame:v,destroy(){f.width=u.width=1,m.length=0,x=null}}}const a=i?t.type.startsWith("video/"):/\.(mp4|webm|mov)(?:[?#]|$)/i.test(s),r=i?URL.createObjectURL(t):t,o=a?document.createElement("video"):new Image;o.crossOrigin="anonymous",o instanceof HTMLVideoElement&&(o.muted=!0,o.playsInline=!0,o.preload="auto");const n=()=>{o instanceof HTMLVideoElement?(o.pause(),o.removeAttribute("src"),o.load()):o.src="",i&&URL.revokeObjectURL(r)};try{const t=X(o,a?"loadeddata":"load",e);o.src=r,await t;const i=o instanceof HTMLVideoElement?o.videoWidth:o.naturalWidth,s=o instanceof HTMLVideoElement?o.videoHeight:o.naturalHeight;return{source:o,width:i,height:s,duration:o instanceof HTMLVideoElement?o.duration:0,animated:a,async seek(t,e){if(!(o instanceof HTMLVideoElement))return;if(!Number.isFinite(o.duration)||o.duration<=0)throw new Error("Video duration is unavailable.");const i=Math.max(0,Math.min(o.duration-.001,t%o.duration));if(Math.abs(o.currentTime-i)<.001&&o.readyState>=2)return;const s=X(o,"seeked",e);o.currentTime=i,await s},frame:()=>o,destroy:n}}catch(t){throw n(),t}}var N=t=>{if(t?.aborted)throw new DOMException("Export cancelled","AbortError")};async function U(t,e,i){const{format:s,signal:a}=i,r=Math.round(i.width),o=Math.round(i.height);if(!Number.isFinite(r)||!Number.isFinite(o)||r<2||o<2||r>4096||o>4096||r*o>16777216)throw new Error("Choose export dimensions between 2 and 4096 pixels.");if(!["png","jpeg","mp4","webm","gif"].includes(s))throw new Error("Unknown export format.");if(void 0!==i.fps&&!Number.isFinite(i.fps))throw new Error("Frames per second must be finite.");const n=Math.max(1,Math.min(60,Math.round(i.fps??24))),h=i.duration??5;if(!Number.isFinite(h)||h<=0||h>60)throw new Error("Choose a duration from 0 to 60 seconds.");const c="png"===s||"jpeg"===s,m=i.time??0;if(!Number.isFinite(m)||m<0)throw new Error("Image time must be a finite non-negative number.");if(!c&&r*o>8294400)throw new Error("Video exports support up to 3840 × 2160 pixels.");if("gif"===s&&(r*o>921600||h*n>600))throw new Error("GIF export supports up to 1280 × 720 and 600 frames. Use MP4 for larger exports.");if(void 0!==i.referenceWidth&&(!Number.isFinite(i.referenceWidth)||i.referenceWidth<1))throw new Error("Reference width must be a positive number.");if("gif"===s&&n>30)throw new Error("GIF exports support up to 30 fps. Choose MP4 or WebM for higher frame rates.");const f=document.createElement("canvas"),d=L(f,l(e),{maxDimension:4096,maxCells:i.maxCells??12e3,pixelRatio:r/(i.referenceWidth??Math.min(r,960))});let u;try{if(N(a),i.onProgress?.(0),c){if(d.render(await t.frame(m,a),m,r,o),"unavailable"===f.dataset.studioFinish)throw new Error("Optical effects need WebGL. Disable these effects or export in a supported browser.");N(a);const e=await new Promise((t,e)=>f.toBlob(i=>i?t(i):e(new Error("Image export failed.")),"png"===s?"image/png":"image/jpeg",i.quality??.92));return i.onProgress?.(1),e}const e=Math.ceil(h*n);if("gif"===s){const s=await import("gifenc"),{GIFEncoder:l,quantize:c,applyPalette:m}="function"==typeof s.GIFEncoder?s:s.default,u=l(),g=f.getContext("2d");for(let s=0;s<e;s++){N(a);const l=s/n;if(d.invalidate(),d.render(await t.frame(l,a),l,r,o),"unavailable"===f.dataset.studioFinish)throw new Error("Optical effects need WebGL. Disable these effects or export in a supported browser.");const p=g.getImageData(0,0,r,o).data,M=c(p,256),x=m(p,M);u.writeFrame(x,r,o,{palette:M,delay:10*(Math.round(100*Math.min((s+1)/n,h))-Math.round(100*s/n)),repeat:0}),i.onProgress?.((s+1)/e*.98),await new Promise(t=>setTimeout(t,0))}return u.finish(),i.onProgress?.(1),new Blob([new Uint8Array(u.bytes())],{type:"image/gif"})}const{Output:l,Mp4OutputFormat:g,WebMOutputFormat:p,BufferTarget:M,CanvasSource:x,canEncodeVideo:v}=await import("mediabunny"),w="mp4"===s?"avc":"vp9";if(!await v(w,{width:r,height:o}))throw new Error(`${s.toUpperCase()} encoding is unavailable in this browser. Try another format or a current browser with WebCodecs.`);const b=new l({format:"mp4"===s?new g({fastStart:"in-memory"}):new p,target:new M});f.width=r,f.height=o,u=()=>b.cancel();const y=new x(f,{codec:w,bitrate:Math.max(5e5,Math.round(r*o*n*.15))});b.addVideoTrack(y,{frameRate:n}),f.width=r,f.height=o,await b.start();for(let s=0;s<e;s++){N(a);const l=s/n;if(d.invalidate(),d.render(await t.frame(l,a),l,r,o),"unavailable"===f.dataset.studioFinish)throw new Error("Optical effects need WebGL. Disable these effects or export in a supported browser.");await y.add(l,Math.min(1/n,h-l)),i.onProgress?.((s+1)/e*.98),s%4==0&&await new Promise(t=>setTimeout(t,0))}return y.close(),N(a),await b.finalize(),u=void 0,i.onProgress?.(1),new Blob([b.target.buffer],{type:"mp4"===s?"video/mp4":"video/webm"})}catch(t){throw await(u?.().catch(()=>{})),t}finally{d.destroy(),f.width=f.height=1}}async function B(t,e,i={}){const s=await D(e,i.signal);try{return Y(t,s,i)}catch(t){throw s.destroy(),t}}function Y(t,e,i={}){let s=l(i.settings),a=i.width??e.width,r=i.height??e.height;const o=L(t,s,i);let n=0,h=!1,c=!0,m=!1,f=!0,g=0,p=0,M=0,x=-1,v=0,w=0,b=0;const y=matchMedia("(prefers-reduced-motion: reduce)"),k=e.source instanceof HTMLVideoElement?e.source:null,E=()=>{h||n||!f||document.hidden||(n=requestAnimationFrame(F))},S=()=>!m&&!y.matches&&f&&!document.hidden,A=()=>{k&&(k.loop=!0,S()?k.play().catch(()=>{m=!0,c=!0,E()}):k.pause()),p=0,c=!0,E()};function F(t){if(n=0,h||!f||document.hidden)return;const l=S();l&&(g+=p?Math.min(.1,(t-p)/1e3):0),p=t;const u=l&&(e.animated||"none"!==s.motion.type||"none"!==s.dither.motion||s.effects.grain>0||s.effects.dust>0||s.effects.glitch>0),y=k?.getVideoPlaybackQuality?.().totalVideoFrames??-1,A="none"!==s.motion.type||"none"!==s.dither.motion||s.effects.grain>0||s.effects.dust>0||s.effects.glitch>0,F=!k||y<0||y!==x;if(c||o.active||u&&(F||A)&&t-M>=1e3/Math.max(1,Math.min(60,i.fps??60))-.5){const n=performance.now();try{e.animated&&!k&&o.invalidate();const[t,h]=d(a,r,s);o.render(e.frame(k?.currentTime??g),g,t,h);const l=performance.now()-n;i.onFrame?.(k?.currentTime??g,l),w=w?.9*w+.1*l:l,++v>20&&!1!==i.adaptive&&(b=w>13?b+1:0,b>=12&&o.maxCells>3e3&&(o.setBudget(Math.max(3e3,.8*o.maxCells)),i.onQualityChange?.(o.maxCells),b=0,w=0))}catch(t){m=!0,i.onError?.(t instanceof Error?t:new Error(String(t)))}c=!1,M=t,x=y}l&&(u||o.active)&&E()}const T=e=>{if(!S())return;const i=t.getBoundingClientRect();o.pointer((e.clientX-i.left)/i.width,(e.clientY-i.top)/i.height,e.timeStamp),E()},I=()=>{o.leave(),E()},R=new IntersectionObserver(([t])=>{f=t.isIntersecting,A()});R.observe(t),t.addEventListener("pointermove",T),t.addEventListener("pointerleave",I),t.addEventListener("pointercancel",I),document.addEventListener("visibilitychange",A),y.addEventListener("change",A);const P=()=>{h||(h=!0,cancelAnimationFrame(n),R.disconnect(),t.removeEventListener("pointermove",T),t.removeEventListener("pointerleave",I),t.removeEventListener("pointercancel",I),document.removeEventListener("visibilitychange",A),y.removeEventListener("change",A),i.signal?.removeEventListener("abort",P),o.destroy(),e.destroy())};if(i.signal?.addEventListener("abort",P,{once:!0}),i.signal?.aborted)throw P(),new DOMException("Cancelled","AbortError");return A(),{canvas:t,media:e,update(t){s=u(s,t),o.configure(s),c=!0,E()},resize(t,e){a=Math.max(2,t),r=Math.max(2,e),c=!0,E()},pause(t=!0){m=t,A()},async seek(t){g=Math.max(0,t),await e.seek(g),o.invalidate(),c=!0,E()},redraw(){o.invalidate(),c=!0,E()},get time(){return k?.currentTime??g},get paused(){return m||y.matches},get maxCells(){return o.maxCells},get capabilities(){return o.capabilities},destroy:P}}var O={Standard:()=>import("figlet/fonts/Standard"),Slant:()=>import("figlet/fonts/Slant"),Small:()=>import("figlet/fonts/Small"),Big:()=>import("figlet/fonts/Big"),Banner:()=>import("figlet/fonts/Banner"),Block:()=>import("figlet/fonts/Block"),Bubble:()=>import("figlet/fonts/Bubble"),Digital:()=>import("figlet/fonts/Digital"),Doom:()=>import("figlet/fonts/Doom"),Lean:()=>import("figlet/fonts/Lean"),Mini:()=>import("figlet/fonts/Mini"),Script:()=>import("figlet/fonts/Script"),Shadow:()=>import("figlet/fonts/Shadow"),Speed:()=>import("figlet/fonts/Speed"),Starwars:()=>import("figlet/fonts/Star Wars"),Stop:()=>import("figlet/fonts/Stop"),Straight:()=>import("figlet/fonts/Straight"),Thin:()=>import("figlet/fonts/Thin"),ThreeD:()=>import("figlet/fonts/3-D"),Univers:()=>import("figlet/fonts/Univers"),Wavy:()=>import("figlet/fonts/Wavy")},_=Object.keys(O);async function z(t,e="Standard",i="#ffffff"){if(!Object.prototype.hasOwnProperty.call(O,e))throw new Error("Unknown text font.");const{default:s}=await import("figlet/browser"),a=await O[e]();s.parseFont(e,a.default),s.defaults({fetchFontIfMissing:!1});const r=s.textSync(t.slice(0,120),{font:e}),o=r.split("\n"),n=Math.max(1,...o.map(t=>t.length)),h=Math.max(1,o.length),l=Math.min(1,2048/(9*n)),c=document.createElement("canvas");c.width=Math.ceil(9*n*l+32),c.height=Math.ceil(15*h*l+32);const m=c.getContext("2d");return m.fillStyle="#080808",m.fillRect(0,0,c.width,c.height),m.fillStyle=i,m.font=15*l+"px monospace",m.textBaseline="top",o.forEach((t,e)=>m.fillText(t,16,16+15*e*l)),{canvas:c,ascii:r}}var W={standard:{label:"Classic ASCII",chars:" .:-=+*#%@"},asciify:{label:"Asciify",chars:" .:-=+ASCIIFY#@"},minimal:{label:"Minimal",chars:" .:+"},detailed:{label:"Detailed",chars:" .,:;i1tfLCG08@"},letters:{label:"Letters",chars:" .ilLCFTYASMW"},technical:{label:"Technical",chars:" .:;>_/[{}]=+*#@$"},blocks:{label:"Tonal blocks",chars:" ░▒▓█"},braille:{label:"Braille",chars:" ⠁⠃⠇⡇⣇⣧⣷⣿"}};export{i as BLEND_MODES,a as DEFAULT_STUDIO_SETTINGS,e as DITHER_ALGORITHMS,W as STUDIO_CHARACTER_SETS,p as STUDIO_LOOKS,s as STUDIO_PALETTES,t as STUDIO_STYLES,_ as STUDIO_TEXT_FONTS,L as createStudioRenderer,z as createStudioText,U as exportStudio,D as loadStudioMedia,B as mountStudio,Y as mountStudioMedia,l as normalizeStudioSettings,m as parseStudioSettings,x as restyleStudio,c as serializeStudioSettings,f as studioCrop,d as studioDimensions,g as studioGrid,M as studioLook,I as studioSourceSize,u as updateStudioSettings};//# sourceMappingURL=studio.js.map
|
|
1
|
+
var t=["ascii","blocks","braille","dots","lines","cross","diagonal","diamond","mixed","pixel","mosaic","lego","voxel","disco","dither"],e=["none","bayer2","bayer4","bayer8","bayer16","floyd-steinberg","atkinson","stucki","sierra","sierra-lite","burkes","jarvis","halftone","lines","noise"],i=["source-over","multiply","screen","overlay","soft-light","hard-light","color-dodge","color-burn","hue","saturation","color","luminosity"],s={original:[],mono:["#080808","#f2f2e8"],asciify:["#080808","#625b38","#a19558","#e8b900"],gameboy:["#0f380f","#306230","#8bac0f","#9bbc0f"],cga:["#000000","#55ffff","#ff55ff","#ffffff"],pico8:["#000000","#1d2b53","#7e2553","#008751","#ab5236","#5f574f","#c2c3c7","#fff1e8","#ff004d","#ffa300","#ffec27","#00e436","#29adff","#83769c","#ff77a8","#ffccaa"],c64:["#000000","#ffffff","#880000","#aaffee","#cc44cc","#00cc55","#0000aa","#eeee77","#dd8855","#664400","#ff7777","#333333","#777777","#aaff66","#0088ff","#bbbbbb"],amber:["#100b00","#5f3b00","#c98014","#ffd17c"],ice:["#081b29","#25586e","#69a6b3","#d9ece7"],risograph:["#f4ebd0","#f2594b","#2853a5","#29232e"],sepia:["#201b17","#6b5039","#b49868","#f6e6c5"],nord:["#2e3440","#4c566a","#88c0d0","#eceff4"],dusk:["#211b35","#654271","#c3788c","#f5c9a3"],forest:["#101f1b","#355747","#87a16f","#e4e3ba"],ocean:["#071b33","#17577f","#3fa7a4","#d9efde"],newsprint:["#191919","#666666","#aaaaaa","#eee9df"],custom:["#080808","#e8b900"]},a={version:1,aspectRatio:"original",style:"ascii",cellSize:6,charset:" .:-=+*#%@",colorMode:"accent",ink:"#e8b900",crop:{x:.5,y:.5,zoom:1,rotation:0},backdrop:{mode:"solid",color:"#080808",color2:"#393323",blur:12,opacity:1},color:{brightness:0,contrast:1,saturation:1,grayscale:0,tint:"#e8b900",amount:0,blend:"source-over"},dither:{algorithm:"none",palette:"mono",colors:["#080808","#e8b900"],amount:1,scale:2,threshold:.5,motion:"none",speed:1},mask:{enabled:!1,invert:!1,shapes:[]},lights:[],effects:{bloom:0,characterBloom:0,grain:0,dust:0,scanlines:0,crt:0,prism:0,vignette:0,glitch:0,pixelate:0,blur:0,blurType:"gaussian",angle:0,focus:.5,halftone:0},motion:{type:"none",speed:1},hover:{effect:"trail",strength:.55,radius:.2,edgeSafe:!1}},r=t=>t&&"object"==typeof t&&!Array.isArray(t)?t:{},o=(t,e,i,s)=>"number"==typeof t&&Number.isFinite(t)?Math.min(s,Math.max(i,t)):e,n=(t,e)=>"string"==typeof t&&/^#[\da-f]{6}$/i.test(t)?t:e,h=(t,e,i)=>e.includes(t)?t:i;function l(l={}){const c=r(l),m=a;if(void 0!==c.version&&1!==c.version)throw new Error("Unsupported studio settings version. Update asciify-engine.");const d=r(c.crop),f=r(c.backdrop),u=r(c.color),g=r(c.dither),p=r(c.mask),M=r(c.effects),x=r(c.motion),v=r(c.hover),w={...m.effects};for(const t of["bloom","characterBloom","grain","dust","scanlines","crt","prism","vignette","glitch","pixelate","halftone"])w[t]=o(M[t],0,0,1);w.blur=o(M.blur,0,0,24),w.blurType=h(M.blurType,["gaussian","directional","radial","progressive"],m.effects.blurType),w.angle=o(M.angle,0,-180,180),w.focus=o(M.focus,.5,0,1);let b=2048;return{version:1,aspectRatio:h(c.aspectRatio,["original","16:9","9:16","1:1","4:3","3:4","21:9"],"original"),style:h(c.style,t,m.style),cellSize:o(c.cellSize,m.cellSize,3,60),charset:"string"==typeof c.charset&&c.charset.length?Array.from(c.charset).slice(0,128).join(""):m.charset,colorMode:h(c.colorMode,["accent","source","gray"],m.colorMode),ink:n(c.ink,m.ink),crop:{x:o(d.x,.5,0,1),y:o(d.y,.5,0,1),zoom:o(d.zoom,1,1,5),rotation:90*Math.round(o(d.rotation,0,-360,360)/90)},backdrop:{mode:h(f.mode,["solid","transparent","source","blurred","gradient"],m.backdrop.mode),color:n(f.color,m.backdrop.color),color2:n(f.color2,m.backdrop.color2),blur:o(f.blur,12,0,32),opacity:o(f.opacity,1,0,1)},color:{brightness:o(u.brightness,0,-1,1),contrast:o(u.contrast,1,0,3),saturation:o(u.saturation,1,0,3),grayscale:o(u.grayscale,0,0,1),tint:n(u.tint,m.color.tint),amount:o(u.amount,0,0,1),blend:h(u.blend,i,m.color.blend)},dither:{algorithm:h(g.algorithm,e,"none"),palette:"string"==typeof g.palette&&Object.prototype.hasOwnProperty.call(s,g.palette)?g.palette:"mono",colors:Array.isArray(g.colors)&&g.colors.length>=2?g.colors.slice(0,32).map(t=>n(t,"#000000")):[...m.dither.colors],amount:o(g.amount,1,0,2),scale:Math.round(o(g.scale,2,1,12)),threshold:o(g.threshold,.5,0,1),motion:h(g.motion,["none","drift","shimmer"],"none"),speed:o(g.speed,1,.1,3)},mask:{enabled:!0===p.enabled,invert:!0===p.invert,shapes:Array.isArray(p.shapes)?p.shapes.slice(0,64).map(t=>{const e=r(t),i=h(e.kind,["rectangle","ellipse","brush"],"rectangle"),s="brush"===i&&Array.isArray(e.points)?e.points.slice(0,b).map(t=>Array.isArray(t)?[Math.round(1e4*o(t[0],0,0,1))/1e4,Math.round(1e4*o(t[1],0,0,1))/1e4]:[0,0]):[];return b-=s.length,{kind:i,x:o(e.x,0,0,1),y:o(e.y,0,0,1),width:o(e.width,.5,0,1),height:o(e.height,.5,0,1),size:o(e.size,.05,.005,.5),points:s}}):[]},lights:Array.isArray(c.lights)?c.lights.slice(0,4).map(t=>{const e=r(t);return{x:o(e.x,.5,0,1),y:o(e.y,.5,0,1),radius:o(e.radius,.3,.02,1),intensity:o(e.intensity,.5,0,1),color:n(e.color,"#ffffff")}}):[],effects:w,motion:{type:h(x.type,["none","caustics","current","reform"],"none"),speed:o(x.speed,1,.1,3)},hover:{effect:h(v.effect,["none","trail","water","contour","dissolve","silk","vortex"],"trail"),strength:o(v.strength,.55,0,1),radius:o(v.radius,.2,.1,1),edgeSafe:!0===v.edgeSafe}}}function c(t){return JSON.stringify(l(t))}function m(t){if(t.length>1e5)throw new Error("Settings exceed 100 KB.");return l(JSON.parse(t))}function d(t,e,i,s,a){const r=Math.abs(a.rotation/90)%2==1,o=r?e:t,n=r?t:e,h=Math.max(i/o,s/n)*a.zoom;return{width:o*h,height:n*h,x:(i-o*h)*a.x,y:(s-n*h)*a.y,scale:h,rotated:r}}function f(t,e,i){if(Math.abs(i.crop.rotation/90)%2==1&&([t,e]=[e,t]),"original"===i.aspectRatio)return[t,e];const[s,a]=i.aspectRatio.split(":").map(Number);return t/e>s/a?[Math.round(e*s/a),e]:[t,Math.round(t*a/s)]}function u(t,e){const i={...t,...e};for(const s of["crop","backdrop","color","dither","mask","effects","motion","hover"])e[s]&&Object.assign(i,{[s]:{...t[s],...e[s]}});return l(i)}function g(t,e,i,s=12e3,a=1){const r=Math.max(2,Number.isFinite(t)?t:960),o=Math.max(2,Number.isFinite(e)?e:540),n=Math.max(1,Math.floor(Number.isFinite(s)?s:12e3)),h=Math.max(.01,Number.isFinite(a)?a:1),l=["dither","pixel","mosaic","lego","voxel","disco","dots"].includes(i.style)?1:1.65;let c=Math.max(1,Math.ceil(Math.sqrt(r*o/(n*l))/h));for(;Math.ceil(r/(c*h))*Math.ceil(o/(c*h*l))>n;)c++;const m="dither"===i.style?i.dither.scale:i.cellSize,d=Math.max(c,m)*h;return{cell:d,rowHeight:d*l,columns:Math.ceil(r/d),rows:Math.ceil(o/(d*l)),minimum:c,limited:m<c}}var p=[["ascii","Signature ASCII","Brand ink and clean characters.",{}],["print","Newsprint","Fine diffusion on warm paper.",{style:"dither",dither:{algorithm:"floyd-steinberg",palette:"newsprint"}}],["handheld","Pocket camera","Four-tone ordered dither.",{style:"dither",dither:{algorithm:"bayer4",palette:"gameboy",scale:3}}],["riso","Two inks","Limited-color print texture.",{style:"dither",dither:{algorithm:"atkinson",palette:"risograph",scale:2}}],["night","Night signal","Gray characters and optical fringe.",{ink:"#888888",effects:{prism:.7,scanlines:.2,vignette:.3}}],["terminal","Phosphor","Green glyphs with a soft glow.",{ink:"#83efad",effects:{bloom:.4,scanlines:.35,crt:.2}}],["mosaic","Mosaic study","Separated color tiles.",{style:"mosaic",cellSize:14,colorMode:"source"}],["bricks","Brickwork","Colorful studded cells.",{style:"lego",cellSize:18,colorMode:"source"}],["voxel","Little volumes","Three-face isometric tiles.",{style:"voxel",cellSize:22,colorMode:"source"}],["disco","Mirror room","Faceted tiles and warm light.",{style:"disco",cellSize:18,colorMode:"source",lights:[{x:.35,y:.25,radius:.25,intensity:.45,color:"#fff2d4"}]}],["wallpaper","Wallpaper","Living ASCII over a softened source.",{backdrop:{mode:"blurred",blur:18,opacity:.55},ink:"#f2e9c9",motion:{type:"caustics",speed:.5}}],["blueprint","Blueprint","Linework in a cool monochrome.",{style:"lines",ink:"#9bccdf",backdrop:{mode:"solid",color:"#0a1e30"}}]].map(([t,e,i,s])=>({id:t,name:e,description:i,settings:l(s)}));function M(t){const e=p.find(e=>e.id===t);if(!e)throw new Error("Unknown studio look.");return l(e.settings)}function x(t,e=Math.random){const i=p.filter(e=>e.settings.style!==t.style||e.settings.ink!==t.ink),s=M(i[Math.min(i.length-1,Math.max(0,Math.floor(e()*i.length)))].id);return s.aspectRatio=t.aspectRatio,s.crop={...t.crop},s.mask=l(t).mask,s}var v=[{value:"none",mode:"none",label:"Off",description:"Keep the image still. Hover stays available."},{value:"caustics",mode:"caustics",label:"Caustics",description:"Soft ribbons of light travel across a stationary character grid."},{value:"current",mode:"current",label:"Slow Current",description:"A gentle flow through the image, with steady edges."},{value:"reform",mode:"reform",label:"Reveal & Reform",description:"Disperse, gather, then hold the complete image."}],w=(t,e,i)=>{const s=(t=>Math.max(0,Math.min(1,t)))((i-t)/(e-t));return s*s*(3-2*s)},b=class{constructor(){this.last=null,this.mode="none",this.phase=0}update(t,e,i=1){return Number.isFinite(t)?((e!==this.mode||null!==this.last&&t<this.last)&&(this.mode=e,this.phase=0,this.last=t),null!==this.last&&(this.phase+=Math.max(0,t-this.last)*Math.max(.1,Math.min(3,Number.isFinite(i)?i:1))),this.last=t,this.phase):this.phase}};function y(t,e,i,s,a){if(a[0]=a[1]=a[2]=0,a[3]=1,"none"===t)return a;const r=s*Math.PI/6,o=w(0,.12,Math.min(e,1-e,i,1-i));if("caustics"===t){const t=Math.sin(9*e+5*i+r)+Math.sin(8*i-3*e-r),s=Math.pow(Math.max(0,1-.72*Math.abs(t)),3);a[2]=(.22*s-.045)*o}else if("current"===t)a[0]=Math.sin(9*i+r)*Math.cos(7*e-r)*10*o,a[1]=Math.cos(8*e+r)*Math.sin(6*i-r)*7*o;else if("reform"===t){const t=(s%12+12)%12,n=((t,e)=>{const i=(.06711056*t+.00583715*e)%1*52.9829189;return i-Math.floor(i)})(Math.floor(160*e),Math.floor(100*i)),h=.65*e+.2*i+.15*n+.08*Math.sin(8*e-5*i),l=w(1.8+1.2*h,3.8+1.2*h,t)*(1-w(5+1.7*h,7.2+1.7*h,t));a[0]=Math.sin(9*i+r)*l*(1-l)*24*o,a[1]=-l*(1-l)*(8+12*n)*o,a[2]=.45*-l,a[3]=1-.9*l}return a}var k=(t,e)=>{const i=43758.5453*Math.sin(127.1*t+311.7*e);return i-Math.floor(i)};function E(t,e,i){let s=0;for(let a=1;a<i;a*=2){const i=Math.floor(t/a)%2;s=4*s+[[0,2],[3,1]][Math.floor(e/a)%2][i]}return(s+.5)/(i*i)-.5}var S={"floyd-steinberg":[[1,0,7/16],[-1,1,3/16],[0,1,5/16],[1,1,1/16]],atkinson:[[1,0,.125],[2,0,.125],[-1,1,.125],[0,1,.125],[1,1,.125],[0,2,.125]],stucki:[[1,0,8/42],[2,0,4/42],[-2,1,2/42],[-1,1,4/42],[0,1,8/42],[1,1,4/42],[2,1,2/42],[-2,2,1/42],[-1,2,2/42],[0,2,4/42],[1,2,2/42],[2,2,1/42]],sierra:[[1,0,5/32],[2,0,3/32],[-2,1,2/32],[-1,1,4/32],[0,1,5/32],[1,1,4/32],[2,1,2/32],[-1,2,2/32],[0,2,3/32],[1,2,2/32]],"sierra-lite":[[1,0,.5],[-1,1,.25],[0,1,.25]],burkes:[[1,0,.25],[2,0,4/32],[-2,1,2/32],[-1,1,4/32],[0,1,.25],[1,1,4/32],[2,1,2/32]],jarvis:[[1,0,7/48],[2,0,5/48],[-2,1,3/48],[-1,1,5/48],[0,1,7/48],[1,1,5/48],[2,1,3/48],[-2,2,1/48],[-1,2,3/48],[0,2,5/48],[1,2,3/48],[2,2,1/48]]},A=t=>[parseInt(t.slice(1,3),16),parseInt(t.slice(3,5),16),parseInt(t.slice(5,7),16)];function F(t,e,i){const s=Math.min(t*Math.max(1,i),(1-t)*Math.max(1,i),e*Math.max(1,1/i),(1-e)*Math.max(1,1/i)),a=Math.max(0,Math.min(1,(s-.035)/.105));return a*a*a*(a*(6*a-15)+10)}var T=class{constructor(t,e){this.edgeSafe=!1,this.previous=null,this.peak=0,this.mode="dissolve",this.width=t,this.height=e;const i=t*e;this.pixels=new Uint8Array(4*i),this.ink=new Float32Array(i),this.targetX=new Float32Array(i),this.targetY=new Float32Array(i),this.offsetX=new Float32Array(i),this.offsetY=new Float32Array(i),this.edge=new Float32Array(i);for(let i=0;i<e;i++)for(let s=0;s<t;s++)this.edge[i*t+s]=F(s/(t-1),i/(e-1),t/e);this.clear()}get active(){return this.peak>2e-4}setMode(t){t!==this.mode&&(this.mode=t,this.clear())}clear(){for(const t of[this.ink,this.targetX,this.targetY,this.offsetX,this.offsetY,this.pixels])t.fill(0);if(this.previous=null,this.peak=0,"dissolve"!==this.mode)for(let t=0;t<this.pixels.length;t+=4)this.pixels[t]=this.pixels[t+2]=128}leave(){this.previous=null}move(t,e,i){if(!Number.isFinite(t+e+i))return;t=Math.max(0,Math.min(1,t)),e=Math.max(0,Math.min(1,e));const s=this.previous;this.previous={x:t,y:e};const a=this.width,r=this.height,o=Math.max(1,a/r),n=Math.max(1,r/a),h=s?(t-s.x)*o:0,l=s?(e-s.y)*n:0,c=Math.hypot(h,l);if(!s&&"dissolve"!==this.mode)return;if(s&&c<1e-4)return;const m=.035+.11*Math.max(.1,Math.min(1,i)),d=Math.min(128,Math.max(1,Math.ceil(c/(.45*m)))),f=c?h/c:1,u=c?l/c:0,g=Math.min(1,c/(m*d)*2.2);for(let i=0;i<d;i++){const h=(i+.5)/d,l=s?s.x+(t-s.x)*h:t,c=s?s.y+(e-s.y)*h:e,p=Math.max(0,Math.floor((l-2.5*m/o)*(a-1))),M=Math.min(a-1,Math.ceil((l+2.5*m/o)*(a-1))),x=Math.max(0,Math.floor((c-2.5*m/n)*(r-1))),v=Math.min(r-1,Math.ceil((c+2.5*m/n)*(r-1)));for(let t=x;t<=v;t++)for(let e=p;e<=M;e++){const i=(e/(a-1)-l)*o/m,s=(t/(r-1)-c)*n/m,h=Math.exp(1.5*-(i*i+s*s)),d=t*a+e;if("dissolve"===this.mode)this.ink[d]=Math.max(this.ink[d],h);else{const t=(-i*u+s*f)*h*2.8,e="silk"===this.mode?f*t:-s*h*2.5,a="silk"===this.mode?u*t:i*h*2.5;this.targetX[d]=Math.max(-1,Math.min(1,this.targetX[d]+e*g)),this.targetY[d]=Math.max(-1,Math.min(1,this.targetY[d]+a*g))}}}this.peak=1}step(t){if(!this.active||!Number.isFinite(t))return;const e=Math.max(0,Math.min(.05,t)),i=Math.exp(-("dissolve"===this.mode?2.15:3.2)*e),s=1-Math.exp(-22*e);let a=0;for(let t=0;t<this.ink.length;t++)if("dissolve"===this.mode){this.ink[t]*=i,a=Math.max(a,this.ink[t]);const e=Math.round(65535*this.ink[t]);this.pixels[4*t]=e>>>8,this.pixels[4*t+1]=255&e}else{this.targetX[t]*=i,this.targetY[t]*=i,this.offsetX[t]+=(this.targetX[t]-this.offsetX[t])*s,this.offsetY[t]+=(this.targetY[t]-this.offsetY[t])*s,a=Math.max(a,Math.abs(this.offsetX[t]),Math.abs(this.offsetY[t]),Math.abs(this.targetX[t]),Math.abs(this.targetY[t]));const e=Math.round(this.offsetX[t]*(this.edgeSafe?this.edge[t]:1)*32767+32768),r=Math.round(this.offsetY[t]*(this.edgeSafe?this.edge[t]:1)*32767+32768);this.pixels[4*t]=e>>>8,this.pixels[4*t+1]=255&e,this.pixels[4*t+2]=r>>>8,this.pixels[4*t+3]=255&r}this.peak=a,this.active||this.clear()}sample(t,e,i){const s=Math.max(0,Math.min(this.width-1.001,t*(this.width-1))),a=Math.max(0,Math.min(this.height-1.001,e*(this.height-1))),r=Math.floor(s),o=Math.floor(a),n=s-r,h=a-o,l=o*this.width+r,c=l+this.width,m=t=>(t[l]*(1-n)+t[l+1]*n)*(1-h)+(t[c]*(1-n)+t[c+1]*n)*h;i[0]=m(this.offsetX)*(this.edgeSafe?F(t,e,this.width/this.height):1)*.08,i[1]=m(this.offsetY)*(this.edgeSafe?F(t,e,this.width/this.height):1)*.08,i[2]="dissolve"===this.mode?6*-m(this.ink):0}},I=class{constructor(t,e){this.rings=[],this.previous=null,this.elapsed=1,this.echoPeak=0,this.width=t,this.height=e,this.pixels=new Uint8Array(t*e*4),this.echo=new Float32Array(t*e)}get active(){return this.rings.length>0||this.echoPeak>2e-4}clear(){this.rings=[],this.previous=null,this.elapsed=1,this.pixels.fill(0),this.echo.fill(0),this.echoPeak=0}leave(){this.previous=null}move(t,e,i){const s=Math.max(1,this.width/this.height),a=Math.max(1,this.height/this.width);this.previous&&(Math.hypot((t-this.previous.x)*s,(e-this.previous.y)*a)<.065||this.elapsed<.3)||4!==this.rings.length&&(this.previous={x:t,y:e},this.elapsed=0,this.rings.push({x:t,y:e,age:0,radius:i}))}ringSample(t,e){const i=Math.max(1,this.width/this.height),s=Math.max(1,this.height/this.width);let a=0;for(const r of this.rings){const o=.015+r.age*(.15+.22*r.radius),n=.009+.014*r.radius,h=(Math.hypot((t-r.x)*i,(e-r.y)*s)-o)/n,l=Math.sin(Math.min(1,r.age/.07)*Math.PI/2)*Math.max(0,1-r.age/1.35)**2;a=Math.max(a,Math.exp(-h*h)*l)}return a}sample(t,e){const i=Math.max(0,Math.min(this.width-1,Math.round(t*(this.width-1)))),s=Math.max(0,Math.min(this.height-1,Math.round(e*(this.height-1))));return Math.max(this.ringSample(t,e),this.echo[s*this.width+i])}step(t){if(!Number.isFinite(t))return;const e=Math.max(0,Math.min(.05,t));this.elapsed+=e;for(const t of this.rings)t.age+=e;if(this.rings=this.rings.filter(t=>t.age<1.35),!this.active)return void this.pixels.fill(0);const i=Math.exp(-5.5*e);let s=0;for(let t=0;t<this.height;t++)for(let e=0;e<this.width;e++){const a=t*this.width+e;this.echo[a]=Math.max(this.ringSample(e/(this.width-1),t/(this.height-1)),this.echo[a]*i),s=Math.max(s,this.echo[a]);const r=Math.round(65535*this.echo[a]),o=4*a;this.pixels[o]=r>>>8,this.pixels[o+1]=255&r}this.echoPeak=s,this.active||(this.echo.fill(0),this.pixels.fill(0))}},R=class{constructor(t,e){this.previous=null,this.peak=0,this.width=t,this.height=e;const i=t*e;this.pixels=new Uint8Array(4*i),this.signal=new Float32Array(i),this.offsetX=new Float32Array(i),this.offsetY=new Float32Array(i),this.driftX=new Float32Array(i),this.driftY=new Float32Array(i),this.u=new Float32Array(i),this.v=new Float32Array(i),this.ink=new Float32Array(i),this.a=new Float32Array(i),this.b=new Float32Array(i),this.c=new Float32Array(i),this.pressure=new Float32Array(i),this.pressureNext=new Float32Array(i),this.divergence=new Float32Array(i),this.curl=new Float32Array(i)}get active(){return this.peak>2e-4}clear(){for(const t 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])t.fill(0);this.previous=null,this.peak=0}leave(){this.previous=null}move(t,e,i,s=performance.now()){if(!Number.isFinite(t+e+i+s))return;t=Math.max(0,Math.min(1,t)),e=Math.max(0,Math.min(1,e)),i=Math.max(.1,Math.min(1,i));const a=this.previous;if(this.previous={x:t,y:e,time:s},!a)return;const r=(t-a.x)*(this.width-1),o=(e-a.y)*(this.height-1),n=Math.hypot(r,o);if(n<.001)return;const h=Math.min(this.width,this.height),l=s>a.time?Math.max(1/240,(s-a.time)/1e3):1/60,c=Math.min(12,n/h/l),m=1-Math.exp(-c/2.2),d=h*(.022+.075*i)*(.65+.95*m),f=Math.min(128,Math.max(1,Math.ceil(n/(.4*d)))),u=n/d*(.32+.22*m)/f,g=r/n,p=o/n,M=-p,x=g,v=n*(2+18*m)/f;for(let i=0;i<f;i++){const s=(i+.5)/f,r=(a.x+(t-a.x)*s)*(this.width-1),o=(a.y+(e-a.y)*s)*(this.height-1),n=Math.max(1,Math.floor(r-3*d)),h=Math.min(this.width-2,Math.ceil(r+3*d)),l=Math.max(1,Math.floor(o-3*d)),c=Math.min(this.height-2,Math.ceil(o+3*d));for(let t=l;t<=c;t++)for(let e=n;e<=h;e++){const i=((e-r)*g+(t-o)*p)/d,s=((e-r)*M+(t-o)*x)/d,a=Math.exp(-i*i*.65-s*s*1.7),n=t*this.width+e;this.ink[n]=1-(1-this.ink[n])*Math.exp(-a*u);const h=1-s*s*.55,l=i*s*.7;this.u[n]=Math.max(-80,Math.min(80,this.u[n]+(g*h+M*l)*a*v)),this.v[n]=Math.max(-80,Math.min(80,this.v[n]+(p*h+x*l)*a*v))}}this.peak=1}read(t,e,i){const s=0|(e=Math.max(.5,Math.min(this.width-1.5,e))),a=0|(i=Math.max(.5,Math.min(this.height-1.5,i))),r=e-s,o=i-a,n=a*this.width+s;return(t[n]*(1-r)+t[n+1]*r)*(1-o)+(t[n+this.width]*(1-r)+t[n+this.width+1]*r)*o}sample(t,e){return this.read(this.signal,t*(this.width-1),e*(this.height-1))}displacement(t,e,i){i[0]=this.read(this.offsetX,t*(this.width-1),e*(this.height-1)),i[1]=this.read(this.offsetY,t*(this.width-1),e*(this.height-1))}step(t){if(!this.active||!Number.isFinite(t))return;let e=Math.max(0,Math.min(.05,t));const i=this.width,s=this.height;for(;e>1e-7;){const t=Math.min(1/60,e);e-=t;const a=Math.exp(-1.9*t),r=Math.exp(-3.2*t);for(let e=1;e<s-1;e++)for(let o=1;o<i-1;o++){const n=e*i+o,h=Math.max(.5,Math.min(i-1.5,o-this.u[n]*t)),l=Math.max(.5,Math.min(s-1.5,e-this.v[n]*t)),c=0|h,m=0|l,d=h-c,f=l-m,u=m*i+c,g=(1-d)*(1-f),p=d*(1-f),M=(1-d)*f,x=d*f;this.a[n]=(this.u[u]*g+this.u[u+1]*p+this.u[u+i]*M+this.u[u+i+1]*x)*a,this.b[n]=(this.v[u]*g+this.v[u+1]*p+this.v[u+i]*M+this.v[u+i+1]*x)*a,this.c[n]=(this.ink[u]*g+this.ink[u+1]*p+this.ink[u+i]*M+this.ink[u+i+1]*x)*r}[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 t=1;t<s-1;t++)for(let e=1;e<i-1;e++){const s=t*i+e;this.curl[s]=.5*(this.v[s+1]-this.v[s-1]-this.u[s+i]+this.u[s-i])}for(let e=1;e<s-1;e++)for(let s=1;s<i-1;s++){const a=e*i+s,r=Math.abs(this.curl[a+1])-Math.abs(this.curl[a-1]),o=Math.abs(this.curl[a+i])-Math.abs(this.curl[a-i]),n=Math.hypot(r,o)+1e-4,h=this.curl[a]*t*10,l=Math.hypot(this.u[a],this.v[a]);this.u[a]+=o/n*h,this.v[a]-=r/n*h;const c=Math.min(1,l/(Math.hypot(this.u[a],this.v[a])+1e-6));this.u[a]*=c,this.v[a]*=c,this.divergence[a]=-.5*(this.u[a+1]-this.u[a-1]+this.v[a+i]-this.v[a-i])}this.pressure.fill(0);for(let t=0;t<4;t++){for(let t=1;t<s-1;t++)for(let e=1;e<i-1;e++){const s=t*i+e;this.pressureNext[s]=.25*(this.divergence[s]+this.pressure[s-1]+this.pressure[s+1]+this.pressure[s-i]+this.pressure[s+i])}[this.pressure,this.pressureNext]=[this.pressureNext,this.pressure]}let o=0;for(let e=1;e<s-1;e++)for(let s=1;s<i-1;s++){const a=e*i+s;this.u[a]=Math.max(-80,Math.min(80,this.u[a]-.5*(this.pressure[a+1]-this.pressure[a-1]))),this.v[a]=Math.max(-80,Math.min(80,this.v[a]-.5*(this.pressure[a+i]-this.pressure[a-i]))),this.driftX[a]+=(3.6*this.u[a]-58*this.offsetX[a]-12*this.driftX[a])*t,this.driftY[a]+=(3.6*this.v[a]-58*this.offsetY[a]-12*this.driftY[a])*t,this.offsetX[a]=Math.max(-2,Math.min(2,this.offsetX[a]+this.driftX[a]*t)),this.offsetY[a]=Math.max(-2,Math.min(2,this.offsetY[a]+this.driftY[a]*t)),this.signal[a]=1-Math.exp(.06*-Math.hypot(this.u[a],this.v[a])-.16*this.ink[a]),o=Math.max(o,this.signal[a])}this.peak=o}if(this.active)for(let t=0;t<this.ink.length;t++){const e=Math.round(65535*Math.min(1,this.signal[t]));this.pixels[4*t]=e>>>8,this.pixels[4*t+1]=255&e,this.pixels[4*t+2]=Math.round(128+63.5*this.offsetX[t]),this.pixels[4*t+3]=Math.round(128+63.5*this.offsetY[t])}else this.clear()}};function P(t,e){const i=Math.max(0,Math.min(1,e/.38));return t+(1-2*t)*(i*i*(3-2*i))}var C=class{constructor(t=1){this.mode="water",this.amount=.55,this.radius=.2,this.lensX=.5,this.lensY=.5,this.lensStrength=0,this.previous=null,this.energy=0,this.pending=!1,this.remainder=0,t=Math.max(.25,Math.min(4,t)),this.columns=Math.round(t>=1?128:128*t),this.rows=Math.round(t>=1?128/t:128),this.xScale=Math.max(1,t),this.yScale=Math.max(1,1/t),this.heights=new Float32Array(this.columns*this.rows),this.velocity=new Float32Array(this.heights.length),this.next=new Float32Array(this.heights.length),this.normals=new Float32Array(2*this.heights.length),this.edgeMask=new Float32Array(this.heights.length);for(let e=0;e<this.rows;e++)for(let i=0;i<this.columns;i++)this.edgeMask[e*this.columns+i]=F(i/(this.columns-1),e/(this.rows-1),t);this.refraction={width:this.columns,height:this.rows,pixels:new Uint8Array(4*this.heights.length),strength:30,mode:"water",focus:[.5,.5,0,.2]},this.waterPixels=this.refraction.pixels,this.trail=new R(this.columns,this.rows),this.contour=new I(this.columns,this.rows),this.afterimage=new T(this.columns,this.rows),this.clear()}get invertsDensity(){return"trail"===this.mode}get densityTrail(){return["trail","contour","dissolve"].includes(this.mode)}get hasRefraction(){return this.active||this.lensStrength>15e-5}get active(){return["dissolve","silk","vortex"].includes(this.mode)?this.afterimage.active:"contour"===this.mode?this.contour.active:"trail"===this.mode?this.trail.active:this.pending||this.energy>15e-5}setMode(t){t!==this.mode&&(this.clear(),this.mode=t,this.refraction.mode=t,"dissolve"!==t&&"silk"!==t&&"vortex"!==t||this.afterimage.setMode(t),this.refraction.pixels="trail"===t?this.trail.pixels:"contour"===t?this.contour.pixels:["dissolve","silk","vortex"].includes(t)?this.afterimage.pixels:this.waterPixels,this.refraction.strength="water"===t?30*this.amount/.55:"silk"===t?28*this.amount:"vortex"===t?38*this.amount:0)}configure(t,e=.55,i=.2,s=!1){this.setMode(t),this.refraction.edgeSafe=s,this.afterimage.edgeSafe=s,this.amount=Number.isFinite(e)?Math.max(0,Math.min(1,e)):.55,this.radius=Number.isFinite(i)?Math.max(.1,Math.min(1,i)):.2,this.refraction.strength="water"===t?30*this.amount/.55:"silk"===t?28*this.amount:"vortex"===t?38*this.amount:0,this.refraction.focus[2]=this.densityTrail?this.amount:this.lensStrength*this.amount,this.refraction.focus[3]=this.radius}move(t,e,i){if("none"===this.mode||0===this.amount)return;if(!Number.isFinite(t+e))return;if(t=Math.max(0,Math.min(1,t)),e=Math.max(0,Math.min(1,e)),["dissolve","silk","vortex"].includes(this.mode))return void this.afterimage.move(t,e,this.radius);if("contour"===this.mode)return void this.contour.move(t,e,this.radius);if("trail"===this.mode)return void this.trail.move(t,e,this.radius,i);if("water"!==this.mode)return!this.previous&&this.lensStrength<.001&&(this.lensX=t,this.lensY=e),this.previous={x:t,y:e},void(this.pending=!0);if(!this.previous)return void(this.previous={x:t,y:e});const s=this.previous;this.previous={x:t,y:e};const a=(t-s.x)*this.xScale,r=(e-s.y)*this.yScale,o=Math.hypot(a,r);if(o<1e-5)return;const n=.035+.1*this.radius,h=3*n,l=Math.min(192,Math.max(1,Math.ceil(o/(.5*n)))),c=95*Math.min(o,1)/l;for(let i=0;i<l;i++){const a=(i+.5)/l,r=s.x+(t-s.x)*a,o=s.y+(e-s.y)*a,m=Math.max(1,Math.floor((r-h/this.xScale)*(this.columns-1))),d=Math.min(this.columns-2,Math.ceil((r+h/this.xScale)*(this.columns-1))),f=Math.max(1,Math.floor((o-h/this.yScale)*(this.rows-1))),u=Math.min(this.rows-2,Math.ceil((o+h/this.yScale)*(this.rows-1)));for(let t=f;t<=u;t++)for(let e=m;e<=d;e++){const i=(e/(this.columns-1)-r)*this.xScale,s=(t/(this.rows-1)-o)*this.yScale,a=Math.exp(-(i*i+s*s)/(n*n))*c,h=t*this.columns+e;this.velocity[h]=Math.max(-12,this.velocity[h]-a)}}this.pending=!0}leave(){this.afterimage.leave(),this.contour.leave(),this.trail.leave(),this.previous=null,"water"!==this.mode&&this.lensStrength&&(this.pending=!0)}clear(){this.trail.clear(),this.contour.clear(),this.afterimage.clear(),this.heights.fill(0),this.velocity.fill(0),this.next.fill(0),this.normals.fill(0),this.refraction.focus[2]=0,this.previous=null,this.lensStrength=0,this.energy=0,this.pending=!1,this.remainder=0;for(let t=0;t<this.waterPixels.length;t+=4)this.waterPixels[t]=this.waterPixels[t+2]=128,this.waterPixels[t+1]=this.waterPixels[t+3]=0}step(t){if(!this.active||!Number.isFinite(t))return;if(["dissolve","silk","vortex"].includes(this.mode))return void this.afterimage.step(t);if("contour"===this.mode)return void this.contour.step(t);if("trail"===this.mode)return void this.trail.step(t);if("water"!==this.mode)return void this.stepLight(Math.max(0,Math.min(.05,t)));this.remainder+=Math.max(0,Math.min(.05,t));const e=1/120,i=Math.exp(-3.8*e),s=.3*Math.min(this.columns,this.rows);for(;this.remainder+1e-8>=e;){this.remainder-=e;let t=0;for(let a=1;a<this.rows-1;a++)for(let r=1;r<this.columns-1;r++){const o=a*this.columns+r,n=this.heights[o],h=this.heights[o-1]+this.heights[o+1]+this.heights[o-this.columns]+this.heights[o+this.columns]-4*n,l=Math.min(r,a,this.columns-1-r,this.rows-1-a),c=l<5?.88+.024*l:1,m=(this.velocity[o]+(h*s*s-8*n)*e)*i*c;this.velocity[o]=m,this.next[o]=(n+m*e)*c,t=Math.max(t,Math.abs(this.next[o]),.1*Math.abs(m))}this.heights.set(this.next),this.energy=t,this.pending=!1}if(!this.active)return void this.clear();const a=.18*Math.min(this.columns,this.rows);for(let t=0;t<this.rows;t++)for(let e=0;e<this.columns;e++){const i=t*this.columns+e,s=(this.heights[t*this.columns+Math.max(0,e-1)]-this.heights[t*this.columns+Math.min(this.columns-1,e+1)])*a,r=(this.heights[Math.max(0,t-1)*this.columns+e]-this.heights[Math.min(this.rows-1,t+1)*this.columns+e])*a,o=Math.tanh(s)*(this.refraction.edgeSafe?this.edgeMask[i]:1),n=Math.tanh(r)*(this.refraction.edgeSafe?this.edgeMask[i]:1);this.normals[2*i]=o,this.normals[2*i+1]=n;const h=Math.round(32767*o+32768),l=Math.round(32767*n+32768);this.refraction.pixels[4*i]=h>>>8,this.refraction.pixels[4*i+1]=255&h,this.refraction.pixels[4*i+2]=l>>>8,this.refraction.pixels[4*i+3]=255&l}}stepLight(t){const e=this.previous,i=1-Math.exp(-30*t),s=1-Math.exp(-12*t);e&&(this.lensX+=(e.x-this.lensX)*i,this.lensY+=(e.y-this.lensY)*i),this.lensStrength+=((e?1:0)-this.lensStrength)*s,this.energy=Math.max(e?Math.abs(e.x-this.lensX)+Math.abs(e.y-this.lensY):0,Math.abs((e?1:0)-this.lensStrength)),this.pending=!1,e||this.active?this.refraction.focus=[this.lensX,this.lensY,this.lensStrength*this.amount,this.radius]:this.clear()}sample(t,e,i){if(["dissolve","silk","vortex"].includes(this.mode))return this.afterimage.sample(t,e,i),i[0]*=this.amount,i[1]*=this.amount,void(i[2]*=this.amount);if("contour"===this.mode)return i[0]=i[1]=0,void(i[2]=this.contour.sample(t,e)*this.amount*3);if("trail"===this.mode)return i[0]=i[1]=0,void(i[2]=this.trail.sample(t,e)*this.amount*3);const s=Math.max(0,Math.min(this.columns-1.001,t*(this.columns-1))),a=Math.max(0,Math.min(this.rows-1.001,e*(this.rows-1))),r=Math.floor(s),o=Math.floor(a),n=s-r,h=a-o,l=2*(o*this.columns+r),c=l+2*this.columns;for(let t=0;t<2;t++)i[t]=.08*((this.normals[l+t]*(1-n)+this.normals[l+2+t]*n)*(1-h)+(this.normals[c+t]*(1-n)+this.normals[c+2+t]*n)*h);i[0]*=this.amount/.55,i[1]*=this.amount/.55,i[2]="light"===this.mode||"scan"===this.mode?function(t,e,i,s){const[a,r,o,n]=i.focus,h=(t-a)*Math.max(1,s)/n,l=(e-r)*Math.max(1,1/s)/n;return"light"===i.mode?Math.exp(-3*(h*h+l*l))*o:"scan"===i.mode?(1.3*Math.exp(-h*h*110)-.3*Math.exp(-h*h*12))*Math.exp(-l*l*1.8)*o:0}(t,e,this.refraction,this.xScale/this.yScale):0}};function L(t){return"videoWidth"in t?[t.videoWidth,t.videoHeight]:"naturalWidth"in t?[t.naturalWidth,t.naturalHeight]:[t.width,t.height]}var N=(t=!1)=>{const e=document.createElement("canvas"),i=e.getContext("2d",{willReadFrequently:t});if(!i)throw new Error("Canvas 2D is unavailable.");return{canvas:e,ctx:i}},D=(t,e,i)=>{t.width===e&&t.height===i||(t.width=e,t.height=i)},U={blocks:" ░▒▓█",braille:" ⠁⠃⠇⡇⣇⣧⣷⣿",lines:" -═╪╬",cross:" ·+xX#",diagonal:" /╱╳",diamond:" ·◇◈◆",mixed:" .:+/◇#@"};function X(t,e={},i={}){const a=t.getContext("2d");if(!a)throw new Error("Canvas is already owned by another renderer.");const r=N(),o=N(!0),n=N(),h=N(),c=N(),m=N(),f=N(),u=N(),p=N(),M=N();let x,v=0,w=l(e),b=0,F="",T=new Uint8ClampedArray(0),I=new Uint8ClampedArray(0),R=0,X=0,B=0,O=null,Y="",_=new C,z=0;const W=[0,0,0],G=[0,0,0,1],q=Math.max(64,Math.min(4096,Number.isFinite(i.maxDimension)?i.maxDimension:960)),j=Math.max(256,Math.min(16e4,Number.isFinite(i.maxCells)?i.maxCells:12e3));let V=j,H=Math.max(.1,Math.min(8,i.pixelRatio??1));return{canvas:t,render:function(e,i=0,l=960,N=540,j=i*w.motion.speed){if(Number.isFinite(i)||(i=0),!Number.isFinite(l)||!Number.isFinite(N)||l<1||N<1)throw new Error("Render dimensions must be positive finite numbers.");const[$,Q]=L(e);if(!$||!Q)return;const J=Math.min(1,q/Math.max(l,N)),K=Math.max(2,Math.round(l*J)),Z=Math.max(2,Math.round(N*J));D(t,K,Z),D(r.canvas,K,Z),D(n.canvas,K,Z),D(h.canvas,K,Z),D(c.canvas,K,Z),z!==K/Z&&(z=K/Z,_=new C(z)),_.configure(w.hover.effect,w.hover.strength,w.hover.radius,w.hover.edgeSafe),_.step(Math.max(0,Math.min(.05,i-B))),B=i;const tt="currentTime"in e?e.getVideoPlaybackQuality?.().totalVideoFrames??e.currentTime:0,et=[b,K,Z,tt].join(":"),it="dither"===w.style,st=g(K,Z,w,V,H),at=st.cell,rt=st.rowHeight,ot=st.columns,nt=st.rows;if(F!==et||O!==e||R!==ot||X!==nt){O=e,F=et,R=ot,X=nt,r.ctx.clearRect(0,0,K,Z),r.ctx.save();const t=d($,Q,K,Z,w.crop);r.ctx.translate(t.x+t.width/2,t.y+t.height/2),r.ctx.rotate(w.crop.rotation*Math.PI/180),r.ctx.drawImage(e,-$*t.scale/2,-Q*t.scale/2,$*t.scale,Q*t.scale),r.ctx.restore(),D(o.canvas,R,X),o.ctx.clearRect(0,0,R,X),o.ctx.drawImage(r.canvas,0,0,R,X),T=o.ctx.getImageData(0,0,R,X).data;const i=w.color;for(let t=0;t<T.length;t+=4){const e=.299*T[t]+.587*T[t+1]+.114*T[t+2];for(let s=0;s<3;s++){const a=e+(T[t+s]-e)*i.saturation;T[t+s]=((a*(1-i.grayscale)+e*i.grayscale)/255-.5)*i.contrast*255+127.5+255*i.brightness}}}n.ctx.clearRect(0,0,K,Z),n.ctx.globalAlpha=1,n.ctx.globalCompositeOperation="source-over";const ht=j;if(it){I.length!==T.length&&(I=new Uint8ClampedArray(T.length));const t=I;t.set(T);const e=w.motion.type;if(_.active||"none"!==e)for(let i=0;i<X;i++)for(let s=0;s<R;s++){const a=s/R,r=i/X;let o=s,n=i,h=0,l=1,c=1;_.active&&(_.sample(a,r,W),o-=W[0]*R,n-=W[1]*X,h=W[2]/3),y(e,a,r,ht,G),o-=G[0]/960*R,n-=G[1]/960*X,l=1+G[2],c=G[3],o=Math.max(0,Math.min(R-1,o)),n=Math.max(0,Math.min(X-1,n));const m=Math.floor(o),d=Math.floor(n),f=o-m,u=n-d,g=4*(i*R+s),p=4*(d*R+m),M=4*(d*R+Math.min(R-1,m+1)),x=4*(Math.min(X-1,d+1)*R+m),v=4*(Math.min(X-1,d+1)*R+Math.min(R-1,m+1));for(let e=0;e<3;e++){const i=((T[p+e]*(1-f)+T[M+e]*f)*(1-u)+(T[x+e]*(1-f)+T[v+e]*f)*u)/255;let s=(["trail","contour"].includes(w.hover.effect)?P(i,h):"dissolve"===w.hover.effect?i*Math.max(0,1+h):i)*l;t[g+e]=255*s}t[g+3]=T[p+3]*c}!function(t,e,i,a,r=0){const{algorithm:o,amount:n,threshold:h}=a,l=("custom"===a.palette?a.colors:s[a.palette]??s.mono).map(A),c=S[o],m=c?new Float32Array(3*e*3):null,d="drift"===a.motion?Math.floor(r*a.speed*3):0,f="shimmer"===a.motion?.15*Math.sin(r*a.speed*2):0;for(let s=0;s<i;s++)for(let a=0;a<e;a++){const r=4*(s*e+a),u=3*(s%3*e+a);if(0===t[r+3]){m&&(m[u]=m[u+1]=m[u+2]=0);continue}let g=0;o.startsWith("bayer")?g=E(a+d&15,s+d&15,Number(o.slice(5))):"noise"===o?g=k(a,s)-.5:"lines"===o?g=(s+d)%4/3-.5:"halftone"===o&&(g=Math.hypot(a%6-2.5,s%6-2.5)/3.54-.5);const p=128*(g*n+f+(.5-h)),M=t[r]+p+(m?.[u]??0),x=t[r+1]+p+(m?.[u+1]??0),v=t[r+2]+p+(m?.[u+2]??0);let w=0,b=0,y=0;if(l.length){let t=1/0;for(const e of l){const i=(M-e[0])**2*.299+(x-e[1])**2*.587+(v-e[2])**2*.114;i<t&&(t=i,[w,b,y]=e)}}else w=51*Math.round(M/51),b=51*Math.round(x/51),y=51*Math.round(v/51);if(t[r]=w,t[r+1]=b,t[r+2]=y,m&&c){m[u]=m[u+1]=m[u+2]=0;for(const[t,r,o]of c){const h=a+t;if(h<0||h>=e||s+r>=i)continue;const l=3*((s+r)%3*e+h);m[l]+=(M-w)*o*n,m[l+1]+=(x-b)*o*n,m[l+2]+=(v-y)*o*n}}}}(t,R,X,w.dither,i),o.ctx.putImageData(new ImageData(t,R,X),0,0),n.ctx.imageSmoothingEnabled=!1,n.ctx.drawImage(o.canvas,0,0,K,Z)}else{const t=Array.from(U[w.style]??w.charset),e=n.ctx,i="ascii"===w.style||!!U[w.style],s=Math.max(3,Math.round(.92*rt)),a=Math.ceil(at+4),r=Math.ceil(rt+4),o=[t.join(""),s,a,r,w.ink,w.colorMode].join(":");if(i&&o!==Y&&(Y=o,D(f.canvas,a*t.length,r),f.ctx.clearRect(0,0,f.canvas.width,r),f.ctx.font=`${s}px monospace`,f.ctx.textBaseline="middle",f.ctx.textAlign="center",f.ctx.fillStyle="accent"===w.colorMode?w.ink:"#ffffff",t.forEach((t,e)=>f.ctx.fillText(t,e*a+a/2,r/2))),"lego"===w.style&&v!==at){v=at,D(M.canvas,Math.ceil(at),Math.ceil(rt));const t=M.ctx;t.clearRect(0,0,M.canvas.width,M.canvas.height),t.fillStyle="rgba(255,255,255,.2)",t.strokeStyle="rgba(0,0,0,.25)",t.lineWidth=Math.max(.5,.6*H),t.beginPath(),t.arc(at/2,rt/2,.28*at,0,2*Math.PI),t.fill(),t.stroke()}e.font=`${s}px monospace`,e.textBaseline="middle",e.textAlign="center";for(let s=0;s<X;s++)for(let o=0;o<R;o++){let n=o,h=s,l=0;_.active&&(_.sample(o/R,s/X,W),n=Math.max(0,Math.min(R-1,o-W[0]*R)),h=Math.max(0,Math.min(X-1,s-W[1]*X)),l=W[2]/3);const c=4*(Math.floor(h)*R+Math.floor(n));if(!T[c+3])continue;const m=T[c],d=T[c+1],u=T[c+2],g=(.299*m+.587*d+.114*u)/255;let p=g;["trail","contour"].includes(w.hover.effect)&&l?p=P(p,l):"dissolve"===w.hover.effect&&(p*=Math.max(0,1+l));const x=w.motion.type;let v=o*at,b=s*rt,E=1;y(x,o/R,s/X,ht,G),v+=G[0]*K/960,b+=G[1]*Z/960,p=Math.max(0,Math.min(1,p+G[2])),E=G[3],i||"accent"!==w.colorMode||(E*=p),e.globalAlpha=E;const S=255*(p-g);let A="source"===w.colorMode?`rgb(${m+S},${d+S},${u+S})`:"gray"===w.colorMode?`rgb(${Math.round(255*p)},${Math.round(255*p)},${Math.round(255*p)})`:w.ink;if(e.fillStyle=A,i){const i=Math.max(0,Math.min(t.length-1,Math.round(p*(t.length-1))));"accent"===w.colorMode?e.drawImage(f.canvas,i*a,0,a,r,"none"===x||"caustics"===x?Math.round(v+(at-a)/2):v+(at-a)/2,"none"===x||"caustics"===x?Math.round(b+(rt-r)/2):b+(rt-r)/2,a,r):e.fillText(t[i],v+at/2,b+rt/2)}else if("dots"===w.style)e.beginPath(),e.arc(v+at/2,b+rt/2,.48*at*Math.sqrt(p),0,2*Math.PI),e.fill();else if("voxel"===w.style){const t=v+at/2,i=b+rt/2;e.beginPath(),e.moveTo(t,b),e.lineTo(v+at,b+.25*rt),e.lineTo(t,i),e.lineTo(v,b+.25*rt),e.closePath(),e.fill(),e.globalAlpha=.72*E,e.beginPath(),e.moveTo(v,b+.25*rt),e.lineTo(t,i),e.lineTo(t,b+rt),e.lineTo(v,b+.75*rt),e.closePath(),e.fill(),e.globalAlpha=.42*E,e.beginPath(),e.moveTo(t,i),e.lineTo(v+at,b+.25*rt),e.lineTo(v+at,b+.75*rt),e.lineTo(t,b+rt),e.closePath(),e.fill()}else{const t="pixel"===w.style?0:Math.max(.5,.06*at);e.fillRect(v,b,at-t,rt-t),"lego"===w.style&&e.drawImage(M.canvas,v,b),"disco"===w.style&&(e.fillStyle=`rgba(255,255,255,${.1+.25*k(o,s)})`,e.fillRect(v,b,at-t,.35*rt),e.fillStyle="rgba(0,0,0,.25)",e.fillRect(v,b+.65*rt,at-t,.35*rt-t))}}}n.ctx.globalAlpha=1,(w.color.amount||w.lights.length)&&(D(u.canvas,K,Z),u.ctx.clearRect(0,0,K,Z),u.ctx.drawImage(n.canvas,0,0)),w.color.amount&&(n.ctx.save(),n.ctx.globalCompositeOperation=w.color.blend,n.ctx.globalAlpha=w.color.amount,n.ctx.fillStyle=w.color.tint,n.ctx.fillRect(0,0,K,Z),n.ctx.restore());for(const t of w.lights){const e=t.radius*Math.max(K,Z),i=n.ctx.createRadialGradient(t.x*K,t.y*Z,0,t.x*K,t.y*Z,e);i.addColorStop(0,t.color),i.addColorStop(1,"transparent"),n.ctx.save(),n.ctx.globalCompositeOperation="screen",n.ctx.globalAlpha=t.intensity,n.ctx.fillStyle=i,n.ctx.fillRect(0,0,K,Z),n.ctx.restore()}if((w.color.amount||w.lights.length)&&(n.ctx.globalCompositeOperation="destination-in",n.ctx.drawImage(u.canvas,0,0),n.ctx.globalCompositeOperation="source-over"),w.mask.enabled&&w.mask.shapes.length){const t=c.ctx;t.clearRect(0,0,K,Z),t.fillStyle="#fff",t.strokeStyle="#fff",t.lineCap="round",t.lineJoin="round";for(const e of w.mask.shapes){if(t.beginPath(),"ellipse"===e.kind)t.ellipse((e.x+e.width/2)*K,(e.y+e.height/2)*Z,e.width*K/2,e.height*Z/2,0,0,2*Math.PI);else{if("rectangle"!==e.kind){if(t.lineWidth=(e.size??.05)*K,1===e.points?.length){t.arc(e.points[0][0]*K,e.points[0][1]*Z,t.lineWidth/2,0,2*Math.PI),t.fill();continue}e.points?.forEach(([e,i],s)=>s?t.lineTo(e*K,i*Z):t.moveTo(e*K,i*Z)),t.stroke();continue}t.rect(e.x*K,e.y*Z,e.width*K,e.height*Z)}t.fill()}n.ctx.globalCompositeOperation=w.mask.invert?"destination-out":"destination-in",n.ctx.drawImage(c.canvas,0,0),n.ctx.globalCompositeOperation="source-over"}const lt=h.ctx;lt.clearRect(0,0,K,Z),lt.globalAlpha=w.backdrop.opacity;const ct=w.backdrop;if("solid"===ct.mode&&(lt.fillStyle=ct.color,lt.fillRect(0,0,K,Z)),"gradient"===ct.mode){const t=lt.createLinearGradient(0,0,K,Z);t.addColorStop(0,ct.color),t.addColorStop(1,ct.color2),lt.fillStyle=t,lt.fillRect(0,0,K,Z)}if("source"===ct.mode&<.drawImage(r.canvas,0,0),"blurred"===ct.mode){const t=Math.max(1,ct.blur);D(m.canvas,Math.max(2,Math.round(K/t)),Math.max(2,Math.round(Z/t))),m.ctx.drawImage(r.canvas,0,0,m.canvas.width,m.canvas.height),lt.imageSmoothingEnabled=!0,lt.drawImage(m.canvas,0,0,K,Z)}lt.globalAlpha=1,w.effects.characterBloom>0&&(D(p.canvas,Math.max(2,Math.round(K/3)),Math.max(2,Math.round(Z/3))),p.ctx.clearRect(0,0,p.canvas.width,p.canvas.height),p.ctx.drawImage(n.canvas,0,0,p.canvas.width,p.canvas.height),lt.save(),lt.globalAlpha=.8*w.effects.characterBloom,lt.globalCompositeOperation="screen",lt.filter=`blur(${1+4*w.effects.characterBloom}px)`,lt.drawImage(p.canvas,0,0,K,Z),lt.restore()),lt.drawImage(n.canvas,0,0);const mt=Object.entries(w.effects).some(([t,e])=>!["angle","focus","blurType","characterBloom"].includes(t)&&"number"==typeof e&&e>0);a.clearRect(0,0,K,Z),mt?(void 0===x&&(x=function(){const t=document.createElement("canvas"),e=t.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,antialias:!1,preserveDrawingBuffer:!0});if(!e)return null;const i=[],s=(t,s)=>{const a=e.createShader(t);if(i.push(a),e.shaderSource(a,s),e.compileShader(a),!e.getShaderParameter(a,e.COMPILE_STATUS))throw new Error(e.getShaderInfoLog(a)||"Finish shader failed");return a},a=e.createProgram();if(e.attachShader(a,s(e.VERTEX_SHADER,"attribute vec2 p;varying vec2 uv;void main(){uv=(p+1.)*.5;gl_Position=vec4(p,0.,1.);}")),e.attachShader(a,s(e.FRAGMENT_SHADER,"precision mediump float;varying vec2 uv;uniform sampler2D src;uniform vec2 size;uniform float t,bloom,grain,dust,scanlines,crt,prism,vignette,glitch,pixelate,blur,blurMode,angle,focus,halftone;\n float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}\n vec4 sampleAt(vec2 p){if(min(min(p.x,p.y),min(1.-p.x,1.-p.y))<0.)return vec4(0.);return texture2D(src,vec2(p.x,1.-p.y));}\n void main(){vec2 q=uv,c=q-.5;q=c*(1.+dot(c,c)*crt*.25)+.5;\n if(glitch>0.)q.x+=(hash(vec2(floor(q.y*35.),floor(t*5.)))-.5)*.07*glitch*step(.82,hash(vec2(floor(q.y*35.),floor(t*5.)+3.)));\n if(pixelate>0.){vec2 grid=size/(1.+pixelate*20.);q=(floor(q*grid)+.5)/grid;}\n vec4 base=sampleAt(q);float edge=smoothstep(.12,.65,length(c));\n vec2 shift=vec2(prism*3.*edge/size.x,prism*edge/size.y);\n if(prism>0.)base.rgb=vec3(sampleAt(q+shift).r,base.g,sampleAt(q-shift).b);\n vec2 dir=vec2(cos(angle),sin(angle))/size;float amount=blur;\n if(blurMode>1.5&&blurMode<2.5){dir=normalize(c+vec2(.0001))/size;amount*=length(c)*2.;}\n if(blurMode>2.5)amount*=smoothstep(.05,.5,abs(q.y-focus));\n vec4 blurred=base;\n if(amount>0.){blurred=base*.2;for(int i=1;i<=4;i++){float f=float(i)*amount*.35;vec2 off=dir*f;if(blurMode<.5)off=vec2(cos(float(i)*1.57),sin(float(i)*1.57))*amount/size;blurred+=sampleAt(q+off)*.1+sampleAt(q-off)*.1;}}\n vec3 light=vec3(0.);if(bloom>0.)for(int i=0;i<4;i++){float a=float(i)*1.5708;vec3 s=sampleAt(q+vec2(cos(a),sin(a))*6./size).rgb;light+=max(vec3(0.),s-.35)*.25;}\n vec3 col=blurred.rgb+light*bloom;col*=1.-scanlines*.4*(.5+.5*cos(q.y*size.y*3.14159));\n col*=1.-vignette*smoothstep(.15,.72,length(c));\n col+=(hash(floor(q*size)+floor(t*12.))-.5)*grain*.2;\n if(dust>0.)col+=step(1.-dust*.002,hash(floor(q*size*.25)+floor(t*2.)))*.4;\n if(halftone>0.)col*=mix(1.,smoothstep(.1,.65,length(fract(q*size/6.)-.5)),halftone);\n gl_FragColor=vec4(clamp(col,0.,1.),blurred.a);}")),e.linkProgram(a),!e.getProgramParameter(a,e.LINK_STATUS))throw new Error("Finish link failed");e.useProgram(a);const r=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,r),e.bufferData(e.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),e.STATIC_DRAW);const o=e.getAttribLocation(a,"p");e.enableVertexAttribArray(o),e.vertexAttribPointer(o,2,e.FLOAT,!1,0,0);const n=e.createTexture();e.bindTexture(e.TEXTURE_2D,n),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),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);const h=["t","bloom","grain","dust","scanlines","crt","prism","vignette","glitch","pixelate","blur","blurMode","angle","focus","halftone"],l=Object.fromEntries(h.map(t=>[t,e.getUniformLocation(a,t)])),c=e.getUniformLocation(a,"size");return{canvas:t,render(i,s,r,o=1){t.width===i.width&&t.height===i.height||(t.width=i.width,t.height=i.height,e.viewport(0,0,t.width,t.height)),e.useProgram(a),e.bindTexture(e.TEXTURE_2D,n),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,i),e.uniform2f(c,t.width/o,t.height/o);for(const t of h)e.uniform1f(l[t],"t"===t?r:"blurMode"===t?["gaussian","directional","radial","progressive"].indexOf(s.blurType):"angle"===t?s.angle*Math.PI/180:s[t]??0);return e.drawArrays(e.TRIANGLE_STRIP,0,4),t},destroy(){e.deleteTexture(n),e.deleteBuffer(r),e.deleteProgram(a),i.forEach(t=>e.deleteShader(t)),t.width=t.height=1,e.getExtension("WEBGL_lose_context")?.loseContext()}}}()),x?a.drawImage(x.render(h.canvas,w.effects,i,H),0,0):a.drawImage(h.canvas,0,0),t.dataset.studioFinish=x?"gpu":"unavailable"):(a.drawImage(h.canvas,0,0),t.dataset.studioFinish="none")},setPixelRatio(t){H=Math.max(.1,Math.min(8,Number.isFinite(t)?t:1))},get pixelRatio(){return H},setBudget(t){V=Math.max(1500,Math.min(j,Math.round(t)))},get maxCells(){return V},configure(t){w=l(t),b++},pointer:(t,e,i)=>{_.configure(w.hover.effect,w.hover.strength,w.hover.radius,w.hover.edgeSafe),_.move(t,e,i)},leave(){_.leave()},get active(){return _.active},get settings(){return l(w)},get capabilities(){return{gpuFinish:null!==x}},invalidate(){F=""},destroy(){x?.destroy();for(const t of[r,o,n,h,c,m,f,u,p,M])t.canvas.width=t.canvas.height=1;O=null,T=new Uint8ClampedArray(0)}}}function B(t,e,i){return new Promise((s,a)=>{const r=()=>{l(),s()},o=()=>{l(),a(new Error("Unable to load this media. Check its format and cross-origin permissions."))},n=()=>{l(),a(new DOMException("Cancelled","AbortError"))},h=setTimeout(o,2e4),l=()=>{clearTimeout(h),t.removeEventListener(e,r),t.removeEventListener("error",o),i?.removeEventListener("abort",n)};t.addEventListener(e,r,{once:!0}),t.addEventListener("error",o,{once:!0}),i?.addEventListener("abort",n,{once:!0}),i?.aborted&&n()})}async function O(t,e){if("string"==typeof t&&t.startsWith("blob:")){const i=await fetch(t,{signal:e}),s=await i.blob();return O(new File([s],"Imported media",{type:s.type}),e)}const i="string"!=typeof t,s=i?t.name:t;if(i?"image/gif"===t.type:/\.gif(?:[?#]|$)/i.test(s)){const s=await import("gifuct-js"),{parseGIF:a,decompressFrames:r}="function"==typeof s.parseGIF?s:s.default,o=i?await t.arrayBuffer():await fetch(t,{signal:e}).then(t=>{if(!t.ok)throw new Error("GIF download failed.");return t.arrayBuffer()});if(e?.aborted)throw new DOMException("Cancelled","AbortError");const n=a(o),h=n.lsd.width,l=n.lsd.height;if(h*l>4e6)throw new Error("GIF is too large. Use a smaller GIF or an MP4.");const c=n.frames.filter(t=>"image"in t).length;if(!c||c*h*l*4>128e6)throw new Error("GIF exceeds the decoded memory budget. Use MP4 for long animations.");const m=r(n,!0);if(m.length*h*l*4>128e6)throw new Error("GIF exceeds the 128 MB decoded budget. Use MP4 for long animations.");const d=document.createElement("canvas");d.width=h,d.height=l;const f=d.getContext("2d"),u=document.createElement("canvas"),g=u.getContext("2d"),p=m.reduce((t,e)=>t+Math.max(20,e.delay),0)/1e3;let M=-1,x=null;const v=t=>{const e=(t%p+p)%p*1e3;let i=0,s=0;for(;s<m.length-1&&(i+=Math.max(20,m[s].delay),!(e<i));s++);s<M&&(f.clearRect(0,0,h,l),M=-1,x=null);for(let t=M+1;t<=s;t++){const e=m[t-1];2===e?.disposalType&&f.clearRect(e.dims.left,e.dims.top,e.dims.width,e.dims.height),3===e?.disposalType&&x&&f.putImageData(x,0,0);const i=m[t];x=3===i.disposalType?f.getImageData(0,0,h,l):null,u.width=i.dims.width,u.height=i.dims.height,g.putImageData(new ImageData(new Uint8ClampedArray(i.patch),u.width,u.height),0,0),f.drawImage(u,i.dims.left,i.dims.top)}return M=s,d};return v(0),{source:d,width:h,height:l,duration:p,animated:!0,seek:async()=>{},frame:v,destroy(){d.width=u.width=1,m.length=0,x=null}}}const a=i?t.type.startsWith("video/"):/\.(mp4|webm|mov)(?:[?#]|$)/i.test(s),r=i?URL.createObjectURL(t):t,o=a?document.createElement("video"):new Image;o.crossOrigin="anonymous",o instanceof HTMLVideoElement&&(o.muted=!0,o.playsInline=!0,o.preload="auto");const n=()=>{o instanceof HTMLVideoElement?(o.pause(),o.removeAttribute("src"),o.load()):o.src="",i&&URL.revokeObjectURL(r)};try{const t=B(o,a?"loadeddata":"load",e);o.src=r,await t;const i=o instanceof HTMLVideoElement?o.videoWidth:o.naturalWidth,s=o instanceof HTMLVideoElement?o.videoHeight:o.naturalHeight;return{source:o,width:i,height:s,duration:o instanceof HTMLVideoElement?o.duration:0,animated:a,async seek(t,e){if(!(o instanceof HTMLVideoElement))return;if(!Number.isFinite(o.duration)||o.duration<=0)throw new Error("Video duration is unavailable.");const i=Math.max(0,Math.min(o.duration-.001,t%o.duration));if(Math.abs(o.currentTime-i)<.001&&o.readyState>=2)return;const s=B(o,"seeked",e);o.currentTime=i,await s},frame:()=>o,destroy:n}}catch(t){throw n(),t}}var Y=t=>{if(t?.aborted)throw new DOMException("Export cancelled","AbortError")};async function _(t,e,i){const{format:s,signal:a}=i,r=Math.round(i.width),o=Math.round(i.height);if(!Number.isFinite(r)||!Number.isFinite(o)||r<2||o<2||r>4096||o>4096||r*o>16777216)throw new Error("Choose export dimensions between 2 and 4096 pixels.");if(!["png","jpeg","mp4","webm","gif"].includes(s))throw new Error("Unknown export format.");if(void 0!==i.fps&&!Number.isFinite(i.fps))throw new Error("Frames per second must be finite.");const n=Math.max(1,Math.min(60,Math.round(i.fps??24))),h=i.duration??5;if(!Number.isFinite(h)||h<=0||h>60)throw new Error("Choose a duration from 0 to 60 seconds.");const c="png"===s||"jpeg"===s,m=i.time??0;if(!Number.isFinite(m)||m<0)throw new Error("Image time must be a finite non-negative number.");if(!c&&r*o>8294400)throw new Error("Video exports support up to 3840 × 2160 pixels.");if("gif"===s&&(r*o>921600||h*n>600))throw new Error("GIF export supports up to 1280 × 720 and 600 frames. Use MP4 for larger exports.");if(void 0!==i.referenceWidth&&(!Number.isFinite(i.referenceWidth)||i.referenceWidth<1))throw new Error("Reference width must be a positive number.");if("gif"===s&&n>30)throw new Error("GIF exports support up to 30 fps. Choose MP4 or WebM for higher frame rates.");const d=document.createElement("canvas"),f=X(d,l(e),{maxDimension:4096,maxCells:i.maxCells??12e3,pixelRatio:r/(i.referenceWidth??Math.min(r,960))});let u;try{if(Y(a),i.onProgress?.(0),c){if(f.render(await t.frame(m,a),m,r,o),"unavailable"===d.dataset.studioFinish)throw new Error("Optical effects need WebGL. Disable these effects or export in a supported browser.");Y(a);const e=await new Promise((t,e)=>d.toBlob(i=>i?t(i):e(new Error("Image export failed.")),"png"===s?"image/png":"image/jpeg",i.quality??.92));return i.onProgress?.(1),e}const e=Math.ceil(h*n);if("gif"===s){const s=await import("gifenc"),{GIFEncoder:l,quantize:c,applyPalette:m}="function"==typeof s.GIFEncoder?s:s.default,u=l(),g=d.getContext("2d");for(let s=0;s<e;s++){Y(a);const l=s/n;if(f.invalidate(),f.render(await t.frame(l,a),l,r,o),"unavailable"===d.dataset.studioFinish)throw new Error("Optical effects need WebGL. Disable these effects or export in a supported browser.");const p=g.getImageData(0,0,r,o).data,M=c(p,256),x=m(p,M);u.writeFrame(x,r,o,{palette:M,delay:10*(Math.round(100*Math.min((s+1)/n,h))-Math.round(100*s/n)),repeat:0}),i.onProgress?.((s+1)/e*.98),await new Promise(t=>setTimeout(t,0))}return u.finish(),i.onProgress?.(1),new Blob([new Uint8Array(u.bytes())],{type:"image/gif"})}const{Output:l,Mp4OutputFormat:g,WebMOutputFormat:p,BufferTarget:M,CanvasSource:x,canEncodeVideo:v}=await import("mediabunny"),w="mp4"===s?"avc":"vp9";if(!await v(w,{width:r,height:o}))throw new Error(`${s.toUpperCase()} encoding is unavailable in this browser. Try another format or a current browser with WebCodecs.`);const b=new l({format:"mp4"===s?new g({fastStart:"in-memory"}):new p,target:new M});d.width=r,d.height=o,u=()=>b.cancel();const y=new x(d,{codec:w,bitrate:Math.max(5e5,Math.round(r*o*n*.15))});b.addVideoTrack(y,{frameRate:n}),d.width=r,d.height=o,await b.start();for(let s=0;s<e;s++){Y(a);const l=s/n;if(f.invalidate(),f.render(await t.frame(l,a),l,r,o),"unavailable"===d.dataset.studioFinish)throw new Error("Optical effects need WebGL. Disable these effects or export in a supported browser.");await y.add(l,Math.min(1/n,h-l)),i.onProgress?.((s+1)/e*.98),s%4==0&&await new Promise(t=>setTimeout(t,0))}return y.close(),Y(a),await b.finalize(),u=void 0,i.onProgress?.(1),new Blob([b.target.buffer],{type:"mp4"===s?"video/mp4":"video/webm"})}catch(t){throw await(u?.().catch(()=>{})),t}finally{f.destroy(),d.width=d.height=1}}async function z(t,e,i={}){const s=await O(e,i.signal);try{return W(t,s,i)}catch(t){throw s.destroy(),t}}function W(t,e,i={}){let s=l(i.settings),a=i.width??e.width,r=i.height??e.height;const o=X(t,s,i),n=new b;let h=0,c=!1,m=!0,d=!1,g=!0,p=0,M=0,x=0,v=-1,w=0,y=0,k=0;const E=matchMedia("(prefers-reduced-motion: reduce)"),S=e.source instanceof HTMLVideoElement?e.source:null,A=()=>{c||h||!g||document.hidden||(h=requestAnimationFrame(I))},F=()=>!d&&!E.matches&&g&&!document.hidden,T=()=>{S&&(S.loop=!0,F()?S.play().catch(()=>{d=!0,m=!0,A()}):S.pause()),M=0,m=!0,A()};function I(t){if(h=0,c||!g||document.hidden)return;const l=F();l&&(p+=M?Math.min(.1,(t-M)/1e3):0),M=t;const u=l&&(e.animated||"none"!==s.motion.type||"none"!==s.dither.motion||s.effects.grain>0||s.effects.dust>0||s.effects.glitch>0),b=S?.getVideoPlaybackQuality?.().totalVideoFrames??-1,E="none"!==s.motion.type||"none"!==s.dither.motion||s.effects.grain>0||s.effects.dust>0||s.effects.glitch>0,T=!S||b<0||b!==v;if(m||o.active||u&&(T||E)&&t-x>=1e3/Math.max(1,Math.min(60,i.fps??60))-.5){const h=performance.now();try{e.animated&&!S&&o.invalidate();const[t,l]=f(a,r,s);o.render(e.frame(S?.currentTime??p),p,t,l,n.update(p,s.motion.type,s.motion.speed));const c=performance.now()-h;i.onFrame?.(S?.currentTime??p,c),y=y?.9*y+.1*c:c,++w>20&&!1!==i.adaptive&&(k=y>13?k+1:0,k>=12&&o.maxCells>3e3&&(o.setBudget(Math.max(3e3,.8*o.maxCells)),i.onQualityChange?.(o.maxCells),k=0,y=0))}catch(t){d=!0,i.onError?.(t instanceof Error?t:new Error(String(t)))}m=!1,x=t,v=b}l&&(u||o.active)&&A()}const R=e=>{if(!F())return;const i=t.getBoundingClientRect();o.pointer((e.clientX-i.left)/i.width,(e.clientY-i.top)/i.height,e.timeStamp),A()},P=()=>{o.leave(),A()},C=new IntersectionObserver(([t])=>{g=t.isIntersecting,T()});C.observe(t),t.addEventListener("pointermove",R),t.addEventListener("pointerleave",P),t.addEventListener("pointercancel",P),document.addEventListener("visibilitychange",T),E.addEventListener("change",T);const L=()=>{c||(c=!0,cancelAnimationFrame(h),C.disconnect(),t.removeEventListener("pointermove",R),t.removeEventListener("pointerleave",P),t.removeEventListener("pointercancel",P),document.removeEventListener("visibilitychange",T),E.removeEventListener("change",T),i.signal?.removeEventListener("abort",L),o.destroy(),e.destroy())};if(i.signal?.addEventListener("abort",L,{once:!0}),i.signal?.aborted)throw L(),new DOMException("Cancelled","AbortError");return T(),{canvas:t,media:e,update(t){s=u(s,t),o.configure(s),m=!0,A()},resize(t,e,i){void 0!==i&&o.setPixelRatio(i),a=Math.max(2,t),r=Math.max(2,e),m=!0,A()},pause(t=!0){d=t,T()},async seek(t){p=Math.max(0,t),await e.seek(p),o.invalidate(),m=!0,A()},redraw(){o.invalidate(),m=!0,A()},get time(){return S?.currentTime??p},get paused(){return d||E.matches},setBudget(t){o.setBudget(t),i.onQualityChange?.(o.maxCells),m=!0,A()},get pixelRatio(){return o.pixelRatio},get maxCells(){return o.maxCells},get capabilities(){return o.capabilities},destroy:L}}var G={Standard:()=>import("figlet/fonts/Standard"),Slant:()=>import("figlet/fonts/Slant"),Small:()=>import("figlet/fonts/Small"),Big:()=>import("figlet/fonts/Big"),Banner:()=>import("figlet/fonts/Banner"),Block:()=>import("figlet/fonts/Block"),Bubble:()=>import("figlet/fonts/Bubble"),Digital:()=>import("figlet/fonts/Digital"),Doom:()=>import("figlet/fonts/Doom"),Lean:()=>import("figlet/fonts/Lean"),Mini:()=>import("figlet/fonts/Mini"),Script:()=>import("figlet/fonts/Script"),Shadow:()=>import("figlet/fonts/Shadow"),Speed:()=>import("figlet/fonts/Speed"),Starwars:()=>import("figlet/fonts/Star Wars"),Stop:()=>import("figlet/fonts/Stop"),Straight:()=>import("figlet/fonts/Straight"),Thin:()=>import("figlet/fonts/Thin"),ThreeD:()=>import("figlet/fonts/3-D"),Univers:()=>import("figlet/fonts/Univers"),Wavy:()=>import("figlet/fonts/Wavy")},q=Object.keys(G);async function j(t,e="Standard",i="#ffffff"){if(!Object.prototype.hasOwnProperty.call(G,e))throw new Error("Unknown text font.");const{default:s}=await import("figlet/browser"),a=await G[e]();s.parseFont(e,a.default),s.defaults({fetchFontIfMissing:!1});const r=s.textSync(t.slice(0,120),{font:e}),o=r.split("\n"),n=Math.max(1,...o.map(t=>t.length)),h=Math.max(1,o.length),l=Math.min(1,2048/(9*n)),c=document.createElement("canvas");c.width=Math.ceil(9*n*l+32),c.height=Math.ceil(15*h*l+32);const m=c.getContext("2d");return m.fillStyle="#080808",m.fillRect(0,0,c.width,c.height),m.fillStyle=i,m.font=15*l+"px monospace",m.textBaseline="top",o.forEach((t,e)=>m.fillText(t,16,16+15*e*l)),{canvas:c,ascii:r}}var V={standard:{label:"Classic ASCII",chars:" .:-=+*#%@"},asciify:{label:"Asciify",chars:" .:-=+ASCIIFY#@"},minimal:{label:"Minimal",chars:" .:+"},detailed:{label:"Detailed",chars:" .,:;i1tfLCG08@"},letters:{label:"Letters",chars:" .ilLCFTYASMW"},technical:{label:"Technical",chars:" .:;>_/[{}]=+*#@$"},blocks:{label:"Tonal blocks",chars:" ░▒▓█"},braille:{label:"Braille",chars:" ⠁⠃⠇⡇⣇⣧⣷⣿"}},H=V;export{i as BLEND_MODES,V as CHARACTER_SETS,a as DEFAULT_STUDIO_SETTINGS,e as DITHER_ALGORITHMS,H as STUDIO_CHARACTER_SETS,p as STUDIO_LOOKS,v as STUDIO_MOTIONS,s as STUDIO_PALETTES,t as STUDIO_STYLES,q as STUDIO_TEXT_FONTS,X as createStudioRenderer,j as createStudioText,_ as exportStudio,O as loadStudioMedia,z as mountStudio,W as mountStudioMedia,l as normalizeStudioSettings,m as parseStudioSettings,x as restyleStudio,c as serializeStudioSettings,d as studioCrop,f as studioDimensions,g as studioGrid,M as studioLook,L as studioSourceSize,u as updateStudioSettings};//# sourceMappingURL=studio.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
type ColorMode = 'grayscale' | 'fullcolor' | 'matrix' | 'accent';
|
|
2
2
|
type RenderMode = 'ascii' | 'dots';
|
|
3
|
-
type AnimationStyle = 'none' | '
|
|
3
|
+
type AnimationStyle = 'none' | 'caustics' | 'current' | 'reform';
|
|
4
4
|
type ArtStyle = 'classic' | 'particles' | 'letters' | 'claudeCode' | 'art' | 'terminal' | 'box' | 'lines' | 'braille' | 'katakana' | 'circles' | 'shadows' | 'geometric' | 'pipes' | 'waves' | 'shards' | 'smoke' | 'ascii' | 'interface' | 'prompt' | 'data' | 'humanist' | 'mesh';
|
|
5
5
|
type HoverEffect = 'spotlight' | 'magnify' | 'repel' | 'glow' | 'colorShift' | 'attract' | 'shatter' | 'trail' | 'glitchText';
|
|
6
6
|
type HoverShape = 'circle' | 'box';
|
|
@@ -390,7 +390,7 @@ declare const LIVING_STYLE_PRESETS: {
|
|
|
390
390
|
readonly agentField: {
|
|
391
391
|
readonly charsetFrames: string[];
|
|
392
392
|
readonly charsetFps: 1.6;
|
|
393
|
-
readonly animationStyle: "
|
|
393
|
+
readonly animationStyle: "caustics";
|
|
394
394
|
readonly animationSpeed: 0.75;
|
|
395
395
|
readonly ditherStrength: 0.12;
|
|
396
396
|
readonly hoverEffect: "glow";
|
|
@@ -427,7 +427,7 @@ declare const LIVING_STYLE_PRESETS: {
|
|
|
427
427
|
readonly liquidSignal: {
|
|
428
428
|
readonly charsetFrames: string[];
|
|
429
429
|
readonly charsetFps: 2.4;
|
|
430
|
-
readonly animationStyle: "
|
|
430
|
+
readonly animationStyle: "current";
|
|
431
431
|
readonly animationSpeed: 0.65;
|
|
432
432
|
readonly ditherStrength: 0.45;
|
|
433
433
|
readonly hoverEffect: "repel";
|
|
@@ -464,7 +464,7 @@ declare const LIVING_STYLE_PRESETS: {
|
|
|
464
464
|
readonly cursorGravity: {
|
|
465
465
|
readonly charsetFrames: string[];
|
|
466
466
|
readonly charsetFps: 1.2;
|
|
467
|
-
readonly animationStyle: "
|
|
467
|
+
readonly animationStyle: "current";
|
|
468
468
|
readonly animationSpeed: 0.9;
|
|
469
469
|
readonly ditherStrength: 0.2;
|
|
470
470
|
readonly hoverEffect: "attract";
|
|
@@ -501,7 +501,7 @@ declare const LIVING_STYLE_PRESETS: {
|
|
|
501
501
|
readonly editorialPulse: {
|
|
502
502
|
readonly charsetFrames: string[];
|
|
503
503
|
readonly charsetFps: 0.9;
|
|
504
|
-
readonly animationStyle: "
|
|
504
|
+
readonly animationStyle: "caustics";
|
|
505
505
|
readonly animationSpeed: 0.55;
|
|
506
506
|
readonly ditherStrength: 0.18;
|
|
507
507
|
readonly hoverEffect: "spotlight";
|
|
@@ -538,7 +538,7 @@ declare const LIVING_STYLE_PRESETS: {
|
|
|
538
538
|
readonly terminalFlow: {
|
|
539
539
|
readonly charsetFrames: string[];
|
|
540
540
|
readonly charsetFps: 3;
|
|
541
|
-
readonly animationStyle: "
|
|
541
|
+
readonly animationStyle: "reform";
|
|
542
542
|
readonly animationSpeed: 1.1;
|
|
543
543
|
readonly ditherStrength: 0.22;
|
|
544
544
|
readonly hoverEffect: "glitchText";
|
|
@@ -583,4 +583,4 @@ declare const HOVER_PRESETS: Record<HoverPreset, {
|
|
|
583
583
|
options: Partial<AsciiOptions>;
|
|
584
584
|
}>;
|
|
585
585
|
|
|
586
|
-
export {
|
|
586
|
+
export { type AsciiFrame as A, CHARSETS as C, DEFAULT_OPTIONS as D, type HoverEffect as H, LIVING_STYLE_PRESETS as L, PALETTE_THEMES as P, type RenderMode as R, type SourceType as S, type AsciiOptions as a, type ArtStyle as b, ART_STYLE_PRESETS as c, type AnimationStyle as d, type AsciiCell as e, type AsciiResult as f, CHARSET_SEQUENCES as g, type CharsetKey as h, type CharsetSequenceKey as i, type ColorMode as j, HOVER_PRESETS as k, type HoverPreset as l, type HoverShape as m, type LivingStylePresetKey as n, type PaletteTheme as o };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
type ColorMode = 'grayscale' | 'fullcolor' | 'matrix' | 'accent';
|
|
2
2
|
type RenderMode = 'ascii' | 'dots';
|
|
3
|
-
type AnimationStyle = 'none' | '
|
|
3
|
+
type AnimationStyle = 'none' | 'caustics' | 'current' | 'reform';
|
|
4
4
|
type ArtStyle = 'classic' | 'particles' | 'letters' | 'claudeCode' | 'art' | 'terminal' | 'box' | 'lines' | 'braille' | 'katakana' | 'circles' | 'shadows' | 'geometric' | 'pipes' | 'waves' | 'shards' | 'smoke' | 'ascii' | 'interface' | 'prompt' | 'data' | 'humanist' | 'mesh';
|
|
5
5
|
type HoverEffect = 'spotlight' | 'magnify' | 'repel' | 'glow' | 'colorShift' | 'attract' | 'shatter' | 'trail' | 'glitchText';
|
|
6
6
|
type HoverShape = 'circle' | 'box';
|
|
@@ -390,7 +390,7 @@ declare const LIVING_STYLE_PRESETS: {
|
|
|
390
390
|
readonly agentField: {
|
|
391
391
|
readonly charsetFrames: string[];
|
|
392
392
|
readonly charsetFps: 1.6;
|
|
393
|
-
readonly animationStyle: "
|
|
393
|
+
readonly animationStyle: "caustics";
|
|
394
394
|
readonly animationSpeed: 0.75;
|
|
395
395
|
readonly ditherStrength: 0.12;
|
|
396
396
|
readonly hoverEffect: "glow";
|
|
@@ -427,7 +427,7 @@ declare const LIVING_STYLE_PRESETS: {
|
|
|
427
427
|
readonly liquidSignal: {
|
|
428
428
|
readonly charsetFrames: string[];
|
|
429
429
|
readonly charsetFps: 2.4;
|
|
430
|
-
readonly animationStyle: "
|
|
430
|
+
readonly animationStyle: "current";
|
|
431
431
|
readonly animationSpeed: 0.65;
|
|
432
432
|
readonly ditherStrength: 0.45;
|
|
433
433
|
readonly hoverEffect: "repel";
|
|
@@ -464,7 +464,7 @@ declare const LIVING_STYLE_PRESETS: {
|
|
|
464
464
|
readonly cursorGravity: {
|
|
465
465
|
readonly charsetFrames: string[];
|
|
466
466
|
readonly charsetFps: 1.2;
|
|
467
|
-
readonly animationStyle: "
|
|
467
|
+
readonly animationStyle: "current";
|
|
468
468
|
readonly animationSpeed: 0.9;
|
|
469
469
|
readonly ditherStrength: 0.2;
|
|
470
470
|
readonly hoverEffect: "attract";
|
|
@@ -501,7 +501,7 @@ declare const LIVING_STYLE_PRESETS: {
|
|
|
501
501
|
readonly editorialPulse: {
|
|
502
502
|
readonly charsetFrames: string[];
|
|
503
503
|
readonly charsetFps: 0.9;
|
|
504
|
-
readonly animationStyle: "
|
|
504
|
+
readonly animationStyle: "caustics";
|
|
505
505
|
readonly animationSpeed: 0.55;
|
|
506
506
|
readonly ditherStrength: 0.18;
|
|
507
507
|
readonly hoverEffect: "spotlight";
|
|
@@ -538,7 +538,7 @@ declare const LIVING_STYLE_PRESETS: {
|
|
|
538
538
|
readonly terminalFlow: {
|
|
539
539
|
readonly charsetFrames: string[];
|
|
540
540
|
readonly charsetFps: 3;
|
|
541
|
-
readonly animationStyle: "
|
|
541
|
+
readonly animationStyle: "reform";
|
|
542
542
|
readonly animationSpeed: 1.1;
|
|
543
543
|
readonly ditherStrength: 0.22;
|
|
544
544
|
readonly hoverEffect: "glitchText";
|
|
@@ -583,4 +583,4 @@ declare const HOVER_PRESETS: Record<HoverPreset, {
|
|
|
583
583
|
options: Partial<AsciiOptions>;
|
|
584
584
|
}>;
|
|
585
585
|
|
|
586
|
-
export {
|
|
586
|
+
export { type AsciiFrame as A, CHARSETS as C, DEFAULT_OPTIONS as D, type HoverEffect as H, LIVING_STYLE_PRESETS as L, PALETTE_THEMES as P, type RenderMode as R, type SourceType as S, type AsciiOptions as a, type ArtStyle as b, ART_STYLE_PRESETS as c, type AnimationStyle as d, type AsciiCell as e, type AsciiResult as f, CHARSET_SEQUENCES as g, type CharsetKey as h, type CharsetSequenceKey as i, type ColorMode as j, HOVER_PRESETS as k, type HoverPreset as l, type HoverShape as m, type LivingStylePresetKey as n, type PaletteTheme as o };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "asciify-engine",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"description": "Framework-agnostic ASCII art engine. Convert images, videos, and GIFs into ASCII art rendered on canvas.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -27,16 +27,6 @@
|
|
|
27
27
|
"default": "./dist/core.cjs"
|
|
28
28
|
}
|
|
29
29
|
},
|
|
30
|
-
"./backgrounds": {
|
|
31
|
-
"import": {
|
|
32
|
-
"types": "./dist/backgrounds.d.ts",
|
|
33
|
-
"default": "./dist/backgrounds.js"
|
|
34
|
-
},
|
|
35
|
-
"require": {
|
|
36
|
-
"types": "./dist/backgrounds.d.cts",
|
|
37
|
-
"default": "./dist/backgrounds.cjs"
|
|
38
|
-
}
|
|
39
|
-
},
|
|
40
30
|
"./hover": {
|
|
41
31
|
"import": {
|
|
42
32
|
"types": "./dist/hover.d.ts",
|
|
@@ -108,7 +98,6 @@
|
|
|
108
98
|
"terminal-art",
|
|
109
99
|
"retro",
|
|
110
100
|
"matrix-effect",
|
|
111
|
-
"matrix-rain",
|
|
112
101
|
"ascii-video",
|
|
113
102
|
"ascii-webcam",
|
|
114
103
|
"ascii-image",
|
|
@@ -143,9 +132,6 @@
|
|
|
143
132
|
"ascii-hero",
|
|
144
133
|
"landing-page-background",
|
|
145
134
|
"website-background",
|
|
146
|
-
"parallax-stars",
|
|
147
|
-
"aurora-effect",
|
|
148
|
-
"particle-effect",
|
|
149
135
|
"ascii-particles"
|
|
150
136
|
],
|
|
151
137
|
"author": "ayangabryl",
|
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
name: asciify-engine
|
|
3
3
|
description: Build and tune browser ASCII images, video, GIFs, text, and interactive heroes with asciify-engine. Use for media conversion, character and color choices, hover integration, layered HTML typography, scroll-synced video, and rendering performance in apps using this package.
|
|
4
4
|
metadata:
|
|
5
|
-
tested-engine: "
|
|
5
|
+
tested-engine: "4.0.0"
|
|
6
6
|
updated: "2026-09-09"
|
|
7
7
|
---
|
|
8
8
|
|
|
9
9
|
# Asciify Engine
|
|
10
10
|
|
|
11
|
-
Use the published `asciify-engine` npm package for browser canvas rendering. Tested against **
|
|
11
|
+
Use the published `asciify-engine` npm package for browser canvas rendering. Tested against **4.0.0**. Check the application's installed version and its public types before using newer options; a local checkout can contain unpublished changes.
|
|
12
12
|
|
|
13
13
|
- Agent entry: https://asciify.org/skill (redirects to this Markdown document).
|
|
14
14
|
- Playground: https://asciify.org/editor
|
|
@@ -19,7 +19,7 @@ Use the published `asciify-engine` npm package for browser canvas rendering. Tes
|
|
|
19
19
|
npm install asciify-engine@latest
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
-
Version
|
|
22
|
+
Version 4.0 exports `asciify-engine` and `asciify-engine/core` for media rendering. Procedural background templates are downloaded from asciify.org/backgrounds and are not npm exports. Root imports remain supported. GIF decoding loads `gifuct-js` when a GIF API is called. Enhanced website hovers, living-image motion and fine dither are available from the optional `asciify-engine/hover` entry; root and `/core` do not load it.
|
|
23
23
|
|
|
24
24
|
## Install the agent skill
|
|
25
25
|
|
|
@@ -34,7 +34,7 @@ This uses the Vercel Skills CLI to install the repository skill and its linked r
|
|
|
34
34
|
- Static image: `asciify(source, canvas, config)` returns `Promise<() => void>`. Call the cleanup on unmount, including for a still image.
|
|
35
35
|
- Video: `asciifyVideo(source, canvas, config)` returns `Promise<() => void>`. Call that function on unmount. Use `fitTo` and `objectFit: 'cover'` for full-bleed heroes; `contain` for a whole-subject preview.
|
|
36
36
|
- GIF: `asciifyGif(source, canvas, config)` returns a cleanup function asynchronously.
|
|
37
|
-
- Procedural background: `asciiBackground
|
|
37
|
+
- Procedural background: download a template from https://asciify.org/backgrounds and import its `asciiBackground` helper locally. Call its `destroy()` on unmount. No background generators ship in npm 4.0.
|
|
38
38
|
- Dense custom rendering: use `imageToAsciiTextFrame` and `renderTextFrameToCanvas`; keep the same options when converting and rendering. Use object frames when per-cell mutation is required.
|
|
39
39
|
|
|
40
40
|
For a hero with HTML layered through the ASCII, read [references/layered-hero.md](references/layered-hero.md) and use the accompanying [HTML](examples/layered-hero.html), [CSS](examples/layered-hero.css), and [JavaScript](examples/layered-hero.js). These are ordinary Vite/bundler inputs, not another npm dependency. Supply your own media.
|
|
@@ -89,7 +89,7 @@ Preview it: letter glyph densities differ, so arbitrary words are not automatica
|
|
|
89
89
|
|
|
90
90
|
The public npm `HoverEffect` IDs in 1.2.0 are `spotlight`, `magnify`, `repel`, `glow`, `colorShift`, `attract`, `shatter`, `trail`, and `glitchText`. Those remain valid APIs, but they are **not identical to the current website's enhanced interactions**.
|
|
91
91
|
|
|
92
|
-
The website offers **Trail, Water, Contour, Dissolve, Silk, Vortex, and Off** through an optional studio surface module. Its
|
|
92
|
+
The website offers **Trail, Water, Contour, Dissolve, Silk, Vortex, and Off** through an optional studio surface module. Its Caustics, Slow Current, Reveal & Reform, and fine-dither treatments ship in the same `asciify-engine/hover` module. Use its typed options rather than converting display names into engine `hoverEffect` or `animationStyle` values.
|
|
93
93
|
|
|
94
94
|
To reproduce those interactions, read [references/studio-effects.md](references/studio-effects.md). Import `mountHover` from `asciify-engine/hover` (1.2.0+); no separate download is needed. Keep engine `hoverStrength: 0` and `animationStyle: 'none'` when using it, to avoid applying two effects. Trail is the site's default. Prefer a stationary-grid effect such as Trail or Dissolve when the user wants a wake without spatial displacement.
|
|
95
95
|
|
|
@@ -98,7 +98,7 @@ For GSAP, pass your installed `gsap` and `ScrollTrigger` instances through `scro
|
|
|
98
98
|
## Procedural backgrounds
|
|
99
99
|
|
|
100
100
|
```js
|
|
101
|
-
import { asciiBackground } from '
|
|
101
|
+
import { asciiBackground } from './wave.js'; // Download from asciify.org/backgrounds
|
|
102
102
|
const background = asciiBackground(host, {
|
|
103
103
|
type: 'aurora', fontSize: 14, speed: 0.8, density: 0.55,
|
|
104
104
|
});
|
|
@@ -106,4 +106,4 @@ const background = asciiBackground(host, {
|
|
|
106
106
|
background.destroy();
|
|
107
107
|
```
|
|
108
108
|
|
|
109
|
-
|
|
109
|
+
In 4.0, procedural backgrounds are copyable/downloadable templates at asciify.org/backgrounds, outside npm. Import the downloaded template locally. Fluid also remains application code. No procedural background type is a package option in 4.0.
|
|
@@ -44,7 +44,7 @@ These are `/hover` module `effect` IDs, not the root engine’s legacy `HoverEff
|
|
|
44
44
|
|
|
45
45
|
## Still-image motion and dither
|
|
46
46
|
|
|
47
|
-
The module's `motion` IDs are `none`, `
|
|
47
|
+
The module's `motion` IDs are `none`, `caustics` (traveling light on a fixed grid), `current` (Slow Current), and `reform` (Reveal & Reform). Keep source-video motion alone unless the user intentionally wants another animation layered onto it. For a still, select one motion and a restrained `motionSpeed`, rather than stacking effects.
|
|
48
48
|
|
|
49
49
|
For the website's fine-dither treatment, use the module's `fineDither: true` and `ditherStrength` after matching the backing canvas's character settings. This is separate from the core renderer’s built-in dither behavior. Check a still and a moving scene for flicker before choosing the default.
|
|
50
50
|
|
|
@@ -57,6 +57,6 @@ The module observes reduced motion and visibility. Coordinate explicit pause wit
|
|
|
57
57
|
When using the low-level object-frame API, pass `getFrame: () => currentFrame` to preserve exact glyph identities and colors. With canvas-only integrations the module estimates density from sampled ink coverage.
|
|
58
58
|
|
|
59
59
|
|
|
60
|
-
##
|
|
60
|
+
## Hero finish
|
|
61
61
|
|
|
62
62
|
Version 1.3.0 adds text-shaped charcoal cutouts (`textMask`), peripheral scanline/fringe control (`edgeEffect`), fixed accent ink, Prism edge softness (`edgeSoftness`), and fixed-grid fluid Trail. These additions ship in **npm 1.3.0**. Upgrade older applications before using them. See the [complete API, layering example, lifecycle, and fallback limits](hero-finish.md).
|
|
@@ -110,3 +110,18 @@ Other renderer styles define their own marks, so character controls only apply t
|
|
|
110
110
|
Use `studioGrid(width, height, settings, maxCells, pixelRatio)` to inspect `minimum`, `cell`, `columns`, `rows`, and `limited` at the actual preview resolution. ASCII/tile renderers use `cellSize`; Dither uses `dither.scale`. Respect the returned minimum in a size picker instead of offering a range that the performance budget silently clamps. Use the same budget and reference width for export to retain density.
|
|
111
111
|
|
|
112
112
|
For PNG/JPEG, pass `time: player.time` to `exportStudio` to save the selected frame. Default time is zero; animation exports start at zero. Snapshot the time/settings/preview size before asynchronous loading. The editor's Export tab separates Image and Animation, shows validated pixel sizes and keeps website code in an expandable section.
|
|
113
|
+
|
|
114
|
+
## Still-image motion (3.0)
|
|
115
|
+
|
|
116
|
+
Import `STUDIO_MOTIONS` from `/studio` to populate controls; each item has `value`, `label`, and `description`. Use `motion: { type: 'caustics' | 'current' | 'reform' | 'none', speed: 1 }`. Off is the default. Caustics preserves the grid, Current introduces fluid displacement, and Reform uses a staggered dissolve with a readable hold. Loops last 12 / speed seconds and preserve source/accent/gray color choice. Speed is 0.1–3. Do not combine source video with ambient motion unless requested. Hover remains independently configurable. Retired saved motion names normalize to Off. See [upgrading.md](upgrading.md) before moving an existing integration to 3.0.
|
|
117
|
+
|
|
118
|
+
## Sharp previews (3.0.1)
|
|
119
|
+
|
|
120
|
+
Studio defaults to a 6-unit cell size. Separate the sampling grid from canvas backing resolution: `instance.resize(width, height, pixelRatio)` updates the backing size and raster scale together without remounting media. Doubling dimensions and passing 2 keeps the same character count while drawing sharper glyphs. Use a bounded backing dimension and at most the device DPR; avoid stretching a small bitmap with CSS. `instance.pixelRatio` reports the scale. When exporting, pass `referenceWidth: canvas.width / instance.pixelRatio` to preserve logical density. Explicit saved cell sizes remain valid. Do not force a tile style's coarse cell size onto ASCII when changing render styles.
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
## Fine grids and sharp previews (4.0)
|
|
124
|
+
|
|
125
|
+
Start with `cellSize: 6`; the editor remembers each style's size. A Retina preview uses `resize(width, height, pixelRatio)` on a `mountStudioMedia` handle to keep logical cells independent of physical raster resolution. Its `setBudget(maxCells)` changes the upper sampling budget; automatic adaptation may reduce it when frames are slow. At a 960×540 logical canvas, 32,768 cells permit Lego size 4, and 65,536 permit dither scale 3. Keep ASCII at a measured budget such as 12,000 cells. Smaller requested cells cannot bypass the active budget; show `studioGrid`'s actual minimum in controls. Fine grids cost more, so profile hover and motion on target devices. Studio caches Lego stud artwork.
|
|
126
|
+
|
|
127
|
+
For menus shared with a media hero, import the eight `CHARACTER_SETS` from `asciify-engine/core`; `STUDIO_CHARACTER_SETS` is the identical catalog through `/studio`. A hero need not load the Studio runtime.
|
|
@@ -35,3 +35,17 @@ After updating, read the installed SKILL.md and its linked references, confirm i
|
|
|
35
35
|
The curated `STUDIO_CHARACTER_SETS` export is available from `/studio` in 2.0.0. Its values contain `label` and `chars`; assign `chars` to Studio settings only for `style: 'ascii'`. The primary editor at `/editor` uses Studio; earlier webcam and classic-editor workflows remain at `/editor/classic`.
|
|
36
36
|
|
|
37
37
|
2.0.1 fixes Dither size controls and publishes `studioGrid` for budget-aware size pickers. Still-image exports accept `time` for the selected frame. Existing calls default to frame zero. No preset names change in this patch.
|
|
38
|
+
|
|
39
|
+
## 3.0 motion migration
|
|
40
|
+
|
|
41
|
+
3.0 removes the old ambient animation identifiers from the public `AnimationStyle` and Studio types and deletes their implementations. Use `none`, `caustics`, `current`, or `reform` instead. The `/hover` module also replaces `print` with `caustics`. Old saved Studio IDs normalize to `none`; do not silently substitute an effect. Review application-owned saved core options when upgrading and replace retired IDs explicitly.
|
|
42
|
+
|
|
43
|
+
These are actual new treatments, not aliases for Fire, Breathe, Rainbow, Hologram, or the old row-wave effects. Caustics moves light through a fixed grid; Current carries the image with bounded local flow; Reform disperses and reassembles cells with spatially staggered timing. Core Canvas uses the same field with simpler opacity modulation; `/hover` and `/studio` also modulate character density. Hover and optical glitch/blur finishes are separate and remain available. Optional procedural backgrounds are unchanged.
|
|
44
|
+
|
|
45
|
+
Use one motion owner: `animationStyle` for core, `motion` for `/hover`, or `motion.type` for `/studio`. Keep Off as the default for video. Each motion loops every `12 / speed` seconds. Offer pause, respect reduced motion, and avoid claiming a guaranteed FPS on every device.
|
|
46
|
+
|
|
47
|
+
## 4.0 background migration
|
|
48
|
+
|
|
49
|
+
Remove imports from `asciify-engine/backgrounds` and generator imports from the root package. Download the chosen `.js` template from https://asciify.org/backgrounds and change the import to `./wave.js` (or your selected file). The template exports `asciiBackground`; keep calling `destroy()` on unmount. It handles resizing, hidden/offscreen suspension, reduced motion, and cleanup. A selected template contains only that generator; backgrounds.js is the optional full collection. Application-owned source templates are separate from npm updates. Existing installations can stay on 3.x while migrating. Text and media rendering remain supported, including text backgrounds.
|
|
50
|
+
|
|
51
|
+
Use `CHARACTER_SETS` from root or `/core` for the same eight choices as the editor's `STUDIO_CHARACTER_SETS`. This data-only import does not load Studio. Keep custom characters available separately; do not populate standard UI choices from the larger legacy `CHARSETS` object.
|