@signalcore/ui 0.1.0 → 1.0.0-beta.1

package/dist/voice/fluidDots.js

@@ -0,0 +1,161 @@
+import { CUTOUT, INK, INK_UNIFORMS } from "./webgl.js";
+import { WebGLOrb } from "./WebGLOrb.js";
+import { jsx } from "react/jsx-runtime";
+/** At rest the dots move at 0.4 of their pace; listening or speaking, at all of it. */
+const FLUID_DOTS = {
+	fragment: `precision highp float;
+uniform vec2 iResolution; uniform float iTime;
+uniform float uLevel; // signalcore: the signal
+${INK_UNIFORMS}
+const float TAU = 6.28318530718;
+const int   N   = 6;
+const float SMOOTH_K = 0.08;
+const float INTENSITY  = 0.0025;
+const float FALLOFF_P  = 1.35;
+const float FADE_START = 0.02;
+const float FADE_END   = 0.56;
+const float ABERR = 0.005;
+const vec3  SPECTRAL = vec3(0.0, 0.5, 1.0) * ABERR;
+const float HUE_SPEED = 0.06;
+const float COLOR_K   = 0.5;
+const float SAT       = 0.01;
+const float HUE_SPAN  = 0.667;
+const float MERGE_PERIOD = 6.0;
+const float T_MOVE   = 1.25;
+const float STAGGER  = 0.33;
+const float HOLD     = 0.0;
+const float W = 4.6;
+const float L = 3.2;
+const float PIERCE  = 0.12;
+const float RECOIL  = 0.035;
+const float REC_LAG = 0.11;
+const float GATHER_PERIOD = 12.0;
+const float GATHER_START  = 9.2;
+const float GATHER_HOLD   = 0.8;
+const float GATHER_R      = 0.008;
+const float GATHER_DIM    = 0.85;
+const float GATHER_IN     = 1.8;
+const float GATHER_IN_L   = 7.5;
+const float BURST_W = 6.5;
+const float BURST_L = 4.0;
+const float CHARGE_T     = 0.30;
+const float CHARGE_SHRK  = 0.18;
+const float CHARGE_GLOW  = 0.35;
+const float FLASH_GAIN   = 1.2;
+const float FLASH_DECAY  = 7.0;
+
+float hash11(float n){ return fract(sin(n*127.1 + 311.7)*43758.5453); }
+float settleWL(float tau, float w, float l){
+    if(tau <= 0.0) return 0.0;
+    return 1.0 - exp(-l*tau)*cos(w*tau);
+}
+float settle(float tau){ return settleWL(tau, W, L); }
+float settleCrit(float tau, float l){
+    if(tau <= 0.0) return 0.0;
+    return 1.0 - exp(-l*tau)*(1.0 + l*tau);
+}
+float smin(float a, float b, float k){
+    float h = max(k - abs(a - b), 0.0) / k;
+    return min(a, b) - h*h*k*0.25;
+}
+vec3 hue2rgb(float h){
+    h = fract(h);
+    float r = clamp(abs(h*6.0 - 3.0) - 1.0, 0.0, 1.0);
+    float g = clamp(2.0 - abs(h*6.0 - 2.0), 0.0, 1.0);
+    float b = clamp(2.0 - abs(h*6.0 - 4.0), 0.0, 1.0);
+    return vec3(r, g, b);
+}
+float dotR(float fi, float seed, float t){
+    return 0.036 + 0.010*sin(t*1.3 + seed*TAU) + 0.005*sin(t*2.4 + fi*1.3);
+}
+float dotSD(vec2 p, vec2 pos, float r, float t, float fi, float shapeDamp){
+    vec2 d = p - pos;
+    float sq = 0.075 * (0.5 + 0.5*sin(t*0.9 + fi*2.0)) * shapeDamp;
+    float ca = cos(t*0.35 + fi), sa = sin(t*0.35 + fi);
+    d = mat2(ca,-sa,sa,ca) * d;
+    d *= vec2(1.0+sq, 1.0-sq);
+    return length(d) - r;
+}
+vec3 scene(vec2 p, float t){
+    float k  = floor(t/MERGE_PERIOD);
+    float u  = fract(t/MERGE_PERIOD);
+    float te = u * MERGE_PERIOD;
+    float tg = mod(t, GATHER_PERIOD);
+    float g  = settleCrit((tg - GATHER_START) * GATHER_IN, GATHER_IN_L)
+             - settleWL(tg - GATHER_START - GATHER_HOLD, BURST_W, BURST_L);
+    float gC = clamp(g, 0.0, 1.0);
+    float tb     = tg - (GATHER_START + GATHER_HOLD);
+    float charge = smoothstep(-CHARGE_T, 0.0, min(tb, 0.0)) * gC;
+    float flash  = tb > 0.0 ? exp(-tb * FLASH_DECAY) : 0.0;
+    float gBright = mix(1.0, GATHER_DIM, gC) * (1.0 + CHARGE_GLOW*charge + FLASH_GAIN*flash);
+    vec3  total3 = vec3(1e5);
+    vec3  cAcc   = vec3(0.0);
+    float wAcc   = 1e-6;
+    for(int i=0; i<N; i++){
+        float fi   = float(i);
+        float seed = hash11(fi);
+        float ang = fi/float(N)*TAU + t*0.35;
+        vec2 dir  = vec2(cos(ang), sin(ang));
+        float R = 0.17 + 0.010*sin(t*1.0) + 0.007*sin(t*1.3 + seed*TAU);
+        float pairId   = mod(fi, 3.0);
+        float moverLow = mod(k + pairId, 2.0);
+        float isMover  = (fi < 2.5) ? step(moverLow, 0.5) : step(0.5, moverLow);
+        float goStart  = pairId * STAGGER;
+        float retStart = 3.0*STAGGER + HOLD + pairId * STAGGER;
+        float m   = (settle(te - goStart)           - settle(te - retStart))           * isMover;
+        float rec = (settle(te - goStart - REC_LAG) - settle(te - retStart - REC_LAG)) * (1.0 - isMover);
+        float rSelf = dotR(fi, seed, t);
+        rSelf = mix(rSelf, 0.036, gC);
+        rSelf *= 1.0 - CHARGE_SHRK * charge;
+        float fj    = mod(fi + 3.0, 6.0);
+        float rPart = dotR(fj, hash11(fj), t);
+        float deep   = -(R + RECOIL) - PIERCE * rPart;
+        float radial = mix(R, deep, m) + RECOIL * rec;
+        radial = mix(radial, GATHER_R, g);
+        vec2  pos    = radial * dir;
+        float sdR = dotSD(p - SPECTRAL.r*dir, pos, rSelf, t, fi, 1.0 - gC);
+        float sdG = dotSD(p - SPECTRAL.g*dir, pos, rSelf, t, fi, 1.0 - gC);
+        float sdB = dotSD(p - SPECTRAL.b*dir, pos, rSelf, t, fi, 1.0 - gC);
+        total3 = vec3( smin(total3.r, sdR, SMOOTH_K),
+                       smin(total3.g, sdG, SMOOTH_K),
+                       smin(total3.b, sdB, SMOOTH_K) );
+        float hue = fract(fi/float(N) + t*HUE_SPEED) * HUE_SPAN;
+        vec3 dotCol = mix(vec3(1.0), hue2rgb(hue), SAT);
+        float w = exp(-sdG * COLOR_K);
+        cAcc += w * dotCol;
+        wAcc += w;
+    }
+    vec3 sd3    = max(total3, vec3(0.0)) + 1e-4;
+    vec3 core3  = clamp(INTENSITY / pow(sd3, vec3(FALLOFF_P)), 0.0, 1.0);
+    vec3 edge3  = 1.0 - smoothstep(vec3(FADE_START), vec3(FADE_END), sd3);
+    vec3 bright = core3 * edge3 * gBright;
+    return bright * (cAcc / wAcc);
+}
+void mainImage(out vec4 fragColor, in vec2 fragCoord){
+    vec2 res = iResolution.xy;
+    vec2 p = (2.0*fragCoord - res) / min(res.x, res.y);
+    float t = iTime;
+    p /= 1.0 + 0.03*sin(t*1.0);
+    vec3 col = scene(p, t);
+    col *= 1.0 + 0.05*sin(t*1.0 + 1.0);
+    col *= 0.7 + 0.3*clamp(uLevel, 0.0, 1.0); // signalcore: brighter with the voice
+    col = pow(col, vec3(1.0/1.2));
+    col = min(col, 1.0);
+    float n = fract(sin(dot(fragCoord, vec2(12.9898,78.233)))*43758.5453);
+    col += (n - 0.5)/255.0;
+    fragColor = vec4(col, 1.0);
+}
+void main(){ mainImage(gl_FragColor, gl_FragCoord.xy); ${INK} ${CUTOUT} }`,
+	pace: (energy) => .4 + .6 * energy
+};
+/** The `fluid-dots` style of the orb: six metaballs that merge, scatter and gather. */
+function FluidDotsOrb(props) {
+	return /* @__PURE__ */ jsx(WebGLOrb, {
+		...props,
+		shader: FLUID_DOTS
+	});
+}
+//#endregion
+export { FLUID_DOTS, FluidDotsOrb as default };
+
+//# sourceMappingURL=fluidDots.js.map

package/dist/voice/fluidDots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fluidDots.js","names":[],"sources":["../../src/voice/fluidDots.tsx"],"sourcesContent":["import type { OrbProps } from \"./orbs\";\nimport { WebGLOrb } from \"./WebGLOrb\";\nimport { CUTOUT, INK, INK_UNIFORMS, type Shader } from \"./webgl\";\n\n/**\n * Ported from siri-wave by 40973894 (21st.dev), MIT. Shaders kept verbatim except the uniforms\n * added below.\n *\n * The `fluid-dots` style of the orb: six metaballs that merge, scatter and gather. Ours is\n * `uLevel`, how loud the microphone or the voice is, 0 to 1: the dots shine from 0.7 of their\n * brightness in silence to all of it at full voice. How fast they move follows the energy of\n * the state (0.4 of the original's pace at rest, all of it while listening and speaking, see\n * `pace`), summed on the clock the shader is given so that a change of state bends the motion.\n *\n * The last line of `main` is ours too: the host's colour, when it gives one (`INK`, its uniforms\n * `INK_UNIFORMS`), and what is near black turning transparent (`CUTOUT`).\n */\nconst FRAGMENT = `precision highp float;\nuniform vec2 iResolution; uniform float iTime;\nuniform float uLevel; // signalcore: the signal\n${INK_UNIFORMS}\nconst float TAU = 6.28318530718;\nconst int   N   = 6;\nconst float SMOOTH_K = 0.08;\nconst float INTENSITY  = 0.0025;\nconst float FALLOFF_P  = 1.35;\nconst float FADE_START = 0.02;\nconst float FADE_END   = 0.56;\nconst float ABERR = 0.005;\nconst vec3  SPECTRAL = vec3(0.0, 0.5, 1.0) * ABERR;\nconst float HUE_SPEED = 0.06;\nconst float COLOR_K   = 0.5;\nconst float SAT       = 0.01;\nconst float HUE_SPAN  = 0.667;\nconst float MERGE_PERIOD = 6.0;\nconst float T_MOVE   = 1.25;\nconst float STAGGER  = 0.33;\nconst float HOLD     = 0.0;\nconst float W = 4.6;\nconst float L = 3.2;\nconst float PIERCE  = 0.12;\nconst float RECOIL  = 0.035;\nconst float REC_LAG = 0.11;\nconst float GATHER_PERIOD = 12.0;\nconst float GATHER_START  = 9.2;\nconst float GATHER_HOLD   = 0.8;\nconst float GATHER_R      = 0.008;\nconst float GATHER_DIM    = 0.85;\nconst float GATHER_IN     = 1.8;\nconst float GATHER_IN_L   = 7.5;\nconst float BURST_W = 6.5;\nconst float BURST_L = 4.0;\nconst float CHARGE_T     = 0.30;\nconst float CHARGE_SHRK  = 0.18;\nconst float CHARGE_GLOW  = 0.35;\nconst float FLASH_GAIN   = 1.2;\nconst float FLASH_DECAY  = 7.0;\n\nfloat hash11(float n){ return fract(sin(n*127.1 + 311.7)*43758.5453); }\nfloat settleWL(float tau, float w, float l){\n    if(tau <= 0.0) return 0.0;\n    return 1.0 - exp(-l*tau)*cos(w*tau);\n}\nfloat settle(float tau){ return settleWL(tau, W, L); }\nfloat settleCrit(float tau, float l){\n    if(tau <= 0.0) return 0.0;\n    return 1.0 - exp(-l*tau)*(1.0 + l*tau);\n}\nfloat smin(float a, float b, float k){\n    float h = max(k - abs(a - b), 0.0) / k;\n    return min(a, b) - h*h*k*0.25;\n}\nvec3 hue2rgb(float h){\n    h = fract(h);\n    float r = clamp(abs(h*6.0 - 3.0) - 1.0, 0.0, 1.0);\n    float g = clamp(2.0 - abs(h*6.0 - 2.0), 0.0, 1.0);\n    float b = clamp(2.0 - abs(h*6.0 - 4.0), 0.0, 1.0);\n    return vec3(r, g, b);\n}\nfloat dotR(float fi, float seed, float t){\n    return 0.036 + 0.010*sin(t*1.3 + seed*TAU) + 0.005*sin(t*2.4 + fi*1.3);\n}\nfloat dotSD(vec2 p, vec2 pos, float r, float t, float fi, float shapeDamp){\n    vec2 d = p - pos;\n    float sq = 0.075 * (0.5 + 0.5*sin(t*0.9 + fi*2.0)) * shapeDamp;\n    float ca = cos(t*0.35 + fi), sa = sin(t*0.35 + fi);\n    d = mat2(ca,-sa,sa,ca) * d;\n    d *= vec2(1.0+sq, 1.0-sq);\n    return length(d) - r;\n}\nvec3 scene(vec2 p, float t){\n    float k  = floor(t/MERGE_PERIOD);\n    float u  = fract(t/MERGE_PERIOD);\n    float te = u * MERGE_PERIOD;\n    float tg = mod(t, GATHER_PERIOD);\n    float g  = settleCrit((tg - GATHER_START) * GATHER_IN, GATHER_IN_L)\n             - settleWL(tg - GATHER_START - GATHER_HOLD, BURST_W, BURST_L);\n    float gC = clamp(g, 0.0, 1.0);\n    float tb     = tg - (GATHER_START + GATHER_HOLD);\n    float charge = smoothstep(-CHARGE_T, 0.0, min(tb, 0.0)) * gC;\n    float flash  = tb > 0.0 ? exp(-tb * FLASH_DECAY) : 0.0;\n    float gBright = mix(1.0, GATHER_DIM, gC) * (1.0 + CHARGE_GLOW*charge + FLASH_GAIN*flash);\n    vec3  total3 = vec3(1e5);\n    vec3  cAcc   = vec3(0.0);\n    float wAcc   = 1e-6;\n    for(int i=0; i<N; i++){\n        float fi   = float(i);\n        float seed = hash11(fi);\n        float ang = fi/float(N)*TAU + t*0.35;\n        vec2 dir  = vec2(cos(ang), sin(ang));\n        float R = 0.17 + 0.010*sin(t*1.0) + 0.007*sin(t*1.3 + seed*TAU);\n        float pairId   = mod(fi, 3.0);\n        float moverLow = mod(k + pairId, 2.0);\n        float isMover  = (fi < 2.5) ? step(moverLow, 0.5) : step(0.5, moverLow);\n        float goStart  = pairId * STAGGER;\n        float retStart = 3.0*STAGGER + HOLD + pairId * STAGGER;\n        float m   = (settle(te - goStart)           - settle(te - retStart))           * isMover;\n        float rec = (settle(te - goStart - REC_LAG) - settle(te - retStart - REC_LAG)) * (1.0 - isMover);\n        float rSelf = dotR(fi, seed, t);\n        rSelf = mix(rSelf, 0.036, gC);\n        rSelf *= 1.0 - CHARGE_SHRK * charge;\n        float fj    = mod(fi + 3.0, 6.0);\n        float rPart = dotR(fj, hash11(fj), t);\n        float deep   = -(R + RECOIL) - PIERCE * rPart;\n        float radial = mix(R, deep, m) + RECOIL * rec;\n        radial = mix(radial, GATHER_R, g);\n        vec2  pos    = radial * dir;\n        float sdR = dotSD(p - SPECTRAL.r*dir, pos, rSelf, t, fi, 1.0 - gC);\n        float sdG = dotSD(p - SPECTRAL.g*dir, pos, rSelf, t, fi, 1.0 - gC);\n        float sdB = dotSD(p - SPECTRAL.b*dir, pos, rSelf, t, fi, 1.0 - gC);\n        total3 = vec3( smin(total3.r, sdR, SMOOTH_K),\n                       smin(total3.g, sdG, SMOOTH_K),\n                       smin(total3.b, sdB, SMOOTH_K) );\n        float hue = fract(fi/float(N) + t*HUE_SPEED) * HUE_SPAN;\n        vec3 dotCol = mix(vec3(1.0), hue2rgb(hue), SAT);\n        float w = exp(-sdG * COLOR_K);\n        cAcc += w * dotCol;\n        wAcc += w;\n    }\n    vec3 sd3    = max(total3, vec3(0.0)) + 1e-4;\n    vec3 core3  = clamp(INTENSITY / pow(sd3, vec3(FALLOFF_P)), 0.0, 1.0);\n    vec3 edge3  = 1.0 - smoothstep(vec3(FADE_START), vec3(FADE_END), sd3);\n    vec3 bright = core3 * edge3 * gBright;\n    return bright * (cAcc / wAcc);\n}\nvoid mainImage(out vec4 fragColor, in vec2 fragCoord){\n    vec2 res = iResolution.xy;\n    vec2 p = (2.0*fragCoord - res) / min(res.x, res.y);\n    float t = iTime;\n    p /= 1.0 + 0.03*sin(t*1.0);\n    vec3 col = scene(p, t);\n    col *= 1.0 + 0.05*sin(t*1.0 + 1.0);\n    col *= 0.7 + 0.3*clamp(uLevel, 0.0, 1.0); // signalcore: brighter with the voice\n    col = pow(col, vec3(1.0/1.2));\n    col = min(col, 1.0);\n    float n = fract(sin(dot(fragCoord, vec2(12.9898,78.233)))*43758.5453);\n    col += (n - 0.5)/255.0;\n    fragColor = vec4(col, 1.0);\n}\nvoid main(){ mainImage(gl_FragColor, gl_FragCoord.xy); ${INK} ${CUTOUT} }`;\n\n/** At rest the dots move at 0.4 of their pace; listening or speaking, at all of it. */\nexport const FLUID_DOTS: Shader = {\n  fragment: FRAGMENT,\n  pace: (energy) => 0.4 + 0.6 * energy,\n};\n\n/** The `fluid-dots` style of the orb: six metaballs that merge, scatter and gather. */\nexport default function FluidDotsOrb(props: OrbProps) {\n  return <WebGLOrb {...props} shader={FLUID_DOTS} />;\n}\n"],"mappings":";;;;AAkKA,MAAa,aAAqB;CAChC,UAAU;;;EA/IV,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yDA2I0C,IAAI,GAAG,OAAO;CAKrE,OAAO,WAAW,KAAM,KAAM;AAChC;;AAGA,SAAwB,aAAa,OAAiB;CACpD,OAAO,oBAAC,UAAD;EAAU,GAAI;EAAO,QAAQ;CAAa,CAAA;AACnD"}

package/dist/voice/motion.js

@@ -0,0 +1,84 @@
+//#region src/voice/motion.ts
+/** How long an orb at rest keeps moving before it stops asking the browser for frames. */
+const IDLE_STOP_MS = 3e3;
+/** The longest step of time one frame may take: a tab coming back does not make the orb jump. */
+const LONGEST_STEP = .1;
+/** How loud the still frame of a state that is not rest is drawn, so its shape still says it. */
+const STILL_LEVEL = .45;
+/** How much the shader is asked to be moved by the signal in each state. */
+const ENERGY = {
+	idle: 0,
+	thinking: .5,
+	listening: 1,
+	speaking: 1
+};
+/** How fast the level and the energy move toward where they are going, per second. */
+const LEVEL_RATE = 14;
+const ENERGY_RATE = 3;
+/** `from` moved toward `to` at `rate` per second: a value that does not jump. */
+function approach(from, to, rate, step) {
+	return from + (to - from) * (1 - Math.exp(-rate * step));
+}
+/** The motion of an orb that appears in `state`, already as loud as `level`. */
+function motionOf(state, level) {
+	return {
+		time: 1,
+		level,
+		energy: ENERGY[state],
+		last: 0
+	};
+}
+/** One frame of `state` at a fixed moment: what the orb shows under reduced motion, one per state. */
+function drawStill(renderer, state) {
+	renderer.draw({
+		time: 1,
+		level: state === "idle" ? 0 : STILL_LEVEL,
+		energy: ENERGY[state]
+	});
+}
+/**
+* Draws `state` frame by frame from `motion` on (which it moves), reading `level` on each frame.
+* It asks for no frame while the tab is hidden, and stops three seconds after it came to rest
+* (`idle`); the tab coming back asks again. The result stops it.
+*/
+function animate(renderer, shader, state, level, motion) {
+	let frame = 0;
+	let restingSince = null;
+	const tick = (stamp) => {
+		frame = 0;
+		const step = Math.min(LONGEST_STEP, Math.max(0, (stamp - motion.last) / 1e3));
+		motion.last = stamp;
+		motion.level = approach(motion.level, level(), LEVEL_RATE, step);
+		motion.energy = approach(motion.energy, ENERGY[state], ENERGY_RATE, step);
+		motion.time += step * shader.pace(motion.energy);
+		renderer.draw({
+			time: motion.time,
+			level: motion.level,
+			energy: motion.energy
+		});
+		if (state === "idle") {
+			restingSince ??= stamp;
+			if (stamp - restingSince >= 3e3) return;
+		}
+		frame = requestAnimationFrame(tick);
+	};
+	const run = () => {
+		if (frame === 0 && !document.hidden) frame = requestAnimationFrame(tick);
+	};
+	const onVisibility = () => {
+		if (document.hidden) {
+			cancelAnimationFrame(frame);
+			frame = 0;
+		} else run();
+	};
+	document.addEventListener("visibilitychange", onVisibility);
+	run();
+	return () => {
+		document.removeEventListener("visibilitychange", onVisibility);
+		cancelAnimationFrame(frame);
+	};
+}
+//#endregion
+export { ENERGY, IDLE_STOP_MS, STILL_LEVEL, animate, drawStill, motionOf };
+
+//# sourceMappingURL=motion.js.map

package/dist/voice/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","names":[],"sources":["../../src/voice/motion.ts"],"sourcesContent":["/**\n * How a shader orb moves: the level and the energy of its state eased toward where they are\n * going, its clock paced by the energy, a frame drawn each time the browser has one, and no frame\n * asked for when nothing moves. Nothing here knows React; `WebGLOrb` runs it.\n */\n\nimport type { OrbState } from \"./orbs\";\nimport type { Renderer, Shader } from \"./webgl\";\n\n/** How long an orb at rest keeps moving before it stops asking the browser for frames. */\nexport const IDLE_STOP_MS = 3000;\n\n/** The longest step of time one frame may take: a tab coming back does not make the orb jump. */\nconst LONGEST_STEP = 0.1;\n\n/** The moment a still frame is drawn at, and where a moving orb starts: a settled picture. */\nexport const STILL_TIME = 1.0;\n\n/** How loud the still frame of a state that is not rest is drawn, so its shape still says it. */\nexport const STILL_LEVEL = 0.45;\n\n/** How much the shader is asked to be moved by the signal in each state. */\nexport const ENERGY: Readonly<Record<OrbState, number>> = {\n  idle: 0,\n  thinking: 0.5,\n  listening: 1,\n  speaking: 1,\n};\n\n/** How fast the level and the energy move toward where they are going, per second. */\nconst LEVEL_RATE = 14;\nconst ENERGY_RATE = 3;\n\n/** `from` moved toward `to` at `rate` per second: a value that does not jump. */\nfunction approach(from: number, to: number, rate: number, step: number): number {\n  return from + (to - from) * (1 - Math.exp(-rate * step));\n}\n\n/**\n * Where an orb's motion is: its clock, its eased level and energy, and the moment of its last\n * frame. One per orb, kept across its states, so a new state bends the motion instead of starting\n * it over.\n */\nexport interface Motion {\n  time: number;\n  level: number;\n  energy: number;\n  last: number;\n}\n\n/** The motion of an orb that appears in `state`, already as loud as `level`. */\nexport function motionOf(state: OrbState, level: number): Motion {\n  return { time: STILL_TIME, level, energy: ENERGY[state], last: 0 };\n}\n\n/** One frame of `state` at a fixed moment: what the orb shows under reduced motion, one per state. */\nexport function drawStill(renderer: Renderer, state: OrbState): void {\n  renderer.draw({\n    time: STILL_TIME,\n    level: state === \"idle\" ? 0 : STILL_LEVEL,\n    energy: ENERGY[state],\n  });\n}\n\n/**\n * Draws `state` frame by frame from `motion` on (which it moves), reading `level` on each frame.\n * It asks for no frame while the tab is hidden, and stops three seconds after it came to rest\n * (`idle`); the tab coming back asks again. The result stops it.\n */\nexport function animate(\n  renderer: Renderer,\n  shader: Shader,\n  state: OrbState,\n  level: () => number,\n  motion: Motion,\n): () => void {\n  let frame = 0;\n  let restingSince: number | null = null;\n\n  const tick = (stamp: number) => {\n    frame = 0;\n    const step = Math.min(LONGEST_STEP, Math.max(0, (stamp - motion.last) / 1000));\n    motion.last = stamp;\n    motion.level = approach(motion.level, level(), LEVEL_RATE, step);\n    motion.energy = approach(motion.energy, ENERGY[state], ENERGY_RATE, step);\n    motion.time += step * shader.pace(motion.energy);\n    renderer.draw({ time: motion.time, level: motion.level, energy: motion.energy });\n    if (state === \"idle\") {\n      restingSince ??= stamp;\n      if (stamp - restingSince >= IDLE_STOP_MS) return;\n    }\n    frame = requestAnimationFrame(tick);\n  };\n  const run = () => {\n    if (frame === 0 && !document.hidden) frame = requestAnimationFrame(tick);\n  };\n  const onVisibility = () => {\n    if (document.hidden) {\n      cancelAnimationFrame(frame);\n      frame = 0;\n    } else {\n      run();\n    }\n  };\n\n  document.addEventListener(\"visibilitychange\", onVisibility);\n  run();\n  return () => {\n    document.removeEventListener(\"visibilitychange\", onVisibility);\n    cancelAnimationFrame(frame);\n  };\n}\n"],"mappings":";;AAUA,MAAa,eAAe;;AAG5B,MAAM,eAAe;;AAMrB,MAAa,cAAc;;AAG3B,MAAa,SAA6C;CACxD,MAAM;CACN,UAAU;CACV,WAAW;CACX,UAAU;AACZ;;AAGA,MAAM,aAAa;AACnB,MAAM,cAAc;;AAGpB,SAAS,SAAS,MAAc,IAAY,MAAc,MAAsB;CAC9E,OAAO,QAAQ,KAAK,SAAS,IAAI,KAAK,IAAI,CAAC,OAAO,IAAI;AACxD;;AAeA,SAAgB,SAAS,OAAiB,OAAuB;CAC/D,OAAO;EAAE,MAAA;EAAkB;EAAO,QAAQ,OAAO;EAAQ,MAAM;CAAE;AACnE;;AAGA,SAAgB,UAAU,UAAoB,OAAuB;CACnE,SAAS,KAAK;EACZ,MAAA;EACA,OAAO,UAAU,SAAS,IAAI;EAC9B,QAAQ,OAAO;CACjB,CAAC;AACH;;;;;;AAOA,SAAgB,QACd,UACA,QACA,OACA,OACA,QACY;CACZ,IAAI,QAAQ;CACZ,IAAI,eAA8B;CAElC,MAAM,QAAQ,UAAkB;EAC9B,QAAQ;EACR,MAAM,OAAO,KAAK,IAAI,cAAc,KAAK,IAAI,IAAI,QAAQ,OAAO,QAAQ,GAAI,CAAC;EAC7E,OAAO,OAAO;EACd,OAAO,QAAQ,SAAS,OAAO,OAAO,MAAM,GAAG,YAAY,IAAI;EAC/D,OAAO,SAAS,SAAS,OAAO,QAAQ,OAAO,QAAQ,aAAa,IAAI;EACxE,OAAO,QAAQ,OAAO,OAAO,KAAK,OAAO,MAAM;EAC/C,SAAS,KAAK;GAAE,MAAM,OAAO;GAAM,OAAO,OAAO;GAAO,QAAQ,OAAO;EAAO,CAAC;EAC/E,IAAI,UAAU,QAAQ;GACpB,iBAAiB;GACjB,IAAI,QAAQ,gBAAA,KAA8B;EAC5C;EACA,QAAQ,sBAAsB,IAAI;CACpC;CACA,MAAM,YAAY;EAChB,IAAI,UAAU,KAAK,CAAC,SAAS,QAAQ,QAAQ,sBAAsB,IAAI;CACzE;CACA,MAAM,qBAAqB;EACzB,IAAI,SAAS,QAAQ;GACnB,qBAAqB,KAAK;GAC1B,QAAQ;EACV,OACE,IAAI;CAER;CAEA,SAAS,iBAAiB,oBAAoB,YAAY;CAC1D,IAAI;CACJ,aAAa;EACX,SAAS,oBAAoB,oBAAoB,YAAY;EAC7D,qBAAqB,KAAK;CAC5B;AACF"}

package/dist/voice/orbs.d.ts

@@ -0,0 +1,32 @@
+//#region src/voice/orbs.d.ts
+/**
+ * The orb: the shape a voice conversation with an agent takes, where it stands and how loud it
+ * is. Its styles, its states and its props; the drawing is `Orb`'s.
+ */
+/**
+ * The ways the orb can be drawn: `wave`, the default, the iOS voice waveform; `fluid-dots`, six
+ * dots that merge and scatter. Both are shaders, and each paints its own colours.
+ */
+export declare const ORB_STYLES: readonly ["wave", "fluid-dots"];
+export type OrbStyle = (typeof ORB_STYLES)[number];
+/** Where the conversation stands, as the orb shows it: at rest, or the agent listening, thinking or speaking. */
+export type OrbState = "idle" | "listening" | "thinking" | "speaking";
+export interface OrbProps {
+  /** Where the conversation stands. The orb looks different in each. */
+  state: OrbState;
+  /**
+   * How loud the microphone (while `listening`) or the voice (while `speaking`) is, from 0 to 1;
+   * 0 in the other states. A number, or a reader the orb calls on each frame it draws (a call's
+   * meter), so it follows the sound without a render per frame. The orb eases it on its own.
+   */
+  level: number | (() => number);
+  /** The diameter in pixels. Default: 200. */
+  size?: number | undefined;
+  /** How it is drawn: `"wave"` (the default) or `"fluid-dots"`. */
+  style?: OrbStyle | undefined;
+  /** What the orb is, for those who cannot see it: its `aria-label`. */
+  label: string;
+  className?: string | undefined;
+}
+//#endregion
+//# sourceMappingURL=orbs.d.ts.map

package/dist/voice/orbs.js

@@ -0,0 +1,16 @@
+//#region src/voice/orbs.ts
+/**
+* The orb: the shape a voice conversation with an agent takes, where it stands and how loud it
+* is. Its styles, its states and its props; the drawing is `Orb`'s.
+*/
+/**
+* The ways the orb can be drawn: `wave`, the default, the iOS voice waveform; `fluid-dots`, six
+* dots that merge and scatter. Both are shaders, and each paints its own colours.
+*/
+const ORB_STYLES = ["wave", "fluid-dots"];
+/** The one drawn when nobody chose. */
+const DEFAULT_ORB = "wave";
+//#endregion
+export { DEFAULT_ORB, ORB_STYLES };
+
+//# sourceMappingURL=orbs.js.map

package/dist/voice/orbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"orbs.js","names":[],"sources":["../../src/voice/orbs.ts"],"sourcesContent":["/**\n * The orb: the shape a voice conversation with an agent takes, where it stands and how loud it\n * is. Its styles, its states and its props; the drawing is `Orb`'s.\n */\n\n/**\n * The ways the orb can be drawn: `wave`, the default, the iOS voice waveform; `fluid-dots`, six\n * dots that merge and scatter. Both are shaders, and each paints its own colours.\n */\nexport const ORB_STYLES = [\"wave\", \"fluid-dots\"] as const;\n\nexport type OrbStyle = (typeof ORB_STYLES)[number];\n\n/** The one drawn when nobody chose. */\nexport const DEFAULT_ORB: OrbStyle = \"wave\";\n\n/** Where the conversation stands, as the orb shows it: at rest, or the agent listening, thinking or speaking. */\nexport type OrbState = \"idle\" | \"listening\" | \"thinking\" | \"speaking\";\n\n/** The diameter when nobody says: room for the orb and the glow it gives off. */\nexport const ORB_SIZE = 200;\n\nexport interface OrbProps {\n  /** Where the conversation stands. The orb looks different in each. */\n  state: OrbState;\n  /**\n   * How loud the microphone (while `listening`) or the voice (while `speaking`) is, from 0 to 1;\n   * 0 in the other states. A number, or a reader the orb calls on each frame it draws (a call's\n   * meter), so it follows the sound without a render per frame. The orb eases it on its own.\n   */\n  level: number | (() => number);\n  /** The diameter in pixels. Default: 200. */\n  size?: number | undefined;\n  /** How it is drawn: `\"wave\"` (the default) or `\"fluid-dots\"`. */\n  style?: OrbStyle | undefined;\n  /** What the orb is, for those who cannot see it: its `aria-label`. */\n  label: string;\n  className?: string | undefined;\n}\n"],"mappings":";;;;;;;;;AASA,MAAa,aAAa,CAAC,QAAQ,YAAY;;AAK/C,MAAa,cAAwB"}

package/dist/voice/useReducedMotion.js

@@ -1,19 +1,19 @@
 import { useSyncExternalStore } from "react";
-const QUERY = "(prefers-reduced-motion: reduce)";
-const available = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
-function subscribe(changed) {
-    const query = window.matchMedia(QUERY);
-    query.addEventListener("change", changed);
-    return () => {
-        query.removeEventListener("change", changed);
-    };
-}
-const never = () => () => undefined;
+//#region src/voice/useReducedMotion.ts
+const LESS_MOTION = "(prefers-reduced-motion: reduce)";
+const motionQuery = () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(LESS_MOTION) : null;
 /**
- * Whether the person asked their system for less motion. It follows the setting while the page
- * is open. Without `matchMedia` (a server, an old browser) there is no such request.
- */
-export function useReducedMotion() {
-    const browser = available();
-    return useSyncExternalStore(browser ? subscribe : never, () => browser && window.matchMedia(QUERY).matches, () => false);
+* Whether the person asked their system for less motion, followed while the page is open.
+* Without `matchMedia` (a server, an old browser) there is no such request.
+*/
+function useReducedMotion() {
+	return useSyncExternalStore((changed) => {
+		const query = motionQuery();
+		query?.addEventListener("change", changed);
+		return () => query?.removeEventListener("change", changed);
+	}, () => motionQuery()?.matches ?? false, () => false);
 }
+//#endregion
+export { useReducedMotion };
+
+//# sourceMappingURL=useReducedMotion.js.map

package/dist/voice/useReducedMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReducedMotion.js","names":[],"sources":["../../src/voice/useReducedMotion.ts"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\n\nconst LESS_MOTION = \"(prefers-reduced-motion: reduce)\";\n\nconst motionQuery = (): MediaQueryList | null =>\n  typeof window !== \"undefined\" && typeof window.matchMedia === \"function\"\n    ? window.matchMedia(LESS_MOTION)\n    : null;\n\n/**\n * Whether the person asked their system for less motion, followed while the page is open.\n * Without `matchMedia` (a server, an old browser) there is no such request.\n */\nexport function useReducedMotion(): boolean {\n  return useSyncExternalStore(\n    (changed) => {\n      const query = motionQuery();\n      query?.addEventListener(\"change\", changed);\n      return () => query?.removeEventListener(\"change\", changed);\n    },\n    () => motionQuery()?.matches ?? false,\n    () => false,\n  );\n}\n"],"mappings":";;AAEA,MAAM,cAAc;AAEpB,MAAM,oBACJ,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,aAC1D,OAAO,WAAW,WAAW,IAC7B;;;;;AAMN,SAAgB,mBAA4B;CAC1C,OAAO,sBACJ,YAAY;EACX,MAAM,QAAQ,YAAY;EAC1B,OAAO,iBAAiB,UAAU,OAAO;EACzC,aAAa,OAAO,oBAAoB,UAAU,OAAO;CAC3D,SACM,YAAY,CAAC,EAAE,WAAW,aAC1B,KACR;AACF"}

package/dist/voice/wave.js

@@ -0,0 +1,116 @@
+import { CUTOUT, INK, INK_UNIFORMS } from "./webgl.js";
+import { WebGLOrb } from "./WebGLOrb.js";
+import { jsx } from "react/jsx-runtime";
+/** At rest the wave breathes at a third of its pace; once something is heard it runs its own. */
+const WAVE = {
+	fragment: `precision highp float;
+uniform vec2 iResolution; uniform float iTime;
+uniform float uLevel; uniform float uEnergy; // signalcore: the signal
+${INK_UNIFORMS}
+const float PI = 3.14159265359;
+const float AMPLITUDE   = 0.32;
+const float FREQ        = 1.1;
+const float ABER_FREQ   = 1.0;
+const float SPEED       = 2.4;
+const float WAVE_SCALE  = 0.6;
+const float ABERRATION  = 2.6;
+const float THICKNESS   = 3.0;
+const float INTENSITY   = 2.;
+const float FALLOFF     = 1.7;
+const float EDGE_MASK   = 0.4;
+const float EDGE_INSET  = 0.0;
+const float BAND_FILL   = 30000.0;
+const float BAND_THICK  = 0.08;
+const float SOFTNESS    = 2.5;
+const float LOW_AMP     = 6.0;
+const float LOW_INT     = 1.5;
+const float MID_ABER    = 0.8;
+const float MID_ABAMP   = 0.05;
+const float MID_BAND    = 20.0;
+const float MID_SOFT    = 0.4;
+const float HIGH_ABER   = 0.5;
+const float HIGH_ABAMP  = 0.06;
+const float RESOLVED    = 1.0;
+const float UNRES_SCALE = 0.14;
+
+vec3 spectral4(int s){
+    float x = float(s);
+    return clamp(vec3(abs(x-3.0)-1.0, 2.0-abs(x-2.0), 2.0-abs(x-4.0)), 0.0, 1.0);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord){
+    vec2 R = iResolution.xy;
+    float aspect = R.x / R.y;
+    vec2 p = (fragCoord + 0.5) * 2.0 / R - 1.0;
+    p.x *= aspect;
+    float yScreen = p.y;
+    p /= max(WAVE_SCALE, 0.1);
+
+    float t   = iTime;
+    float lvl = clamp(uLevel, 0.0, 1.0); // signalcore: the bands the level drives, one shape each
+    float low  = mix(clamp(0.45 + 0.45*sin(t*0.8)*sin(t*0.37+1.0), 0.0, 1.0), lvl, uEnergy);
+    float mid  = mix(clamp(0.40 + 0.40*sin(t*1.7+2.0)*sin(t*0.53), 0.0, 1.0), lvl*(0.7 + 0.3*sin(t*5.1+2.0)), uEnergy);
+    float high = mix(clamp(0.30 + 0.30*sin(t*2.9+4.0)*sin(t*0.71+2.0), 0.0, 1.0), lvl*lvl*(0.7 + 0.3*sin(t*8.3+4.0)), uEnergy);
+
+    float res   = clamp(RESOLVED, 0.0, 1.0);
+    float drift = mod(t, 20.0*PI) * SPEED;
+
+    float xN  = p.x / max(aspect, 1.0);
+    float env = cos(PI*0.5 * min(abs(0.9*xN), 1.0));
+    env *= env;
+
+    float A1    = AMPLITUDE + 0.01*low*LOW_AMP;
+    float A2    = A1 + mid*MID_ABAMP + high*HIGH_ABAMP;
+    float AB    = (ABERRATION + mid*MID_ABER + high*HIGH_ABER)*res;
+    float th    = mix(0.1, 0.01*THICKNESS, res);
+    float inten = mix(0.1, 0.01*(INTENSITY + low*LOW_INT), res);
+    float soft  = 0.01*res*max(0.0, SOFTNESS + mid*MID_SOFT);
+
+    float dUnres = max(length(p) - mix(0.14, UNRES_SCALE, res), 0.0);
+    float yMain = A1 * env * res * sin(p.x*FREQ + drift);
+
+    float bandFillTh = max(BAND_THICK, 1e-4);
+    float bandAmt    = 1e-4 * BAND_FILL * inten;
+    vec3 num = vec3(0.0), den = vec3(0.0);
+    for(int s = 0; s < 4; s++){
+        vec3 hue = mix(vec3(1.0), spectral4(s), res);
+        den += hue;
+        float ab = mix(-AB, AB, float(s)/3.0);
+        float yL = A2 * env * res * sin(p.x*ABER_FREQ + drift + ab);
+        float d   = mix(dUnres, abs(p.y - yL), res);
+        float lor = mix(1.0/(1.0 + (0.02*d)*(0.02*d)), 1.0, res);
+        float line = inten / (sqrt(d*d + soft*soft) + th);
+        float lo = min(yMain, yL), hi = max(yMain, yL);
+        float dBand = max(0.0, max(p.y - hi, lo - p.y));
+        float band  = bandAmt / (dBand + bandFillTh);
+        num += hue * lor * (line + band);
+    }
+    vec3 col = num / den;
+
+    float dM    = mix(dUnres, abs(p.y - yMain), res);
+    float lorM  = mix(1.0/(1.0 + (0.02*dM)*(0.02*dM)), 1.0, res);
+    float boost = (1.0 - res) * (14.0*low + 4.0);
+    col += 0.5 * inten * (lorM + boost) / (sqrt(dM*dM + soft*soft) + th);
+
+    col = pow(max(col, 0.0), vec3(1.5));
+    float emT = clamp((abs(yScreen) - 1.0 + EDGE_INSET) / (-max(EDGE_MASK, 1e-4)), 0.0, 1.0);
+    float em  = emT*emT*(3.0 - 2.0*emT);
+    float gauss = exp(-pow(xN*FALLOFF, 2.0));
+    col *= mix(1.0, em*gauss, res);
+    col *= res;
+    fragColor = vec4(col, 1.0);
+}
+void main(){ mainImage(gl_FragColor, gl_FragCoord.xy); ${INK} ${CUTOUT} }`,
+	pace: (energy) => .35 + .65 * Math.min(1, energy * 2)
+};
+/** The `wave` style of the orb: the iOS voice waveform. */
+function WaveOrb(props) {
+	return /* @__PURE__ */ jsx(WebGLOrb, {
+		...props,
+		shader: WAVE
+	});
+}
+//#endregion
+export { WAVE, WaveOrb as default };
+
+//# sourceMappingURL=wave.js.map

package/dist/voice/wave.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wave.js","names":[],"sources":["../../src/voice/wave.tsx"],"sourcesContent":["import type { OrbProps } from \"./orbs\";\nimport { WebGLOrb } from \"./WebGLOrb\";\nimport { CUTOUT, INK, INK_UNIFORMS, type Shader } from \"./webgl\";\n\n/**\n * Ported from siri-wave by 40973894 (21st.dev), MIT. Shaders kept verbatim except the uniforms\n * added below.\n *\n * The `wave` style of the orb: the iOS voice waveform, a bright line with chromatic bands. The\n * original simulated three frequency bands (`low`, `mid`, `high`) with slow sines. Two uniforms\n * are ours, and everything marked `signalcore:` in the source below is where they are used:\n *\n * - `uLevel`, how loud the microphone or the voice is, 0 to 1. The bands follow it.\n * - `uEnergy`, 0 at rest, 0.5 while thinking, 1 while listening or speaking: how much the bands\n *   follow the level instead of the original's simulation. At rest the wave breathes on the\n *   simulation, slowly (the clock runs at 0.35, see `pace`).\n *\n * The last line of `main` is ours too: the host's colour, when it gives one (`INK`, its uniforms\n * `INK_UNIFORMS`), and what is near black turning transparent (`CUTOUT`).\n */\nconst FRAGMENT = `precision highp float;\nuniform vec2 iResolution; uniform float iTime;\nuniform float uLevel; uniform float uEnergy; // signalcore: the signal\n${INK_UNIFORMS}\nconst float PI = 3.14159265359;\nconst float AMPLITUDE   = 0.32;\nconst float FREQ        = 1.1;\nconst float ABER_FREQ   = 1.0;\nconst float SPEED       = 2.4;\nconst float WAVE_SCALE  = 0.6;\nconst float ABERRATION  = 2.6;\nconst float THICKNESS   = 3.0;\nconst float INTENSITY   = 2.;\nconst float FALLOFF     = 1.7;\nconst float EDGE_MASK   = 0.4;\nconst float EDGE_INSET  = 0.0;\nconst float BAND_FILL   = 30000.0;\nconst float BAND_THICK  = 0.08;\nconst float SOFTNESS    = 2.5;\nconst float LOW_AMP     = 6.0;\nconst float LOW_INT     = 1.5;\nconst float MID_ABER    = 0.8;\nconst float MID_ABAMP   = 0.05;\nconst float MID_BAND    = 20.0;\nconst float MID_SOFT    = 0.4;\nconst float HIGH_ABER   = 0.5;\nconst float HIGH_ABAMP  = 0.06;\nconst float RESOLVED    = 1.0;\nconst float UNRES_SCALE = 0.14;\n\nvec3 spectral4(int s){\n    float x = float(s);\n    return clamp(vec3(abs(x-3.0)-1.0, 2.0-abs(x-2.0), 2.0-abs(x-4.0)), 0.0, 1.0);\n}\n\nvoid mainImage(out vec4 fragColor, in vec2 fragCoord){\n    vec2 R = iResolution.xy;\n    float aspect = R.x / R.y;\n    vec2 p = (fragCoord + 0.5) * 2.0 / R - 1.0;\n    p.x *= aspect;\n    float yScreen = p.y;\n    p /= max(WAVE_SCALE, 0.1);\n\n    float t   = iTime;\n    float lvl = clamp(uLevel, 0.0, 1.0); // signalcore: the bands the level drives, one shape each\n    float low  = mix(clamp(0.45 + 0.45*sin(t*0.8)*sin(t*0.37+1.0), 0.0, 1.0), lvl, uEnergy);\n    float mid  = mix(clamp(0.40 + 0.40*sin(t*1.7+2.0)*sin(t*0.53), 0.0, 1.0), lvl*(0.7 + 0.3*sin(t*5.1+2.0)), uEnergy);\n    float high = mix(clamp(0.30 + 0.30*sin(t*2.9+4.0)*sin(t*0.71+2.0), 0.0, 1.0), lvl*lvl*(0.7 + 0.3*sin(t*8.3+4.0)), uEnergy);\n\n    float res   = clamp(RESOLVED, 0.0, 1.0);\n    float drift = mod(t, 20.0*PI) * SPEED;\n\n    float xN  = p.x / max(aspect, 1.0);\n    float env = cos(PI*0.5 * min(abs(0.9*xN), 1.0));\n    env *= env;\n\n    float A1    = AMPLITUDE + 0.01*low*LOW_AMP;\n    float A2    = A1 + mid*MID_ABAMP + high*HIGH_ABAMP;\n    float AB    = (ABERRATION + mid*MID_ABER + high*HIGH_ABER)*res;\n    float th    = mix(0.1, 0.01*THICKNESS, res);\n    float inten = mix(0.1, 0.01*(INTENSITY + low*LOW_INT), res);\n    float soft  = 0.01*res*max(0.0, SOFTNESS + mid*MID_SOFT);\n\n    float dUnres = max(length(p) - mix(0.14, UNRES_SCALE, res), 0.0);\n    float yMain = A1 * env * res * sin(p.x*FREQ + drift);\n\n    float bandFillTh = max(BAND_THICK, 1e-4);\n    float bandAmt    = 1e-4 * BAND_FILL * inten;\n    vec3 num = vec3(0.0), den = vec3(0.0);\n    for(int s = 0; s < 4; s++){\n        vec3 hue = mix(vec3(1.0), spectral4(s), res);\n        den += hue;\n        float ab = mix(-AB, AB, float(s)/3.0);\n        float yL = A2 * env * res * sin(p.x*ABER_FREQ + drift + ab);\n        float d   = mix(dUnres, abs(p.y - yL), res);\n        float lor = mix(1.0/(1.0 + (0.02*d)*(0.02*d)), 1.0, res);\n        float line = inten / (sqrt(d*d + soft*soft) + th);\n        float lo = min(yMain, yL), hi = max(yMain, yL);\n        float dBand = max(0.0, max(p.y - hi, lo - p.y));\n        float band  = bandAmt / (dBand + bandFillTh);\n        num += hue * lor * (line + band);\n    }\n    vec3 col = num / den;\n\n    float dM    = mix(dUnres, abs(p.y - yMain), res);\n    float lorM  = mix(1.0/(1.0 + (0.02*dM)*(0.02*dM)), 1.0, res);\n    float boost = (1.0 - res) * (14.0*low + 4.0);\n    col += 0.5 * inten * (lorM + boost) / (sqrt(dM*dM + soft*soft) + th);\n\n    col = pow(max(col, 0.0), vec3(1.5));\n    float emT = clamp((abs(yScreen) - 1.0 + EDGE_INSET) / (-max(EDGE_MASK, 1e-4)), 0.0, 1.0);\n    float em  = emT*emT*(3.0 - 2.0*emT);\n    float gauss = exp(-pow(xN*FALLOFF, 2.0));\n    col *= mix(1.0, em*gauss, res);\n    col *= res;\n    fragColor = vec4(col, 1.0);\n}\nvoid main(){ mainImage(gl_FragColor, gl_FragCoord.xy); ${INK} ${CUTOUT} }`;\n\n/** At rest the wave breathes at a third of its pace; once something is heard it runs its own. */\nexport const WAVE: Shader = {\n  fragment: FRAGMENT,\n  pace: (energy) => 0.35 + 0.65 * Math.min(1, energy * 2),\n};\n\n/** The `wave` style of the orb: the iOS voice waveform. */\nexport default function WaveOrb(props: OrbProps) {\n  return <WebGLOrb {...props} shader={WAVE} />;\n}\n"],"mappings":";;;;AAwHA,MAAa,OAAe;CAC1B,UAAU;;;EAlGV,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yDA8F0C,IAAI,GAAG,OAAO;CAKrE,OAAO,WAAW,MAAO,MAAO,KAAK,IAAI,GAAG,SAAS,CAAC;AACxD;;AAGA,SAAwB,QAAQ,OAAiB;CAC/C,OAAO,oBAAC,UAAD;EAAU,GAAI;EAAO,QAAQ;CAAO,CAAA;AAC7C"}