@lofcz/orb-ui 0.9.0 → 0.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/orb-ui.cjs +24 -6
- package/dist/orb-ui.js +148 -146
- package/package.json +1 -1
package/dist/orb-ui.cjs
CHANGED
|
@@ -108,7 +108,7 @@ void main() {
|
|
|
108
108
|
|
|
109
109
|
gl_FragColor = vec4(color, edge);
|
|
110
110
|
}
|
|
111
|
-
`,A=.55,j=.204,M=.2145,N=.063,P=`#5659dc`,F=1.178,I=180,L=300,R=1350,z=246,B=420,V=354,
|
|
111
|
+
`,A=.55,j=.204,M=.2145,N=.063,P=`#5659dc`,F=1.178,I=180,L=300,R=1350,z=246,B=420,V=354,H=480;function U(e,t=0,n=1){return Math.min(n,Math.max(t,e))}function W(e,t,n,r){return e+(t-e)*(1-Math.exp(-n*r))}function G(e){return 1-(1-e)**3}function K(e,t,n){return e+(t-e)*n}function ee(e,t,n){let r=U((e-t)/(n-t));return r*r*(3-2*r)}function q(e){return e===`listening`||e===`speaking`||e===`thinking`}function J(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 Y(e,t){let n=e.getContext(`webgl`,{alpha:!0,antialias:!0,premultipliedAlpha:!0});if(!n)return;let r=J(n,n.VERTEX_SHADER,O),i=J(n,n.FRAGMENT_SHADER,k);if(!r||!i){r&&n.deleteShader(r),i&&n.deleteShader(i);return}let a=n.createProgram(),o=n.createBuffer();if(!a||!o){a&&n.deleteProgram(a),o&&n.deleteBuffer(o),n.deleteShader(r),n.deleteShader(i);return}if(n.attachShader(a,r),n.attachShader(a,i),n.linkProgram(a),!n.getProgramParameter(a,n.LINK_STATUS)){n.deleteProgram(a),n.deleteBuffer(o),n.deleteShader(r),n.deleteShader(i);return}let s=n.getAttribLocation(a,`a_position`),c=n.getUniformLocation(a,`u_resolution`),l=n.getUniformLocation(a,`u_time`),u=n.getUniformLocation(a,`u_activity`);if(s<0||!c||!l||!u){n.deleteProgram(a),n.deleteBuffer(o),n.deleteShader(r),n.deleteShader(i);return}let d=Math.min(window.devicePixelRatio||1,2),f=Math.max(1,Math.round(t*d));return e.width=f,e.height=f,n.viewport(0,0,f,f),n.useProgram(a),n.bindBuffer(n.ARRAY_BUFFER,o),n.bufferData(n.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),n.STATIC_DRAW),n.enableVertexAttribArray(s),n.vertexAttribPointer(s,2,n.FLOAT,!1,0,0),n.uniform2f(c,f,f),{draw(e,t){n.uniform1f(l,e),n.uniform1f(u,t),n.drawArrays(n.TRIANGLES,0,6)},destroy(){n.deleteProgram(a),n.deleteBuffer(o),n.deleteShader(r),n.deleteShader(i)}}}function te(e){if(e<=I)return N;if(e<=480)return K(N,F,G((e-I)/L));let t=e-I-L;return t>=R?1:1+.17799999999999994*(1-U(t/R))**2}function ne({state:n,volume:r,size:i,className:a,style:o,disabled:s=!1,interactive:c=!1,onClick:l,...u}){let d=(0,e.useRef)(null),f=(0,e.useRef)(null),p=(0,e.useRef)(null),m=(0,e.useRef)(n),h=(0,e.useRef)(r),g=(0,e.useRef)(c),_=(0,e.useRef)(!1);D(()=>{m.current=n,h.current=r,g.current=c},[c,n,r]);let v=i*A;(0,e.useEffect)(()=>{let e=d.current,t=f.current,n=p.current;if(!e||!t||!n)return;let r=window.matchMedia(`(prefers-reduced-motion: reduce)`),i=()=>{_.current=r.matches};i(),r.addEventListener(`change`,i);let a=Y(e,v);a||(e.style.background=`linear-gradient(180deg, #626afb 2%, #8f9dfb 32%, #dde6fd 52%, #c9d3fb 84%)`);let o=0,s=performance.now(),c=m.current,l=q(c)?s:void 0,u=U(h.current),y=1,b=+!!q(c),x=1,S=+(c===`connecting`),C=0,w=r=>{let i=Math.min((r-s)/1e3,.05);s=r;let d=m.current,f=_.current;d!==c&&(q(d)&&!q(c)&&(l=r),(d===`idle`||d===`error`)&&(l=void 0),c=d);let p=U(h.current);u=f?0:W(u,p,p>u?11:6,i);let v=1;d===`listening`&&(v=1-u*j),d===`speaking`&&(v=1+u*M);let T=Math.abs(v-1)>Math.abs(y-1)?12:6;y=f?1:W(y,v,T,i);let E=q(d),D=d===`idle`&&g.current,O=E||D?1:0;b=f?O:W(b,O,14,i);let k=E||D?1:.92;x=f?k:W(x,k,12,i);let A=y*x;D&&(A=N);let P=+!D,F=D?b:0;if(E&&l!==void 0&&!f){let e=r-l,t=te(e),n=U((e-I-L)/R);A=t*K(1,y,n),P=ee(e,z,B),F=b*(1-ee(e,V,H)),e>=1830&&(l=void 0)}let G=+(d===`connecting`);S=f?G:W(S,G,18,i),e.style.opacity=String(b*P),e.style.transform=`scale(${A})`,t.style.opacity=String(F),t.style.transform=`scale(${A})`,n.style.opacity=String(S),n.style.transform=`rotate(${f?45:r*.34}deg)`;let J=.24,Y=.1;d===`listening`?(J=.72+u*.78,Y=.28+u*.32):d===`speaking`&&(J=1.65+u*1.55,Y=.66+u*.34),f||(C+=i*J),a?.draw(C,Y),o=requestAnimationFrame(w)};return o=requestAnimationFrame(w),()=>{cancelAnimationFrame(o),r.removeEventListener(`change`,i),a?.destroy()}},[v]);let y={width:i,height:i,display:`flex`,alignItems:`center`,justifyContent:`center`,position:`relative`,...o},b=(0,t.jsxs)(`span`,{style:{position:`relative`,display:`block`,width:v,height:v,borderRadius:`50%`,lineHeight:0,cursor:c?s?`not-allowed`:`pointer`:`default`},children:[(0,t.jsx)(`span`,{ref:f,"data-cloud-launch-dot":``,"aria-hidden":`true`,style:{position:`absolute`,inset:0,display:`block`,borderRadius:`50%`,background:P,opacity:0,transform:`scale(${N})`,transformOrigin:`center`,willChange:`opacity, transform`}}),(0,t.jsx)(`canvas`,{ref:d,"aria-hidden":`true`,style:{position:`absolute`,inset:0,display:`block`,width:v,height:v,borderRadius:`50%`,opacity:0,transform:`scale(${N})`,transformOrigin:`center`,willChange:`opacity, transform`}}),(0,t.jsx)(`span`,{ref:p,"aria-hidden":`true`,style:{position:`absolute`,left:`50%`,top:`50%`,width:v*.105,height:v*.105,boxSizing:`border-box`,border:`${Math.max(1.5,v*.012)}px solid rgba(113, 120, 245, 0.24)`,borderTopColor:`#777ff6`,borderRightColor:`#777ff6`,borderRadius:`50%`,opacity:0,transform:`rotate(0deg)`,transformOrigin:`center`,marginLeft:v*-.0525,marginTop:v*-.0525,willChange:`opacity, transform`}})]});return c?(0,t.jsx)(`button`,{...u,type:`button`,className:a,disabled:s,onClick:s?void 0:l,style:{appearance:`none`,WebkitAppearance:`none`,border:0,padding:0,margin:0,background:`transparent`,color:`inherit`,font:`inherit`,cursor:s?`not-allowed`:`pointer`,...y},children:b}):(0,t.jsx)(`div`,{...u,className:a,style:y,children:b})}var re=typeof window<`u`?e.useLayoutEffect:e.useEffect,ie=`
|
|
112
112
|
attribute vec2 a_position;
|
|
113
113
|
|
|
114
114
|
void main() {
|
|
@@ -218,6 +218,8 @@ uniform float u_glow;
|
|
|
218
218
|
uniform float u_tilt;
|
|
219
219
|
uniform float u_listen;
|
|
220
220
|
uniform float u_speak;
|
|
221
|
+
uniform float u_beat;
|
|
222
|
+
uniform float u_surge;
|
|
221
223
|
uniform vec3 u_deep;
|
|
222
224
|
uniform vec3 u_shallow;
|
|
223
225
|
uniform vec3 u_foam;
|
|
@@ -257,6 +259,13 @@ void main() {
|
|
|
257
259
|
|
|
258
260
|
float t = u_time;
|
|
259
261
|
float front = swellHeight(q.x, t, u_swell) + rippleHeight(q.x, t, u_ripple);
|
|
262
|
+
// The voice lifts the water gently in the middle of the orb and lets it fall
|
|
263
|
+
// on each beat, so the sea is seen to talk without the glass changing shape.
|
|
264
|
+
float column = exp(-q.x * q.x * 3.2);
|
|
265
|
+
float voice = u_speak * (0.045 + 0.035 * u_beat) * column;
|
|
266
|
+
voice += u_speak * 0.02 * sin(q.x * 9.0 - t * 7.0) * (0.5 + 0.5 * u_beat);
|
|
267
|
+
voice += u_surge * 0.02;
|
|
268
|
+
front += voice;
|
|
260
269
|
float waterline = u_level + front;
|
|
261
270
|
float d = q.y - waterline;
|
|
262
271
|
float depth = max(0.0, -d);
|
|
@@ -266,9 +275,11 @@ void main() {
|
|
|
266
275
|
float backline = u_level - 0.16 + back;
|
|
267
276
|
float backBand = 1.0 - smoothstep(0.0, 0.06, abs(q.y - backline));
|
|
268
277
|
|
|
269
|
-
vec3 water = mix(u_shallow, u_deep, smoothstep(0.0, 1.05, depth));
|
|
270
|
-
|
|
271
|
-
caustic =
|
|
278
|
+
vec3 water = mix(u_shallow, u_deep, smoothstep(0.0, 1.05 + u_speak * 0.6, depth));
|
|
279
|
+
water = mix(water, u_shallow * 1.3, u_speak * 0.22 * exp(-depth * 1.8) * (0.6 + 0.4 * u_beat));
|
|
280
|
+
float caustic = sin(q.x * (6.0 + u_speak * 2.0) + front * 4.0 + t * (0.8 + u_speak * 1.2))
|
|
281
|
+
* sin(q.y * 5.0 - t * (0.6 + u_speak * 1.0) + q.x * 1.5);
|
|
282
|
+
caustic = pow(max(caustic, 0.0), 3.0) * exp(-depth * 1.6) * (0.28 + u_glow * 0.45 + u_speak * 0.3);
|
|
272
283
|
water = mix(water, u_shallow * 1.25, caustic);
|
|
273
284
|
float shaft = pow(max(sin(q.x * 3.0 + t * 0.27), 0.0), 5.0) * exp(-depth * 2.2);
|
|
274
285
|
water = mix(water, u_light, shaft * 0.08 * (0.4 + u_glow));
|
|
@@ -282,8 +293,15 @@ void main() {
|
|
|
282
293
|
|
|
283
294
|
vec3 color = d < 0.0 ? water : air;
|
|
284
295
|
|
|
296
|
+
// Spray: droplets thrown up over the crest on loud beats.
|
|
297
|
+
float dropletField = sin(q.x * 41.0 + t * 6.5) * sin(q.y * 37.0 - t * 9.0 + q.x * 3.0);
|
|
298
|
+
float spray = pow(max(dropletField, 0.0), 14.0)
|
|
299
|
+
* u_speak * (0.4 + 0.6 * u_beat)
|
|
300
|
+
* smoothstep(0.0, 0.05, d) * (1.0 - smoothstep(0.1, 0.3, d)) * column;
|
|
301
|
+
color = mix(color, u_foam, clamp(spray * 0.8, 0.0, 0.7));
|
|
302
|
+
|
|
285
303
|
float foamWidth = 30.0 - u_speak * 10.0;
|
|
286
|
-
float foam = exp(-abs(d) * foamWidth) * (0.6 + u_speak * 0.35 + u_listen * 0.2);
|
|
304
|
+
float foam = exp(-abs(d) * foamWidth) * (0.6 + u_speak * 0.35 + u_beat * u_speak * 0.2 + u_listen * 0.2);
|
|
287
305
|
float crest = smoothstep(0.35, 1.0, front / max(u_swell * 1.85, 0.001));
|
|
288
306
|
foam += crest * exp(-abs(d) * 16.0) * (0.22 + u_speak * 0.3);
|
|
289
307
|
color = mix(color, u_foam, clamp(foam, 0.0, 0.92));
|
|
@@ -300,4 +318,4 @@ void main() {
|
|
|
300
318
|
// perimeter so translucent edge pixels cannot become a bright outline.
|
|
301
319
|
gl_FragColor = vec4(color * edge, edge);
|
|
302
320
|
}
|
|
303
|
-
`,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 $([e,t,n],r){return`rgba(${Math.round(e*255)}, ${Math.round(t*255)}, ${Math.round(n*255)}, ${r})`}function xe(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 Se(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 Ce(e,t,n){let r=e.getContext(`webgl`,{alpha:!0,antialias:!0,premultipliedAlpha:!0});if(!r)return;let i=Se(r,r.VERTEX_SHADER,_e),a=Se(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`),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.drawArrays(r.TRIANGLES,0,6)},destroy:c}}function we(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:.4+.2*Math.sin(r*2.6),reach:.38,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:.5+t*.5,reach:.4+t*.45,ringEvery:.75-t*.45,ringStrength:.45+t*.55,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:.65+.25*Math.sin(r*3.1),reach:.55,ringEvery:0,ringStrength:0,ringInward:!0,orbit:1,sweep:0,pulse:1};case`speaking`:return{swell:.065+n*.12,speed:.9+n*1.1,glow:.6+n*.4,tiltAmplitude:.035,levelOffset:.02+n*.05,corona:.75+n*.25,reach:.6+n*.6,ringEvery:.36-n*.18,ringStrength:.55+n*.45,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 Te=.1,Ee=7.5,De=1.6,Oe=2.6,ke=1.25,Ae=1.9,je=6;function Me(){return Array.from({length:je},(e,t)=>({angle:t/je*Math.PI*2,speed:(.9+t%3*.35)*(t%2==0?1:-1),radius:1.14+t%3*.11,size:.03+t%2*.014,wobble:.7+t*.37}))}function Ne(e,t,n,r){let i=e.getContext(`2d`);if(!i)return;let a=Math.min(window.devicePixelRatio||1,2),o=t*Oe;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`?n.glow:n.shallow,u=r===`dark`?n.foam: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`?.85:.7)),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,$(u,.55*m*f)),t.addColorStop(1,$(u,0)),i.fillStyle=t,p(s,s,e),i.fill()}let h=Z((.3+e.glow*.4+e.speak*.5+e.listen*.4)*f),g=c*(1.08+e.speak*.1),_=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)/Ae),r=1-(1-n)**2.2,a=t.inward?1-r:r,o=c*(1+ke*a),d=Z((t.inward?(1-a)**.6*(1-n**4):(1-n)**1.3)*t.strength);if(d<.005)continue;let m=c*(.03+t.strength*.05)*(1-a*.45);i.lineWidth=m*3.5,i.strokeStyle=$(l,d*.35),p(s,s,o),i.stroke(),i.lineWidth=m,i.strokeStyle=$(u,d*f),p(s,s,o),i.stroke()}if(e.orbit>.01){for(let t of[1.14,1.25,1.36])i.lineWidth=c*.008,i.strokeStyle=$(l,.22*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=1.1+e.orbit*1.1,o=t.speed>0?1:-1;for(let n=0;n<18;n+=1){let d=n/18*a,m=t.angle-o*d,h=s+Math.cos(m)*r,g=s+Math.sin(m)*r,_=(1-n/18)**2*e.orbit;i.fillStyle=$(n===0?u:l,Z(_*(n===0?1:.7)*f)),p(h,g,c*t.size*(1-n/18*.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,.8*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.4,span:Math.PI*.6,width:.045},{orbitRadius:c*1.26,start:Math.PI-e.time*1.5,span:Math.PI*.35,width:.02}];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,.95*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,.3*e.sweep*f),p(s,s,n),i.stroke()}}}}}function Pe({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=xe(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=Ce(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=Ne(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=[],z=Me(),B=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=we(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),!i){d+=t*D,b+=t*Math.PI*2/Ee,S+=t*.31,I+=t*Math.PI*2/De;for(let e of z)e.angle+=t*e.speed*(.6+N*.9);for(L+=t,m.ringEvery>0&&(r!==`speaking`||T>.04)&&(r!==`listening`||w>.03)&&L>=m.ringEvery&&(L=0,R.push({born:f,strength:m.ringStrength,inward:m.ringInward}));R.length>0&&f-R[0].born>Ae;)R.shift()}let h=Te+A+Math.sin(b)*.022,y=Math.sin(S)*k+Math.sin(S*2.3+.7)*.006;s?.draw({time:d,level:h,swell:i?.012:E,ripple:i?0:w,glow:O,tilt:i?0:y,listen:w,speak:T});let x=(.5+.5*Math.sin(I))*F,V=1+T*.09+w*.04+x*.022+Math.sin(b)*.006;n.style.transform=i?`none`:`scale(${V})`,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:x,breath:b,rings:i?[]:R,orbiters:z}),l=requestAnimationFrame(B)};return l=requestAnimationFrame(B),()=>{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*Oe,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 Fe({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)(Pe,{...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=Fe,exports.VoiceOrb=Fe;
|
|
321
|
+
`,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;
|
package/dist/orb-ui.js
CHANGED
|
@@ -472,27 +472,27 @@ function M({ state: e, volume: n, size: r, className: a, style: s, disabled: c =
|
|
|
472
472
|
}
|
|
473
473
|
//#endregion
|
|
474
474
|
//#region src/themes/cloud/CloudTheme.tsx
|
|
475
|
-
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,
|
|
476
|
-
function
|
|
475
|
+
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;
|
|
476
|
+
function K(e, t = 0, n = 1) {
|
|
477
477
|
return Math.min(n, Math.max(t, e));
|
|
478
478
|
}
|
|
479
|
-
function
|
|
479
|
+
function q(e, t, n, r) {
|
|
480
480
|
return e + (t - e) * (1 - Math.exp(-n * r));
|
|
481
481
|
}
|
|
482
|
-
function
|
|
482
|
+
function re(e) {
|
|
483
483
|
return 1 - (1 - e) ** 3;
|
|
484
484
|
}
|
|
485
|
-
function
|
|
485
|
+
function J(e, t, n) {
|
|
486
486
|
return e + (t - e) * n;
|
|
487
487
|
}
|
|
488
|
-
function
|
|
489
|
-
let r =
|
|
488
|
+
function ie(e, t, n) {
|
|
489
|
+
let r = K((e - t) / (n - t));
|
|
490
490
|
return r * r * (3 - 2 * r);
|
|
491
491
|
}
|
|
492
|
-
function
|
|
492
|
+
function Y(e) {
|
|
493
493
|
return e === "listening" || e === "speaking" || e === "thinking";
|
|
494
494
|
}
|
|
495
|
-
function
|
|
495
|
+
function ae(e, t, n) {
|
|
496
496
|
let r = e.createShader(t);
|
|
497
497
|
if (r) {
|
|
498
498
|
if (e.shaderSource(r, n), e.compileShader(r), !e.getShaderParameter(r, e.COMPILE_STATUS)) {
|
|
@@ -502,14 +502,14 @@ function se(e, t, n) {
|
|
|
502
502
|
return r;
|
|
503
503
|
}
|
|
504
504
|
}
|
|
505
|
-
function
|
|
505
|
+
function oe(e, t) {
|
|
506
506
|
let n = e.getContext("webgl", {
|
|
507
507
|
alpha: !0,
|
|
508
508
|
antialias: !0,
|
|
509
509
|
premultipliedAlpha: !0
|
|
510
510
|
});
|
|
511
511
|
if (!n) return;
|
|
512
|
-
let r =
|
|
512
|
+
let r = ae(n, n.VERTEX_SHADER, P), i = ae(n, n.FRAGMENT_SHADER, F);
|
|
513
513
|
if (!r || !i) {
|
|
514
514
|
r && n.deleteShader(r), i && n.deleteShader(i);
|
|
515
515
|
return;
|
|
@@ -551,13 +551,13 @@ function ce(e, t) {
|
|
|
551
551
|
}
|
|
552
552
|
};
|
|
553
553
|
}
|
|
554
|
-
function
|
|
554
|
+
function se(e) {
|
|
555
555
|
if (e <= H) return z;
|
|
556
|
-
if (e <= 480) return
|
|
556
|
+
if (e <= 480) return J(z, V, re((e - H) / U));
|
|
557
557
|
let t = e - H - U;
|
|
558
|
-
return t >= W ? 1 : 1 + .17799999999999994 * (1 -
|
|
558
|
+
return t >= W ? 1 : 1 + .17799999999999994 * (1 - K(t / W)) ** 2;
|
|
559
559
|
}
|
|
560
|
-
function
|
|
560
|
+
function ce({ state: e, volume: n, size: r, className: a, style: c, disabled: l = !1, interactive: u = !1, onClick: d, ...f }) {
|
|
561
561
|
let p = i(null), m = i(null), h = i(null), g = i(e), _ = i(n), v = i(u), y = i(!1);
|
|
562
562
|
N(() => {
|
|
563
563
|
g.current = e, _.current = n, v.current = u;
|
|
@@ -574,32 +574,32 @@ function ue({ state: e, volume: n, size: r, className: a, style: c, disabled: l
|
|
|
574
574
|
y.current = r.matches;
|
|
575
575
|
};
|
|
576
576
|
i(), r.addEventListener("change", i);
|
|
577
|
-
let a =
|
|
577
|
+
let a = oe(e, b);
|
|
578
578
|
a || (e.style.background = "linear-gradient(180deg, #626afb 2%, #8f9dfb 32%, #dde6fd 52%, #c9d3fb 84%)");
|
|
579
|
-
let o = 0, s = performance.now(), c = g.current, l =
|
|
579
|
+
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) => {
|
|
580
580
|
let i = Math.min((r - s) / 1e3, .05);
|
|
581
581
|
s = r;
|
|
582
582
|
let p = g.current, m = y.current;
|
|
583
|
-
p !== c && (
|
|
584
|
-
let h =
|
|
585
|
-
u = m ? 0 :
|
|
583
|
+
p !== c && (Y(p) && !Y(c) && (l = r), (p === "idle" || p === "error") && (l = void 0), c = p);
|
|
584
|
+
let h = K(_.current);
|
|
585
|
+
u = m ? 0 : q(u, h, h > u ? 11 : 6, i);
|
|
586
586
|
let b = 1;
|
|
587
587
|
p === "listening" && (b = 1 - u * L), p === "speaking" && (b = 1 + u * R);
|
|
588
588
|
let T = Math.abs(b - 1) > Math.abs(d - 1) ? 12 : 6;
|
|
589
|
-
d = m ? 1 :
|
|
590
|
-
let E =
|
|
591
|
-
f = m ? O :
|
|
589
|
+
d = m ? 1 : q(d, b, T, i);
|
|
590
|
+
let E = Y(p), D = p === "idle" && v.current, O = E || D ? 1 : 0;
|
|
591
|
+
f = m ? O : q(f, O, 14, i);
|
|
592
592
|
let k = E || D ? 1 : .92;
|
|
593
|
-
x = m ? k :
|
|
593
|
+
x = m ? k : q(x, k, 12, i);
|
|
594
594
|
let A = d * x;
|
|
595
595
|
D && (A = z);
|
|
596
596
|
let j = +!D, M = D ? f : 0;
|
|
597
597
|
if (E && l !== void 0 && !m) {
|
|
598
|
-
let e = r - l, t =
|
|
599
|
-
A = t *
|
|
598
|
+
let e = r - l, t = se(e), n = K((e - H - U) / W);
|
|
599
|
+
A = t * J(1, d, n), j = ie(e, G, ee), M = f * (1 - ie(e, te, ne)), e >= 1830 && (l = void 0);
|
|
600
600
|
}
|
|
601
601
|
let N = +(p === "connecting");
|
|
602
|
-
S = m ? N :
|
|
602
|
+
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)`;
|
|
603
603
|
let P = .24, F = .1;
|
|
604
604
|
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);
|
|
605
605
|
};
|
|
@@ -710,14 +710,14 @@ function ue({ state: e, volume: n, size: r, className: a, style: c, disabled: l
|
|
|
710
710
|
}
|
|
711
711
|
//#endregion
|
|
712
712
|
//#region src/themes/radial/RadialTheme.tsx
|
|
713
|
-
var
|
|
714
|
-
function
|
|
713
|
+
var le = typeof window < "u" ? n : t, ue = "\nattribute vec2 a_position;\n\nvoid main() {\n gl_Position = vec4(a_position, 0.0, 1.0);\n}\n", de = "\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_rotation;\nuniform float u_listen;\nuniform float u_speak;\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.993, 1.0, radius);\n\n if (edge <= 0.0) discard;\n\n float angle = atan(p.y, p.x);\n float warpStrength = 0.026 + u_speak * 0.105;\n float angularWarp =\n sin(angle * 3.0 - u_time * 0.54 + radius * 2.1) +\n 0.48 * sin(angle * 5.0 + u_time * 0.31 - radius * 3.7) +\n 0.22 * sin(angle * 8.0 - u_time * 0.19 + radius * 5.2);\n float phase =\n angle - 1.78 - u_rotation + angularWarp * warpStrength * (0.2 + radius * 0.8);\n\n // Two opposing dark lobes and two opposing aqua lobes form the main pinwheel.\n float lobeField = cos(phase * 2.0);\n float darkMix = smoothstep(-0.04, 0.38, lobeField);\n\n vec3 deepBlue = vec3(0.004, 0.105, 0.37);\n vec3 cobalt = vec3(0.015, 0.34, 0.76);\n vec3 aqua = vec3(0.24, 0.76, 0.79);\n vec3 paleAqua = vec3(0.77, 0.96, 0.95);\n\n float radialLight = 0.5 + 0.5 * sin(radius * 3.0 - u_time * 0.16);\n vec3 darkColor = mix(cobalt, deepBlue, 0.42 + 0.38 * radius);\n float darkRay = pow(max(lobeField, 0.0), 11.0);\n darkColor = mix(darkColor, aqua, darkRay * (0.18 + radialLight * 0.16));\n\n vec3 lightColor = mix(paleAqua, aqua, 0.5 + 0.2 * sin(radius * 3.4 + phase * 2.0));\n float lightRay = pow(max(-lobeField, 0.0), 5.0);\n lightColor = mix(lightColor, vec3(0.04, 0.42, 0.64), lightRay * 0.28);\n\n vec3 color = mix(lightColor, darkColor, darkMix);\n\n // Soft secondary streaks make each of the four lobes feel layered rather than flat.\n float secondaryRay = 0.5 + 0.5 * sin(phase * 6.0 + radius * 1.8 - u_time * 0.42);\n float rayStrength = (0.055 + u_speak * 0.045) * (0.25 + radius * 0.75);\n color = mix(color, vec3(0.26, 0.76, 0.8), secondaryRay * rayStrength);\n\n // The outer membrane keeps a circular perimeter while independent traveling waves\n // continuously reshape its inner boundary.\n float rimWave =\n 0.063 * sin(angle * 3.0 + u_time * 1.34) +\n 0.036 * sin(angle * 5.0 - u_time * 0.91 + 1.4) +\n 0.021 * sin(angle * 7.0 + u_time * 0.63 - 0.8) +\n 0.012 * sin(angle * 11.0 - u_time * 1.72 + sin(angle * 2.0 + u_time * 0.58));\n rimWave *= 1.0 + u_listen * 0.38;\n float rimInner = 0.82 + rimWave - u_listen * 0.2;\n float rim = smoothstep(rimInner - 0.02, rimInner + 0.015, radius);\n float rimStrength = rim * (0.3 + u_listen * 0.3);\n vec3 membrane = mix(\n vec3(0.47, 0.84, 0.84),\n vec3(0.76, 0.93, 0.92),\n smoothstep(0.78, 1.0, radius)\n );\n color = mix(color, membrane, clamp(rimStrength, 0.0, 0.72));\n\n // Only one transition direction becomes a bright seam, producing two opposing ribbons.\n float seamDirection = max(0.0, -sin(phase * 2.0));\n float seamExponent = mix(30.0, 3.2, smoothstep(0.05, 1.0, radius));\n float seam = pow(seamDirection, seamExponent) * (0.78 + radius * 0.25);\n color = mix(color, vec3(0.985, 0.995, 0.995), clamp(seam, 0.0, 0.96));\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", fe = "\n@keyframes orb-radial-spinner {\n to { transform: rotate(360deg); }\n}\n@media (prefers-reduced-motion: reduce) {\n [data-radial-spinner] { animation: none !important; }\n}\n", pe = .66, me = .2;
|
|
714
|
+
function he(e, t = 0, n = 1) {
|
|
715
715
|
return Math.min(n, Math.max(t, e));
|
|
716
716
|
}
|
|
717
|
-
function
|
|
717
|
+
function X(e, t, n, r) {
|
|
718
718
|
return e + (t - e) * (1 - Math.exp(-n * r));
|
|
719
719
|
}
|
|
720
|
-
function
|
|
720
|
+
function ge(e, t, n) {
|
|
721
721
|
let r = e.createShader(t);
|
|
722
722
|
if (r) {
|
|
723
723
|
if (e.shaderSource(r, n), e.compileShader(r), !e.getShaderParameter(r, e.COMPILE_STATUS)) {
|
|
@@ -727,14 +727,14 @@ function ve(e, t, n) {
|
|
|
727
727
|
return r;
|
|
728
728
|
}
|
|
729
729
|
}
|
|
730
|
-
function
|
|
730
|
+
function _e(e, t) {
|
|
731
731
|
let n = e.getContext("webgl", {
|
|
732
732
|
alpha: !0,
|
|
733
733
|
antialias: !0,
|
|
734
734
|
premultipliedAlpha: !0
|
|
735
735
|
});
|
|
736
736
|
if (!n) return;
|
|
737
|
-
let r =
|
|
737
|
+
let r = ge(n, n.VERTEX_SHADER, ue), i = ge(n, n.FRAGMENT_SHADER, de);
|
|
738
738
|
if (!r || !i) {
|
|
739
739
|
r && n.deleteShader(r), i && n.deleteShader(i);
|
|
740
740
|
return;
|
|
@@ -776,10 +776,10 @@ function ye(e, t) {
|
|
|
776
776
|
}
|
|
777
777
|
};
|
|
778
778
|
}
|
|
779
|
-
function
|
|
779
|
+
function ve(e) {
|
|
780
780
|
return e !== "idle" && e !== "connecting" && e !== "error";
|
|
781
781
|
}
|
|
782
|
-
function
|
|
782
|
+
function ye({ active: e }) {
|
|
783
783
|
return /* @__PURE__ */ o("svg", {
|
|
784
784
|
"aria-hidden": "true",
|
|
785
785
|
fill: "none",
|
|
@@ -798,17 +798,17 @@ function xe({ active: e }) {
|
|
|
798
798
|
})
|
|
799
799
|
});
|
|
800
800
|
}
|
|
801
|
-
function
|
|
801
|
+
function be({ state: e, volume: n, size: r, className: a, style: c, disabled: l = !1, interactive: u = !1, onClick: d, ...f }) {
|
|
802
802
|
let p = i(null), m = i(e), h = i(n), g = i(!1);
|
|
803
|
-
|
|
803
|
+
le(() => {
|
|
804
804
|
m.current = e, h.current = n;
|
|
805
805
|
}, [e, n]);
|
|
806
|
-
let _ = r *
|
|
806
|
+
let _ = r * pe, v = _ * me;
|
|
807
807
|
t(() => {
|
|
808
808
|
let e = "orb-radial-keyframes";
|
|
809
809
|
if (!document.getElementById(e)) {
|
|
810
810
|
let t = document.createElement("style");
|
|
811
|
-
t.id = e, t.textContent =
|
|
811
|
+
t.id = e, t.textContent = fe, document.head.appendChild(t);
|
|
812
812
|
}
|
|
813
813
|
}, []), t(() => {
|
|
814
814
|
let e = p.current;
|
|
@@ -817,16 +817,16 @@ function Se({ state: e, volume: n, size: r, className: a, style: c, disabled: l
|
|
|
817
817
|
g.current = t.matches;
|
|
818
818
|
};
|
|
819
819
|
n(), t.addEventListener("change", n);
|
|
820
|
-
let r =
|
|
820
|
+
let r = _e(e, _), i = 0, a = performance.now(), o = 0, s = .36, c = .62, l = .15, u = 0, d = 0, f = 0, v = 0, y = +(m.current === "speaking"), b = he(h.current), x = m.current === "listening" ? b : 0, S = m.current === "speaking" ? b : 0, C = (e) => {
|
|
821
821
|
let t = Math.min((e - a) / 1e3, .05);
|
|
822
822
|
a = e;
|
|
823
|
-
let n = m.current, p = g.current, _ =
|
|
824
|
-
b = p ? 0 :
|
|
823
|
+
let n = m.current, p = g.current, _ = he(h.current);
|
|
824
|
+
b = p ? 0 : X(b, _, _ > b ? 15 : 7, t);
|
|
825
825
|
let w = n === "listening" ? b : 0, T = n === "speaking" ? b : 0;
|
|
826
|
-
x = p ? 0 :
|
|
826
|
+
x = p ? 0 : X(x, w, w > x ? 17 : 7, t), S = p ? 0 : X(S, T, T > S ? 12 : 5, t);
|
|
827
827
|
let E = .36, D = .62, O = .15;
|
|
828
828
|
if (n === "connecting" ? (E = .42, D = .68, O = .13) : n === "listening" ? (E = .54 + x * .26, D = .78 + x * .18, O = .18 + x * .04) : n === "thinking" ? (E = .46, D = .72, O = .16) : n === "speaking" && (E = 1.05 + S * 1.15), !p) {
|
|
829
|
-
s =
|
|
829
|
+
s = X(s, E, 3.6, t), c = X(c, D, 3.6, t), l = X(l, O, 3.6, t), y = X(y, +(n === "speaking"), n === "speaking" ? 3.8 : 3, t), o += t * s, f += t * c;
|
|
830
830
|
let e = 1.2 + S * 1.35 + Math.sin(o * 1.73) * .34 + Math.sin(o * .61 + .8) * .18;
|
|
831
831
|
v += t * Math.max(.65, e);
|
|
832
832
|
let r = Math.sin(f) * l + Math.sin(f * .47 + 1.1) * .032, i = Math.sin(v * 1.08), a = Math.sin(v * 2.47 + .9), p = Math.sin(v * .43 - .5), m = r + (i * (.13 + S * .17) + a * (.035 + S * .035) + p * .055 - r) * y, h = 4.2 + y * 3, g = h * h, _ = 2 * h;
|
|
@@ -838,7 +838,7 @@ function Se({ state: e, volume: n, size: r, className: a, style: c, disabled: l
|
|
|
838
838
|
cancelAnimationFrame(i), t.removeEventListener("change", n), r?.destroy();
|
|
839
839
|
};
|
|
840
840
|
}, [_]);
|
|
841
|
-
let y =
|
|
841
|
+
let y = ve(e), b = e === "connecting", x = _ + (u ? v * .5 : 0), S = {
|
|
842
842
|
"--orb-ui-radial-control-surround": "#fff",
|
|
843
843
|
width: r,
|
|
844
844
|
height: r,
|
|
@@ -913,7 +913,7 @@ function Se({ state: e, volume: n, size: r, className: a, style: c, disabled: l
|
|
|
913
913
|
borderRadius: "50%",
|
|
914
914
|
animation: "orb-radial-spinner 760ms linear infinite"
|
|
915
915
|
}
|
|
916
|
-
}) : /* @__PURE__ */ o(
|
|
916
|
+
}) : /* @__PURE__ */ o(ye, { active: y })
|
|
917
917
|
}) : null]
|
|
918
918
|
});
|
|
919
919
|
return u ? /* @__PURE__ */ o("div", {
|
|
@@ -929,7 +929,7 @@ function Se({ state: e, volume: n, size: r, className: a, style: c, disabled: l
|
|
|
929
929
|
}
|
|
930
930
|
//#endregion
|
|
931
931
|
//#region src/themes/ocean/OceanTheme.tsx
|
|
932
|
-
var
|
|
932
|
+
var xe = typeof window < "u" ? n : t, Se = {
|
|
933
933
|
light: {
|
|
934
934
|
deep: "#0b4068",
|
|
935
935
|
shallow: "#43adca",
|
|
@@ -946,14 +946,14 @@ var Ce = typeof window < "u" ? n : t, we = {
|
|
|
946
946
|
sky: "#0b1a2b",
|
|
947
947
|
horizon: "#1c4661"
|
|
948
948
|
}
|
|
949
|
-
},
|
|
950
|
-
function
|
|
949
|
+
}, 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;
|
|
950
|
+
function Z(e, t = 0, n = 1) {
|
|
951
951
|
return Math.min(n, Math.max(t, e));
|
|
952
952
|
}
|
|
953
|
-
function
|
|
953
|
+
function Q(e, t, n, r) {
|
|
954
954
|
return e + (t - e) * (1 - Math.exp(-n * r));
|
|
955
955
|
}
|
|
956
|
-
function
|
|
956
|
+
function Ee(e, t) {
|
|
957
957
|
let n = /^#?([0-9a-f]{6})$/i.exec(e.trim());
|
|
958
958
|
if (!n) return t;
|
|
959
959
|
let r = parseInt(n[1], 16);
|
|
@@ -963,17 +963,24 @@ function Oe(e, t) {
|
|
|
963
963
|
(r & 255) / 255
|
|
964
964
|
];
|
|
965
965
|
}
|
|
966
|
-
function
|
|
966
|
+
function De(e, t, n) {
|
|
967
|
+
return [
|
|
968
|
+
e[0] + (t[0] - e[0]) * n,
|
|
969
|
+
e[1] + (t[1] - e[1]) * n,
|
|
970
|
+
e[2] + (t[2] - e[2]) * n
|
|
971
|
+
];
|
|
972
|
+
}
|
|
973
|
+
function $([e, t, n], r) {
|
|
967
974
|
return `rgba(${Math.round(e * 255)}, ${Math.round(t * 255)}, ${Math.round(n * 255)}, ${r})`;
|
|
968
975
|
}
|
|
969
|
-
function
|
|
970
|
-
let n =
|
|
971
|
-
let r =
|
|
976
|
+
function Oe(e, t) {
|
|
977
|
+
let n = Se[e], r = (e) => {
|
|
978
|
+
let r = Ee(n[e], [
|
|
972
979
|
0,
|
|
973
980
|
0,
|
|
974
981
|
0
|
|
975
982
|
]), i = t?.[e];
|
|
976
|
-
return i ?
|
|
983
|
+
return i ? Ee(i, r) : r;
|
|
977
984
|
};
|
|
978
985
|
return {
|
|
979
986
|
deep: r("deep"),
|
|
@@ -984,7 +991,7 @@ function ke(e, t) {
|
|
|
984
991
|
horizon: r("horizon")
|
|
985
992
|
};
|
|
986
993
|
}
|
|
987
|
-
function
|
|
994
|
+
function ke(e, t, n) {
|
|
988
995
|
let r = e.createShader(t);
|
|
989
996
|
if (r) {
|
|
990
997
|
if (e.shaderSource(r, n), e.compileShader(r), !e.getShaderParameter(r, e.COMPILE_STATUS)) {
|
|
@@ -994,14 +1001,14 @@ function Ae(e, t, n) {
|
|
|
994
1001
|
return r;
|
|
995
1002
|
}
|
|
996
1003
|
}
|
|
997
|
-
function
|
|
1004
|
+
function Ae(e, t, n) {
|
|
998
1005
|
let r = e.getContext("webgl", {
|
|
999
1006
|
alpha: !0,
|
|
1000
1007
|
antialias: !0,
|
|
1001
1008
|
premultipliedAlpha: !0
|
|
1002
1009
|
});
|
|
1003
1010
|
if (!r) return;
|
|
1004
|
-
let i =
|
|
1011
|
+
let i = ke(r, r.VERTEX_SHADER, Ce), a = ke(r, r.FRAGMENT_SHADER, we);
|
|
1005
1012
|
if (!i || !a) {
|
|
1006
1013
|
i && r.deleteShader(i), a && r.deleteShader(a);
|
|
1007
1014
|
return;
|
|
@@ -1027,6 +1034,8 @@ function je(e, t, n) {
|
|
|
1027
1034
|
tilt: u("u_tilt"),
|
|
1028
1035
|
listen: u("u_listen"),
|
|
1029
1036
|
speak: u("u_speak"),
|
|
1037
|
+
beat: u("u_beat"),
|
|
1038
|
+
surge: u("u_surge"),
|
|
1030
1039
|
deep: u("u_deep"),
|
|
1031
1040
|
shallow: u("u_shallow"),
|
|
1032
1041
|
foam: u("u_foam"),
|
|
@@ -1054,12 +1063,12 @@ function je(e, t, n) {
|
|
|
1054
1063
|
1
|
|
1055
1064
|
]), 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), {
|
|
1056
1065
|
draw(e) {
|
|
1057
|
-
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.drawArrays(r.TRIANGLES, 0, 6);
|
|
1066
|
+
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);
|
|
1058
1067
|
},
|
|
1059
1068
|
destroy: c
|
|
1060
1069
|
};
|
|
1061
1070
|
}
|
|
1062
|
-
function
|
|
1071
|
+
function je(e, t, n, r) {
|
|
1063
1072
|
switch (e) {
|
|
1064
1073
|
case "connecting": return {
|
|
1065
1074
|
swell: .03,
|
|
@@ -1067,8 +1076,8 @@ function Me(e, t, n, r) {
|
|
|
1067
1076
|
glow: .3 + .2 * Math.sin(r * 2.6),
|
|
1068
1077
|
tiltAmplitude: .02,
|
|
1069
1078
|
levelOffset: 0,
|
|
1070
|
-
corona: .
|
|
1071
|
-
reach: .
|
|
1079
|
+
corona: .32 + .12 * Math.sin(r * 2.6),
|
|
1080
|
+
reach: .28,
|
|
1072
1081
|
ringEvery: 0,
|
|
1073
1082
|
ringStrength: 0,
|
|
1074
1083
|
ringInward: !1,
|
|
@@ -1082,10 +1091,10 @@ function Me(e, t, n, r) {
|
|
|
1082
1091
|
glow: .42 + t * .5,
|
|
1083
1092
|
tiltAmplitude: .03,
|
|
1084
1093
|
levelOffset: t * .05,
|
|
1085
|
-
corona: .
|
|
1086
|
-
reach: .
|
|
1087
|
-
ringEvery: .
|
|
1088
|
-
ringStrength: .
|
|
1094
|
+
corona: .38 + t * .32,
|
|
1095
|
+
reach: .28 + t * .22,
|
|
1096
|
+
ringEvery: 1.6 - t * .5,
|
|
1097
|
+
ringStrength: .3 + t * .35,
|
|
1089
1098
|
ringInward: !0,
|
|
1090
1099
|
orbit: 0,
|
|
1091
1100
|
sweep: 0,
|
|
@@ -1097,8 +1106,8 @@ function Me(e, t, n, r) {
|
|
|
1097
1106
|
glow: .6 + .25 * Math.sin(r * 3.1),
|
|
1098
1107
|
tiltAmplitude: .06,
|
|
1099
1108
|
levelOffset: .01,
|
|
1100
|
-
corona: .
|
|
1101
|
-
reach: .
|
|
1109
|
+
corona: .45 + .15 * Math.sin(r * 3.1),
|
|
1110
|
+
reach: .38,
|
|
1102
1111
|
ringEvery: 0,
|
|
1103
1112
|
ringStrength: 0,
|
|
1104
1113
|
ringInward: !0,
|
|
@@ -1107,15 +1116,15 @@ function Me(e, t, n, r) {
|
|
|
1107
1116
|
pulse: 1
|
|
1108
1117
|
};
|
|
1109
1118
|
case "speaking": return {
|
|
1110
|
-
swell: .
|
|
1111
|
-
speed: .
|
|
1112
|
-
glow: .6 + n * .
|
|
1113
|
-
tiltAmplitude: .
|
|
1114
|
-
levelOffset: .
|
|
1115
|
-
corona: .
|
|
1116
|
-
reach: .
|
|
1117
|
-
ringEvery: .
|
|
1118
|
-
ringStrength: .
|
|
1119
|
+
swell: .06 + n * .08,
|
|
1120
|
+
speed: .8 + n * .7,
|
|
1121
|
+
glow: .6 + n * .3,
|
|
1122
|
+
tiltAmplitude: .04,
|
|
1123
|
+
levelOffset: .03 + n * .06,
|
|
1124
|
+
corona: .5 + n * .3,
|
|
1125
|
+
reach: .3 + n * .28,
|
|
1126
|
+
ringEvery: 1.3 - n * .4,
|
|
1127
|
+
ringStrength: .3 + n * .3,
|
|
1119
1128
|
ringInward: !1,
|
|
1120
1129
|
orbit: 0,
|
|
1121
1130
|
sweep: 0,
|
|
@@ -1153,82 +1162,73 @@ function Me(e, t, n, r) {
|
|
|
1153
1162
|
};
|
|
1154
1163
|
}
|
|
1155
1164
|
}
|
|
1156
|
-
var
|
|
1157
|
-
function
|
|
1158
|
-
return Array.from({ length:
|
|
1159
|
-
angle: t /
|
|
1165
|
+
var Me = .1, Ne = 7.5, Pe = 1.6, Fe = 4.3, Ie = 60, Le = 2.2, Re = .7, ze = 2.8, Be = 4;
|
|
1166
|
+
function Ve() {
|
|
1167
|
+
return Array.from({ length: Be }, (e, t) => ({
|
|
1168
|
+
angle: t / Be * Math.PI * 2,
|
|
1160
1169
|
speed: (.9 + t % 3 * .35) * (t % 2 == 0 ? 1 : -1),
|
|
1161
|
-
radius: 1.14 + t %
|
|
1162
|
-
size: .
|
|
1170
|
+
radius: 1.14 + t % 2 * .1,
|
|
1171
|
+
size: .018 + t % 2 * .008,
|
|
1163
1172
|
wobble: .7 + t * .37
|
|
1164
1173
|
}));
|
|
1165
1174
|
}
|
|
1166
|
-
function
|
|
1175
|
+
function He(e, t, n, r) {
|
|
1167
1176
|
let i = e.getContext("2d");
|
|
1168
1177
|
if (!i) return;
|
|
1169
|
-
let a = Math.min(window.devicePixelRatio || 1, 2), o = t *
|
|
1178
|
+
let a = Math.min(window.devicePixelRatio || 1, 2), o = t * Le;
|
|
1170
1179
|
e.width = Math.max(1, Math.round(o * a)), e.height = e.width, i.scale(a, a);
|
|
1171
|
-
let s = o / 2, c = t / 2, l = r === "dark" ? n.glow : n.shallow, u = r === "dark" ? n.foam : n.deep, d = r === "dark" ? n.shallow : n.deep, f = r === "dark" ? 1 : .75, p = (e, t, n) => {
|
|
1180
|
+
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) => {
|
|
1172
1181
|
i.beginPath(), i.arc(e, t, n, 0, Math.PI * 2);
|
|
1173
1182
|
};
|
|
1174
1183
|
return { draw(e) {
|
|
1175
1184
|
i.clearRect(0, 0, o, o), i.globalCompositeOperation = r === "dark" ? "lighter" : "source-over";
|
|
1176
|
-
let t = c * (1 + e.reach + e.pulse * .04 + Math.sin(e.breath) * .02), n =
|
|
1177
|
-
a.addColorStop(0,
|
|
1178
|
-
let m =
|
|
1185
|
+
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);
|
|
1186
|
+
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();
|
|
1187
|
+
let m = Z(e.speak + e.listen * .6);
|
|
1179
1188
|
if (m > .01) {
|
|
1180
1189
|
let e = c * (1.02 + m * .5), t = i.createRadialGradient(s, s, c * .95, s, s, e);
|
|
1181
|
-
t.addColorStop(0,
|
|
1190
|
+
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();
|
|
1182
1191
|
}
|
|
1183
|
-
let h =
|
|
1184
|
-
_.addColorStop(0,
|
|
1192
|
+
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);
|
|
1193
|
+
_.addColorStop(0, $(u, h)), _.addColorStop(1, $(u, 0)), i.fillStyle = _, p(s, s, c * 1.15), i.fill();
|
|
1185
1194
|
for (let t of e.rings) {
|
|
1186
|
-
let n =
|
|
1195
|
+
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);
|
|
1187
1196
|
if (d < .005) continue;
|
|
1188
|
-
let m = c * (.
|
|
1189
|
-
i.lineWidth = m *
|
|
1197
|
+
let m = c * (.008 + t.strength * .012) * (1 - a * .4);
|
|
1198
|
+
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();
|
|
1190
1199
|
}
|
|
1191
1200
|
if (e.orbit > .01) {
|
|
1192
|
-
for (let t of [
|
|
1193
|
-
1.14,
|
|
1194
|
-
1.25,
|
|
1195
|
-
1.36
|
|
1196
|
-
]) i.lineWidth = c * .008, i.strokeStyle = Z(l, .22 * e.orbit * f), p(s, s, c * t), i.stroke();
|
|
1201
|
+
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();
|
|
1197
1202
|
for (let t of e.orbiters) {
|
|
1198
|
-
let n = Math.sin(e.time * t.wobble) * .05, r = c * (t.radius + n), a =
|
|
1199
|
-
for (let n = 0; n <
|
|
1200
|
-
let d = n /
|
|
1201
|
-
i.fillStyle =
|
|
1203
|
+
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;
|
|
1204
|
+
for (let n = 0; n < 14; n += 1) {
|
|
1205
|
+
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;
|
|
1206
|
+
i.fillStyle = $(n === 0 ? u : l, Z(_ * (n === 0 ? 1 : .7) * f)), p(h, g, c * t.size * (1 - n / 14 * .7)), i.fill();
|
|
1202
1207
|
}
|
|
1203
1208
|
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);
|
|
1204
|
-
g.addColorStop(0,
|
|
1209
|
+
g.addColorStop(0, $(l, .5 * e.orbit)), g.addColorStop(1, $(l, 0)), i.fillStyle = g, p(m, h, d), i.fill();
|
|
1205
1210
|
}
|
|
1206
1211
|
}
|
|
1207
1212
|
if (e.sweep > .01) {
|
|
1208
1213
|
let t = [{
|
|
1209
1214
|
orbitRadius: c * 1.12,
|
|
1210
|
-
start: e.time * 2
|
|
1211
|
-
span: Math.PI * .
|
|
1212
|
-
width: .
|
|
1213
|
-
}, {
|
|
1214
|
-
orbitRadius: c * 1.26,
|
|
1215
|
-
start: Math.PI - e.time * 1.5,
|
|
1216
|
-
span: Math.PI * .35,
|
|
1217
|
-
width: .02
|
|
1215
|
+
start: e.time * 2,
|
|
1216
|
+
span: Math.PI * .55,
|
|
1217
|
+
width: .025
|
|
1218
1218
|
}];
|
|
1219
1219
|
for (let { orbitRadius: n, start: r, span: a, width: o } of t) {
|
|
1220
1220
|
let t = i.createConicGradient(r, s, s);
|
|
1221
|
-
t.addColorStop(0,
|
|
1221
|
+
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();
|
|
1222
1222
|
}
|
|
1223
1223
|
}
|
|
1224
1224
|
} };
|
|
1225
1225
|
}
|
|
1226
|
-
function
|
|
1226
|
+
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 }) {
|
|
1227
1227
|
let h = i(null), g = i(null), _ = i(null), v = i(e), y = i(n), b = i(!1);
|
|
1228
|
-
|
|
1228
|
+
xe(() => {
|
|
1229
1229
|
v.current = e, y.current = n;
|
|
1230
1230
|
}, [e, n]);
|
|
1231
|
-
let x = r *
|
|
1231
|
+
let x = r * Te, S = Oe(a, c), C = JSON.stringify(S);
|
|
1232
1232
|
t(() => {
|
|
1233
1233
|
let e = h.current, t = g.current, n = _.current;
|
|
1234
1234
|
if (!e || !t || !n) return;
|
|
@@ -1236,26 +1236,26 @@ function Ve({ state: e, volume: n, size: r, scheme: a = "light", palette: c, cla
|
|
|
1236
1236
|
b.current = i.matches;
|
|
1237
1237
|
};
|
|
1238
1238
|
o(), i.addEventListener("change", o);
|
|
1239
|
-
let s =
|
|
1240
|
-
s || (e.style.background = `linear-gradient(180deg, ${
|
|
1241
|
-
let c =
|
|
1239
|
+
let s = Ae(e, x, r);
|
|
1240
|
+
s || (e.style.background = `linear-gradient(180deg, ${$(r.sky, 1)} 0%, ${$(r.horizon, 1)} 44%, ${$(r.shallow, 1)} 48%, ${$(r.deep, 1)} 100%)`);
|
|
1241
|
+
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) => {
|
|
1242
1242
|
let t = Math.min((e - u) / 1e3, .05);
|
|
1243
1243
|
u = e;
|
|
1244
|
-
let r = v.current, i = b.current, a =
|
|
1245
|
-
S = i ? 0 :
|
|
1244
|
+
let r = v.current, i = b.current, a = Z(y.current);
|
|
1245
|
+
S = i ? 0 : Q(S, a, a > S ? 14 : 6, t);
|
|
1246
1246
|
let o = r === "listening" ? S : 0, h = r === "speaking" ? S : 0;
|
|
1247
|
-
w =
|
|
1248
|
-
let g =
|
|
1249
|
-
if (E =
|
|
1250
|
-
d += t * D, p += t * Math.PI * 2 /
|
|
1251
|
-
for (let e of
|
|
1252
|
-
for (
|
|
1247
|
+
w = Q(w, o, o > w ? 16 : 6, t), T = Q(T, h, h > T ? 11 : 4.5, t), f += t;
|
|
1248
|
+
let g = je(r, w, T, f);
|
|
1249
|
+
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) {
|
|
1250
|
+
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);
|
|
1251
|
+
for (let e of H) e.angle += t * e.speed * (.6 + N * .9);
|
|
1252
|
+
for (B += t, g.ringEvery > 0 && (r !== "speaking" || T > .04) && (r !== "listening" || w > .03) && B >= g.ringEvery && (B = 0, V.push({
|
|
1253
1253
|
born: f,
|
|
1254
1254
|
strength: g.ringStrength,
|
|
1255
1255
|
inward: g.ringInward
|
|
1256
|
-
}));
|
|
1256
|
+
})); V.length > 0 && f - V[0].born > ze;) V.shift();
|
|
1257
1257
|
}
|
|
1258
|
-
let _ =
|
|
1258
|
+
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;
|
|
1259
1259
|
s?.draw({
|
|
1260
1260
|
time: d,
|
|
1261
1261
|
level: _,
|
|
@@ -1264,10 +1264,12 @@ function Ve({ state: e, volume: n, size: r, scheme: a = "light", palette: c, cla
|
|
|
1264
1264
|
glow: O,
|
|
1265
1265
|
tilt: i ? 0 : x,
|
|
1266
1266
|
listen: w,
|
|
1267
|
-
speak: T
|
|
1267
|
+
speak: T,
|
|
1268
|
+
beat: C,
|
|
1269
|
+
surge: W
|
|
1268
1270
|
});
|
|
1269
|
-
let
|
|
1270
|
-
n.style.transform = i ? "none" : `scale(${
|
|
1271
|
+
let G = (.5 + .5 * Math.sin(I)) * F, ee = 1 + G * .018 + Math.sin(p) * .005 + W * .045 + C * .012 + w * .02;
|
|
1272
|
+
n.style.transform = i ? "none" : `scale(${ee})`, c?.draw({
|
|
1271
1273
|
time: f,
|
|
1272
1274
|
corona: i ? j * .6 : j,
|
|
1273
1275
|
reach: M,
|
|
@@ -1276,13 +1278,13 @@ function Ve({ state: e, volume: n, size: r, scheme: a = "light", palette: c, cla
|
|
|
1276
1278
|
listen: w,
|
|
1277
1279
|
orbit: i ? 0 : N,
|
|
1278
1280
|
sweep: i ? 0 : P,
|
|
1279
|
-
pulse:
|
|
1281
|
+
pulse: G,
|
|
1280
1282
|
breath: p,
|
|
1281
|
-
rings: i ? [] :
|
|
1282
|
-
orbiters:
|
|
1283
|
-
}), l = requestAnimationFrame(
|
|
1283
|
+
rings: i ? [] : V,
|
|
1284
|
+
orbiters: H
|
|
1285
|
+
}), l = requestAnimationFrame(U);
|
|
1284
1286
|
};
|
|
1285
|
-
return l = requestAnimationFrame(
|
|
1287
|
+
return l = requestAnimationFrame(U), () => {
|
|
1286
1288
|
cancelAnimationFrame(l), i.removeEventListener("change", o), s?.destroy();
|
|
1287
1289
|
};
|
|
1288
1290
|
}, [
|
|
@@ -1298,7 +1300,7 @@ function Ve({ state: e, volume: n, size: r, scheme: a = "light", palette: c, cla
|
|
|
1298
1300
|
justifyContent: "center",
|
|
1299
1301
|
position: "relative",
|
|
1300
1302
|
...u
|
|
1301
|
-
}, T = x *
|
|
1303
|
+
}, T = x * Le, E = /* @__PURE__ */ s("span", {
|
|
1302
1304
|
ref: _,
|
|
1303
1305
|
style: {
|
|
1304
1306
|
position: "relative",
|
|
@@ -1335,7 +1337,7 @@ function Ve({ state: e, volume: n, size: r, scheme: a = "light", palette: c, cla
|
|
|
1335
1337
|
width: x,
|
|
1336
1338
|
height: x,
|
|
1337
1339
|
borderRadius: "50%",
|
|
1338
|
-
boxShadow: `0 ${x * .06}px ${x * .22}px ${
|
|
1340
|
+
boxShadow: `0 ${x * .06}px ${x * .22}px ${$(S.deep, a === "dark" ? .55 : .28)}`
|
|
1339
1341
|
}
|
|
1340
1342
|
})]
|
|
1341
1343
|
});
|
|
@@ -1367,7 +1369,7 @@ function Ve({ state: e, volume: n, size: r, scheme: a = "light", palette: c, cla
|
|
|
1367
1369
|
}
|
|
1368
1370
|
//#endregion
|
|
1369
1371
|
//#region src/components/Orb/Orb.tsx
|
|
1370
|
-
function
|
|
1372
|
+
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 }) {
|
|
1371
1373
|
let [w, T] = a({ state: "idle" });
|
|
1372
1374
|
t(() => {
|
|
1373
1375
|
if (T({ state: "idle" }), u) return u.subscribe(T);
|
|
@@ -1458,15 +1460,15 @@ function $({ signal: n, state: i, volume: s, adapter: u, theme: d = "debug", siz
|
|
|
1458
1460
|
...W,
|
|
1459
1461
|
onClick: B
|
|
1460
1462
|
});
|
|
1461
|
-
case "cloud": return /* @__PURE__ */ o(
|
|
1463
|
+
case "cloud": return /* @__PURE__ */ o(ce, {
|
|
1462
1464
|
...W,
|
|
1463
1465
|
onClick: B
|
|
1464
1466
|
});
|
|
1465
|
-
case "radial": return /* @__PURE__ */ o(
|
|
1467
|
+
case "radial": return /* @__PURE__ */ o(be, {
|
|
1466
1468
|
...W,
|
|
1467
1469
|
onClick: B
|
|
1468
1470
|
});
|
|
1469
|
-
case "ocean": return /* @__PURE__ */ o(
|
|
1471
|
+
case "ocean": return /* @__PURE__ */ o(Ue, {
|
|
1470
1472
|
...W,
|
|
1471
1473
|
scheme: m,
|
|
1472
1474
|
palette: h,
|
|
@@ -1481,4 +1483,4 @@ function $({ signal: n, state: i, volume: s, adapter: u, theme: d = "debug", siz
|
|
|
1481
1483
|
}
|
|
1482
1484
|
}
|
|
1483
1485
|
//#endregion
|
|
1484
|
-
export {
|
|
1486
|
+
export { We as Orb, We as VoiceOrb };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lofcz/orb-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.1",
|
|
4
4
|
"description": "React voice agent UI components with audio-reactive adapters for Vapi, ElevenLabs, LiveKit, Pipecat, OpenAI Realtime, Gemini Live, and custom voice AI apps.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/orb-ui.cjs",
|