https://www.framecompose.com/_next/static/chunks/4172.75b0d8624df3dd2e.js

1!function(){try{var e="u">typeof window?window:"u">typeof global?global:"u">typeof globalThis?globalThis:"u">typeof self?self:{},t=(new e.Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="42783ed1-574b-495a-8531-cc598e98d6ea",e._sentryDebugIdIdentifier="sentry-dbid-42783ed1-574b-495a-8531-cc598e98d6ea")}catch(e){}}();"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4172],{11243:(e,t,a)=>{a.r(t),a.d(t,{default:()=>x});var s=a(95155),n=a(12115);function i(e,t,a,s){return`hsla(${e.toFixed(1)}, ${t}%, ${a}%, ${s.toFixed(3)})`}function l({config:e,showGuide:t=!0}){let a=(0,n.useRef)(null),r=(0,n.useRef)(null),o=(0,n.useRef)(e);(0,n.useEffect)(()=>{o.current=e},[e]);let c=(0,n.useMemo)(()=>{var t;let a,s,n,i,l;return s=Math.max(0,Math.min(360,Math.round((t={particleCount:e.particleCount,radius:e.radius,sparkleSize:e.sparkleSize,seed:e.seed}).particleCount))),n=Math.max(1,t.radius),i=Math.max(1,t.sparkleSize),l=(a=function(e){if("number"==typeof e&&Number.isFinite(e))return e>>>0;let t=String(e),a=0x811c9dc5;for(let e=0;e<t.length;e+=1)a^=t.charCodeAt(e),a=Math.imul(a,0x1000193);return a>>>0}(t.seed)>>>0,()=>{let e=Math.imul((a+=0x6d2b79f5)^a>>>15,1|a);return(((e^=e+Math.imul(e^e>>>7,61|e))^e>>>14)>>>0)/0x100000000}),Array.from({length:s},(e,t)=>{let a=l(),s=Math.pow(l(),.58),r=l()>.5?1:-1;return{id:t,baseAngle:l()*Math.PI*2,orbitRadius:n*(.12+.88*s),angularVelocity:r*(.18+.82*l())*(.55+1.25*a),driftX:(l()-.5)*n*.45,driftY:(l()-.5)*n*.35,size:i*(.35+1.9*l())*(.72+.65*a),lifeOffset:l(),twinkleRate:.8+2.8*l(),phase:l()*Math.PI*2,layer:a,hueShift:(l()-.5)*26}})},[e.particleCount,e.radius,e.sparkleSize,e.seed]),d=(0,n.useRef)(c);return(0,n.useEffect)(()=>{d.current=c},[c]),(0,n.useEffect)(()=>{let e=a.current,s=e?.parentElement;if(!e||!s)return;let n=e.getContext("2d",{alpha:!0});if(!n)return;let l=()=>{let t=s.getBoundingClientRect(),a=Math.min(window.devicePixelRatio||1,2);e.width=Math.max(1,Math.round(t.width*a)),e.height=Math.max(1,Math.round(t.height*a)),e.style.width=`${t.width}px`,e.style.height=`${t.height}px`,n.setTransform(a,0,0,a,0,0)};l();let c="u">typeof ResizeObserver?new ResizeObserver(l):null;c?.observe(s);let u=e=>{var a,l,c;let h,p,m,x=s.getBoundingClientRect(),b=x.width,g=x.height,f=o.current,y=f.x*b,v=f.y*g,j=function(e){let t=e.replace("#","");if(6!==t.length)return 48;let a=parseInt(t.slice(0,2),16)/255,s=parseInt(t.slice(2,4),16)/255,n=parseInt(t.slice(4,6),16)/255,i=Math.max(a,s,n),l=i-Math.min(a,s,n);if(0===l)return 48;return(60*(i===a?(s-n)/l%6:i===s?(n-a)/l+2:(a-s)/l+4)+360)%360}(f.color);for(let t of(n.clearRect(0,0,b,g),n.save(),n.globalCompositeOperation="lighter",a=d.current,l=e/1e3,h=Math.max(0,(c={x:y,y:v,speed:f.speed,opacity:f.opacity}).speed),p=Math.max(0,Math.min(1,c.opacity)),m=l*h,a.map(e=>{var t;let a=Math.sin(((t=e.lifeOffset+m*(.12+.09*e.layer))-Math.floor(t))*Math.PI),s=.5+.5*Math.sin(m*e.twinkleRate*4.4+e.phase),n=.5+.5*Math.sin(.7*m+.7*e.phase),i=e.baseAngle+m*e.angularVelocity+.45*Math.sin(.45*m+e.phase),l=e.orbitRadius*(.72+.32*n),r=Math.sin(.55*m+e.phase);return{...e,x:c.x+Math.cos(i)*l+e.driftX*r,y:c.y+Math.sin(i)*l*.78+e.driftY*Math.cos(m+e.phase),alpha:p*a*(.3+.7*s)*(.58+.42*e.layer),scale:.45+1.25*s+.25*a,glow:.55+1.65*s}}))){let a=1+.35*t.layer;!function(e,t,a,s,n,l,r,o){if(l<=.01)return;let c=s*(3.8+1.8*r),d=e.createRadialGradient(t,a,0,t,a,c);d.addColorStop(0,i(n,92,82,.55*l)),d.addColorStop(.38,i(n+8,95,64,.18*l)),d.addColorStop(1,i(n,100,50,0)),e.fillStyle=d,e.beginPath(),e.arc(t,a,c,0,2*Math.PI),e.fill(),e.save(),e.translate(t,a),e.rotate(o),e.strokeStyle=i(n+4,100,88,.82*l),e.lineCap="round",e.lineWidth=Math.max(1,.16*s),e.beginPath(),e.moveTo(-(1.65*s),0),e.lineTo(1.65*s,0),e.moveTo(0,-(1.65*s)),e.lineTo(0,1.65*s),e.stroke(),e.rotate(Math.PI/4),e.strokeStyle=i(n+16,100,92,.45*l),e.lineWidth=Math.max(.8,.11*s),e.beginPath(),e.moveTo(-(.8*s),0),e.lineTo(.8*s,0),e.moveTo(0,-(.8*s)),e.lineTo(0,.8*s),e.stroke(),e.restore(),e.fillStyle=i(n+10,100,94,l),e.beginPath(),e.arc(t,a,Math.max(.9,.22*s),0,2*Math.PI),e.fill()}(n,t.x,t.y,t.size*t.scale*a,j+t.hueShift,t.alpha,t.glow,t.phase+.0012*e*f.speed)}

1n.restore(),t&&(n.save(),n.strokeStyle="rgba(255, 232, 145, 0.54)",n.setLineDash([5,10]),n.lineWidth=1,n.beginPath(),n.arc(y,v,f.radius,0,2*Math.PI),n.stroke(),n.setLineDash([]),n.fillStyle="rgba(255, 244, 190, 0.96)",n.beginPath(),n.arc(y,v,4,0,2*Math.PI),n.fill(),n.restore()),r.current=requestAnimationFrame(u)};return r.current=requestAnimationFrame(u),()=>{null!==r.current&&cancelAnimationFrame(r.current),c?.disconnect()}},[t]),(0,s.jsx)("canvas",{ref:a,"aria-label":"Localized magic sparkle animation",className:"absolute inset-0 h-full w-full"})}var r=a(36265),o=a(66747),c=a(23758);function d(e,t,a){return Number.isFinite(e)?Math.max(t,Math.min(a,e)):t}async function u(e){await (0,c.m)(e)}function h({config:e,style:t}){let a=Math.max(48,2.45*e.radius),i=(0,n.useMemo)(()=>{let a,s,n,i,l;return a=d(e.particleCount,8,220),s=d(e.speed,.05,4),n=d(e.opacity,0,1),i=d(e.sparkleSize,.5,18),l={autoPlay:!0,background:{color:{value:"transparent"}},clear:!0,detectRetina:!0,fpsLimit:60,fullScreen:{enable:!1},interactivity:{detectsOn:"canvas",events:{resize:{enable:!0}}},particles:{color:{value:e.color},links:{enable:!1},number:{density:{enable:!0,width:220,height:220},value:a},opacity:{value:{min:.12*n,max:n},animation:{enable:!0,speed:1.2+s,sync:!1}},shape:{type:"circle"},size:{value:{min:Math.max(.6,.22*i),max:1.2*i},animation:{enable:!0,speed:2+1.6*s,sync:!1}}}},"soft-fireflies"===t?{...l,particles:{...l.particles,move:{direction:"none",enable:!0,outModes:{default:"bounce"},random:!0,speed:{min:.16*s,max:.82*s},straight:!1},opacity:{value:{min:.08*n,max:.72*n},animation:{enable:!0,speed:.55+.75*s,sync:!1}},size:{value:{min:Math.max(1,.42*i),max:1.85*i},animation:{enable:!0,speed:.9+s,sync:!1}}}}:"micro-wisps"===t?{...l,particles:{...l.particles,move:{direction:"top-right",enable:!0,outModes:{default:"out"},random:!0,speed:{min:.22*s,max:1.25*s},straight:!1},number:{density:{enable:!0,width:260,height:260},value:Math.round(.65*a)},opacity:{value:{min:.04*n,max:.38*n},animation:{enable:!0,speed:.35+.55*s,sync:!1}},size:{value:{min:Math.max(2,.9*i),max:4.2*i},animation:{enable:!0,speed:.55+.6*s,sync:!1}}}}:{...l,particles:{...l.particles,move:{direction:"none",enable:!0,outModes:{default:"bounce"},random:!0,speed:{min:.36*s,max:1.7*s},spin:{enable:!0,acceleration:2+2*s,position:{x:50,y:50}},straight:!1}}}},[e,t]);return(0,s.jsx)("div",{"aria-label":"Localized tsParticles effect",className:"pointer-events-none absolute overflow-hidden rounded-full",style:{left:`${100*e.x}%`,top:`${100*e.y}%`,width:a,height:a,opacity:e.opacity,transform:"translate(-50%, -50%)",mixBlendMode:"screen"},children:(0,s.jsx)(o.tW,{init:u,children:(0,s.jsx)(o.Ay,{id:`vfx-lab-tsparticles-${t}`,className:"absolute inset-0",options:i})})})}let p={x:.54,y:.43,radius:118,particleCount:96,speed:1.15,opacity:.86,color:"#f8d980",sparkleSize:5.4,seed:1337};function m({label:e,value:t,min:a,max:n,step:i,onChange:l,displayValue:r}){return(0,s.jsxs)("label",{className:"grid gap-2 text-sm text-slate-200",children:[(0,s.jsxs)("span",{className:"flex items-center justify-between gap-4",children:[(0,s.jsx)("span",{children:e}),(0,s.jsx)("span",{className:"font-mono text-xs text-amber-100",children:r??t})]}),(0,s.jsx)("input",{className:"h-2 w-full cursor-pointer accent-amber-300",type:"range",min:a,max:n,step:i,value:t,onChange:e=>l(Number(e.target.value))})]})}function x(){let e=(0,n.useRef)(null),[t,a]=(0,n.useState)(p),[i,o]=(0,n.useState)("pixijs"),[c,d]=(0,n.useState)("sparkle-burst"),u=(0,n.useCallback)((e,t)=>{a(a=>({...a,[e]:t}))},[]),x=(0,n.useCallback)((t,s)=>{let n=e.current;if(!n)return;let i=n.getBoundingClientRect();i.width<=0||i.height<=0||a(e=>({...e,x:Math.max(0,Math.min(1,(t-i.left)/i.width)),y:Math.max(0,Math.min(1,(s-i.top)/i.height))}))},[]);return(0,s.jsx)("main",{className:"min-h-screen bg-slate-950 text-white",children:(0,s.jsxs)("div",{className:"mx-auto grid min-h-screen max-w-7xl gap-6 px-5 py-6 lg:grid-cols-[minmax(0,1fr)_360px]",children:[(0,s.jsxs)("section",{className:"flex min-h-[620px] flex-col gap-4",children:[(0,s.jsxs)("div",{children:[(0,s.jsx)("p",{className:"text-xs uppercase tracking-[0.22em] text-amber-200/80",children:"Dev VFX Lab"}),(0,s.jsx)("h1",{className:"mt-2 text-3xl font-semibold tracking-normal text-white",children:"Localized VFX Quality Prototype"})]}),(0,s.jsxs)("div",{ref:e,className:"relative min-h-[560px] flex-1 overflow-hidden rounded-lg border border-white/10 bg-[#172033] shadow-2xl",onPointerDown:e=>x(e.clientX,e.clientY),onPointerMove:e=>{1===e.buttons&&x(e.clientX,e.clientY)},children:[(0,s.jsx)("div",{className:"absolute inset-0 bg-[radial-gradient(circle_at_54%_42%,rgba(246,205,114,0.32),transparent_20%),radial-gradient(circle_at_33%_30%,rgba(124,190,255,0.22),transparent_26%),linear-gradient(135deg,#111827_0%,#1b2b42_45%,#2f2444_100%)]"}),(0,s.jsx)("div",{className:"absolute bottom-0 left-[18%] h-[76%] w-[32%] rounded-t-full bg-[linear-gradient(150deg,rgba(21,27,40,0.92),rgba(45,38,62,0.86))] shadow-[0_0_80px_rgba(116,82,190,0.35)]"}),(0,s.jsx)("div",{className:"absolute bottom-[38%] left-[28%] h-[18%] w-[15%] rounded-full bg-[radial-gradient(circle_at_44%_35%,rgba(255,223,180,0.62),rgba(109,72,92,0.94)_65%)] shadow-[0_0_50px_rgba(244,176,104,0.24)]"}),(0,s.jsx)("div",{className:"absolute bottom-0 right-[11%] h-[64

1%] w-[30%] bg-[linear-gradient(160deg,rgba(44,62,82,0.55),rgba(16,22,33,0.9))] [clip-path:polygon(38%_0,100%_100%,0_100%)]"}),(0,s.jsx)("div",{className:"absolute inset-x-0 bottom-0 h-32 bg-[linear-gradient(0deg,rgba(4,8,17,0.86),transparent)]"}),"custom-canvas"===i?(0,s.jsx)(l,{config:t}):null,"tsparticles"===i?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(h,{config:t,style:c}),(0,s.jsx)(l,{config:{...t,opacity:0}})]}):null,"pixijs"===i?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(r.t,{config:t}),(0,s.jsx)(l,{config:{...t,opacity:0}})]}):null]})]}),(0,s.jsxs)("aside",{className:"self-start rounded-lg border border-white/10 bg-slate-900/92 p-5 shadow-xl",children:[(0,s.jsxs)("div",{className:"mb-5 flex items-center justify-between gap-3",children:[(0,s.jsxs)("div",{children:[(0,s.jsx)("h2",{className:"text-lg font-semibold tracking-normal text-white",children:"Emitter Controls"}),(0,s.jsx)("p",{className:"mt-1 text-sm text-slate-400",children:"Drag on the preview to place the center."})]}),(0,s.jsx)("button",{type:"button",className:"rounded-md border border-amber-300/30 px-3 py-2 text-sm text-amber-100 hover:bg-amber-300/10",onClick:()=>a(p),children:"Reset"})]}),(0,s.jsxs)("div",{className:"grid gap-4",children:[(0,s.jsxs)("label",{className:"grid gap-2 text-sm text-slate-200",children:[(0,s.jsxs)("span",{className:"flex items-center justify-between gap-4",children:[(0,s.jsx)("span",{children:"Renderer"}),(0,s.jsx)("span",{className:"font-mono text-xs text-amber-100",children:"pixijs"===i?"PixiJS":"tsparticles"===i?"tsParticles":"Custom Canvas"})]}),(0,s.jsxs)("select",{className:"rounded-md border border-white/10 bg-slate-950 px-3 py-2 text-sm text-white outline-none focus:border-amber-300",value:i,onChange:e=>o(e.target.value),children:[(0,s.jsx)("option",{value:"pixijs",children:"PixiJS sprite particles POC"}),(0,s.jsx)("option",{value:"custom-canvas",children:"Custom Canvas baseline"}),(0,s.jsx)("option",{value:"tsparticles",children:"tsParticles baseline"})]})]}),"tsparticles"===i?(0,s.jsxs)("label",{className:"grid gap-2 text-sm text-slate-200",children:[(0,s.jsxs)("span",{className:"flex items-center justify-between gap-4",children:[(0,s.jsx)("span",{children:"Library style"}),(0,s.jsx)("span",{className:"font-mono text-xs text-amber-100",children:c})]}),(0,s.jsxs)("select",{className:"rounded-md border border-white/10 bg-slate-950 px-3 py-2 text-sm text-white outline-none focus:border-amber-300",value:c,onChange:e=>d(e.target.value),children:[(0,s.jsx)("option",{value:"sparkle-burst",children:"Sparkle Burst"}),(0,s.jsx)("option",{value:"soft-fireflies",children:"Soft Fireflies"}),(0,s.jsx)("option",{value:"micro-wisps",children:"Micro Wisps"})]})]}):null,(0,s.jsx)(m,{label:"X position",value:Math.round(100*t.x),min:0,max:100,step:1,displayValue:`${Math.round(100*t.x)}%`,onChange:e=>u("x",e/100)}),(0,s.jsx)(m,{label:"Y position",value:Math.round(100*t.y),min:0,max:100,step:1,displayValue:`${Math.round(100*t.y)}%`,onChange:e=>u("y",e/100)}),(0,s.jsx)(m,{label:"Radius",value:t.radius,min:24,max:240,step:1,displayValue:`${Math.round(t.radius)}

1 px`,onChange:e=>u("radius",e)}),(0,s.jsx)(m,{label:"Density",value:t.particleCount,min:12,max:180,step:1,displayValue:`${Math.round(t.particleCount)} sprites`,onChange:e=>u("particleCount",e)}),(0,s.jsx)(m,{label:"Speed",value:t.speed,min:.1,max:3,step:.05,displayValue:`${t.speed.toFixed(2)}x`,onChange:e=>u("speed",e)}),(0,s.jsx)(m,{label:"Opacity",value:t.opacity,min:0,max:1,step:.01,displayValue:`${Math.round(100*t.opacity)}%`,onChange:e=>u("opacity",e)}),(0,s.jsx)(m,{label:"Sparkle size",value:t.sparkleSize,min:1,max:14,step:.1,displayValue:`${t.sparkleSize.toFixed(1)} px`,onChange:e=>u("sparkleSize",e)}),(0,s.jsxs)("label",{className:"grid gap-2 text-sm text-slate-200",children:[(0,s.jsxs)("span",{className:"flex items-center justify-between gap-4",children:[(0,s.jsx)("span",{children:"Color"}),(0,s.jsx)("span",{className:"font-mono text-xs text-amber-100",children:t.color})]}),(0,s.jsx)("input",{className:"h-10 w-full cursor-pointer rounded-md border border-white/10 bg-transparent",type:"color",value:t.color,onChange:e=>a(t=>({...t,color:e.target.value}))})]}),(0,s.jsxs)("label",{className:"grid gap-2 text-sm text-slate-200",children:[(0,s.jsxs)("span",{className:"flex items-center justify-between gap-4",children:[(0,s.jsx)("span",{children:"Seed"}),(0,s.jsx)("span",{className:"font-mono text-xs text-amber-100",children:String(t.seed)})]}),(0,s.jsx)("input",{className:"rounded-md border border-white/10 bg-slate-950 px-3 py-2 font-mono text-sm text-white outline-none focus:border-amber-300",type:"number",value:Number(t.seed),onChange:e=>u("seed",Number(e.target.value||0))})]})]})]})]})})}},28086:(e,t,a)=>{a.d(t,{o:()=>s});function s(e){let t;if((t=window).__AGENT_DEBUG_LOG__||void 0!==t.location&&t.location.hash.includes("agentDebugLog")&&(t.__AGENT_DEBUG_LOG__=!0,1))try{fetch("http://127.0.0.1:1025/ingest/e5e80c64-65b5-4e26-a6a5-80de9fd7fe61",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)}).catch(()=>{})}catch{}}}}]);