https://inferencelab.co/assets/Stage-DTBqZNrR.js

1import{r as w,j as p}from"./motion-CUxKysUF.js";import{W as Se,S as ce,A as Le,a as Ae,P as Re,b as Ce,G as _,h as Fe,e as Ie,M as Oe,d as Pe,C as Te,i as le}from"./three-Bts88Xtc.js";import{R as Ne,l as ze,b as Ge,a as Be,t as de,o as De,d as He}from"./Rusty-DpeX8GhW.js";import x from"./gsap-a9woYdh8.js";import{ag as C,ah as $e,I as ue,A as Ue}from"./index-CKIgnhq5.js";import"./react-vendor-BCVeLiQY.js";import"./charts-Do059cgQ.js";const We=80.58,qe=Math.PI*2/We,Xe=.617,pe={unit:1150,rx:547,ry:193,objFront:210,objBack:147,mascotH:382,mascotDy:30,originX:795,originY:-7},Ye={unit:375,rx:126.4,ry:68.6,objFront:106.2,objBack:74.3,mascotH:166.8,mascotDy:0,originX:219,originY:-9},K=1.18,_e=.78,he=10,Ke=3.15,me=24,Je=["chips","route","chart","coins","braces"],Ve=w.forwardRef(({still:v=!1,costume:J="wizard"},fe)=>{const V=w.useRef(null),Q=w.useRef([]),[u,be]=w.useState(null),[xe,Z]=w.useState(null),M=w.useRef(null),ee=w.useRef({look:{x:0,y:0},target:{x:0,y:0},focus:null,lift:0,speed:1,blinkAt:2.6,blinkUntil:0,fade:1});w.useImperativeHandle(fe,()=>({lift:o=>{x.to(ee.current,{lift:o?1:0,duration:.6,ease:"expo.out"})}}),[]),w.useEffect(()=>{const o=V.current;let c;try{c=new Se({alpha:!0,antialias:!0,powerPreference:"high-performance"})}catch{o.classList.add("is-fallback");return}c.setPixelRatio(Math.min(window.devicePixelRatio||1,2)),c.outputColorSpace=ce,c.toneMapping=Le,c.toneMappingExposure=1,o.appendChild(c.domElement);const h=new Ae,f=new Re(me,1,.1,80),te=new Ce(c);h.environment=te.fromScene(new Ne,.04).texture,h.environmentIntensity=.32,ze(h);const A=new _;h.add(A);const I=new _;I.position.y=-.42,A.add(I);const d=Ge("stand",J);I.add(d.root);const R=Be(2.5,1.05,.3);R.position.y=-1.16,I.add(R),de(R);const ye=De(()=>{de(R),c.render(h,f)}),z=[];A.traverse(e=>{const t=e.material;t&&(Array.isArray(t)?t:[t]).forEach(a=>{z.includes(a)||z.push(a)})});const we=R.material,G=e=>{for(const t of z){if(t===we){t.opacity=e;continue}const a=e<.999;t.transparent!==a&&(t.transparent=a,t.needsUpdate=!0),t.opacity=e,t.depthWrite=!a}},ve=new Fe,S=C.map((e,t)=>{const a=ve.load(`/hero/loop-${e.id}.png`,()=>{v&&c.render(h,f)});a.colorSpace=ce,a.anisotropy=4;const s=new Ie({map:a,transparent:!0,depthWrite:!1,alphaTest:.02,opacity:v?1:0}),l=new Oe(new Pe(2.1,2.1),s),r=new _;return r.add(l),h.add(r),{id:e.id,group:r,mat:s,hit:null,a:Xe+t/C.length*Math.PI*2,ent:v?1:0,focus:0,hov:0}}),n=ee.current;let k=1,L=1,O=10,i=pe,m=1,B=!1,g=null;const ge=e=>1-Math.pow(1-e,3),P={m:v?1:0},D=()=>{for(const e of S){const t=e.a,a=(Math.sin(t)+1)/2;let s=i.rx*m*Math.cos(t),l=i.ry*m*Math.sin(t),r=(i.objBack+(i.objFront-i.objBack)*a)*m*K;const b=ge(e.ent);if(s=i.originX*m+(s-i.originX*m)*b,l=i.originY*m+(l-i.originY*m)*b,r*=.4+.6*b,r*=1+.22*e.hov,e.focus>0){const Y=e.focus;s+=(-.22*k-s)*Y,l+=(0-l)*Y,r+=(i.objFront*m*K*1.57-r)*Y}const E=e.focus>.5?1.5:(a-.5)*2.4,y=(O-E)/O;e.group.position.set(s/100*y,-l/100*y,E),e.group.scale.setScalar(r/210*y),e.group.quaternion.copy(f.quaternion),e.mat.opacity=b*(g&&g!==e.id?n.fade:1),e.hit&&(e.hit.style.transform=`translate3d(${(k/2+s-r/2).toFixed(1)}px, ${(L/2+l-r/2).toFixed(1)}px, 0)`,e.hit.style.width=e.hit.style.height=`${r.toFixed(0)}px`,e.hit.style.zIndex=e.focus>.5?"8":a>.5?"6":"3")}A.position.y=-(i.mascotDy*m)/100-(1-P.m)*(.56*m)},T=()=>{k=o.clientWidth||1,L=o.clientHeight||1,c.setSize(k,L,!1),f.aspect=k/L,f.updateProjectionMatrix(),O=L/100/2/Math.tan(me/2*Math.PI/180),f.position.set(0,2.1,O),f.lookAt(0,0,0),B=window.matchMedia("(max-width: 899px)").matches,i=B?Ye:pe;const e=i.objFront*K/2;m=Math.min(k/i.unit,(k/2-he)/(i.rx+e),(L/2-he)/(i.ry+e)),A.scale.setScalar(i.mascotH*m*_e/100/Ke),S.forEach((t,a)=>{t.hit=Q.current[a]}),D(),c.render(h,f)};T();const ne=new ResizeObserver(T);ne.observe(o),window.addEventListener("resize",T);const Ee=e=>()=>{g||(x.to(n,{speed:0,duration:.5,ease:"expo.out"}),x.to(e,{hov:1,duration:.45,ease:"back.out(2.4)"}),n.focus=Math.atan2(-(i.ry*Math.sin(e.a)),i.rx*Math.cos(e.a)),n.target.x=Math.cos(n.focus)*1.1,n.target.y=-Math.sin(n.focus)*.9)},Me=e=>()=>{x.to(e,{hov:0,duration:.35,ease:"power2.out"}),!g&&(x.to(n,{speed:1,duration:.9,ease:"power2.inOut"}),n.focus=null)};let H=0;const $=e=>{if(B){e&&(Z(e),window.clearTimeout(H),H=window.setTimeout(()=>Z(null),2200));return}g=e,be(e?C.find(t=>

1t.id===e):null),x.to(n,{speed:e?0:1,duration:e?.5:.9,ease:e?"expo.out":"power2.inOut"}),x.to(n,{fade:e?0:1,duration:.45,ease:"power2.out",onUpdate:()=>G(P.m*n.fade)});for(const t of S)x.to(t,{focus:e===t.id?1:0,duration:.6,ease:"expo.out"});n.focus=null,n.target.x=0,n.target.y=0};M.current=$;const ke=e=>t=>{t.preventDefault(),$(g===e.id?null:e.id)},je=S.map(e=>{var l,r,b,E,y;const t=Ee(e),a=Me(e),s=ke(e);return(l=e.hit)==null||l.addEventListener("mouseenter",t),(r=e.hit)==null||r.addEventListener("focus",t),(b=e.hit)==null||b.addEventListener("mouseleave",a),(E=e.hit)==null||E.addEventListener("blur",a),(y=e.hit)==null||y.addEventListener("click",s),{o:e,e:t,l:a,c:s}}),oe=e=>{e.key==="Escape"&&g&&$(null)};window.addEventListener("keydown",oe);const ae=e=>{if(n.focus!==null||g)return;const t=o.getBoundingClientRect();n.target.x=le.clamp(((e.clientX-t.left)/t.width-.5)*2,-1,1),n.target.y=le.clamp(((e.clientY-t.top)/t.height-.5)*2,-1,1)},se=()=>{n.focus===null&&(n.target.x=0,n.target.y=0)};o.addEventListener("pointermove",ae),o.addEventListener("pointerleave",se);const U=[];v||(G(0),U.push(x.to(P,{m:1,duration:1,delay:.1,ease:"expo.out",onUpdate:()=>G(P.m*n.fade)})),S.forEach(e=>{const t=Je.indexOf(e.id);U.push(x.to(e,{ent:1,duration:.4+.1*t,delay:1.3+.02*t,ease:"power3.out"}))}));const re=new Te;let j=0,N=!0,W=!v,q=0;const X=()=>{const e=re.getElapsedTime(),t=Math.min(.5,e-q);q=e;for(const s of S)s.a+=t*qe*n.speed;D(),n.look.x+=(n.target.x-n.look.x)*.075,n.look.y+=(n.target.y-n.look.y)*.075,d.head.rotation.y=n.look.x*.55,d.head.rotation.x=-n.look.y*.22+Math.sin(e*.8)*.02,d.head.rotation.z=n.look.x*.04,d.body.rotation.y=n.look.x*.12,d.body.position.y=Math.sin(e*1.9)*.02+n.lift*.12,d.armL.rotation.x=-.35+Math.sin(e*1.9)*.02,d.armR.rotation.x=-.35+Math.sin(e*1.9+.4)*.02,d.wand&&(d.wand.rotation.z=-.38+Math.sin(e*1.1)*.1,d.wand.rotation.x=-.12+Math.sin(e*.7)*.06),d.spell&&(d.spell.rotation.y=e*1.25,d.spell.scale.setScalar(.92+Math.sin(e*2.2)*.08),d.spell.children.forEach((s,l)=>{const r=s.material;r&&(r.opacity=l===0?.55+Math.sin(e*2.4)*.2:.45+Math.sin(e*3+l)*.4)})),e>n.blinkAt&&(n.blinkUntil=e+.12,n.blinkAt=e+2.8+Math.random()*3.2);const a=e<n.blinkUntil;for(const s of d.eyes)s.scale.y+=((a?.1:1)-s.scale.y)*.5;c.render(h,f),W&&N&&(j=requestAnimationFrame(X))};v?(n.look.x=n.target.x=.15,n.blinkAt=1/0,D(),c.render(h,f)):j=requestAnimationFrame(X);const ie=new IntersectionObserver(([e])=>{N=e.isIntersecting,N&&W&&!j&&(q=re.getElapsedTime(),j=requestAnimationFrame(X)),N||(cancelAnimationFrame(j),j=0)},{threshold:.02});return ie.observe(o),()=>{W=!1,cancelAnimationFrame(j),ne.disconnect(),ye(),ie.disconnect(),U.forEach(e=>e.kill()),window.clearTimeout(H),o.removeEventListener("pointermove",ae),o.removeEventListener("pointerleave",se),window.removeEventListener("resize",T),window.removeEventListener("keydown",oe),je.forEach(({o:e,e:t,l:a,c:s})=>{var l,r,b,E,y;(l=e.hit)==null||l.removeEventListener("mouseenter",t),(r=e.hit)==null||r.removeEventListener("focus",t),(b=e.hit)==null||b.removeEventListener("mouseleave",a),(E=e.hit)==null||E.removeEventListener("blur",a),(y=e.hit)==null||y.removeEventListener("click",s)}),He(h),te.dispose(),c.dispose(),c.domElement.remove()}},[v,J]);const F=u??C[0];return p.jsxs("div",{ref:V,className:`ob-stage-canvas${u?" is-focused":""}`,"data-cursor":"dot",children:[p.jsx($e,{}),C.map((o,c)=>p.jsx("button",{type:"button",ref:h=>{Q.current[c]=h},className:`ob-hit${xe===o.id?" is-named":""}${(u==null?void 0:u.id)===o.id?" is-open":""}`,"data-object":o.id,"data-cursor":"hand","data-hand":(u==null?void 0:u.id)===o.id?"open":"point","aria-label":o.label,"aria-expanded":(u==null?void 0:u.id)===o.id,"aria-controls":"ob-focus-card",children:p.jsxs("span",{className:"ob-hit-note","aria-hidden":"true",children:[p.jsx("b",{children:o.label}),p.jsx("span",{children:o.note})]})},o.id)),p.jsxs("div",{id:"ob-focus-card",className:`ob-focus-card${u?" is-open":""}`,role:"dialog","aria-label":F.label,"aria-hidden":!u,"data-cursor":"default",children:[p.jsx("button",{type:"button",className:"ob-focus-close","aria-label":"Close",tabIndex:u?0:-1,onClick:()=>{var o;return(o=M.current)==null?void 0:o.call(M,null)},children:p.jsx(ue,{name:"close"})}),p.jsx("h3",{className:"ob-focus-title",children:F.label}),p.jsx("p",{className:"ob-focus-body",children:F.desc}),p.jsxs(Ue,{href:F.href,className:"ob-btn ob-btn-primary ob-btn-sm",tabIndex:u?0:-1,onClick:()=>{var o;return(o=M.current)==null?void 0:o.call(M,null)},children:["Learn more",p.jsx("span",{className:"ob-btn-icon",children:p.jsx(ue,{name:"arrow"})})]})]})]})});Ve.displayName="Stage";export{Ve as Stage,Ve as default};