stream-chat-react-native-core 9.10.2 → 9.11.0-beta.1

package/src/ai-components/voice-visualization/VoiceWave.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { useDerivedValue } from 'react-native-reanimated';
+
+import { Canvas, LinearGradient, Path, vec } from '@shopify/react-native-skia';
+
+import { WAVE_STYLE } from './styles';
+import type { VoiceVisualizationProps } from './types';
+import type { VoiceVisualization } from './useVoiceVisualization';
+import { type VoiceCanvasSize, VoiceVisualizationView } from './VoiceVisualizationView';
+import {
+  WAVE_END,
+  WAVE_POSITIONS,
+  WAVE_START,
+  waveColors,
+  wavePath,
+  waveStrokeWidth,
+} from './waveGeometry';
+
+export type VoiceWaveProps = VoiceVisualizationProps;
+
+const WaveCanvas = ({
+  size: { height, pixelRatio, width },
+  visualization: { dark, driver },
+}: {
+  size: VoiceCanvasSize;
+  visualization: VoiceVisualization;
+}) => {
+  const path = useDerivedValue(() => wavePath(driver.value, width, height));
+  const colors = useDerivedValue(() => waveColors(driver.value, dark.value));
+  const m = Math.min(width, height);
+
+  return (
+    <Canvas style={{ height, width }}>
+      <Path
+        path={path}
+        strokeCap='round'
+        strokeJoin='round'
+        strokeWidth={waveStrokeWidth(width, height, pixelRatio)}
+        style='stroke'
+      >
+        <LinearGradient
+          colors={colors}
+          end={vec(width / 2 + WAVE_END * m, 0)}
+          positions={WAVE_POSITIONS}
+          start={vec(width / 2 + WAVE_START * m, 0)}
+        />
+      </Path>
+    </Canvas>
+  );
+};
+
+const renderWave = (visualization: VoiceVisualization, size: VoiceCanvasSize) => (
+  <WaveCanvas size={size} visualization={visualization} />
+);
+
+/**
+ * A voice agent as a single string, flat at its ends, carrying a wave packet that erupts with
+ * speech while its colors flow along it. Tapping the string ripples it from the touch, and so does
+ * a hovering mouse or pen.
+ *
+ * It has no size of its own and draws in the middle of the view it is given, about 80% as wide as
+ * its shorter side, so give it a square or a wide box.
+ */
+export const VoiceWave = (props: VoiceWaveProps) => (
+  <VoiceVisualizationView {...props} renderCanvas={renderWave} visualStyle={WAVE_STYLE} />
+);

package/src/ai-components/voice-visualization/bounce.ts

@@ -0,0 +1,61 @@
+/**
+ * The bounce of a tap: a dip to 93% and an overshoot to 103% before settling, over 340 ms.
+ *
+ * These are authored keyframes rather than a spring: the ease-out curve times the whole run and
+ * the keyframes are linear between their stops.
+ */
+export const BOUNCE_DURATION = 0.34;
+
+const OFFSETS = [0, 0.3, 0.62, 1];
+const SCALES = [1, 0.93, 1.03, 1];
+
+/** How long ago the last bounce started, in seconds; infinite before the first. */
+export type BounceState = { age: number };
+
+export const createBounce = (): BounceState => ({ age: Number.POSITIVE_INFINITY });
+
+export const startBounce = (bounce: BounceState) => {
+  'worklet';
+  bounce.age = 0;
+};
+
+export const advanceBounce = (bounce: BounceState, seconds: number) => {
+  'worklet';
+  bounce.age += seconds;
+};
+
+/** CSS `ease-out`, `cubic-bezier(0, 0, 0.58, 1)`. */
+export const easeOut = (x: number) => {
+  'worklet';
+  const bx = 3 * 0.58;
+  const ax = 1 - bx;
+  const by = 3;
+  const ay = 1 - by;
+  let low = 0;
+  let high = 1;
+  for (let i = 0; i < 24; i++) {
+    const middle = (low + high) / 2;
+    if ((ax * middle + bx) * middle * middle < x) low = middle;
+    else high = middle;
+  }
+  const t = (low + high) / 2;
+  return (ay * t + by) * t * t;
+};
+
+/** The keyframed scale at `progress`, from 0 to 1. */
+export const scaleAt = (progress: number) => {
+  'worklet';
+  for (let i = 1; i < OFFSETS.length; i++) {
+    if (progress <= OFFSETS[i]) {
+      const fraction = (progress - OFFSETS[i - 1]) / (OFFSETS[i] - OFFSETS[i - 1]);
+      return SCALES[i - 1] + (SCALES[i] - SCALES[i - 1]) * fraction;
+    }
+  }
+  return 1;
+};
+
+export const bounceScale = (bounce: BounceState) => {
+  'worklet';
+  if (bounce.age >= BOUNCE_DURATION) return 1;
+  return scaleAt(easeOut(Math.max(bounce.age, 0) / BOUNCE_DURATION));
+};

package/src/ai-components/voice-visualization/driver.ts

@@ -0,0 +1,240 @@
+import { advanceBounce, type BounceState, bounceScale, createBounce, startBounce } from './bounce';
+import { MAXIMUM_COLORS } from './palette';
+import type { Hsv, VoiceAgentState } from './types';
+
+/**
+ * The share of the way the live level moves each frame at 60 Hz, toward a louder or a quieter
+ * level.
+ */
+export type LevelResponse = { rise: number; fall: number };
+
+export const LEVEL_RESPONSE = {
+  /** Follows the level closely, both ways. The glow's. */
+  steady: { fall: 0.35, rise: 0.35 },
+  /**
+   * Follows the level like a VU meter: about 0.1 s up to a louder reading, about 0.3 s down from
+   * it, so a meter's per-syllable jumps swell with the phrase instead. The wave's.
+   */
+  smooth: { fall: 0.05, rise: 0.16 },
+} satisfies Record<string, LevelResponse>;
+
+export type VoiceDriverInput = {
+  state: VoiceAgentState;
+  /** One to five colors. */
+  colors: Hsv[];
+  /** From 0 to 2. */
+  expressivity: number;
+  /** From 0 to 1, or null when no live audio drives the motion. */
+  audioLevel: number | null;
+  reduceMotion: boolean;
+};
+
+/**
+ * The motion of a voice visualization: where it is in time, how it moves, and its colors. A plain
+ * object rather than a class, so it can live in a shared value and be advanced on the UI thread.
+ */
+export type VoiceDriverState = {
+  speed: number;
+  bright: number;
+  sat: number;
+  load: number;
+  flow: number;
+  baseReact: number;
+  expressivity: number;
+  time: number;
+  flowSpin: number;
+  orbSpin: number;
+  count: number;
+  tapX: number;
+  tapY: number;
+  tapAge: number;
+  hoverX: number;
+  hoverY: number;
+  hoverAmount: number;
+  isHovering: boolean;
+  mic: number;
+  voice: number;
+  /** The colors drawn, eased in place toward the input's color slots. */
+  colors: Hsv[];
+  bounce: BounceState;
+  levelResponse: LevelResponse;
+};
+
+/**
+ * How a state moves. `load`, `flow` and `react` each select a motion pattern, one per state, so
+ * easing between states crossfades the patterns.
+ */
+type VoiceMotion = {
+  bright: number;
+  flow: number;
+  load: number;
+  react: number;
+  sat: number;
+  speed: number;
+};
+
+const MOTIONS: Record<VoiceAgentState, VoiceMotion> = {
+  connecting: { bright: 1, flow: 0, load: 1, react: 0, sat: 1, speed: 1 },
+  idle: { bright: 1, flow: 0, load: 0, react: 0.12, sat: 1, speed: 0.4 },
+  listening: { bright: 1, flow: 0, load: 0, react: 0.45, sat: 1, speed: 0.9 },
+  speaking: { bright: 1, flow: 0, load: 0, react: 1, sat: 1, speed: 1.25 },
+  thinking: { bright: 1, flow: 1, load: 0, react: 0, sat: 1, speed: 1.25 },
+};
+
+export const NO_TAP = 100;
+const MAX_FRAME = 0.05;
+/** How fast time runs under reduced motion. */
+export const REDUCED = 0.07;
+const DRIVERS = 0.08;
+const GENTLE = 0.12;
+const VOICE = 0.1;
+
+/** Expressivity scales amplitude and speed, each with a floor so the motion breathes at 0. */
+export const scales = (expressivity: number) => {
+  'worklet';
+  return { amplitude: 0.15 + 0.85 * expressivity, speed: 0.6 + 0.4 * expressivity };
+};
+
+/**
+ * The share of the way a value moves in `dt` seconds when it moves `perFrame` of the way each
+ * frame at 60 Hz.
+ */
+export const ease = (perFrame: number, dt: number) => {
+  'worklet';
+  return 1 - Math.pow(1 - perFrame, dt * 60);
+};
+
+const rem = (x: number, m: number) => {
+  'worklet';
+  return ((x % m) + m) % m;
+};
+
+/** Eases an HSV color in place, its hue taking the shorter way round the wheel. */
+const easeHsv = (color: Hsv, target: Hsv, fraction: number) => {
+  'worklet';
+  const hueStep = (rem(target.hue - color.hue + 1.5, 1) - 0.5) * fraction;
+  color.hue = rem(color.hue + hueStep + 1, 1);
+  color.saturation += (target.saturation - color.saturation) * fraction;
+  color.value += (target.value - color.value) * fraction;
+};
+
+/** The five color slots the renderers read; past the palette they repeat its first color. */
+export const slots = (colors: Hsv[]): Hsv[] => {
+  'worklet';
+  const first = colors[0] ?? { hue: 0, saturation: 0, value: 0 };
+  const result: Hsv[] = [];
+  for (let i = 0; i < MAXIMUM_COLORS; i++) result.push(colors[i] ?? first);
+  return result;
+};
+
+/** A driver settled on `input`, so the first frame shows it rather than easing into it. */
+export const createDriverState = (
+  input: VoiceDriverInput,
+  levelResponse: LevelResponse = LEVEL_RESPONSE.steady,
+): VoiceDriverState => {
+  const m = MOTIONS[input.state];
+  const s = scales(input.expressivity);
+  return {
+    baseReact: m.react * s.amplitude,
+    bounce: createBounce(),
+    bright: m.bright,
+    // Copies, as they are eased in place and the palette belongs to the caller.
+    colors: slots(input.colors).map((color) => ({ ...color })),
+    count: input.colors.length,
+    expressivity: input.expressivity,
+    flow: m.flow * s.amplitude,
+    flowSpin: 0,
+    hoverAmount: 0,
+    hoverX: 0,
+    hoverY: 0,
+    isHovering: false,
+    levelResponse,
+    load: m.load * s.amplitude,
+    mic: 0,
+    orbSpin: 0,
+    sat: m.sat,
+    speed: m.speed * s.speed,
+    tapAge: NO_TAP,
+    tapX: 0,
+    tapY: 0,
+    time: 0,
+    voice: 0,
+  };
+};
+
+/** Live audio lifts the motion to its level, whatever the state. */
+export const driverReact = (d: VoiceDriverState) => {
+  'worklet';
+  return d.baseReact + (Math.max(d.baseReact, d.mic) - d.baseReact) * d.voice;
+};
+
+/** The scale of a tap's bounce. */
+export const driverScale = (d: VoiceDriverState) => {
+  'worklet';
+  return bounceScale(d.bounce);
+};
+
+/** A tap at (x, y), centred and normalized to the shorter side with y up. */
+export const tapDriver = (d: VoiceDriverState, input: VoiceDriverInput, x: number, y: number) => {
+  'worklet';
+  if (input.reduceMotion) return;
+  d.tapX = x;
+  d.tapY = y;
+  d.tapAge = 0;
+  startBounce(d.bounce);
+};
+
+/** Where a pointer hovers, or null once it has left. */
+export const hoverDriver = (
+  d: VoiceDriverState,
+  input: VoiceDriverInput,
+  x: number | null,
+  y: number | null,
+) => {
+  'worklet';
+  if (x === null || y === null || input.reduceMotion) {
+    d.isHovering = false;
+    return;
+  }
+  d.hoverX = x;
+  d.hoverY = y;
+  d.isHovering = true;
+};
+
+/**
+ * Advances the motion by `seconds`, easing each value toward the input's motion by a fixed share
+ * per frame at 60 Hz, converted to time, so it moves the same at any refresh rate.
+ */
+export const advanceDriver = (d: VoiceDriverState, input: VoiceDriverInput, seconds: number) => {
+  'worklet';
+  // Clamped so a frame after a stall cannot leap the motion.
+  const dt = Math.min(Math.max(seconds, 0), MAX_FRAME);
+  if (input.reduceMotion) d.isHovering = false;
+  const m = MOTIONS[input.state];
+  const s = scales(input.expressivity);
+  const drivers = ease(DRIVERS, dt);
+  d.speed += (m.speed * s.speed - d.speed) * drivers;
+  d.bright += (m.bright - d.bright) * drivers;
+  d.sat += (m.sat - d.sat) * drivers;
+  d.load += (m.load * s.amplitude - d.load) * drivers;
+  d.flow += (m.flow * s.amplitude - d.flow) * drivers;
+  d.baseReact += (m.react * s.amplitude - d.baseReact) * drivers;
+  d.expressivity += (input.expressivity - d.expressivity) * drivers;
+  // Integrated rather than computed as time times a weight, so a change of state eases the turns
+  // instead of jumping their angles.
+  const step = dt * (input.reduceMotion ? REDUCED : 1) * d.speed;
+  d.time += step;
+  d.flowSpin += step * d.flow;
+  d.orbSpin += step * (1 + 0.5 * d.flow + 0.1 * d.baseReact);
+  d.tapAge += dt;
+  advanceBounce(d.bounce, dt);
+  const gentle = ease(GENTLE, dt);
+  d.hoverAmount += ((d.isHovering ? 1 : 0) - d.hoverAmount) * gentle;
+  d.voice += ((input.audioLevel === null ? 0 : 1) - d.voice) * ease(VOICE, dt);
+  const level = input.audioLevel ?? 0;
+  const response = level > d.mic ? d.levelResponse.rise : d.levelResponse.fall;
+  d.mic += (level - d.mic) * ease(response, dt);
+  const targets = slots(input.colors);
+  for (let i = 0; i < d.colors.length; i++) easeHsv(d.colors[i], targets[i], gentle);
+  d.count += (input.colors.length - d.count) * gentle;
+};

package/src/ai-components/voice-visualization/glowShader.ts

@@ -0,0 +1,227 @@
+import { Skia, type SkRuntimeEffect } from '@shopify/react-native-skia';
+
+/**
+ * The glow's shader, SkSL: the AGSL glow of stream-chat-android (itself ported from the iOS Metal
+ * glow) as is, since AGSL is SkSL, so the platforms look alike. Every pixel is computed on the
+ * GPU: color masses warped by simplex noise, concentric waves, ripples from a tap or a hovering
+ * pointer, light and a halo. Pixels past the halo return at once, so only the glow itself costs.
+ */
+const SOURCE = `
+uniform float2 resolution;
+uniform float4 col0;
+uniform float4 col1;
+uniform float4 col2;
+uniform float4 col3;
+uniform float4 col4;
+uniform float time;
+uniform float count;
+uniform float bright;
+uniform float sat;
+uniform float load;
+uniform float flow;
+uniform float flowSpin;
+uniform float orbSpin;
+uniform float react;
+uniform float dark;
+uniform float mic;
+uniform float voice;
+uniform float scale;
+uniform float2 tap;
+uniform float tapTime;
+uniform float2 hover;
+uniform float hoverAmt;
+
+float sq(float x) { return x * x; }
+float ss(float e0, float e1, float x) {
+    float t = clamp((x - e0) / (e1 - e0), 0.0, 1.0);
+    return t * t * (3.0 - 2.0 * t);
+}
+float3 hsv2rgb(float3 c) {
+    float4 K = float4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+    float3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+float3 desat(float3 c, float s) {
+    float l = dot(c, float3(0.299, 0.587, 0.114));
+    return mix(float3(l), c, s);
+}
+float3 saturate3(float3 c, float s) {
+    float l = dot(c, float3(0.299, 0.587, 0.114));
+    return clamp(mix(float3(l), c, s), 0.0, 1.0);
+}
+float2 rot2(float2 p, float a) {
+    float s = sin(a); float c = cos(a);
+    return float2(c * p.x + s * p.y, -s * p.x + c * p.y);
+}
+float3 vivid(float4 hsv) {
+    return hsv2rgb(float3(hsv.x, clamp(hsv.y + dark * 0.06, 0.0, 1.0), hsv.z));
+}
+// Waves spreading out from the last tap, fading within a second and a half.
+float tapRipple(float2 p) {
+    float age = tapTime;
+    if (age > 1.5) return 0.0;
+    float d = distance(p, tap);
+    float front = age * 0.75;
+    float env = exp(-sq((d - front) / 0.14));
+    float decay = exp(-age * 2.6);
+    return sin(d * 34.0 - age * 24.0) * env * decay;
+}
+// A gentle ripple following a hovering pointer.
+float hoverRipple(float2 p) {
+    if (hoverAmt <= 0.001) return 0.0;
+    float d = distance(p, hover);
+    float env = exp(-sq(d / 0.22));
+    return sin(d * 30.0 - time * 7.0) * env * hoverAmt * 0.6;
+}
+float4 permute(float4 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }
+float4 taylorInvSqrt(float4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+float snoise(float3 v) {
+    const float2 C = float2(1.0 / 6.0, 1.0 / 3.0);
+    const float4 D = float4(0.0, 0.5, 1.0, 2.0);
+    float3 i = floor(v + dot(v, C.yyy));
+    float3 x0 = v - i + dot(i, C.xxx);
+    float3 g = step(x0.yzx, x0.xyz);
+    float3 l = 1.0 - g;
+    float3 i1 = min(g.xyz, l.zxy);
+    float3 i2 = max(g.xyz, l.zxy);
+    float3 x1 = x0 - i1 + 1.0 * C.xxx;
+    float3 x2 = x0 - i2 + 2.0 * C.xxx;
+    float3 x3 = x0 - 1.0 + 3.0 * C.xxx;
+    i = mod(i, 289.0);
+    float4 p = permute(permute(permute(
+                i.z + float4(0.0, i1.z, i2.z, 1.0))
+              + i.y + float4(0.0, i1.y, i2.y, 1.0))
+              + i.x + float4(0.0, i1.x, i2.x, 1.0));
+    float n_ = 1.0 / 7.0;
+    float3 ns = n_ * D.wyz - D.xzx;
+    float4 j = p - 49.0 * floor(p * ns.z * ns.z);
+    float4 x_ = floor(j * ns.z);
+    float4 y_ = floor(j - 7.0 * x_);
+    float4 x = x_ * ns.x + ns.yyyy;
+    float4 y = y_ * ns.x + ns.yyyy;
+    float4 h = 1.0 - abs(x) - abs(y);
+    float4 b0 = float4(x.xy, y.xy);
+    float4 b1 = float4(x.zw, y.zw);
+    float4 s0 = floor(b0) * 2.0 + 1.0;
+    float4 s1 = floor(b1) * 2.0 + 1.0;
+    float4 sh = -step(h, float4(0.0));
+    float4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
+    float4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
+    float3 p0 = float3(a0.xy, h.x);
+    float3 p1 = float3(a0.zw, h.y);
+    float3 p2 = float3(a1.xy, h.z);
+    float3 p3 = float3(a1.zw, h.w);
+    float4 norm = taylorInvSqrt(float4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
+    p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;
+    float4 m = max(0.6 - float4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
+    m = m * m;
+    return 42.0 * dot(m * m, float4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
+}
+float speechEnv(float t) {
+    float gate = ss(-0.25, 0.35, snoise(float3(t * 0.6, 21.0, 0.0)));
+    float syl = 0.55 + 0.45 * snoise(float3(t * 3.0, 5.0, 0.0));
+    return clamp(gate * syl, 0.0, 1.0);
+}
+float2 coords(float2 pos) {
+    float m = min(resolution.x, resolution.y);
+    return float2(pos.x - 0.5 * resolution.x, 0.5 * resolution.y - pos.y) / m / scale;
+}
+
+half4 main(float2 fragCoord) {
+    float2 q = coords(fragCoord);
+    float t = time;
+    float r = length(q);
+
+    float speak = ss(0.6, 1.0, react);
+    float speech = react * mix(0.55 + 0.25 * sin(t * 1.6), speechEnv(t), speak);
+    speech = mix(speech, mic, voice);
+    float speechSmooth = mix(speech, react * (0.55 + 0.25 * sin(t * 1.6)), 0.5 * speak);
+    float energy = 0.12 + 0.30 * react + 0.18 * flow + 0.28 * load + 0.06 * speechSmooth;
+    float R = 0.24 * (1.0 + speechSmooth * 0.20 + load * 0.05 * sin(t * 2.0) + react * 0.04 * sin(t * 1.6));
+    float p = r / R;
+    if (p > 2.2) return half4(0.0);
+
+    float core = exp(-2.0 * p * p);
+    float body = ss(1.06, 0.62, p);
+
+    float2 P = q / R;
+    float pl = length(P);
+    float nt = t * 0.15 + flowSpin * 0.05;
+    float nAmp = 0.20 + 0.28 * energy;
+    float2 sp = P + nAmp * float2(snoise(float3(P * 0.7, nt)), snoise(float3(P * 0.7 + 4.7, nt)));
+    float ang = atan(P.y, P.x);
+    float wave = (0.018 + 0.025 * energy) * sin(pl * 5.0 - t * 2.0) * ss(0.0, 0.4, pl);
+    sp += wave * float2(-sin(ang), cos(ang));
+    sp = rot2(sp, flowSpin * 0.30);
+    float2 gtoP = q - (hoverAmt > 0.001 ? hover : tap);
+    sp += (gtoP / (length(gtoP) + 1e-4)) * (tapRipple(q) + hoverRipple(q)) * 0.5;
+    float bt = t;
+    float a0 = orbSpin * 0.42 + 2.0 * snoise(float3(bt * 0.12, 0.0, 0.0));
+    float a1 = -orbSpin * 0.34 + 2.0 * snoise(float3(bt * 0.10, 5.0, 0.0)) + 2.0;
+    float a2 = orbSpin * 0.30 + 2.0 * snoise(float3(bt * 0.11, 9.0, 0.0)) + 1.0;
+    float a3 = -orbSpin * 0.26 + 2.0 * snoise(float3(bt * 0.09, 14.0, 0.0)) + 3.5;
+    float2 c0 = 0.40 * float2(cos(a0), sin(a0));
+    float2 c1 = 0.38 * float2(cos(a1), sin(a1));
+    float2 c2c = 0.36 * float2(cos(a2), sin(a2));
+    float2 c3c = 0.34 * float2(cos(a3), sin(a3));
+    float b0 = ss(1.15, 0.1, length(sp - c0));
+    float b1 = ss(1.30, 0.1, length(sp - c1));
+    float b2 = ss(1.20, 0.1, length(sp - c2c));
+    float b3 = ss(1.25, 0.1, length(sp - c3c));
+
+    float3 k0 = saturate3(vivid(col0), 1.7);
+    float3 kL = saturate3(clamp(vivid(col0) * 1.18, 0.0, 1.0), 1.3);
+    float3 kD = saturate3(vivid(col0) * 0.85, 1.3);
+    float3 colB = mix(kL, saturate3(vivid(col1), 1.7), clamp(count - 1.0, 0.0, 1.0));
+    float3 colC = mix(kD, saturate3(vivid(col2), 1.7), clamp(count - 2.0, 0.0, 1.0));
+    float3 colD = saturate3(vivid(col3), 1.7);
+    float3 colE = saturate3(vivid(col4), 1.7);
+    float3 base = saturate3(mix(vivid(col0), float3(1.0), 0.06), 1.3);
+    float3 col = base;
+    col = mix(col, k0, b0);
+    col = mix(col, colB, b1);
+    col = mix(col, colC, b0 * 0.5);
+    col = mix(col, colD, b2 * clamp(count - 3.0, 0.0, 1.0));
+    col = mix(col, colE, b3 * clamp(count - 4.0, 0.0, 1.0));
+    col = saturate3(col, 1.15);
+    col = clamp(col * 1.12, 0.0, 1.0);
+    col = desat(col, sat);
+
+    float z = sqrt(max(1.0 - p * p, 0.0));
+    float3 nrm = normalize(float3(q / R, z + 1e-4));
+    float3 Ld = normalize(float3(-0.35, 0.45, 0.85));
+    float diff = clamp(dot(nrm, Ld), 0.0, 1.0);
+    col *= 0.80 + 0.20 * diff;
+    float fres = pow(1.0 - clamp(nrm.z, 0.0, 1.0), 2.5);
+    col += fres * 0.10 * mix(float3(1.0), k0, 0.6);
+
+    float3 haloCol = mix(mix(vivid(col0), float3(1.0), 0.75), mix(vivid(col0), float3(1.0), 0.32), dark);
+    float halo = exp(-sq(max(r - R * 0.8, 0.0) / 0.09));
+    float haloA = halo * (mix(0.05, 0.10, dark) + 0.05 * react);
+    float waves = clamp(b0 + 0.8 * b1, 0.0, 1.0);
+    float bodyA = clamp(body * (0.15 + 0.60 * waves + 0.06 * core) * (0.92 + 0.08 * fres), 0.0, 1.0);
+    float fade = mix(1.0, 0.45 + 0.35 * sin(t * 2.0), load);
+    float3 pm = col * bodyA + haloCol * haloA * (1.0 - bodyA);
+    float al = bodyA + haloA * (1.0 - bodyA);
+    float gain = bright * fade;
+    return half4(half3(pm * gain), half(al * gain));
+}
+`;
+
+let effect: SkRuntimeEffect | null | undefined;
+
+/**
+ * The compiled shader, shared by every glow: it compiles once, the first time a glow draws. Null
+ * if Skia cannot compile it, in which case the glow draws nothing.
+ */
+export const getGlowEffect = () => {
+  if (effect === undefined) {
+    effect = Skia.RuntimeEffect.Make(SOURCE);
+    if (!effect && __DEV__) {
+      console.warn(
+        '[stream-chat-react-native/ai-components] VoiceGlow could not compile its shader, so it draws nothing. Please report this with your @shopify/react-native-skia version.',
+      );
+    }
+  }
+  return effect;
+};

package/src/ai-components/voice-visualization/index.ts

@@ -0,0 +1,3 @@
+export { VoiceGlow, type VoiceGlowProps } from './VoiceGlow';
+export { VoiceWave, type VoiceWaveProps } from './VoiceWave';
+export type { VoiceAgentState, VoiceVisualizationProps } from './types';

package/src/ai-components/voice-visualization/math.ts

@@ -0,0 +1,73 @@
+import { snoise } from './simplex';
+
+/** The shader math the wave runs on the CPU, once per frame, on the UI thread. */
+
+export const mix = (a: number, b: number, t: number) => {
+  'worklet';
+  return a + (b - a) * t;
+};
+
+export const fract = (x: number) => {
+  'worklet';
+  return x - Math.floor(x);
+};
+
+export const clamp = (x: number, low: number, high: number) => {
+  'worklet';
+  return Math.min(Math.max(x, low), high);
+};
+
+/** GLSL's smoothstep, evaluated the same with its edges either way round. */
+export const smoothstep = (edge0: number, edge1: number, x: number) => {
+  'worklet';
+  const t = clamp((x - edge0) / (edge1 - edge0), 0, 1);
+  return t * t * (3 - 2 * t);
+};
+
+/** HSV, hue a fraction of a turn, into `out` as RGB. */
+export const hsvToRgb = (hue: number, saturation: number, value: number, out: number[]) => {
+  'worklet';
+  for (let i = 0; i < 3; i++) {
+    const k = i === 0 ? 1 : i === 1 ? 2 / 3 : 1 / 3;
+    const p = Math.abs(fract(hue + k) * 6 - 3);
+    out[i] = value * mix(1, clamp(p - 1, 0, 1), saturation);
+  }
+};
+
+/** A palette color as is; dark mode lifts saturation a touch so it stays vivid on black. */
+export const vivid = (
+  color: { hue: number; saturation: number; value: number },
+  dark: number,
+  out: number[],
+) => {
+  'worklet';
+  hsvToRgb(color.hue, clamp(color.saturation + dark * 0.06, 0, 1), color.value, out);
+};
+
+/** Pushes `c` away from its luminance by `amount`; below 1 desaturates. */
+export const saturate = (c: number[], amount: number) => {
+  'worklet';
+  const l = 0.299 * c[0] + 0.587 * c[1] + 0.114 * c[2];
+  for (let i = 0; i < 3; i++) c[i] = clamp(mix(l, c[i], amount), 0, 1);
+};
+
+/**
+ * How much the agent is talking, 0 to 1: a slow phrase gate times a faster syllable wobble. The
+ * shader's own envelope, on the same simplex noise, so the wave and the glow speak alike.
+ */
+export const speechEnv = (t: number) => {
+  'worklet';
+  const gate = smoothstep(-0.25, 0.35, snoise(t * 0.6, 21, 0));
+  const syllable = 0.55 + 0.45 * snoise(t * 3, 5, 0);
+  return clamp(gate * syllable, 0, 1);
+};
+
+/** `expressivity` from 0 to 2; one that is not a number gets the default, 1. */
+export const expressivityInput = (expressivity: number | undefined) =>
+  typeof expressivity === 'number' && Number.isFinite(expressivity) ? clamp(expressivity, 0, 2) : 1;
+
+/** `level` from 0 to 1; one that is not a number counts as no live audio, so it can't stall the motion. */
+export const audioLevelInput = (level: number | null | undefined) => {
+  'worklet';
+  return typeof level === 'number' && Number.isFinite(level) ? clamp(level, 0, 1) : null;
+};