[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_104":105,"_106":107},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","LyamMJ","name","screenshot-transfer-test","path","v10-client.ts","project",{"_22":45,"_11":12,"_33":46,"_47":-5,"_48":42,"_49":50,"_51":50,"_52":53,"_54":-5,"_55":56,"_57":58,"_59":32,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":42},"file",{"_22":23,"_11":14,"_24":25,"_26":-5,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":-5,"_13":44},"permalink","https://www.val.town/x/LyamMJ/screenshot-transfer-test/code/v10-client.ts","extension","id","e7a5aca1-3170-4adb-8a60-617341f55ef3","fileId","d0a9f444-a153-11f1-bcee-1607ee4eb77e","parentId","branchId","244b2043-f321-4cac-9931-5f0587613ef4","branchVersion",301,"latest",true,"createdAt",["D",1787751819913],"version",2,"fileType","script","content","import { Output, Mp4OutputFormat, BufferTarget, CanvasSource, Quality, Input, ALL_FORMATS, BlobSource, VideoSampleSink } from 'https://esm.sh/mediabunny@1.52.0';\n\nconst W=2560,H=1440,FPS=30,SEG=Math.max(0,Math.min(29,Number((window as any).__LYAM_SEG||0))),START=SEG,N=30;\nconst c=document.getElementById('stage') as HTMLCanvasElement;\nconst x=c.getContext('2d',{alpha:false,desynchronized:true})!;\nx.imageSmoothingEnabled=true;x.imageSmoothingQuality='high';\nconst C={bg:'#02090d',bg2:'#061920',deep:'#0a2028',cyan:'#4ee5e7',cyan2:'#a8fbff',teal:'#1c8795',red:'#ef3c55',coral:'#ff7388',white:'#f7feff',muted:'#8ba9b2'};\nconst clamp=(v:number)=>Math.max(0,Math.min(1,v));\nconst sm=(v:number)=>{v=clamp(v);return v*v*(3-2*v)};\nconst ease=(a:number,b:number,t:number)=>sm((t-a)/(b-a));\nconst lerp=(a:number,b:number,u:number)=>a+(b-a)*u;\n\nfunction rr(px:number,py:number,pw:number,ph:number,r:number){x.beginPath();x.roundRect(px,py,pw,ph,r)}\nfunction font(size:number,w=700){return `${w} ${size}px system-ui,-apple-system,Segoe UI,sans-serif`}\nfunction txt(s:string,px:number,py:number,size=34,w=700,align:CanvasTextAlign='center',color=C.white,a=1){x.save();x.globalAlpha=a;x.fillStyle=color;x.font=font(size,w);x.textAlign=align;x.textBaseline='middle';x.fillText(s,px,py);x.restore()}\nfunction bg(t:number){\n const g=x.createLinearGradient(0,0,W,H);g.addColorStop(0,C.bg);g.addColorStop(.52,C.bg2);g.addColorStop(1,'#010609');x.fillStyle=g;x.fillRect(0,0,W,H);\n x.save();x.globalAlpha=.18;const rx=1820+Math.sin(t*.33)*120,ry=310+Math.cos(t*.27)*80;const r=x.createRadialGradient(rx,ry,20,rx,ry,920);r.addColorStop(0,'#146776');r.addColorStop(.42,'rgba(12,66,77,.33)');r.addColorStop(1,'rgba(0,0,0,0)');x.fillStyle=r;x.fillRect(550,0,2010,1100);x.restore();\n x.save();x.globalAlpha=.18;for(let i=0;i<70;i++){const px=(i*347+91)%W,py=(i*211+57)%H;x.fillStyle=i%7===0?C.coral:C.cyan;x.fillRect(px,py,1.4,1.4)}x.restore();\n}\nfunction glowStroke(color:string,width:number,blur:number,a=1){x.globalAlpha=a;x.strokeStyle=color;x.lineWidth=width;x.shadowColor=color;x.shadowBlur=blur;x.lineCap='round';x.lineJoin='round'}\nfunction slab(px:number,py:number,pw:number,ph:number,depth:number,hot:string,a=1,tilt=0){\n x.save();x.globalAlpha=a;x.translate(px+pw/2,py+ph/2);x.rotate(tilt);x.translate(-pw/2,-ph/2);\n for(let d=depth;d>=2;d-=2){rr(d*.34,d*.45,pw,ph,30);x.fillStyle=`rgba(0,0,0,${.012+(depth-d)/depth*.006})`;x.fill()}\n rr(0,0,pw,ph,30);const g=x.createLinearGradient(0,0,pw,ph);g.addColorStop(0,'#183945');g.addColorStop(.35,'#0b252e');g.addColorStop(1,'#041217');x.fillStyle=g;x.shadowColor=hot;x.shadowBlur=32;x.fill();x.shadowBlur=0;\n const edge=x.createLinearGradient(0,0,pw,0);edge.addColorStop(0,'rgba(255,255,255,.16)');edge.addColorStop(.38,hot);edge.addColorStop(.55,'rgba(255,255,255,.18)');edge.addColorStop(1,'rgba(255,255,255,.04)');x.strokeStyle=edge;x.lineWidth=2.2;x.stroke();\n x.restore();\n}\nfunction scriptObj(px:number,py:number,s:number,a=1,hot=C.cyan,edit=0){\n x.save();x.globalAlpha=a;x.translate(px,py);x.rotate(-.055);slab(-s*.43,-s*.55,s*.86,s*1.1,20,hot,1,0);\n for(let i=0;i<5;i++){const yy=-s*.28+i*s*.15;const w=s*(i===1?.51:i===4?.34:.60);x.save();x.strokeStyle=i===2?hot:'rgba(215,242,246,.46)';x.lineWidth=i===2?10:7;x.lineCap='round';x.shadowColor=i===2?hot:'transparent';x.shadowBlur=i===2?14:0;x.beginPath();x.moveTo(-s*.27,yy);x.lineTo(-s*.27+w*(i===2?lerp(.35,1,edit):1),yy);x.stroke();x.restore()}\n if(edit>0){const cx=-s*.27+s*.60*lerp(.35,1,edit)+9,cy=-s*.28+2*s*.15;x.save();x.strokeStyle=C.cyan2;x.lineWidth=4;x.shadowColor=C.cyan;x.shadowBlur=18;x.beginPath();x.moveTo(cx,cy-18);x.lineTo(cx,cy+18);x.stroke();x.restore()}\n x.restore();\n}\nfunction cameraObj(px:number,py:number,s:number,a=1,shock=0){\n x.save();x.globalAlpha=a;x.translate(px,py);x.rotate(.035);slab(-s*.5,-s*.29,s,.58*s,22,C.red,1,0);\n x.save();x.translate(-s*.06,0);for(let k=3;k>=0;k--){const rr0=s*(.13+k*.055+shock*.015*k);x.beginPath();x.arc(0,0,rr0,0,Math.PI*2);x.fillStyle=k===0?'#061014':`rgba(${40+k*10},${70+k*7},${78+k*6},.92)`;x.shadowColor=C.red;x.shadowBlur=shock*30+8;x.fill();x.strokeStyle=k===0?C.red:'rgba(255,255,255,.15)';x.lineWidth=3;x.stroke()}const rg=x.createRadialGradient(-s*.1,-s*.08,4,0,0,s*.16);rg.addColorStop(0,'rgba(255,255,255,.95)');rg.addColorStop(.12,'#8bf3f6');rg.addColorStop(.38,'#184a59');rg.addColorStop(1,'#03090c');x.beginPath();x.arc(0,0,s*.13,0,Math.PI*2);x.fillStyle=rg;x.fill();x.restore();\n x.restore();\n}\nfunction timelineObj(px:number,py:number,s:number,a=1,reflow=0){\n x.save();x.globalAlpha=a;x.translate(px,py);x.rotate(-.018);slab(-s*.55,-s*.31,s*1.1,s*.62,20,C.red,1,0);\n const ys=[-.15,0,.15];for(let r=0;r<3;r++){const base=-s*.38;const shift=(r===1?1:-1)*reflow*s*.08;x.fillStyle=r===1?'rgba(239,60,85,.78)':'rgba(78,229,231,.28)';rr(base+shift,ys[r]*s-s*.045,s*(r===1?.55:.72),s*.09,10);x.fill()}\n x.strokeStyle='rgba(255,255,255,.82)';x.lineWidth=3;x.beginPath();x.moveTo(s*.14,-s*.22);x.lineTo(s*.14,s*.22);x.stroke();x.restore();\n}\nfunction avatarObj(px:number,py:number,s:number,a=1,hot=C.cyan){\n x.save();x.globalAlpha=a;x.translate(px,py);x.shadowColor=hot;x.shadowBlur=25;x.strokeStyle=hot;x.lineWidth=9;x.beginPath();x.arc(0,-s*.22,s*.17,0,Math.PI*2);x.stroke();x.beginPath();x.arc(0,s*.28,s*.34,Math.PI*1.08,Math.PI*1.92);x.stroke();x.shadowBlur=0;\n const rg=x.createRadialGradient(-s*.08,-s*.27,2,0,-s*.22,s*.18);rg.addColorStop(0,'rgba(255,255,255,.8)');rg.addColorStop(.18,'rgba(78,229,231,.40)');rg.addColorStop(1,'rgba(5,18,23,.10)');x.fillStyle=rg;x.beginPath();x.arc(0,-s*.22,s*.14,0,Math.PI*2);x.fill();x.restore();\n}\nfunction videoObj(px:number,py:number,pw:number,ph:number,a=1,hot=C.cyan){\n x.save();x.globalAlpha=a;slab(px,py,pw,ph,18,hot,1,-.018);x.translate(px+pw/2,py+ph/2);x.fillStyle='rgba(78,229,231,.10)';rr(-pw*.34,-ph*.29,pw*.68,ph*.58,20);x.fill();x.strokeStyle='rgba(78,229,231,.45)';x.lineWidth=3;x.stroke();x.beginPath();x.moveTo(-18,-34);x.lineTo(-18,34);x.lineTo(42,0);x.closePath();x.fillStyle=C.white;x.shadowColor=C.cyan;x.shadowBlur=18;x.fill();x.restore();\n}\nfunction bez(p0:[number,number],p1:[number,number],p2:[number,number],p3:[number,number],u:number){const v=1-u;return [v*v*v*p0[0]+3*v*v*u*p1[0]+3*v*u*u*p2[0]+u*u*u*p3[0],v*v*v*p0[1]+3*v*v*u*p1[1]+3*v*u*u*p2[1]+u*u*u*p3[1]] as [number,number]}\nfunction pathCurve(p0:[number,number],p1:[number,number],p2:[number,number],p3:[number,number],color:string,a=1){x.save();glowStroke(color,5,20,a);x.beginPath();x.moveTo(...p0);x.bezierCurveTo(...p1,...p2,...p3);x.stroke();x.shadowBlur=0;x.globalAlpha=a*.32;x.strokeStyle='rgba(255,255,255,.9)';x.lineWidth=1.2;x.stroke();x.restore()}\nfunction pulseCurve(p0:[number,number],p1:[number,number],p2:[number,number],p3:[number,number],u:number,color:string,a=1){const p=bez(p0,p1,p2,p3,clamp(u));x.save();x.globalAlpha=a;const rg=x.createRadialGradient(p[0],p[1],1,p[0],p[1],42);rg.addColorStop(0,'white');rg.addColorStop(.12,color);rg.addColorStop(.45,'rgba(78,229,231,.32)');rg.addColorStop(1,'rgba(0,0,0,0)');x.fillStyle=rg;x.fillRect(p[0]-45,p[1]-45,90,90);x.restore()}\nfunction pointer(px:number,py:number,t:number,color=C.cyan){const p=.5+.5*Math.sin(t*5.5);x.save();x.strokeStyle=color;x.lineWidth=4;x.shadowColor=color;x.shadowBlur=20;for(let k=0;k<2;k++){x.globalAlpha=(1-p)*(.65-k*.18);x.beginPath();x.arc(px,py,32+p*32+k*22,0,Math.PI*2);x.stroke()}x.globalAlpha=1;x.fillStyle=C.white;x.beginPath();x.arc(px,py,8,0,Math.PI*2);x.fill();x.restore()}\n\nfunction chainScene(t:number){\n bg(t);const local=t;const inA=ease(0,.8,local);const cam=1+.035*ease(0,5.4,local);x.save();x.translate(W/2,H/2);x.scale(cam,cam);x.translate(-W/2,-H/2);\n const sx=520,sy=700,cx=1280,cy=695,tx=2050,ty=700;const p0:[number,number]=[760,700],p1:[number,number]=[940,560],p2:[number,number]=[1080,570],p3:[number,number]=[1100,685];const q0:[number,number]=[1455,695],q1:[number,number]=[1630,830],q2:[number,number]=[1770,820],q3:[number,number]=[1820,700];\n pathCurve(p0,p1,p2,p3,C.red,inA*.55);pathCurve(q0,q1,q2,q3,C.red,inA*.55);\n const edit=ease(.55,2.1,local),pulse=ease(1.2,4.5,local);scriptObj(sx,sy,315,inA,C.cyan,edit);cameraObj(cx,cy,420,ease(.3,1.15,local),ease(2.45,3.2,local));timelineObj(tx,ty,430,ease(.8,1.55,local),ease(3.75,4.8,local));\n if(pulse<.5)pulseCurve(p0,p1,p2,p3,pulse*2,C.red,inA);else pulseCurve(q0,q1,q2,q3,(pulse-.5)*2,C.red,inA);\n txt('SCRIPT',sx,1040,25,780,'center',C.muted,inA);txt('CAMÉRA',cx,1040,25,780,'center',C.muted,ease(.3,1.15,local));txt('MONTAGE',tx,1040,25,780,'center',C.muted,ease(.8,1.55,local));\n txt('3 MOTS',150,130,30,850,'left',C.coral,ease(0,.45,local));\n x.restore();\n}\nfunction editorScene(t:number,img:ImageBitmap){\n x.fillStyle='#000';x.fillRect(0,0,W,H);const z=1+.045*ease(6,10,t),sw=img.width/z,sh=img.height/z;const sx=(img.width-sw)*.50,sy=(img.height-sh)*.64;x.drawImage(img,sx,sy,sw,sh,0,0,W,H);\n const u=ease(6.3,9.6,t);const px=lerp(W*.38,W*.57,u),py=H*.855+Math.sin(t*1.1)*6;pointer(px,py,t,C.cyan);\n}\nfunction transformScene(t:number){\n bg(t);const a=ease(14.4,15.1,t);const u=ease(14.7,21.3,t);const left=620,right=1920,mid=1270;\n // old branch sinks away\n const oldA=a*(1-ease(16.2,19.2,t));x.save();x.globalAlpha=oldA;cameraObj(left,475,300,1,0);timelineObj(left,940,320,1,.25);pathCurve([left,635],[left-120,720],[left-120,780],[left,820],C.red,.65);txt('RETAKE',left,1220,25,800,'center',C.coral,oldA);x.restore();\n // central avatar becomes dominant\n const scale=lerp(.82,1.08,ease(16.2,19.4,t));x.save();x.translate(mid,700);x.scale(scale,scale);x.translate(-mid,-700);avatarObj(mid,665,410,a,C.cyan);x.restore();\n const scriptX=lerp(850,1160,ease(15.2,18.3,t));scriptObj(scriptX,690,220,a,C.cyan,ease(15.8,17.4,t));\n const outA=ease(17.2,19.7,t);videoObj(right-260,470,530,360,outA,C.cyan);pathCurve([1430,700],[1570,550],[1630,545],[1660,645],C.cyan,outA*.75);pulseCurve([1430,700],[1570,550],[1630,545],[1660,645],ease(17.5,19.6,t),C.cyan,outA);\n txt('SCRIPT',scriptX,980,23,800,'center',C.muted,a);txt('AVATAR',mid,1110,23,800,'center',C.muted,a);txt('VIDÉO',right,930,23,800,'center',C.muted,outA);\n if(t>19.4){const v=ease(19.4,21.4,t);x.save();x.globalAlpha=v;const g=x.createLinearGradient(250,0,W-250,0);g.addColorStop(0,C.red);g.addColorStop(.5,'rgba(255,255,255,.16)');g.addColorStop(1,C.cyan);x.fillStyle=g;x.fillRect(250,1260,(W-500)*v,3);x.restore()}\n}\nfunction editorScene2(t:number,img:ImageBitmap){x.fillStyle='#000';x.fillRect(0,0,W,H);x.drawImage(img,0,0,W,H);const phase=(t<24)?0:1;const px=phase?W*.52:W*.10,py=phase?H*.86:H*.47;pointer(px,py,t,phase?C.cyan:C.coral)}\nfunction finalScene(t:number){\n bg(t);const a=ease(26,26.6,t),collapse=ease(26.6,28.6,t);const cx=W/2,cy=720;\n // layered friction gate\n for(let i=0;i<4;i++){const off=(i-1.5)*220*(1-collapse),ww=420-45*i,hh=690-60*i;x.save();x.globalAlpha=a*(1-i*.12);x.translate(cx+off,cy);x.rotate((i-1.5)*.045*(1-collapse));slab(-ww/2,-hh/2,ww,hh,28,i<2?C.red:C.coral,1,0);x.restore()}\n const gateA=ease(27.4,29.2,t);x.save();x.globalAlpha=gateA;x.strokeStyle=C.cyan;x.lineWidth=8;x.shadowColor=C.cyan;x.shadowBlur=34;x.beginPath();x.arc(cx,cy,250,Math.PI*.18,Math.PI*.82);x.stroke();x.beginPath();x.arc(cx,cy,250,Math.PI*1.18,Math.PI*1.82);x.stroke();x.restore();\n scriptObj(cx,cy,230,gateA,C.cyan,1);txt('MOINS DE FRICTION',cx,1170,34,820,'center',C.cyan2,gateA);\n}\nfunction render(t:number,img:ImageBitmap|null,sample:any){\n if(t<6) chainScene(t);\n else if(t<10) editorScene(t,img!);\n else if(t<14.4){x.fillStyle='#000';x.fillRect(0,0,W,H);sample?.draw(x,0,0,W,H)}\n else if(t<22) transformScene(t);\n else if(t<26) editorScene2(t,img!);\n else finalScene(t);\n}\n\n(async()=>{\n try{\n const needsImg=(START<10&&START+1>6)||(START<26&&START+1>22);\n const img=needsImg?await createImageBitmap(await fetch('?a=editor').then(r=>r.blob())):null;\n const times:number[]=[];for(let f=0;f=10&&t<14.4)times.push(Math.min(4.36,t-10))}\n let it:any=null;\n if(times.length){const b=await fetch('?a=smart').then(r=>r.blob());const inp=new Input({formats:ALL_FORMATS,source:new BlobSource(b)});const tr=await inp.getPrimaryVideoTrack();if(!tr)throw new Error('smart video track missing');const sink=new VideoSampleSink(tr,{hardwareAcceleration:'no-preference'});it=sink.samplesAtTimestamps(times)[Symbol.asyncIterator]()}\n const target=new BufferTarget();const out=new Output({format:new Mp4OutputFormat({fastStart:'in-memory'}),target});\n const src=new CanvasSource(c,{codec:'avc',quality:new Quality({quantizer:2,bitrate:36000000}),hardwareAcceleration:'no-preference',keyFrameInterval:2});out.addVideoTrack(src,{frameRate:FPS});await out.start();\n for(let f=0;f=10&&t<14.4){const r=await it.next();sample=r.value||null}\n render(t,img,sample);await src.add(f/FPS,1/FPS,{keyFrame:f===0});sample?.close?.();\n }\n await out.finalize();if(!target.buffer)throw new Error('no mp4 buffer');\n await fetch(`?a=upload&n=${SEG}`,{method:'POST',headers:{'content-type':'video/mp4'},body:target.buffer});document.title=`DONE_${SEG}_${target.buffer.byteLength}`;\n }catch(e:any){console.error(e);document.title='ERR_'+String(e?.message||e)}\n})();","deleted",false,"label",[14],"2e2d84c5-4cd0-4b03-9511-db7f79164a7b",["D",1787668259508],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Disposable screenshot transfer test","imageUrl","userId","bcddeca6-7d1d-4b55-aa60-e10cde275c06","pinnedFileId","9762a59a-a091-11f1-8cfc-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01a03934-fb8c-729c-b4f2-61d2aa658ad6","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_103":99},"org",{"_9":10,"_96":97,"_98":99,"_55":56,"_100":101,"_102":42},"branch",{"_35":86,"_11":87,"_22":28,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":12,"_95":10},"isOwned",365,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Lyam MJ","avatar","https://lh3.googleusercontent.com/a/ACg8ocIRldVLBOtjmd5dX2sz8oZeRTCHMB4DV0WwSAbF8cJfbT7Qpcc=s96-c","tier","free","canRestrictVals","profileImageUrl","ctx",{"_79":-5,"_137":138,"_139":140,"_141":142,"_143":42,"_144":42,"_145":42,"_146":32,"_147":-5,"_148":-7,"_149":-7,"_150":63,"_151":42,"_152":42,"_153":-5,"_154":42,"_155":42,"_156":42,"_157":-5},"ENV",{"_108":109,"_110":111,"_112":87,"_113":114,"_115":116,"_117":118,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]