@lofcz/orb-ui 0.10.1 → 0.11.0

package/dist/orb-ui.cjs

@@ -218,7 +218,6 @@ uniform float u_glow;
 uniform float u_tilt;
 uniform float u_listen;
 uniform float u_speak;
-uniform float u_beat;
 uniform float u_surge;
 uniform vec3 u_deep;
 uniform vec3 u_shallow;
@@ -259,12 +258,10 @@ void main() {
 
   float t = u_time;
   float front = swellHeight(q.x, t, u_swell) + rippleHeight(q.x, t, u_ripple);
-  // The voice lifts the water gently in the middle of the orb and lets it fall
-  // on each beat, so the sea is seen to talk without the glass changing shape.
-  float column = exp(-q.x * q.x * 3.2);
-  float voice = u_speak * (0.045 + 0.035 * u_beat) * column;
-  voice += u_speak * 0.02 * sin(q.x * 9.0 - t * 7.0) * (0.5 + 0.5 * u_beat);
-  voice += u_surge * 0.02;
+  // The voice is a tide, not a tremor: while she speaks the water rises a little
+  // in the middle of the orb and rolls in slow, rounder swells.
+  float column = exp(-q.x * q.x * 2.4);
+  float voice = u_surge * 0.05 * column + u_surge * 0.015 * sin(q.x * 2.6 - t * 0.9 + 0.4);
   front += voice;
   float waterline = u_level + front;
   float d = q.y - waterline;
@@ -276,10 +273,9 @@ void main() {
   float backBand = 1.0 - smoothstep(0.0, 0.06, abs(q.y - backline));
 
   vec3 water = mix(u_shallow, u_deep, smoothstep(0.0, 1.05 + u_speak * 0.6, depth));
-  water = mix(water, u_shallow * 1.3, u_speak * 0.22 * exp(-depth * 1.8) * (0.6 + 0.4 * u_beat));
-  float caustic = sin(q.x * (6.0 + u_speak * 2.0) + front * 4.0 + t * (0.8 + u_speak * 1.2))
-    * sin(q.y * 5.0 - t * (0.6 + u_speak * 1.0) + q.x * 1.5);
-  caustic = pow(max(caustic, 0.0), 3.0) * exp(-depth * 1.6) * (0.28 + u_glow * 0.45 + u_speak * 0.3);
+  water = mix(water, u_shallow * 1.3, u_surge * 0.18 * exp(-depth * 1.8));
+  float caustic = sin(q.x * 6.0 + front * 4.0 + t * 0.8) * sin(q.y * 5.0 - t * 0.6 + q.x * 1.5);
+  caustic = pow(max(caustic, 0.0), 3.0) * exp(-depth * 1.6) * (0.28 + u_glow * 0.45 + u_surge * 0.2);
   water = mix(water, u_shallow * 1.25, caustic);
   float shaft = pow(max(sin(q.x * 3.0 + t * 0.27), 0.0), 5.0) * exp(-depth * 2.2);
   water = mix(water, u_light, shaft * 0.08 * (0.4 + u_glow));
@@ -293,15 +289,9 @@ void main() {
 
   vec3 color = d < 0.0 ? water : air;
 
-  // Spray: droplets thrown up over the crest on loud beats.
-  float dropletField = sin(q.x * 41.0 + t * 6.5) * sin(q.y * 37.0 - t * 9.0 + q.x * 3.0);
-  float spray = pow(max(dropletField, 0.0), 14.0)
-    * u_speak * (0.4 + 0.6 * u_beat)
-    * smoothstep(0.0, 0.05, d) * (1.0 - smoothstep(0.1, 0.3, d)) * column;
-  color = mix(color, u_foam, clamp(spray * 0.8, 0.0, 0.7));
 
-  float foamWidth = 30.0 - u_speak * 10.0;
-  float foam = exp(-abs(d) * foamWidth) * (0.6 + u_speak * 0.35 + u_beat * u_speak * 0.2 + u_listen * 0.2);
+  float foamWidth = 30.0 - u_surge * 8.0;
+  float foam = exp(-abs(d) * foamWidth) * (0.6 + u_surge * 0.3 + u_listen * 0.15);
   float crest = smoothstep(0.35, 1.0, front / max(u_swell * 1.85, 0.001));
   foam += crest * exp(-abs(d) * 16.0) * (0.22 + u_speak * 0.3);
   color = mix(color, u_foam, clamp(foam, 0.0, 0.92));
@@ -318,4 +308,4 @@ void main() {
   // perimeter so translucent edge pixels cannot become a bright outline.
   gl_FragColor = vec4(color * edge, edge);
 }
-`,ye=.72;function Z(e,t=0,n=1){return Math.min(n,Math.max(t,e))}function Q(e,t,n,r){return e+(t-e)*(1-Math.exp(-n*r))}function be(e,t){let n=/^#?([0-9a-f]{6})$/i.exec(e.trim());if(!n)return t;let r=parseInt(n[1],16);return[(r>>16&255)/255,(r>>8&255)/255,(r&255)/255]}function xe(e,t,n){return[e[0]+(t[0]-e[0])*n,e[1]+(t[1]-e[1])*n,e[2]+(t[2]-e[2])*n]}function $([e,t,n],r){return`rgba(${Math.round(e*255)}, ${Math.round(t*255)}, ${Math.round(n*255)}, ${r})`}function Se(e,t){let n=ge[e],r=e=>{let r=be(n[e],[0,0,0]),i=t?.[e];return i?be(i,r):r};return{deep:r(`deep`),shallow:r(`shallow`),foam:r(`foam`),glow:r(`glow`),sky:r(`sky`),horizon:r(`horizon`)}}function Ce(e,t,n){let r=e.createShader(t);if(r){if(e.shaderSource(r,n),e.compileShader(r),!e.getShaderParameter(r,e.COMPILE_STATUS)){e.deleteShader(r);return}return r}}function we(e,t,n){let r=e.getContext(`webgl`,{alpha:!0,antialias:!0,premultipliedAlpha:!0});if(!r)return;let i=Ce(r,r.VERTEX_SHADER,_e),a=Ce(r,r.FRAGMENT_SHADER,ve);if(!i||!a){i&&r.deleteShader(i),a&&r.deleteShader(a);return}let o=r.createProgram(),s=r.createBuffer();if(!o||!s){o&&r.deleteProgram(o),s&&r.deleteBuffer(s),r.deleteShader(i),r.deleteShader(a);return}if(r.attachShader(o,i),r.attachShader(o,a),r.linkProgram(o),!r.getProgramParameter(o,r.LINK_STATUS)){r.deleteProgram(o),r.deleteBuffer(s),r.deleteShader(i),r.deleteShader(a);return}let c=()=>{r.deleteProgram(o),r.deleteBuffer(s),r.deleteShader(i),r.deleteShader(a)},l=r.getAttribLocation(o,`a_position`),u=e=>r.getUniformLocation(o,e),d={resolution:u(`u_resolution`),time:u(`u_time`),level:u(`u_level`),swell:u(`u_swell`),ripple:u(`u_ripple`),glow:u(`u_glow`),tilt:u(`u_tilt`),listen:u(`u_listen`),speak:u(`u_speak`),beat:u(`u_beat`),surge:u(`u_surge`),deep:u(`u_deep`),shallow:u(`u_shallow`),foam:u(`u_foam`),light:u(`u_light`),sky:u(`u_sky`),horizon:u(`u_horizon`)};if(l<0||Object.values(d).some(e=>!e)){c();return}let f=Math.min(window.devicePixelRatio||1,2),p=Math.max(1,Math.round(t*f));return e.width=p,e.height=p,r.viewport(0,0,p,p),r.useProgram(o),r.bindBuffer(r.ARRAY_BUFFER,s),r.bufferData(r.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),r.STATIC_DRAW),r.enableVertexAttribArray(l),r.vertexAttribPointer(l,2,r.FLOAT,!1,0,0),r.uniform2f(d.resolution,p,p),r.uniform3fv(d.deep,n.deep),r.uniform3fv(d.shallow,n.shallow),r.uniform3fv(d.foam,n.foam),r.uniform3fv(d.light,n.glow),r.uniform3fv(d.sky,n.sky),r.uniform3fv(d.horizon,n.horizon),{draw(e){r.uniform1f(d.time,e.time),r.uniform1f(d.level,e.level),r.uniform1f(d.swell,e.swell),r.uniform1f(d.ripple,e.ripple),r.uniform1f(d.glow,e.glow),r.uniform1f(d.tilt,e.tilt),r.uniform1f(d.listen,e.listen),r.uniform1f(d.speak,e.speak),r.uniform1f(d.beat,e.beat),r.uniform1f(d.surge,e.surge),r.drawArrays(r.TRIANGLES,0,6)},destroy:c}}function Te(e,t,n,r){switch(e){case`connecting`:return{swell:.03,speed:.32,glow:.3+.2*Math.sin(r*2.6),tiltAmplitude:.02,levelOffset:0,corona:.32+.12*Math.sin(r*2.6),reach:.28,ringEvery:0,ringStrength:0,ringInward:!1,orbit:0,sweep:1,pulse:.5};case`listening`:return{swell:.045+t*.05,speed:.5+t*.5,glow:.42+t*.5,tiltAmplitude:.03,levelOffset:t*.05,corona:.38+t*.32,reach:.28+t*.22,ringEvery:1.6-t*.5,ringStrength:.3+t*.35,ringInward:!0,orbit:0,sweep:0,pulse:.3};case`thinking`:return{swell:.05,speed:.7,glow:.6+.25*Math.sin(r*3.1),tiltAmplitude:.06,levelOffset:.01,corona:.45+.15*Math.sin(r*3.1),reach:.38,ringEvery:0,ringStrength:0,ringInward:!0,orbit:1,sweep:0,pulse:1};case`speaking`:return{swell:.06+n*.08,speed:.8+n*.7,glow:.6+n*.3,tiltAmplitude:.04,levelOffset:.03+n*.06,corona:.5+n*.3,reach:.3+n*.28,ringEvery:1.3-n*.4,ringStrength:.3+n*.3,ringInward:!1,orbit:0,sweep:0,pulse:.2};case`error`:return{swell:.02,speed:.2,glow:.06,tiltAmplitude:.01,levelOffset:-.04,corona:.08,reach:.15,ringEvery:0,ringStrength:0,ringInward:!1,orbit:0,sweep:0,pulse:0};default:return{swell:.036,speed:.36,glow:.28,tiltAmplitude:.028,levelOffset:0,corona:.3,reach:.24,ringEvery:5,ringStrength:.25,ringInward:!1,orbit:0,sweep:0,pulse:.35}}}var Ee=.1,De=7.5,Oe=1.6,ke=4.3,Ae=60,je=2.2,Me=.7,Ne=2.8,Pe=4;function Fe(){return Array.from({length:Pe},(e,t)=>({angle:t/Pe*Math.PI*2,speed:(.9+t%3*.35)*(t%2==0?1:-1),radius:1.14+t%2*.1,size:.018+t%2*.008,wobble:.7+t*.37}))}function Ie(e,t,n,r){let i=e.getContext(`2d`);if(!i)return;let a=Math.min(window.devicePixelRatio||1,2),o=t*je;e.width=Math.max(1,Math.round(o*a)),e.height=e.width,i.scale(a,a);let s=o/2,c=t/2,l=r===`dark`?xe(n.shallow,n.glow,.35):n.shallow,u=r===`dark`?xe(n.glow,n.foam,.4):n.deep,d=r===`dark`?n.shallow:n.deep,f=r===`dark`?1:.75,p=(e,t,n)=>{i.beginPath(),i.arc(e,t,n,0,Math.PI*2)};return{draw(e){i.clearRect(0,0,o,o),i.globalCompositeOperation=r===`dark`?`lighter`:`source-over`;let t=c*(1+e.reach+e.pulse*.04+Math.sin(e.breath)*.02),n=Z(e.corona*(r===`dark`?.55:.5)),a=i.createRadialGradient(s,s,c*.9,s,s,t);a.addColorStop(0,$(l,n)),a.addColorStop(.3,$(l,n*.5)),a.addColorStop(.65,$(l,n*.15)),a.addColorStop(1,$(l,0)),i.fillStyle=a,p(s,s,t),i.fill();let m=Z(e.speak+e.listen*.6);if(m>.01){let e=c*(1.02+m*.5),t=i.createRadialGradient(s,s,c*.95,s,s,e);t.addColorStop(0,$(l,.35*m*f)),t.addColorStop(.4,$(u,.1*m*f)),t.addColorStop(1,$(u,0)),i.fillStyle=t,p(s,s,e),i.fill()}let h=Z((.3+e.glow*.35+e.speak*.2+e.listen*.25)*f),g=c*(1.06+e.speak*.04),_=i.createRadialGradient(s,s,c*.97,s,s,g);_.addColorStop(0,$(u,h)),_.addColorStop(1,$(u,0)),i.fillStyle=_,p(s,s,c*1.15),i.fill();for(let t of e.rings){let n=Z((e.time-t.born)/Ne),r=1-(1-n)**2.2,a=t.inward?1-r:r,o=c*(1+Me*a),d=Z((t.inward?(1-a)**.6*(1-n**4):(1-n)**1.3)*t.strength);if(d<.005)continue;let m=c*(.008+t.strength*.012)*(1-a*.4);i.lineWidth=m*4,i.strokeStyle=$(l,d*.18),p(s,s,o),i.stroke(),i.lineWidth=m,i.strokeStyle=$(u,d*.45*f),p(s,s,o),i.stroke()}if(e.orbit>.01){for(let t of[1.14,1.24])i.lineWidth=c*.006,i.strokeStyle=$(l,.12*e.orbit*f),p(s,s,c*t),i.stroke();for(let t of e.orbiters){let n=Math.sin(e.time*t.wobble)*.05,r=c*(t.radius+n),a=.8+e.orbit*.7,o=t.speed>0?1:-1;for(let n=0;n<14;n+=1){let d=n/14*a,m=t.angle-o*d,h=s+Math.cos(m)*r,g=s+Math.sin(m)*r,_=(1-n/14)**2*e.orbit;i.fillStyle=$(n===0?u:l,Z(_*(n===0?1:.7)*f)),p(h,g,c*t.size*(1-n/14*.7)),i.fill()}let d=c*t.size*5,m=s+Math.cos(t.angle)*r,h=s+Math.sin(t.angle)*r,g=i.createRadialGradient(m,h,0,m,h,d);g.addColorStop(0,$(l,.5*e.orbit)),g.addColorStop(1,$(l,0)),i.fillStyle=g,p(m,h,d),i.fill()}}if(e.sweep>.01){let t=[{orbitRadius:c*1.12,start:e.time*2,span:Math.PI*.55,width:.025}];for(let{orbitRadius:n,start:r,span:a,width:o}of t){let t=i.createConicGradient(r,s,s);t.addColorStop(0,$(u,0)),t.addColorStop(a/(Math.PI*2),$(u,.7*e.sweep*f)),t.addColorStop(a/(Math.PI*2)+.001,$(u,0)),t.addColorStop(1,$(u,0)),i.lineWidth=c*o,i.strokeStyle=t,i.beginPath(),i.arc(s,s,n,r,r+a),i.stroke(),i.lineWidth=c*.01,i.strokeStyle=$(d,.2*e.sweep*f),p(s,s,n),i.stroke()}}}}}function Le({state:n,volume:r,size:i,scheme:a=`light`,palette:o,className:s,style:c,disabled:l=!1,interactive:u=!1,onClick:d,...f}){let p=(0,e.useRef)(null),m=(0,e.useRef)(null),h=(0,e.useRef)(null),g=(0,e.useRef)(n),_=(0,e.useRef)(r),v=(0,e.useRef)(!1);he(()=>{g.current=n,_.current=r},[n,r]);let y=i*ye,b=Se(a,o),x=JSON.stringify(b);(0,e.useEffect)(()=>{let e=p.current,t=m.current,n=h.current;if(!e||!t||!n)return;let r=JSON.parse(x),i=window.matchMedia(`(prefers-reduced-motion: reduce)`),o=()=>{v.current=i.matches};o(),i.addEventListener(`change`,o);let s=we(e,y,r);s||(e.style.background=`linear-gradient(180deg, ${$(r.sky,1)} 0%, ${$(r.horizon,1)} 44%, ${$(r.shallow,1)} 48%, ${$(r.deep,1)} 100%)`);let c=Ie(t,y,r,a),l=0,u=performance.now(),d=0,f=0,b=0,S=0,C=Z(_.current),w=0,T=0,E=.036,D=.36,O=.26,k=.028,A=0,j=.3,M=.24,N=0,P=0,F=.3,I=0,L=0,R=0,z=0,B=0,V=[],H=Fe(),U=e=>{let t=Math.min((e-u)/1e3,.05);u=e;let r=g.current,i=v.current,a=Z(_.current);C=i?0:Q(C,a,a>C?14:6,t);let o=r===`listening`?C:0,p=r===`speaking`?C:0;w=Q(w,o,o>w?16:6,t),T=Q(T,p,p>T?11:4.5,t),f+=t;let m=Te(r,w,T,f);if(E=Q(E,m.swell,2.4,t),D=Q(D,m.speed,2.4,t),O=Q(O,m.glow,3.2,t),k=Q(k,m.tiltAmplitude,1.8,t),A=Q(A,m.levelOffset,3,t),j=Q(j,m.corona,m.corona>j?6:2.5,t),M=Q(M,m.reach,m.reach>M?7:2.5,t),N=Q(N,m.orbit,3,t),P=Q(P,m.sweep,3,t),F=Q(F,m.pulse,2.5,t),z+=((r===`speaking`?a:0)-R)*Ae*t,z*=Math.exp(-15*t),R+=z*t,!i){d+=t*D,b+=t*Math.PI*2/De,S+=t*.31,I+=t*Math.PI*2/Oe,L+=t*Math.PI*2*ke*(.8+T*.4);for(let e of H)e.angle+=t*e.speed*(.6+N*.9);for(B+=t,m.ringEvery>0&&(r!==`speaking`||T>.04)&&(r!==`listening`||w>.03)&&B>=m.ringEvery&&(B=0,V.push({born:f,strength:m.ringStrength,inward:m.ringInward}));V.length>0&&f-V[0].born>Ne;)V.shift()}let h=Ee+A+Math.sin(b)*.022,y=Math.sin(S)*k+Math.sin(S*2.3+.7)*.006,x=i?0:(.5+.5*Math.sin(L))*T,W=i?0:R;s?.draw({time:d,level:h,swell:i?.012:E,ripple:i?0:w,glow:O,tilt:i?0:y,listen:w,speak:T,beat:x,surge:W});let G=(.5+.5*Math.sin(I))*F,K=1+G*.018+Math.sin(b)*.005+W*.045+x*.012+w*.02;n.style.transform=i?`none`:`scale(${K})`,c?.draw({time:f,corona:i?j*.6:j,reach:M,glow:O,speak:T,listen:w,orbit:i?0:N,sweep:i?0:P,pulse:G,breath:b,rings:i?[]:V,orbiters:H}),l=requestAnimationFrame(U)};return l=requestAnimationFrame(U),()=>{cancelAnimationFrame(l),i.removeEventListener(`change`,o),s?.destroy()}},[y,x,a]);let S={width:i,height:i,display:`flex`,alignItems:`center`,justifyContent:`center`,position:`relative`,...c},C=y*je,w=(0,t.jsxs)(`span`,{ref:h,style:{position:`relative`,display:`block`,width:y,height:y,borderRadius:`50%`,lineHeight:0,cursor:u?l?`not-allowed`:`pointer`:`default`,transformOrigin:`center`,willChange:`transform`},children:[(0,t.jsx)(`canvas`,{ref:m,"aria-hidden":`true`,"data-ocean-aura":``,style:{position:`absolute`,left:(y-C)/2,top:(y-C)/2,display:`block`,width:C,height:C,pointerEvents:`none`}}),(0,t.jsx)(`canvas`,{ref:p,"aria-hidden":`true`,"data-ocean-surface":``,style:{position:`absolute`,inset:0,display:`block`,width:y,height:y,borderRadius:`50%`,boxShadow:`0 ${y*.06}px ${y*.22}px ${$(b.deep,a===`dark`?.55:.28)}`}})]});return u?(0,t.jsx)(`button`,{...f,type:`button`,className:s,disabled:l,onClick:l?void 0:d,style:{appearance:`none`,WebkitAppearance:`none`,border:0,padding:0,margin:0,background:`transparent`,color:`inherit`,font:`inherit`,cursor:l?`not-allowed`:`pointer`,...S},children:w}):(0,t.jsx)(`div`,{...f,className:s,style:S,children:w})}function Re({signal:i,state:a,volume:s,adapter:c,theme:l=`debug`,size:u=200,scheme:d,palette:f,className:p,style:m,disabled:h=!1,interactive:g=!0,onStart:_,onStop:v,renderTheme:y,...x}){let[S,C]=(0,e.useState)({state:`idle`});(0,e.useEffect)(()=>{if(C({state:`idle`}),c)return c.subscribe(C)},[c]);let w=i??S,T=n(a,i,S),D=r(s,T,w),O=w.inputVolume??0,k=w.outputVolume??0,A=(0,e.useMemo)(()=>({...w,state:T,inputVolume:O,outputVolume:k}),[w,O,k,T]),j=T!==`idle`&&T!==`error`,M=(0,e.useCallback)(()=>{if(!h)return _?_():c?.start?.()},[c,h,_]),N=(0,e.useCallback)(()=>{if(!h)return v?v():c?.stop?.()},[c,h,v]),P=(0,e.useCallback)(()=>j?N():M(),[j,M,N]),F=j?!!(c?.stop||v):!!(c?.start||_),I=g&&F,L=I&&!h?P:void 0,R=x[`aria-label`]??(I?`${j?`Stop`:`Start`} voice session`:void 0),z={...x,"aria-label":R};if(y){let e={...x,type:`button`,disabled:h||!I,onClick:L,"data-orb-ui-state":T,"aria-label":R};return y({state:T,signal:A,inputVolume:O,outputVolume:k,activity:D,size:u,isActive:j,interactive:I,disabled:h,start:M,stop:N,toggle:P,rootProps:{className:p,style:{width:u,height:u,...m},"data-orb-ui-theme":`custom`,"data-orb-ui-state":T},controlProps:e})}let B={state:T,volume:D,size:u,className:p,style:m,disabled:h,...z},V={...B,interactive:I};switch(l){case`circle`:return(0,t.jsx)(b,{...V,onClick:L});case`bars`:return(0,t.jsx)(E,{...V,onClick:L});case`cloud`:return(0,t.jsx)(ne,{...V,onClick:L});case`radial`:return(0,t.jsx)(me,{...V,onClick:L});case`ocean`:return(0,t.jsx)(Le,{...V,scheme:d,palette:f,onClick:L});default:return(0,t.jsx)(o,{...B,disabled:h||!g,onStart:h||!g?void 0:M,onStop:h||!g?void 0:N})}}exports.Orb=Re,exports.VoiceOrb=Re;
+`,ye=.72;function Z(e,t=0,n=1){return Math.min(n,Math.max(t,e))}function Q(e,t,n,r){return e+(t-e)*(1-Math.exp(-n*r))}function be(e,t){let n=/^#?([0-9a-f]{6})$/i.exec(e.trim());if(!n)return t;let r=parseInt(n[1],16);return[(r>>16&255)/255,(r>>8&255)/255,(r&255)/255]}function xe(e,t,n){return[e[0]+(t[0]-e[0])*n,e[1]+(t[1]-e[1])*n,e[2]+(t[2]-e[2])*n]}function $([e,t,n],r){return`rgba(${Math.round(e*255)}, ${Math.round(t*255)}, ${Math.round(n*255)}, ${r})`}function Se(e,t){let n=ge[e],r=e=>{let r=be(n[e],[0,0,0]),i=t?.[e];return i?be(i,r):r};return{deep:r(`deep`),shallow:r(`shallow`),foam:r(`foam`),glow:r(`glow`),sky:r(`sky`),horizon:r(`horizon`)}}function Ce(e,t,n){let r=e.createShader(t);if(r){if(e.shaderSource(r,n),e.compileShader(r),!e.getShaderParameter(r,e.COMPILE_STATUS)){e.deleteShader(r);return}return r}}function we(e,t,n){let r=e.getContext(`webgl`,{alpha:!0,antialias:!0,premultipliedAlpha:!0});if(!r)return;let i=Ce(r,r.VERTEX_SHADER,_e),a=Ce(r,r.FRAGMENT_SHADER,ve);if(!i||!a){i&&r.deleteShader(i),a&&r.deleteShader(a);return}let o=r.createProgram(),s=r.createBuffer();if(!o||!s){o&&r.deleteProgram(o),s&&r.deleteBuffer(s),r.deleteShader(i),r.deleteShader(a);return}if(r.attachShader(o,i),r.attachShader(o,a),r.linkProgram(o),!r.getProgramParameter(o,r.LINK_STATUS)){r.deleteProgram(o),r.deleteBuffer(s),r.deleteShader(i),r.deleteShader(a);return}let c=()=>{r.deleteProgram(o),r.deleteBuffer(s),r.deleteShader(i),r.deleteShader(a)},l=r.getAttribLocation(o,`a_position`),u=e=>r.getUniformLocation(o,e),d={resolution:u(`u_resolution`),time:u(`u_time`),level:u(`u_level`),swell:u(`u_swell`),ripple:u(`u_ripple`),glow:u(`u_glow`),tilt:u(`u_tilt`),listen:u(`u_listen`),speak:u(`u_speak`),surge:u(`u_surge`),deep:u(`u_deep`),shallow:u(`u_shallow`),foam:u(`u_foam`),light:u(`u_light`),sky:u(`u_sky`),horizon:u(`u_horizon`)};if(l<0||Object.values(d).some(e=>!e)){c();return}let f=Math.min(window.devicePixelRatio||1,2),p=Math.max(1,Math.round(t*f));return e.width=p,e.height=p,r.viewport(0,0,p,p),r.useProgram(o),r.bindBuffer(r.ARRAY_BUFFER,s),r.bufferData(r.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),r.STATIC_DRAW),r.enableVertexAttribArray(l),r.vertexAttribPointer(l,2,r.FLOAT,!1,0,0),r.uniform2f(d.resolution,p,p),r.uniform3fv(d.deep,n.deep),r.uniform3fv(d.shallow,n.shallow),r.uniform3fv(d.foam,n.foam),r.uniform3fv(d.light,n.glow),r.uniform3fv(d.sky,n.sky),r.uniform3fv(d.horizon,n.horizon),{draw(e){r.uniform1f(d.time,e.time),r.uniform1f(d.level,e.level),r.uniform1f(d.swell,e.swell),r.uniform1f(d.ripple,e.ripple),r.uniform1f(d.glow,e.glow),r.uniform1f(d.tilt,e.tilt),r.uniform1f(d.listen,e.listen),r.uniform1f(d.speak,e.speak),r.uniform1f(d.surge,e.surge),r.drawArrays(r.TRIANGLES,0,6)},destroy:c}}function Te(e,t,n,r){switch(e){case`connecting`:return{swell:.03,speed:.32,glow:.3+.2*Math.sin(r*2.6),tiltAmplitude:.02,levelOffset:0,corona:.3+.1*Math.sin(r*2.6),reach:.24,ringEvery:0,ringStrength:0,ringInward:!1,orbit:0,sweep:1,pulse:.5};case`listening`:return{swell:.045+t*.03,speed:.45+t*.25,glow:.42+t*.5,tiltAmplitude:.03,levelOffset:t*.05,corona:.36+t*.3,reach:.24+t*.1,ringEvery:1.6-t*.5,ringStrength:.3+t*.35,ringInward:!0,orbit:0,sweep:0,pulse:.3};case`thinking`:return{swell:.05,speed:.7,glow:.5+.1*Math.sin(r*1.6),tiltAmplitude:.045,levelOffset:.01,corona:.38+.08*Math.sin(r*1.6),reach:.28,ringEvery:0,ringStrength:0,ringInward:!0,orbit:1,sweep:0,pulse:1};case`speaking`:return{swell:.055+n*.045,speed:.5+n*.25,glow:.55+n*.3,tiltAmplitude:.035,levelOffset:.02+n*.05,corona:.45+n*.3,reach:.24+n*.1,ringEvery:0,ringStrength:.3,ringInward:!1,orbit:0,sweep:0,pulse:.2};case`error`:return{swell:.02,speed:.2,glow:.06,tiltAmplitude:.01,levelOffset:-.04,corona:.08,reach:.15,ringEvery:0,ringStrength:0,ringInward:!1,orbit:0,sweep:0,pulse:0};default:return{swell:.036,speed:.36,glow:.28,tiltAmplitude:.028,levelOffset:0,corona:.3,reach:.22,ringEvery:6,ringStrength:.25,ringInward:!1,orbit:0,sweep:0,pulse:.35}}}var Ee=.1,De=7.5,Oe=3.2,ke=14,Ae=1.7,je=.3,Me=2.2,Ne=3,Pe=9,Fe=3.2,Ie=14,Le=.45,Re=.25,ze=.085;function Be(){return Array.from({length:Ne},(e,t)=>({angle:t/Ne*Math.PI*2,speed:(.55+t%3*.2)*(t%2==0?1:-1),radius:1.12+t%2*.08,size:.016+t%2*.006,wobble:.7+t*.37}))}function Ve(e,t,n,r){let i=e.getContext(`2d`);if(!i)return;let a=Math.min(window.devicePixelRatio||1,2),o=t*Ae;e.width=Math.max(1,Math.round(o*a)),e.height=e.width,i.scale(a,a);let s=o/2,c=t/2,l=r===`dark`?xe(n.shallow,n.glow,.35):n.shallow,u=r===`dark`?xe(n.glow,n.foam,.4):n.deep,d=r===`dark`?n.shallow:n.deep,f=r===`dark`?1:.75,p=(e,t,n)=>{i.beginPath(),i.arc(e,t,n,0,Math.PI*2)};return{draw(e){i.clearRect(0,0,o,o),i.globalCompositeOperation=r===`dark`?`lighter`:`source-over`;let t=c*(1+e.reach+e.pulse*.03+Math.sin(e.breath)*.015),n=Z(e.corona*(r===`dark`?.55:.5)),a=i.createRadialGradient(s,s,c*.9,s,s,t);a.addColorStop(0,$(l,n)),a.addColorStop(.3,$(l,n*.5)),a.addColorStop(.65,$(l,n*.15)),a.addColorStop(1,$(l,0)),i.fillStyle=a,p(s,s,t),i.fill();let m=Z(e.speak+e.listen*.6);if(m>.01){let e=c*(1.02+m*.5),t=i.createRadialGradient(s,s,c*.95,s,s,e);t.addColorStop(0,$(l,.35*m*f)),t.addColorStop(.4,$(u,.1*m*f)),t.addColorStop(1,$(u,0)),i.fillStyle=t,p(s,s,e),i.fill()}let h=Z((.3+e.glow*.35+e.speak*.2+e.listen*.25)*f),g=c*(1.06+e.speak*.04),_=i.createRadialGradient(s,s,c*.97,s,s,g);_.addColorStop(0,$(u,h)),_.addColorStop(1,$(u,0)),i.fillStyle=_,p(s,s,c*1.15),i.fill();for(let t of e.rings){let n=Z((e.time-t.born)/Me),r=1-(1-n)**2.2,a=t.inward?1-r:r,o=c*(1+je*a),d=Z((t.inward?(1-a)**.6*(1-n**4):(1-n)**1.3)*t.strength);if(d<.005)continue;let m=c*(.01+t.strength*.014)*(1-a*.3);i.lineWidth=m*4,i.strokeStyle=$(l,d*.16),p(s,s,o),i.stroke(),i.lineWidth=m,i.strokeStyle=$(u,d*.4*f),p(s,s,o),i.stroke()}if(e.orbit>.01)for(let t of e.orbiters){let n=Math.sin(e.time*t.wobble)*.05,r=c*(t.radius+n),a=.8+e.orbit*.7,o=t.speed>0?1:-1;for(let n=0;n<14;n+=1){let d=n/14*a,m=t.angle-o*d,h=s+Math.cos(m)*r,g=s+Math.sin(m)*r,_=(1-n/14)**2*e.orbit;i.fillStyle=$(n===0?u:l,Z(_*(n===0?1:.7)*f)),p(h,g,c*t.size*(1-n/14*.7)),i.fill()}let d=c*t.size*5,m=s+Math.cos(t.angle)*r,h=s+Math.sin(t.angle)*r,g=i.createRadialGradient(m,h,0,m,h,d);g.addColorStop(0,$(l,.35*e.orbit)),g.addColorStop(1,$(l,0)),i.fillStyle=g,p(m,h,d),i.fill()}if(e.sweep>.01){let t=[{orbitRadius:c*1.12,start:e.time*2,span:Math.PI*.55,width:.025}];for(let{orbitRadius:n,start:r,span:a,width:o}of t){let t=i.createConicGradient(r,s,s);t.addColorStop(0,$(u,0)),t.addColorStop(a/(Math.PI*2),$(u,.7*e.sweep*f)),t.addColorStop(a/(Math.PI*2)+.001,$(u,0)),t.addColorStop(1,$(u,0)),i.lineWidth=c*o,i.strokeStyle=t,i.beginPath(),i.arc(s,s,n,r,r+a),i.stroke(),i.lineWidth=c*.01,i.strokeStyle=$(d,.2*e.sweep*f),p(s,s,n),i.stroke()}}}}}function He({state:n,volume:r,size:i,scheme:a=`light`,palette:o,className:s,style:c,disabled:l=!1,interactive:u=!1,onClick:d,...f}){let p=(0,e.useRef)(null),m=(0,e.useRef)(null),h=(0,e.useRef)(null),g=(0,e.useRef)(n),_=(0,e.useRef)(r),v=(0,e.useRef)(!1);he(()=>{g.current=n,_.current=r},[n,r]);let y=i*ye,b=Se(a,o),x=JSON.stringify(b);(0,e.useEffect)(()=>{let e=p.current,t=m.current,n=h.current;if(!e||!t||!n)return;let r=JSON.parse(x),i=window.matchMedia(`(prefers-reduced-motion: reduce)`),o=()=>{v.current=i.matches};o(),i.addEventListener(`change`,o);let s=we(e,y,r);s||(e.style.background=`linear-gradient(180deg, ${$(r.sky,1)} 0%, ${$(r.horizon,1)} 44%, ${$(r.shallow,1)} 48%, ${$(r.deep,1)} 100%)`);let c=Ve(t,y,r,a),l=0,u=performance.now(),d=0,f=0,b=0,S=0,C=Z(_.current),w=0,T=0,E=.036,D=.36,O=.26,k=.028,A=0,j=.3,M=.24,N=0,P=0,F=.3,I=0,L=0,R=0,z=Re,B=0,V=0,H=!1,U=0,W=[],G=Be(),K=e=>{let t=Math.min((e-u)/1e3,.05);u=e;let r=g.current,i=v.current,a=Z(_.current);C=i?0:Q(C,a,a>C?4:1.5,t);let o=r===`listening`?C:0,p=r===`speaking`?C:0;w=Q(w,o,o>w?4:1.5,t),T=Q(T,p,p>T?4:1.5,t),f+=t;let m=Te(r,w,T,f);E=Q(E,m.swell,2.4,t),D=Q(D,m.speed,2.4,t),O=Q(O,m.glow,3.2,t),k=Q(k,m.tiltAmplitude,1.8,t),A=Q(A,m.levelOffset,3,t),j=Q(j,m.corona,m.corona>j?6:2.5,t),M=Q(M,m.reach,m.reach>M?7:2.5,t),N=Q(N,m.orbit,3,t),P=Q(P,m.sweep,3,t),F=Q(F,m.pulse,2.5,t),R+=((r===`speaking`?C:0)-L)*ke*t,R*=Math.exp(-8*t),L+=R*t;let h=r===`speaking`&&!i;z=Math.max(h?a:0,Re,z-(z-Re)*Le*t);let y=h?Z(a/z):0;if(B=Q(B,y,y>B?Pe:Fe,t),V=Q(V,B,Ie,t),!i){d+=t*D,b+=t*Math.PI*2/De,S+=t*.31,I+=t*Math.PI*2/Oe;for(let e of G)e.angle+=t*e.speed*(.6+N*.9);U+=t;let e=V>.55;for(h?e&&!H&&U>=1&&(U=0,W.push({born:f,strength:m.ringStrength,inward:!1})):m.ringEvery>0&&(r!==`listening`||w>.03)&&U>=m.ringEvery&&(U=0,W.push({born:f,strength:m.ringStrength,inward:m.ringInward})),H=e;W.length>0&&f-W[0].born>Me;)W.shift()}let x=Ee+A+Math.sin(b)*.022,ee=Math.sin(S)*k+Math.sin(S*2.3+.7)*.006,q=i?0:Z(L);s?.draw({time:d,level:x,swell:i?.012:E,ripple:i?0:w,glow:O,tilt:i?0:ee,listen:w,speak:T,surge:q});let J=(.5+.5*Math.sin(I))*F,Y=V**.85*ze,te=1+J*.012+Math.sin(b)*.005+Y+w*.015;n.style.transform=i?`none`:`scale(${te})`,c?.draw({time:f,corona:i?j*.6:j+V*.2,reach:M,glow:O,speak:Math.max(T,V*.8),listen:w,orbit:i?0:N,sweep:i?0:P,pulse:J,breath:b,rings:i?[]:W,orbiters:G}),l=requestAnimationFrame(K)};return l=requestAnimationFrame(K),()=>{cancelAnimationFrame(l),i.removeEventListener(`change`,o),s?.destroy()}},[y,x,a]);let S={width:i,height:i,display:`flex`,alignItems:`center`,justifyContent:`center`,position:`relative`,...c},C=y*Ae,w=(0,t.jsxs)(`span`,{ref:h,style:{position:`relative`,display:`block`,width:y,height:y,borderRadius:`50%`,lineHeight:0,cursor:u?l?`not-allowed`:`pointer`:`default`,transformOrigin:`center`,willChange:`transform`},children:[(0,t.jsx)(`canvas`,{ref:m,"aria-hidden":`true`,"data-ocean-aura":``,style:{position:`absolute`,left:(y-C)/2,top:(y-C)/2,display:`block`,width:C,height:C,pointerEvents:`none`}}),(0,t.jsx)(`canvas`,{ref:p,"aria-hidden":`true`,"data-ocean-surface":``,style:{position:`absolute`,inset:0,display:`block`,width:y,height:y,borderRadius:`50%`,boxShadow:`0 ${y*.06}px ${y*.22}px ${$(b.deep,a===`dark`?.55:.28)}`}})]});return u?(0,t.jsx)(`button`,{...f,type:`button`,className:s,disabled:l,onClick:l?void 0:d,style:{appearance:`none`,WebkitAppearance:`none`,border:0,padding:0,margin:0,background:`transparent`,color:`inherit`,font:`inherit`,cursor:l?`not-allowed`:`pointer`,...S},children:w}):(0,t.jsx)(`div`,{...f,className:s,style:S,children:w})}function Ue({signal:i,state:a,volume:s,adapter:c,theme:l=`debug`,size:u=200,scheme:d,palette:f,className:p,style:m,disabled:h=!1,interactive:g=!0,onStart:_,onStop:v,renderTheme:y,...x}){let[S,C]=(0,e.useState)({state:`idle`});(0,e.useEffect)(()=>{if(C({state:`idle`}),c)return c.subscribe(C)},[c]);let w=i??S,T=n(a,i,S),D=r(s,T,w),O=w.inputVolume??0,k=w.outputVolume??0,A=(0,e.useMemo)(()=>({...w,state:T,inputVolume:O,outputVolume:k}),[w,O,k,T]),j=T!==`idle`&&T!==`error`,M=(0,e.useCallback)(()=>{if(!h)return _?_():c?.start?.()},[c,h,_]),N=(0,e.useCallback)(()=>{if(!h)return v?v():c?.stop?.()},[c,h,v]),P=(0,e.useCallback)(()=>j?N():M(),[j,M,N]),F=j?!!(c?.stop||v):!!(c?.start||_),I=g&&F,L=I&&!h?P:void 0,R=x[`aria-label`]??(I?`${j?`Stop`:`Start`} voice session`:void 0),z={...x,"aria-label":R};if(y){let e={...x,type:`button`,disabled:h||!I,onClick:L,"data-orb-ui-state":T,"aria-label":R};return y({state:T,signal:A,inputVolume:O,outputVolume:k,activity:D,size:u,isActive:j,interactive:I,disabled:h,start:M,stop:N,toggle:P,rootProps:{className:p,style:{width:u,height:u,...m},"data-orb-ui-theme":`custom`,"data-orb-ui-state":T},controlProps:e})}let B={state:T,volume:D,size:u,className:p,style:m,disabled:h,...z},V={...B,interactive:I};switch(l){case`circle`:return(0,t.jsx)(b,{...V,onClick:L});case`bars`:return(0,t.jsx)(E,{...V,onClick:L});case`cloud`:return(0,t.jsx)(ne,{...V,onClick:L});case`radial`:return(0,t.jsx)(me,{...V,onClick:L});case`ocean`:return(0,t.jsx)(He,{...V,scheme:d,palette:f,onClick:L});default:return(0,t.jsx)(o,{...B,disabled:h||!g,onStart:h||!g?void 0:M,onStop:h||!g?void 0:N})}}exports.Orb=Ue,exports.VoiceOrb=Ue;

package/dist/orb-ui.js

@@ -472,21 +472,21 @@ function M({ state: e, volume: n, size: r, className: a, style: s, disabled: c =
 }
 //#endregion
 //#region src/themes/cloud/CloudTheme.tsx
-var N = typeof window < "u" ? n : t, P = "\nattribute vec2 a_position;\n\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n", F = "\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_activity;\n\nfloat hash(vec2 p) {\n  p = fract(p * vec2(123.34, 456.21));\n  p += dot(p, p + 45.32);\n  return fract(p.x * p.y);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float value = 0.0;\n  float amplitude = 0.52;\n  mat2 rotation = mat2(0.80, 0.60, -0.60, 0.80);\n\n  for (int octave = 0; octave < 5; octave++) {\n    value += amplitude * noise(p);\n    p = rotation * p * 1.92 + vec2(9.7, 4.3);\n    amplitude *= 0.5;\n  }\n\n  return value;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 centered = uv - 0.5;\n  float radius = length(centered);\n  float edge = 1.0 - smoothstep(0.488, 0.5, radius);\n\n  if (edge <= 0.0) discard;\n\n  vec2 p = centered * 2.0;\n  float t = u_time;\n\n  vec2 warp = vec2(\n    fbm(p * 1.02 + vec2(t * 0.34, -t * 0.24)),\n    fbm(p * 1.08 + vec2(-t * 0.27, t * 0.32) + vec2(6.7, 2.9))\n  );\n  vec2 curl = vec2(\n    sin(p.y * 2.4 + t * 0.68 + warp.y * 3.2),\n    cos(p.x * 2.1 - t * 0.61 + warp.x * 3.0)\n  );\n  vec2 warped =\n    p +\n    (warp - 0.5) * (1.18 + u_activity * 0.38) +\n    curl * (0.035 + u_activity * 0.07);\n  float broad = fbm(warped * 0.92 + vec2(t * 0.14, -t * 0.18));\n  float folded = fbm(warped * 1.66 + vec2(-t * 0.23, t * 0.19) + 5.2);\n  float field = mix(broad, folded, 0.3 + u_activity * 0.14);\n\n  float horizon =\n    0.46 +\n    0.08 * sin((uv.x + warp.x * 0.2) * 5.4 + t * 0.42) +\n    0.16 * (broad - 0.5);\n  float upper = smoothstep(horizon - 0.12, horizon + 0.08, uv.y);\n  float band = exp(-pow((uv.y - horizon) * (5.2 + u_activity * 0.8), 2.0));\n  float cloud = smoothstep(0.24, 0.79, field);\n\n  vec3 deepPeriwinkle = vec3(0.36, 0.39, 0.985);\n  vec3 upperPeriwinkle = vec3(0.48, 0.56, 0.985);\n  vec3 lowerLavender = vec3(0.72, 0.78, 0.975);\n  vec3 milk = vec3(0.89, 0.92, 0.995);\n\n  vec3 color = mix(lowerLavender, upperPeriwinkle, upper);\n  float upperDepth = upper * (0.14 + smoothstep(0.42, 0.78, folded) * 0.5);\n  color = mix(color, deepPeriwinkle, upperDepth);\n\n  float milkAmount = clamp(band * (0.42 + cloud * 0.62), 0.0, 0.88);\n  color = mix(color, milk, milkAmount);\n\n  float lowerMist = (1.0 - upper) * smoothstep(0.58, 0.9, broad) * 0.18;\n  color = mix(color, milk, lowerMist);\n\n  float grain = (noise(gl_FragCoord.xy * 0.64) - 0.5) / 255.0;\n  color += grain;\n\n  gl_FragColor = vec4(color, edge);\n}\n", I = .55, L = .204, R = .2145, z = .063, B = "#5659dc", V = 1.178, H = 180, U = 300, W = 1350, G = 246, ee = 420, te = 354, ne = 480;
-function K(e, t = 0, n = 1) {
+var N = typeof window < "u" ? n : t, P = "\nattribute vec2 a_position;\n\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n", F = "\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_activity;\n\nfloat hash(vec2 p) {\n  p = fract(p * vec2(123.34, 456.21));\n  p += dot(p, p + 45.32);\n  return fract(p.x * p.y);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float value = 0.0;\n  float amplitude = 0.52;\n  mat2 rotation = mat2(0.80, 0.60, -0.60, 0.80);\n\n  for (int octave = 0; octave < 5; octave++) {\n    value += amplitude * noise(p);\n    p = rotation * p * 1.92 + vec2(9.7, 4.3);\n    amplitude *= 0.5;\n  }\n\n  return value;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 centered = uv - 0.5;\n  float radius = length(centered);\n  float edge = 1.0 - smoothstep(0.488, 0.5, radius);\n\n  if (edge <= 0.0) discard;\n\n  vec2 p = centered * 2.0;\n  float t = u_time;\n\n  vec2 warp = vec2(\n    fbm(p * 1.02 + vec2(t * 0.34, -t * 0.24)),\n    fbm(p * 1.08 + vec2(-t * 0.27, t * 0.32) + vec2(6.7, 2.9))\n  );\n  vec2 curl = vec2(\n    sin(p.y * 2.4 + t * 0.68 + warp.y * 3.2),\n    cos(p.x * 2.1 - t * 0.61 + warp.x * 3.0)\n  );\n  vec2 warped =\n    p +\n    (warp - 0.5) * (1.18 + u_activity * 0.38) +\n    curl * (0.035 + u_activity * 0.07);\n  float broad = fbm(warped * 0.92 + vec2(t * 0.14, -t * 0.18));\n  float folded = fbm(warped * 1.66 + vec2(-t * 0.23, t * 0.19) + 5.2);\n  float field = mix(broad, folded, 0.3 + u_activity * 0.14);\n\n  float horizon =\n    0.46 +\n    0.08 * sin((uv.x + warp.x * 0.2) * 5.4 + t * 0.42) +\n    0.16 * (broad - 0.5);\n  float upper = smoothstep(horizon - 0.12, horizon + 0.08, uv.y);\n  float band = exp(-pow((uv.y - horizon) * (5.2 + u_activity * 0.8), 2.0));\n  float cloud = smoothstep(0.24, 0.79, field);\n\n  vec3 deepPeriwinkle = vec3(0.36, 0.39, 0.985);\n  vec3 upperPeriwinkle = vec3(0.48, 0.56, 0.985);\n  vec3 lowerLavender = vec3(0.72, 0.78, 0.975);\n  vec3 milk = vec3(0.89, 0.92, 0.995);\n\n  vec3 color = mix(lowerLavender, upperPeriwinkle, upper);\n  float upperDepth = upper * (0.14 + smoothstep(0.42, 0.78, folded) * 0.5);\n  color = mix(color, deepPeriwinkle, upperDepth);\n\n  float milkAmount = clamp(band * (0.42 + cloud * 0.62), 0.0, 0.88);\n  color = mix(color, milk, milkAmount);\n\n  float lowerMist = (1.0 - upper) * smoothstep(0.58, 0.9, broad) * 0.18;\n  color = mix(color, milk, lowerMist);\n\n  float grain = (noise(gl_FragCoord.xy * 0.64) - 0.5) / 255.0;\n  color += grain;\n\n  gl_FragColor = vec4(color, edge);\n}\n", I = .55, L = .204, R = .2145, z = .063, B = "#5659dc", V = 1.178, H = 180, U = 300, W = 1350, G = 246, K = 420, ee = 354, te = 480;
+function q(e, t = 0, n = 1) {
 	return Math.min(n, Math.max(t, e));
 }
-function q(e, t, n, r) {
+function J(e, t, n, r) {
 	return e + (t - e) * (1 - Math.exp(-n * r));
 }
-function re(e) {
+function ne(e) {
 	return 1 - (1 - e) ** 3;
 }
-function J(e, t, n) {
+function re(e, t, n) {
 	return e + (t - e) * n;
 }
 function ie(e, t, n) {
-	let r = K((e - t) / (n - t));
+	let r = q((e - t) / (n - t));
 	return r * r * (3 - 2 * r);
 }
 function Y(e) {
@@ -553,9 +553,9 @@ function oe(e, t) {
 }
 function se(e) {
 	if (e <= H) return z;
-	if (e <= 480) return J(z, V, re((e - H) / U));
+	if (e <= 480) return re(z, V, ne((e - H) / U));
 	let t = e - H - U;
-	return t >= W ? 1 : 1 + .17799999999999994 * (1 - K(t / W)) ** 2;
+	return t >= W ? 1 : 1 + .17799999999999994 * (1 - q(t / W)) ** 2;
 }
 function ce({ state: e, volume: n, size: r, className: a, style: c, disabled: l = !1, interactive: u = !1, onClick: d, ...f }) {
 	let p = i(null), m = i(null), h = i(null), g = i(e), _ = i(n), v = i(u), y = i(!1);
@@ -576,30 +576,30 @@ function ce({ state: e, volume: n, size: r, className: a, style: c, disabled: l
 		i(), r.addEventListener("change", i);
 		let a = oe(e, b);
 		a || (e.style.background = "linear-gradient(180deg, #626afb 2%, #8f9dfb 32%, #dde6fd 52%, #c9d3fb 84%)");
-		let o = 0, s = performance.now(), c = g.current, l = Y(c) ? s : void 0, u = K(_.current), d = 1, f = +!!Y(c), x = 1, S = +(c === "connecting"), C = 0, w = (r) => {
+		let o = 0, s = performance.now(), c = g.current, l = Y(c) ? s : void 0, u = q(_.current), d = 1, f = +!!Y(c), x = 1, S = +(c === "connecting"), C = 0, w = (r) => {
 			let i = Math.min((r - s) / 1e3, .05);
 			s = r;
 			let p = g.current, m = y.current;
 			p !== c && (Y(p) && !Y(c) && (l = r), (p === "idle" || p === "error") && (l = void 0), c = p);
-			let h = K(_.current);
-			u = m ? 0 : q(u, h, h > u ? 11 : 6, i);
+			let h = q(_.current);
+			u = m ? 0 : J(u, h, h > u ? 11 : 6, i);
 			let b = 1;
 			p === "listening" && (b = 1 - u * L), p === "speaking" && (b = 1 + u * R);
 			let T = Math.abs(b - 1) > Math.abs(d - 1) ? 12 : 6;
-			d = m ? 1 : q(d, b, T, i);
+			d = m ? 1 : J(d, b, T, i);
 			let E = Y(p), D = p === "idle" && v.current, O = E || D ? 1 : 0;
-			f = m ? O : q(f, O, 14, i);
+			f = m ? O : J(f, O, 14, i);
 			let k = E || D ? 1 : .92;
-			x = m ? k : q(x, k, 12, i);
+			x = m ? k : J(x, k, 12, i);
 			let A = d * x;
 			D && (A = z);
 			let j = +!D, M = D ? f : 0;
 			if (E && l !== void 0 && !m) {
-				let e = r - l, t = se(e), n = K((e - H - U) / W);
-				A = t * J(1, d, n), j = ie(e, G, ee), M = f * (1 - ie(e, te, ne)), e >= 1830 && (l = void 0);
+				let e = r - l, t = se(e), n = q((e - H - U) / W);
+				A = t * re(1, d, n), j = ie(e, G, K), M = f * (1 - ie(e, ee, te)), e >= 1830 && (l = void 0);
 			}
 			let N = +(p === "connecting");
-			S = m ? N : q(S, N, 18, i), e.style.opacity = String(f * j), e.style.transform = `scale(${A})`, t.style.opacity = String(M), t.style.transform = `scale(${A})`, n.style.opacity = String(S), n.style.transform = `rotate(${m ? 45 : r * .34}deg)`;
+			S = m ? N : J(S, N, 18, i), e.style.opacity = String(f * j), e.style.transform = `scale(${A})`, t.style.opacity = String(M), t.style.transform = `scale(${A})`, n.style.opacity = String(S), n.style.transform = `rotate(${m ? 45 : r * .34}deg)`;
 			let P = .24, F = .1;
 			p === "listening" ? (P = .72 + u * .78, F = .28 + u * .32) : p === "speaking" && (P = 1.65 + u * 1.55, F = .66 + u * .34), m || (C += i * P), a?.draw(C, F), o = requestAnimationFrame(w);
 		};
@@ -946,7 +946,7 @@ var xe = typeof window < "u" ? n : t, Se = {
 		sky: "#0b1a2b",
 		horizon: "#1c4661"
 	}
-}, Ce = "\nattribute vec2 a_position;\n\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n", we = "\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_level;\nuniform float u_swell;\nuniform float u_ripple;\nuniform float u_glow;\nuniform float u_tilt;\nuniform float u_listen;\nuniform float u_speak;\nuniform float u_beat;\nuniform float u_surge;\nuniform vec3 u_deep;\nuniform vec3 u_shallow;\nuniform vec3 u_foam;\nuniform vec3 u_light;\nuniform vec3 u_sky;\nuniform vec3 u_horizon;\n\nfloat swellHeight(float x, float t, float swell) {\n  return swell * (\n    sin(x * 2.1 + t * 0.9) +\n    0.55 * sin(x * 3.7 - t * 0.63 + 1.3) +\n    0.3 * sin(x * 6.3 + t * 1.21 + 2.1)\n  );\n}\n\nfloat rippleHeight(float x, float t, float ripple) {\n  return ripple * 0.028 * sin(x * 12.0 - t * 5.2) * sin(x * 7.5 + t * 3.7);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 p = (uv - 0.5) * 2.0;\n  float radius = length(p);\n  float edge = 1.0 - smoothstep(0.985, 1.0, radius);\n\n  if (edge <= 0.0) discard;\n\n  float z = sqrt(max(0.0, 1.0 - radius * radius));\n  vec3 normal = vec3(p, z);\n\n  // The water sits behind a curved glass front: coordinates bend toward the\n  // centre near the rim, so the sea reads as inside a sphere, not painted on.\n  vec2 q = p * (1.0 - 0.22 * (1.0 - z));\n  float c = cos(u_tilt);\n  float s = sin(u_tilt);\n  q = vec2(q.x * c - q.y * s, q.x * s + q.y * c);\n\n  float t = u_time;\n  float front = swellHeight(q.x, t, u_swell) + rippleHeight(q.x, t, u_ripple);\n  // The voice lifts the water gently in the middle of the orb and lets it fall\n  // on each beat, so the sea is seen to talk without the glass changing shape.\n  float column = exp(-q.x * q.x * 3.2);\n  float voice = u_speak * (0.045 + 0.035 * u_beat) * column;\n  voice += u_speak * 0.02 * sin(q.x * 9.0 - t * 7.0) * (0.5 + 0.5 * u_beat);\n  voice += u_surge * 0.02;\n  front += voice;\n  float waterline = u_level + front;\n  float d = q.y - waterline;\n  float depth = max(0.0, -d);\n\n  // A second, slower swell further back gives the water a body to look into.\n  float back = swellHeight(q.x * 0.8 + 1.7, t * 0.72, u_swell * 0.8);\n  float backline = u_level - 0.16 + back;\n  float backBand = 1.0 - smoothstep(0.0, 0.06, abs(q.y - backline));\n\n  vec3 water = mix(u_shallow, u_deep, smoothstep(0.0, 1.05 + u_speak * 0.6, depth));\n  water = mix(water, u_shallow * 1.3, u_speak * 0.22 * exp(-depth * 1.8) * (0.6 + 0.4 * u_beat));\n  float caustic = sin(q.x * (6.0 + u_speak * 2.0) + front * 4.0 + t * (0.8 + u_speak * 1.2))\n    * sin(q.y * 5.0 - t * (0.6 + u_speak * 1.0) + q.x * 1.5);\n  caustic = pow(max(caustic, 0.0), 3.0) * exp(-depth * 1.6) * (0.28 + u_glow * 0.45 + u_speak * 0.3);\n  water = mix(water, u_shallow * 1.25, caustic);\n  float shaft = pow(max(sin(q.x * 3.0 + t * 0.27), 0.0), 5.0) * exp(-depth * 2.2);\n  water = mix(water, u_light, shaft * 0.08 * (0.4 + u_glow));\n  water = mix(water, mix(u_shallow, u_foam, 0.3), backBand * 0.14 * step(0.0, -d));\n  water = mix(water, u_deep, exp(-depth * 24.0) * 0.18);\n\n  vec3 air = mix(u_horizon, u_sky, smoothstep(0.0, 0.85, d));\n  float sun = exp(-length(q - vec2(-0.36, 0.58)) * 3.1);\n  air = mix(air, u_light, sun * (0.22 + u_glow * 0.36));\n  air = mix(air, u_light, exp(-max(d, 0.0) * 6.0) * 0.1 * u_glow);\n\n  vec3 color = d < 0.0 ? water : air;\n\n  // Spray: droplets thrown up over the crest on loud beats.\n  float dropletField = sin(q.x * 41.0 + t * 6.5) * sin(q.y * 37.0 - t * 9.0 + q.x * 3.0);\n  float spray = pow(max(dropletField, 0.0), 14.0)\n    * u_speak * (0.4 + 0.6 * u_beat)\n    * smoothstep(0.0, 0.05, d) * (1.0 - smoothstep(0.1, 0.3, d)) * column;\n  color = mix(color, u_foam, clamp(spray * 0.8, 0.0, 0.7));\n\n  float foamWidth = 30.0 - u_speak * 10.0;\n  float foam = exp(-abs(d) * foamWidth) * (0.6 + u_speak * 0.35 + u_beat * u_speak * 0.2 + u_listen * 0.2);\n  float crest = smoothstep(0.35, 1.0, front / max(u_swell * 1.85, 0.001));\n  foam += crest * exp(-abs(d) * 16.0) * (0.22 + u_speak * 0.3);\n  color = mix(color, u_foam, clamp(foam, 0.0, 0.92));\n\n  // Glass: a Fresnel rim, one soft specular, and a little weight at the bottom.\n  float fresnel = pow(1.0 - z, 2.8);\n  color = mix(color, mix(u_foam, u_light, 0.5), fresnel * 0.32);\n  vec3 lightDir = normalize(vec3(-0.48, 0.7, 0.54));\n  float spec = pow(max(dot(normal, lightDir), 0.0), 48.0);\n  color = mix(color, vec3(1.0), spec * 0.4);\n  color *= 1.0 - 0.18 * smoothstep(0.1, 1.0, -p.y) * (1.0 - z * 0.6);\n\n  // The drawing buffer uses premultiplied alpha. Premultiply the antialiased\n  // perimeter so translucent edge pixels cannot become a bright outline.\n  gl_FragColor = vec4(color * edge, edge);\n}\n", Te = .72;
+}, Ce = "\nattribute vec2 a_position;\n\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n", we = "\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_level;\nuniform float u_swell;\nuniform float u_ripple;\nuniform float u_glow;\nuniform float u_tilt;\nuniform float u_listen;\nuniform float u_speak;\nuniform float u_surge;\nuniform vec3 u_deep;\nuniform vec3 u_shallow;\nuniform vec3 u_foam;\nuniform vec3 u_light;\nuniform vec3 u_sky;\nuniform vec3 u_horizon;\n\nfloat swellHeight(float x, float t, float swell) {\n  return swell * (\n    sin(x * 2.1 + t * 0.9) +\n    0.55 * sin(x * 3.7 - t * 0.63 + 1.3) +\n    0.3 * sin(x * 6.3 + t * 1.21 + 2.1)\n  );\n}\n\nfloat rippleHeight(float x, float t, float ripple) {\n  return ripple * 0.028 * sin(x * 12.0 - t * 5.2) * sin(x * 7.5 + t * 3.7);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 p = (uv - 0.5) * 2.0;\n  float radius = length(p);\n  float edge = 1.0 - smoothstep(0.985, 1.0, radius);\n\n  if (edge <= 0.0) discard;\n\n  float z = sqrt(max(0.0, 1.0 - radius * radius));\n  vec3 normal = vec3(p, z);\n\n  // The water sits behind a curved glass front: coordinates bend toward the\n  // centre near the rim, so the sea reads as inside a sphere, not painted on.\n  vec2 q = p * (1.0 - 0.22 * (1.0 - z));\n  float c = cos(u_tilt);\n  float s = sin(u_tilt);\n  q = vec2(q.x * c - q.y * s, q.x * s + q.y * c);\n\n  float t = u_time;\n  float front = swellHeight(q.x, t, u_swell) + rippleHeight(q.x, t, u_ripple);\n  // The voice is a tide, not a tremor: while she speaks the water rises a little\n  // in the middle of the orb and rolls in slow, rounder swells.\n  float column = exp(-q.x * q.x * 2.4);\n  float voice = u_surge * 0.05 * column + u_surge * 0.015 * sin(q.x * 2.6 - t * 0.9 + 0.4);\n  front += voice;\n  float waterline = u_level + front;\n  float d = q.y - waterline;\n  float depth = max(0.0, -d);\n\n  // A second, slower swell further back gives the water a body to look into.\n  float back = swellHeight(q.x * 0.8 + 1.7, t * 0.72, u_swell * 0.8);\n  float backline = u_level - 0.16 + back;\n  float backBand = 1.0 - smoothstep(0.0, 0.06, abs(q.y - backline));\n\n  vec3 water = mix(u_shallow, u_deep, smoothstep(0.0, 1.05 + u_speak * 0.6, depth));\n  water = mix(water, u_shallow * 1.3, u_surge * 0.18 * exp(-depth * 1.8));\n  float caustic = sin(q.x * 6.0 + front * 4.0 + t * 0.8) * sin(q.y * 5.0 - t * 0.6 + q.x * 1.5);\n  caustic = pow(max(caustic, 0.0), 3.0) * exp(-depth * 1.6) * (0.28 + u_glow * 0.45 + u_surge * 0.2);\n  water = mix(water, u_shallow * 1.25, caustic);\n  float shaft = pow(max(sin(q.x * 3.0 + t * 0.27), 0.0), 5.0) * exp(-depth * 2.2);\n  water = mix(water, u_light, shaft * 0.08 * (0.4 + u_glow));\n  water = mix(water, mix(u_shallow, u_foam, 0.3), backBand * 0.14 * step(0.0, -d));\n  water = mix(water, u_deep, exp(-depth * 24.0) * 0.18);\n\n  vec3 air = mix(u_horizon, u_sky, smoothstep(0.0, 0.85, d));\n  float sun = exp(-length(q - vec2(-0.36, 0.58)) * 3.1);\n  air = mix(air, u_light, sun * (0.22 + u_glow * 0.36));\n  air = mix(air, u_light, exp(-max(d, 0.0) * 6.0) * 0.1 * u_glow);\n\n  vec3 color = d < 0.0 ? water : air;\n\n\n  float foamWidth = 30.0 - u_surge * 8.0;\n  float foam = exp(-abs(d) * foamWidth) * (0.6 + u_surge * 0.3 + u_listen * 0.15);\n  float crest = smoothstep(0.35, 1.0, front / max(u_swell * 1.85, 0.001));\n  foam += crest * exp(-abs(d) * 16.0) * (0.22 + u_speak * 0.3);\n  color = mix(color, u_foam, clamp(foam, 0.0, 0.92));\n\n  // Glass: a Fresnel rim, one soft specular, and a little weight at the bottom.\n  float fresnel = pow(1.0 - z, 2.8);\n  color = mix(color, mix(u_foam, u_light, 0.5), fresnel * 0.32);\n  vec3 lightDir = normalize(vec3(-0.48, 0.7, 0.54));\n  float spec = pow(max(dot(normal, lightDir), 0.0), 48.0);\n  color = mix(color, vec3(1.0), spec * 0.4);\n  color *= 1.0 - 0.18 * smoothstep(0.1, 1.0, -p.y) * (1.0 - z * 0.6);\n\n  // The drawing buffer uses premultiplied alpha. Premultiply the antialiased\n  // perimeter so translucent edge pixels cannot become a bright outline.\n  gl_FragColor = vec4(color * edge, edge);\n}\n", Te = .72;
 function Z(e, t = 0, n = 1) {
 	return Math.min(n, Math.max(t, e));
 }
@@ -1034,7 +1034,6 @@ function Ae(e, t, n) {
 		tilt: u("u_tilt"),
 		listen: u("u_listen"),
 		speak: u("u_speak"),
-		beat: u("u_beat"),
 		surge: u("u_surge"),
 		deep: u("u_deep"),
 		shallow: u("u_shallow"),
@@ -1063,7 +1062,7 @@ function Ae(e, t, n) {
 		1
 	]), r.STATIC_DRAW), r.enableVertexAttribArray(l), r.vertexAttribPointer(l, 2, r.FLOAT, !1, 0, 0), r.uniform2f(d.resolution, p, p), r.uniform3fv(d.deep, n.deep), r.uniform3fv(d.shallow, n.shallow), r.uniform3fv(d.foam, n.foam), r.uniform3fv(d.light, n.glow), r.uniform3fv(d.sky, n.sky), r.uniform3fv(d.horizon, n.horizon), {
 		draw(e) {
-			r.uniform1f(d.time, e.time), r.uniform1f(d.level, e.level), r.uniform1f(d.swell, e.swell), r.uniform1f(d.ripple, e.ripple), r.uniform1f(d.glow, e.glow), r.uniform1f(d.tilt, e.tilt), r.uniform1f(d.listen, e.listen), r.uniform1f(d.speak, e.speak), r.uniform1f(d.beat, e.beat), r.uniform1f(d.surge, e.surge), r.drawArrays(r.TRIANGLES, 0, 6);
+			r.uniform1f(d.time, e.time), r.uniform1f(d.level, e.level), r.uniform1f(d.swell, e.swell), r.uniform1f(d.ripple, e.ripple), r.uniform1f(d.glow, e.glow), r.uniform1f(d.tilt, e.tilt), r.uniform1f(d.listen, e.listen), r.uniform1f(d.speak, e.speak), r.uniform1f(d.surge, e.surge), r.drawArrays(r.TRIANGLES, 0, 6);
 		},
 		destroy: c
 	};
@@ -1076,8 +1075,8 @@ function je(e, t, n, r) {
 			glow: .3 + .2 * Math.sin(r * 2.6),
 			tiltAmplitude: .02,
 			levelOffset: 0,
-			corona: .32 + .12 * Math.sin(r * 2.6),
-			reach: .28,
+			corona: .3 + .1 * Math.sin(r * 2.6),
+			reach: .24,
 			ringEvery: 0,
 			ringStrength: 0,
 			ringInward: !1,
@@ -1086,13 +1085,13 @@ function je(e, t, n, r) {
 			pulse: .5
 		};
 		case "listening": return {
-			swell: .045 + t * .05,
-			speed: .5 + t * .5,
+			swell: .045 + t * .03,
+			speed: .45 + t * .25,
 			glow: .42 + t * .5,
 			tiltAmplitude: .03,
 			levelOffset: t * .05,
-			corona: .38 + t * .32,
-			reach: .28 + t * .22,
+			corona: .36 + t * .3,
+			reach: .24 + t * .1,
 			ringEvery: 1.6 - t * .5,
 			ringStrength: .3 + t * .35,
 			ringInward: !0,
@@ -1103,11 +1102,11 @@ function je(e, t, n, r) {
 		case "thinking": return {
 			swell: .05,
 			speed: .7,
-			glow: .6 + .25 * Math.sin(r * 3.1),
-			tiltAmplitude: .06,
+			glow: .5 + .1 * Math.sin(r * 1.6),
+			tiltAmplitude: .045,
 			levelOffset: .01,
-			corona: .45 + .15 * Math.sin(r * 3.1),
-			reach: .38,
+			corona: .38 + .08 * Math.sin(r * 1.6),
+			reach: .28,
 			ringEvery: 0,
 			ringStrength: 0,
 			ringInward: !0,
@@ -1116,15 +1115,15 @@ function je(e, t, n, r) {
 			pulse: 1
 		};
 		case "speaking": return {
-			swell: .06 + n * .08,
-			speed: .8 + n * .7,
-			glow: .6 + n * .3,
-			tiltAmplitude: .04,
-			levelOffset: .03 + n * .06,
-			corona: .5 + n * .3,
-			reach: .3 + n * .28,
-			ringEvery: 1.3 - n * .4,
-			ringStrength: .3 + n * .3,
+			swell: .055 + n * .045,
+			speed: .5 + n * .25,
+			glow: .55 + n * .3,
+			tiltAmplitude: .035,
+			levelOffset: .02 + n * .05,
+			corona: .45 + n * .3,
+			reach: .24 + n * .1,
+			ringEvery: 0,
+			ringStrength: .3,
 			ringInward: !1,
 			orbit: 0,
 			sweep: 0,
@@ -1152,8 +1151,8 @@ function je(e, t, n, r) {
 			tiltAmplitude: .028,
 			levelOffset: 0,
 			corona: .3,
-			reach: .24,
-			ringEvery: 5,
+			reach: .22,
+			ringEvery: 6,
 			ringStrength: .25,
 			ringInward: !1,
 			orbit: 0,
@@ -1162,27 +1161,27 @@ function je(e, t, n, r) {
 		};
 	}
 }
-var Me = .1, Ne = 7.5, Pe = 1.6, Fe = 4.3, Ie = 60, Le = 2.2, Re = .7, ze = 2.8, Be = 4;
-function Ve() {
-	return Array.from({ length: Be }, (e, t) => ({
-		angle: t / Be * Math.PI * 2,
-		speed: (.9 + t % 3 * .35) * (t % 2 == 0 ? 1 : -1),
-		radius: 1.14 + t % 2 * .1,
-		size: .018 + t % 2 * .008,
+var Me = .1, Ne = 7.5, Pe = 3.2, Fe = 14, Ie = 1.7, Le = .3, Re = 2.2, ze = 3, Be = 9, Ve = 3.2, He = 14, Ue = .45, We = .25, Ge = .085;
+function Ke() {
+	return Array.from({ length: ze }, (e, t) => ({
+		angle: t / ze * Math.PI * 2,
+		speed: (.55 + t % 3 * .2) * (t % 2 == 0 ? 1 : -1),
+		radius: 1.12 + t % 2 * .08,
+		size: .016 + t % 2 * .006,
 		wobble: .7 + t * .37
 	}));
 }
-function He(e, t, n, r) {
+function qe(e, t, n, r) {
 	let i = e.getContext("2d");
 	if (!i) return;
-	let a = Math.min(window.devicePixelRatio || 1, 2), o = t * Le;
+	let a = Math.min(window.devicePixelRatio || 1, 2), o = t * Ie;
 	e.width = Math.max(1, Math.round(o * a)), e.height = e.width, i.scale(a, a);
 	let s = o / 2, c = t / 2, l = r === "dark" ? De(n.shallow, n.glow, .35) : n.shallow, u = r === "dark" ? De(n.glow, n.foam, .4) : n.deep, d = r === "dark" ? n.shallow : n.deep, f = r === "dark" ? 1 : .75, p = (e, t, n) => {
 		i.beginPath(), i.arc(e, t, n, 0, Math.PI * 2);
 	};
 	return { draw(e) {
 		i.clearRect(0, 0, o, o), i.globalCompositeOperation = r === "dark" ? "lighter" : "source-over";
-		let t = c * (1 + e.reach + e.pulse * .04 + Math.sin(e.breath) * .02), n = Z(e.corona * (r === "dark" ? .55 : .5)), a = i.createRadialGradient(s, s, c * .9, s, s, t);
+		let t = c * (1 + e.reach + e.pulse * .03 + Math.sin(e.breath) * .015), n = Z(e.corona * (r === "dark" ? .55 : .5)), a = i.createRadialGradient(s, s, c * .9, s, s, t);
 		a.addColorStop(0, $(l, n)), a.addColorStop(.3, $(l, n * .5)), a.addColorStop(.65, $(l, n * .15)), a.addColorStop(1, $(l, 0)), i.fillStyle = a, p(s, s, t), i.fill();
 		let m = Z(e.speak + e.listen * .6);
 		if (m > .01) {
@@ -1192,22 +1191,19 @@ function He(e, t, n, r) {
 		let h = Z((.3 + e.glow * .35 + e.speak * .2 + e.listen * .25) * f), g = c * (1.06 + e.speak * .04), _ = i.createRadialGradient(s, s, c * .97, s, s, g);
 		_.addColorStop(0, $(u, h)), _.addColorStop(1, $(u, 0)), i.fillStyle = _, p(s, s, c * 1.15), i.fill();
 		for (let t of e.rings) {
-			let n = Z((e.time - t.born) / ze), r = 1 - (1 - n) ** 2.2, a = t.inward ? 1 - r : r, o = c * (1 + Re * a), d = Z((t.inward ? (1 - a) ** .6 * (1 - n ** 4) : (1 - n) ** 1.3) * t.strength);
+			let n = Z((e.time - t.born) / Re), r = 1 - (1 - n) ** 2.2, a = t.inward ? 1 - r : r, o = c * (1 + Le * a), d = Z((t.inward ? (1 - a) ** .6 * (1 - n ** 4) : (1 - n) ** 1.3) * t.strength);
 			if (d < .005) continue;
-			let m = c * (.008 + t.strength * .012) * (1 - a * .4);
-			i.lineWidth = m * 4, i.strokeStyle = $(l, d * .18), p(s, s, o), i.stroke(), i.lineWidth = m, i.strokeStyle = $(u, d * .45 * f), p(s, s, o), i.stroke();
+			let m = c * (.01 + t.strength * .014) * (1 - a * .3);
+			i.lineWidth = m * 4, i.strokeStyle = $(l, d * .16), p(s, s, o), i.stroke(), i.lineWidth = m, i.strokeStyle = $(u, d * .4 * f), p(s, s, o), i.stroke();
 		}
-		if (e.orbit > .01) {
-			for (let t of [1.14, 1.24]) i.lineWidth = c * .006, i.strokeStyle = $(l, .12 * e.orbit * f), p(s, s, c * t), i.stroke();
-			for (let t of e.orbiters) {
-				let n = Math.sin(e.time * t.wobble) * .05, r = c * (t.radius + n), a = .8 + e.orbit * .7, o = t.speed > 0 ? 1 : -1;
-				for (let n = 0; n < 14; n += 1) {
-					let d = n / 14 * a, m = t.angle - o * d, h = s + Math.cos(m) * r, g = s + Math.sin(m) * r, _ = (1 - n / 14) ** 2 * e.orbit;
-					i.fillStyle = $(n === 0 ? u : l, Z(_ * (n === 0 ? 1 : .7) * f)), p(h, g, c * t.size * (1 - n / 14 * .7)), i.fill();
-				}
-				let d = c * t.size * 5, m = s + Math.cos(t.angle) * r, h = s + Math.sin(t.angle) * r, g = i.createRadialGradient(m, h, 0, m, h, d);
-				g.addColorStop(0, $(l, .5 * e.orbit)), g.addColorStop(1, $(l, 0)), i.fillStyle = g, p(m, h, d), i.fill();
+		if (e.orbit > .01) for (let t of e.orbiters) {
+			let n = Math.sin(e.time * t.wobble) * .05, r = c * (t.radius + n), a = .8 + e.orbit * .7, o = t.speed > 0 ? 1 : -1;
+			for (let n = 0; n < 14; n += 1) {
+				let d = n / 14 * a, m = t.angle - o * d, h = s + Math.cos(m) * r, g = s + Math.sin(m) * r, _ = (1 - n / 14) ** 2 * e.orbit;
+				i.fillStyle = $(n === 0 ? u : l, Z(_ * (n === 0 ? 1 : .7) * f)), p(h, g, c * t.size * (1 - n / 14 * .7)), i.fill();
 			}
+			let d = c * t.size * 5, m = s + Math.cos(t.angle) * r, h = s + Math.sin(t.angle) * r, g = i.createRadialGradient(m, h, 0, m, h, d);
+			g.addColorStop(0, $(l, .35 * e.orbit)), g.addColorStop(1, $(l, 0)), i.fillStyle = g, p(m, h, d), i.fill();
 		}
 		if (e.sweep > .01) {
 			let t = [{
@@ -1223,7 +1219,7 @@ function He(e, t, n, r) {
 		}
 	} };
 }
-function Ue({ state: e, volume: n, size: r, scheme: a = "light", palette: c, className: l, style: u, disabled: d = !1, interactive: f = !1, onClick: p, ...m }) {
+function Je({ state: e, volume: n, size: r, scheme: a = "light", palette: c, className: l, style: u, disabled: d = !1, interactive: f = !1, onClick: p, ...m }) {
 	let h = i(null), g = i(null), _ = i(null), v = i(e), y = i(n), b = i(!1);
 	xe(() => {
 		v.current = e, y.current = n;
@@ -1238,53 +1234,62 @@ function Ue({ state: e, volume: n, size: r, scheme: a = "light", palette: c, cla
 		o(), i.addEventListener("change", o);
 		let s = Ae(e, x, r);
 		s || (e.style.background = `linear-gradient(180deg, ${$(r.sky, 1)} 0%, ${$(r.horizon, 1)} 44%, ${$(r.shallow, 1)} 48%, ${$(r.deep, 1)} 100%)`);
-		let c = He(t, x, r, a), l = 0, u = performance.now(), d = 0, f = 0, p = 0, m = 0, S = Z(y.current), w = 0, T = 0, E = .036, D = .36, O = .26, k = .028, A = 0, j = .3, M = .24, N = 0, P = 0, F = .3, I = 0, L = 0, R = 0, z = 0, B = 0, V = [], H = Ve(), U = (e) => {
+		let c = qe(t, x, r, a), l = 0, u = performance.now(), d = 0, f = 0, p = 0, m = 0, S = Z(y.current), w = 0, T = 0, E = .036, D = .36, O = .26, k = .028, A = 0, j = .3, M = .24, N = 0, P = 0, F = .3, I = 0, L = 0, R = 0, z = We, B = 0, V = 0, H = !1, U = 0, W = [], G = Ke(), K = (e) => {
 			let t = Math.min((e - u) / 1e3, .05);
 			u = e;
 			let r = v.current, i = b.current, a = Z(y.current);
-			S = i ? 0 : Q(S, a, a > S ? 14 : 6, t);
+			S = i ? 0 : Q(S, a, a > S ? 4 : 1.5, t);
 			let o = r === "listening" ? S : 0, h = r === "speaking" ? S : 0;
-			w = Q(w, o, o > w ? 16 : 6, t), T = Q(T, h, h > T ? 11 : 4.5, t), f += t;
+			w = Q(w, o, o > w ? 4 : 1.5, t), T = Q(T, h, h > T ? 4 : 1.5, t), f += t;
 			let g = je(r, w, T, f);
-			if (E = Q(E, g.swell, 2.4, t), D = Q(D, g.speed, 2.4, t), O = Q(O, g.glow, 3.2, t), k = Q(k, g.tiltAmplitude, 1.8, t), A = Q(A, g.levelOffset, 3, t), j = Q(j, g.corona, g.corona > j ? 6 : 2.5, t), M = Q(M, g.reach, g.reach > M ? 7 : 2.5, t), N = Q(N, g.orbit, 3, t), P = Q(P, g.sweep, 3, t), F = Q(F, g.pulse, 2.5, t), z += ((r === "speaking" ? a : 0) - R) * Ie * t, z *= Math.exp(-15 * t), R += z * t, !i) {
-				d += t * D, p += t * Math.PI * 2 / Ne, m += t * .31, I += t * Math.PI * 2 / Pe, L += t * Math.PI * 2 * Fe * (.8 + T * .4);
-				for (let e of H) e.angle += t * e.speed * (.6 + N * .9);
-				for (B += t, g.ringEvery > 0 && (r !== "speaking" || T > .04) && (r !== "listening" || w > .03) && B >= g.ringEvery && (B = 0, V.push({
+			E = Q(E, g.swell, 2.4, t), D = Q(D, g.speed, 2.4, t), O = Q(O, g.glow, 3.2, t), k = Q(k, g.tiltAmplitude, 1.8, t), A = Q(A, g.levelOffset, 3, t), j = Q(j, g.corona, g.corona > j ? 6 : 2.5, t), M = Q(M, g.reach, g.reach > M ? 7 : 2.5, t), N = Q(N, g.orbit, 3, t), P = Q(P, g.sweep, 3, t), F = Q(F, g.pulse, 2.5, t), R += ((r === "speaking" ? S : 0) - L) * Fe * t, R *= Math.exp(-8 * t), L += R * t;
+			let _ = r === "speaking" && !i;
+			z = Math.max(_ ? a : 0, We, z - (z - We) * Ue * t);
+			let x = _ ? Z(a / z) : 0;
+			if (B = Q(B, x, x > B ? Be : Ve, t), V = Q(V, B, He, t), !i) {
+				d += t * D, p += t * Math.PI * 2 / Ne, m += t * .31, I += t * Math.PI * 2 / Pe;
+				for (let e of G) e.angle += t * e.speed * (.6 + N * .9);
+				U += t;
+				let e = V > .55;
+				for (_ ? e && !H && U >= 1 && (U = 0, W.push({
+					born: f,
+					strength: g.ringStrength,
+					inward: !1
+				})) : g.ringEvery > 0 && (r !== "listening" || w > .03) && U >= g.ringEvery && (U = 0, W.push({
 					born: f,
 					strength: g.ringStrength,
 					inward: g.ringInward
-				})); V.length > 0 && f - V[0].born > ze;) V.shift();
+				})), H = e; W.length > 0 && f - W[0].born > Re;) W.shift();
 			}
-			let _ = Me + A + Math.sin(p) * .022, x = Math.sin(m) * k + Math.sin(m * 2.3 + .7) * .006, C = i ? 0 : (.5 + .5 * Math.sin(L)) * T, W = i ? 0 : R;
+			let C = Me + A + Math.sin(p) * .022, ee = Math.sin(m) * k + Math.sin(m * 2.3 + .7) * .006, te = i ? 0 : Z(L);
 			s?.draw({
 				time: d,
-				level: _,
+				level: C,
 				swell: i ? .012 : E,
 				ripple: i ? 0 : w,
 				glow: O,
-				tilt: i ? 0 : x,
+				tilt: i ? 0 : ee,
 				listen: w,
 				speak: T,
-				beat: C,
-				surge: W
+				surge: te
 			});
-			let G = (.5 + .5 * Math.sin(I)) * F, ee = 1 + G * .018 + Math.sin(p) * .005 + W * .045 + C * .012 + w * .02;
-			n.style.transform = i ? "none" : `scale(${ee})`, c?.draw({
+			let q = (.5 + .5 * Math.sin(I)) * F, J = V ** .85 * Ge, ne = 1 + q * .012 + Math.sin(p) * .005 + J + w * .015;
+			n.style.transform = i ? "none" : `scale(${ne})`, c?.draw({
 				time: f,
-				corona: i ? j * .6 : j,
+				corona: i ? j * .6 : j + V * .2,
 				reach: M,
 				glow: O,
-				speak: T,
+				speak: Math.max(T, V * .8),
 				listen: w,
 				orbit: i ? 0 : N,
 				sweep: i ? 0 : P,
-				pulse: G,
+				pulse: q,
 				breath: p,
-				rings: i ? [] : V,
-				orbiters: H
-			}), l = requestAnimationFrame(U);
+				rings: i ? [] : W,
+				orbiters: G
+			}), l = requestAnimationFrame(K);
 		};
-		return l = requestAnimationFrame(U), () => {
+		return l = requestAnimationFrame(K), () => {
 			cancelAnimationFrame(l), i.removeEventListener("change", o), s?.destroy();
 		};
 	}, [
@@ -1300,7 +1305,7 @@ function Ue({ state: e, volume: n, size: r, scheme: a = "light", palette: c, cla
 		justifyContent: "center",
 		position: "relative",
 		...u
-	}, T = x * Le, E = /* @__PURE__ */ s("span", {
+	}, T = x * Ie, E = /* @__PURE__ */ s("span", {
 		ref: _,
 		style: {
 			position: "relative",
@@ -1369,7 +1374,7 @@ function Ue({ state: e, volume: n, size: r, scheme: a = "light", palette: c, cla
 }
 //#endregion
 //#region src/components/Orb/Orb.tsx
-function We({ signal: n, state: i, volume: s, adapter: u, theme: d = "debug", size: p = 200, scheme: m, palette: h, className: g, style: _, disabled: v = !1, interactive: y = !0, onStart: b, onStop: x, renderTheme: S, ...C }) {
+function Ye({ signal: n, state: i, volume: s, adapter: u, theme: d = "debug", size: p = 200, scheme: m, palette: h, className: g, style: _, disabled: v = !1, interactive: y = !0, onStart: b, onStop: x, renderTheme: S, ...C }) {
 	let [w, T] = a({ state: "idle" });
 	t(() => {
 		if (T({ state: "idle" }), u) return u.subscribe(T);
@@ -1468,7 +1473,7 @@ function We({ signal: n, state: i, volume: s, adapter: u, theme: d = "debug", si
 			...W,
 			onClick: B
 		});
-		case "ocean": return /* @__PURE__ */ o(Ue, {
+		case "ocean": return /* @__PURE__ */ o(Je, {
 			...W,
 			scheme: m,
 			palette: h,
@@ -1483,4 +1488,4 @@ function We({ signal: n, state: i, volume: s, adapter: u, theme: d = "debug", si
 	}
 }
 //#endregion
-export { We as Orb, We as VoiceOrb };
+export { Ye as Orb, Ye as VoiceOrb };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lofcz/orb-ui",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "React voice agent UI components with audio-reactive adapters for Vapi, ElevenLabs, LiveKit, Pipecat, OpenAI Realtime, Gemini Live, and custom voice AI apps.",
   "type": "module",
   "main": "./dist/orb-ui.cjs",