@hoosei/voxweave-react
Version:
A customizable and interactive voice UI component for React applications
213 lines (203 loc) • 7.45 kB
JavaScript
import { Suspense as M, useRef as R, useState as p, useMemo as w, useEffect as E } from "react";
import { Canvas as I, useFrame as O } from "@react-three/fiber";
import { Vector3 as m } from "three";
import { getAIColors as g } from "./index59.js";
import { ErrorBoundary as V } from "./index12.js";
import { jsx as n, jsxs as B } from "react/jsx-runtime";
const x = (r) => {
const t = r.match(/(\d+(\.\d+)?)/g);
if (t && t.length >= 3) {
const [i, a, l] = t.map(Number);
return new m(i / 255, a / 255, l / 255);
}
return console.error("Invalid RGBA color format:", r), new m(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;
}
`, G = `
${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);
}
`, _ = `
${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);
}
`, U = ({
audioData: r,
agentStatus: t,
isListening: i,
listeningColors: a,
notListeningColors: l
}) => {
const h = R(null), e = R(null), [S, d] = p(null), k = 0.1, P = 0.02, [N, b] = p(0), [A, F] = p(0), y = (o) => {
if (!o || !i) return 0.01;
if (typeof o == "number")
return Math.min(Math.max((o + 60) / 60, 0), 1) * 2.5;
if (o.length) {
const s = o.reduce((v, f) => v + f, 0) / o.length;
return Math.pow(s / 255, 2) * 2.5;
}
return 0.01;
}, C = w(() => y(r), [y, r]), z = w(() => ({
vertexShader: G,
fragmentShader: _,
uniforms: {
uTime: {
value: 0
},
uColor1: {
value: new m()
},
uColor2: {
value: new m()
},
uColor3: {
value: new m()
},
uColor4: {
value: new m()
},
uNoiseScale: {
value: 1.5
},
uNoiseStrength: {
value: 0.1
},
uDistortion: {
value: 0
},
uAudioReactivity: {
value: 0
}
},
transparent: !0
}), []);
return E(() => {
if (e.current)
try {
const [o, u] = g(i, t, a, l) ?? ["#000000", "#000000"], s = g(i, t, a, l)?.[0] ?? "#000000", c = g(i, t, a, l)?.[1] ?? "#000000";
e.current.uniforms.uColor1.value.copy(x(o)), e.current.uniforms.uColor2.value.copy(x(u)), e.current.uniforms.uColor3.value.copy(x(s)), e.current.uniforms.uColor4.value.copy(x(c)), d(null);
} catch (o) {
console.error("Error updating colors:", o), d("Color update failed");
}
}, [i, a, l]), O((o) => {
if (h.current && e.current)
try {
const u = o.clock.getElapsedTime();
e.current.uniforms.uTime.value = u;
const s = C && i ? C : 0;
let c;
t === "speaking" ? (c = A + (s - A) * P, F(c)) : (c = N + (s - N) * k, b(c));
let v = y(r);
e.current.uniforms.uAudioReactivity.value = v, e.current.uniforms.uNoiseStrength.value = 0.2 + v * 0.5, e.current.uniforms.uNoiseScale.value = 3.5 + v * 0.5, e.current.uniforms.uDistortion.value = v * 0.05;
const f = 0.99 + Math.sin(u * 0.5) * 0.01;
h.current.scale.set(f, f, f), d(null);
} catch (u) {
console.error("Error in animation frame:", u), d("An error occurred in the animation. Please try refreshing the page.");
}
}), S ? /* @__PURE__ */ n("div", {
children: S
}) : /* @__PURE__ */ B("mesh", {
ref: h,
children: [/* @__PURE__ */ n("icosahedronGeometry", {
args: [1, 25]
}), /* @__PURE__ */ n("shaderMaterial", {
ref: e,
...z
})]
});
}, K = (r) => /* @__PURE__ */ n(V, {
fallback: /* @__PURE__ */ n("div", {
children: "Error loading animation"
}),
children: /* @__PURE__ */ n(M, {
fallback: null,
children: /* @__PURE__ */ n(I, {
camera: {
position: [0, 0, 2],
fov: 75
},
children: /* @__PURE__ */ n(U, {
...r
})
})
})
});
export {
U as BlobAnimationImpl,
K as default
};
//# sourceMappingURL=index16.js.map