@hoosei/voxweave-react
Version:
A customizable and interactive voice UI component for React applications
96 lines (86 loc) • 6.44 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),R=require("@react-three/fiber"),f=require("three"),S=require("./index59.js"),z=require("./index12.js"),t=require("react/jsx-runtime"),h=i=>{const u=i.match(/(\d+(\.\d+)?)/g);if(u&&u.length>=3){const[n,s,l]=u.map(Number);return new f.Vector3(n/255,s/255,l/255)}return console.error("Invalid RGBA color format:",i),new f.Vector3(0,0,0)},T=`
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }
float snoise(vec2 v) {
const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0
0.366025403784439, // 0.5*(sqrt(3.0)-1.0)
-0.577350269189626, // -1.0 + 2.0 * C.x
0.024390243902439); // 1.0 / 41.0
vec2 i = floor(v + dot(v, C.yy) );
vec2 x0 = v - i + dot(i, C.xx);
vec2 i1;
i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;
i = mod289(i); // Avoid truncation effects in permutation
vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
+ i.x + vec3(0.0, i1.x, 1.0 ));
vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
m = m*m ;
m = m*m ;
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;
m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
float neuronPulse(vec2 uv, vec2 center, float radius, float time) {
float dist = length(uv - center);
float pulse = sin(time * 8.0 - dist * 10.0) * 0.3 + 0.5;
return smoothstep(radius, radius * 0.7, dist) * pulse;
}
`,j=`
${T}
uniform float uTime;
uniform float uNoiseScale;
uniform float uNoiseStrength;
uniform float uDistortion;
uniform float uAudioReactivity;
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vPosition;
void main() {
vUv = uv;
vPosition = position;
// Create morphing effect
vec3 pos = position;
float noiseValue = snoise(vec2(pos.x * uNoiseScale + uTime * 0.2, pos.y * uNoiseScale + uTime * 0.1));
vec3 newPosition = pos + normal * (noiseValue * uNoiseStrength);
newPosition += normal * (sin(uTime * 10.0 + position.y * 10.0) * uDistortion * 0.1 * (uNoiseScale * uNoiseStrength));
vNormal = normalize(normalMatrix * normal);
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}
`,V=`
${T}
uniform float uTime;
uniform vec3 uColor1;
uniform vec3 uColor2;
uniform float uAudioReactivity;
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vPosition;
uniform float uNoiseScale;
uniform float uNoiseStrength;
vec3 electricColor(float t) {
return vec3(sin(t * 0.1) * 0.5 + 0.5, sin(t * 0.2) * 0.5 + 0.5, sin(t * 0.3) * 0.5 + 0.5);
}
void main() {
vec3 light = normalize(vec3(uAudioReactivity * uNoiseStrength + 0.2, uAudioReactivity * uNoiseStrength + 0.4, 1.0));
float diff = dot(vNormal, light);
vec3 baseColor = mix(uColor1, uColor2, vUv.y + sin(uTime) * uAudioReactivity * uNoiseStrength);
// Add neuron-like streaks
float streak1 = neuronPulse(vPosition.xy, vec2(uAudioReactivity * uNoiseStrength * 1.0, 0.7 ), 0.1, uTime);
float streak2 = neuronPulse(vPosition.xy, vec2(-uAudioReactivity * uNoiseStrength * 1.2, -0.5), 0.25, uTime + uAudioReactivity * uNoiseStrength);
float streak3 = neuronPulse(vPosition.xz, vec2(uAudioReactivity * uNoiseStrength * 0.2, -0.7), uAudioReactivity * uNoiseStrength + 0.2, uTime + uAudioReactivity * uNoiseStrength);
vec3 streakColor = vec3(uNoiseScale * uNoiseStrength * 2.0, 0.8, uNoiseScale * uNoiseStrength + 3.2); // Bright yellow
float streakIntensity = (streak1 + streak2 + streak3) * uAudioReactivity * uNoiseStrength;
vec3 finalColor = mix(baseColor, streakColor, streakIntensity) * diff;
gl_FragColor = vec4(finalColor, 1.0);
}
`,w=({audioData:i,agentStatus:u,isListening:n,listeningColors:s,notListeningColors:l})=>{const y=r.useRef(null),e=r.useRef(null),[p,x]=r.useState(null),b=.1,P=.02,[N,k]=r.useState(0),[A,F]=r.useState(0),g=o=>{if(!o||!n)return .01;if(typeof o=="number")return Math.min(Math.max((o+60)/60,0),1)*2.5;if(o.length){const v=o.reduce((m,d)=>m+d,0)/o.length;return Math.pow(v/255,2)*2.5}return .01},C=r.useMemo(()=>g(i),[g,i]),M=r.useMemo(()=>({vertexShader:j,fragmentShader:V,uniforms:{uTime:{value:0},uColor1:{value:new f.Vector3},uColor2:{value:new f.Vector3},uColor3:{value:new f.Vector3},uColor4:{value:new f.Vector3},uNoiseScale:{value:1.5},uNoiseStrength:{value:.1},uDistortion:{value:0},uAudioReactivity:{value:0}},transparent:!0}),[]);return r.useEffect(()=>{if(e.current)try{const[o,c]=S.getAIColors(n,u,s,l)??["#000000","#000000"],v=S.getAIColors(n,u,s,l)?.[0]??"#000000",a=S.getAIColors(n,u,s,l)?.[1]??"#000000";e.current.uniforms.uColor1.value.copy(h(o)),e.current.uniforms.uColor2.value.copy(h(c)),e.current.uniforms.uColor3.value.copy(h(v)),e.current.uniforms.uColor4.value.copy(h(a)),x(null)}catch(o){console.error("Error updating colors:",o),x("Color update failed")}},[n,s,l]),R.useFrame(o=>{if(y.current&&e.current)try{const c=o.clock.getElapsedTime();e.current.uniforms.uTime.value=c;const v=C&&n?C:0;let a;u==="speaking"?(a=A+(v-A)*P,F(a)):(a=N+(v-N)*b,k(a));let m=g(i);e.current.uniforms.uAudioReactivity.value=m,e.current.uniforms.uNoiseStrength.value=.2+m*.5,e.current.uniforms.uNoiseScale.value=3.5+m*.5,e.current.uniforms.uDistortion.value=m*.05;const d=.99+Math.sin(c*.5)*.01;y.current.scale.set(d,d,d),x(null)}catch(c){console.error("Error in animation frame:",c),x("An error occurred in the animation. Please try refreshing the page.")}}),p?t.jsx("div",{children:p}):t.jsxs("mesh",{ref:y,children:[t.jsx("icosahedronGeometry",{args:[1,25]}),t.jsx("shaderMaterial",{ref:e,...M})]})},I=i=>t.jsx(z.ErrorBoundary,{fallback:t.jsx("div",{children:"Error loading animation"}),children:t.jsx(r.Suspense,{fallback:null,children:t.jsx(R.Canvas,{camera:{position:[0,0,2],fov:75},children:t.jsx(w,{...i})})})});exports.BlobAnimationImpl=w;exports.default=I;
//# sourceMappingURL=index16.js.map