stream-chat-react-native-core 10.0.0-rc.2 → 10.0.0-rc.4

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;
+};

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

@@ -0,0 +1,59 @@
+import { processColor } from 'react-native';
+
+import type { Hsv } from './types';
+
+export const MAXIMUM_COLORS = 5;
+
+export type Rgb = [number, number, number];
+
+/** Used when neither the `colors` prop nor the theme gives a readable color. */
+export const FALLBACK_COLOR = '#005fff';
+
+/**
+ * Reads any color React Native understands (names, `#rgb[a]`, `#rrggbb[aa]`, `rgb()`, `hsl()`, ...)
+ * into sRGB channels from 0 to 1, or null when it cannot be read. Platform colors have no
+ * channels to read and count as unreadable.
+ */
+export const parseColor = (color: string): Rgb | null => {
+  if (typeof color !== 'string' || !color.trim()) return null;
+  const processed = processColor(color.trim());
+  if (typeof processed !== 'number') return null;
+  // 0xAARRGGBB, signed on Android.
+  const argb = processed < 0 ? processed + 2 ** 32 : processed;
+  const channel = (shift: number) => (Math.floor(argb / 2 ** shift) % 256) / 255;
+  return [channel(16), channel(8), channel(0)];
+};
+
+/** RGB channels from 0 to 1 as HSV, keeping full saturation and value so muted colors render true. */
+export const rgbToHsv = ([r, g, b]: Rgb): Hsv => {
+  const high = Math.max(r, g, b);
+  const low = Math.min(r, g, b);
+  const delta = high - low;
+  let hue = 0;
+  if (delta !== 0) {
+    if (high === r) hue = ((((g - b) / delta) % 6) + 6) % 6;
+    else if (high === g) hue = (b - r) / delta + 2;
+    else hue = (r - g) / delta + 4;
+  }
+  return {
+    hue: (((hue / 6) % 1) + 1) % 1,
+    saturation: high === 0 ? 0 : Math.min(Math.max(delta / high, 0), 1),
+    value: Math.min(Math.max(high, 0), 1),
+  };
+};
+
+/** Colors as the HSV the renderers read, at most five; colors that cannot be read are skipped. */
+export const toHsvPalette = (colors: readonly string[]): Hsv[] =>
+  colors
+    .map(parseColor)
+    .filter((rgb): rgb is Rgb => rgb !== null)
+    .slice(0, MAXIMUM_COLORS)
+    .map(rgbToHsv);
+
+/** Relative luminance of a color, or null when it cannot be read. */
+export const luminance = (color: string) => {
+  const rgb = parseColor(color);
+  if (!rgb) return null;
+  const [r, g, b] = rgb.map((c) => (c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)));
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};

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

@@ -0,0 +1,92 @@
+/**
+ * 3-D simplex noise, a port of the glow shader's `snoise` (Ashima Arts / Stefan Gustavson), so the
+ * wave drawn on the CPU moves with the same speech rhythm as the shader, as on iOS and the web.
+ *
+ * It runs in float32 like a GPU, with `mod` as a multiply by a float32 reciprocal, because the
+ * hash is sensitive to rounding: in exact arithmetic some inputs hash to a neighbouring gradient.
+ * Every function is a worklet, as the motion runs on the UI thread.
+ */
+
+const INV_289 = Math.fround(1 / 289);
+const ONE_THIRD = Math.fround(1 / 3);
+const ONE_SIXTH = Math.fround(1 / 6);
+const NS_X = Math.fround(2 / 7);
+const NS_Y = Math.fround(Math.fround(0.5 * Math.fround(1 / 7)) - 1);
+const NS_Z = Math.fround(1 / 7);
+
+const mod289 = (x: number) => {
+  'worklet';
+  const f = Math.fround;
+  return f(x - f(289 * Math.floor(f(x * INV_289))));
+};
+
+const permute = (x: number) => {
+  'worklet';
+  const f = Math.fround;
+  return mod289(f(f(f(x * 34) + 1) * x));
+};
+
+const taylorInvSqrt = (r: number) => {
+  'worklet';
+  const f = Math.fround;
+  return f(1.79284291400159 - f(0.85373472095314 * r));
+};
+
+/** A corner's contribution, its gradient from its hash as the shader's x_/y_/h/sh steps compute it. */
+const corner = (p: number, x: number, y: number, z: number) => {
+  'worklet';
+  const f = Math.fround;
+  const j = f(p - f(49 * Math.floor(f(f(p * NS_Z) * NS_Z))));
+  const xi = Math.floor(f(j * NS_Z));
+  const yi = Math.floor(f(j - f(7 * xi)));
+  const gx0 = f(f(xi * NS_X) + NS_Y);
+  const gy0 = f(f(yi * NS_X) + NS_Y);
+  const gz = f(f(1 - Math.abs(gx0)) - Math.abs(gy0));
+  const sh = gz <= 0 ? -1 : 0;
+  const gx = f(gx0 + f((Math.floor(gx0) * 2 + 1) * sh));
+  const gy = f(gy0 + f((Math.floor(gy0) * 2 + 1) * sh));
+  const norm = taylorInvSqrt(gx * gx + gy * gy + gz * gz);
+  const m = Math.max(0.6 - (x * x + y * y + z * z), 0);
+  return m * m * m * m * (gx * norm * x + gy * norm * y + gz * norm * z);
+};
+
+/** Simplex noise at (x, y, z), from about -1 to 1. */
+export const snoise = (inX: number, inY: number, inZ: number) => {
+  'worklet';
+  const f = Math.fround;
+  const vx = f(inX);
+  const vy = f(inY);
+  const vz = f(inZ);
+  const s = f(f(vx + vy + vz) * ONE_THIRD);
+  const ix = Math.floor(f(vx + s));
+  const iy = Math.floor(f(vy + s));
+  const iz = Math.floor(f(vz + s));
+  const t = f(f(ix + iy + iz) * ONE_SIXTH);
+  const x0 = f(f(vx - ix) + t);
+  const y0 = f(f(vy - iy) + t);
+  const z0 = f(f(vz - iz) + t);
+
+  const gx = x0 >= y0 ? 1 : 0;
+  const gy = y0 >= z0 ? 1 : 0;
+  const gz = z0 >= x0 ? 1 : 0;
+  const i1x = Math.min(gx, 1 - gz);
+  const i1y = Math.min(gy, 1 - gx);
+  const i1z = Math.min(gz, 1 - gy);
+  const i2x = Math.max(gx, 1 - gz);
+  const i2y = Math.max(gy, 1 - gx);
+  const i2z = Math.max(gz, 1 - gy);
+
+  const mx = mod289(ix);
+  const my = mod289(iy);
+  const mz = mod289(iz);
+  const hash = (dx: number, dy: number, dz: number) =>
+    permute(f(f(permute(f(f(permute(f(mz + dz)) + my) + dy)) + mx) + dx));
+
+  return (
+    42 *
+    (corner(hash(0, 0, 0), x0, y0, z0) +
+      corner(hash(i1x, i1y, i1z), x0 - i1x + 1 / 6, y0 - i1y + 1 / 6, z0 - i1z + 1 / 6) +
+      corner(hash(i2x, i2y, i2z), x0 - i2x + 1 / 3, y0 - i2y + 1 / 3, z0 - i2z + 1 / 3) +
+      corner(hash(1, 1, 1), x0 - 0.5, y0 - 0.5, z0 - 0.5))
+  );
+};

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

@@ -0,0 +1,42 @@
+import { LEVEL_RESPONSE, type LevelResponse } from './driver';
+
+/**
+ * What tells the glow and the wave apart besides how they draw, as on iOS.
+ *
+ * - `levelResponse`: the wave's height tracks the level directly, so it follows it smoothly;
+ *   per-syllable jumps would make it jitter. The glow follows it closely.
+ * - `maxScale`: the densest it renders. The glow is soft all over, so 2x is enough; the wave's
+ *   thin line is drawn at the screen's own scale, up to 3x, to stay crisp.
+ * - `contains`: whether a point, centred and normalized to the shorter side with y up, is on the
+ *   shape rather than the empty space around it.
+ */
+export type VoiceVisualizationStyle = {
+  contains: (x: number, y: number) => boolean;
+  /** The shape's bounds as a share of the shorter side, for the area that takes touches. */
+  hitArea: { width: number; height: number };
+  levelResponse: LevelResponse;
+  maxScale: number;
+};
+
+/** How far from the centre a tap still lands on the globe, as a share of the shorter side. */
+const GLOBE_REACH = 0.32;
+
+export const GLOW_STYLE: VoiceVisualizationStyle = {
+  contains: (x, y) => {
+    'worklet';
+    return Math.hypot(x, y) < GLOBE_REACH;
+  },
+  hitArea: { height: 2 * GLOBE_REACH, width: 2 * GLOBE_REACH },
+  levelResponse: LEVEL_RESPONSE.steady,
+  maxScale: 2,
+};
+
+export const WAVE_STYLE: VoiceVisualizationStyle = {
+  contains: (x, y) => {
+    'worklet';
+    return Math.abs(x) < 0.5 && Math.abs(y) < 0.14;
+  },
+  hitArea: { height: 0.28, width: 1 },
+  levelResponse: LEVEL_RESPONSE.smooth,
+  maxScale: 3,
+};

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

@@ -0,0 +1,44 @@
+import type { ViewProps } from 'react-native';
+
+import type { SharedValue } from 'react-native-reanimated';
+
+/**
+ * What a voice agent is doing, which a voice visualization shows as motion.
+ *
+ * The states differ only in how a visualization moves, never in its colors, and changing the
+ * state eases from one motion into the next.
+ *
+ * - `idle`: waiting to be spoken to, a calm, barely-there shimmer.
+ * - `connecting`: not ready yet, a loader sweep with a pulsing breath.
+ * - `listening`: hearing somebody, a gentle expand and contract.
+ * - `thinking`: working on an answer, a slow turn or a travelling wave.
+ * - `speaking`: talking, strong motion that ebbs and pauses like speech.
+ */
+export type VoiceAgentState = 'idle' | 'connecting' | 'listening' | 'thinking' | 'speaking';
+
+export type VoiceVisualizationProps = Omit<ViewProps, 'children'> & {
+  /** What the agent is doing, which sets how the visualization moves. */
+  state: VoiceAgentState;
+  /**
+   * The level of whoever is talking, from 0 to 1, read once a frame on the UI thread. Feed it at
+   * 15 Hz or more for the visualization to move with the words; `null` animates speech on its own.
+   * See `useDictationAudioLevel` for the level of the microphone while dictating.
+   */
+  audioLevel?: SharedValue<number | null>;
+  /**
+   * One to five colors. Past five are ignored, and colors that cannot be read are skipped. When
+   * omitted or empty, the theme's `voiceVisualization.colors` are used.
+   */
+  colors?: string[];
+  /** From 0 to 2: how far and how fast it moves. Colors never change with it. Defaults to 1. */
+  expressivity?: number;
+  /**
+   * What screen readers read as the value for each state, for example to translate them. Defaults
+   * to "Ready", "Connecting", "Listening", "Thinking" and "Speaking". The label, "Voice agent", is
+   * `accessibilityLabel`.
+   */
+  stateLabels?: Partial<Record<VoiceAgentState, string>>;
+};
+
+/** A color as hue (a fraction of a turn), saturation and value, each from 0 to 1. */
+export type Hsv = { hue: number; saturation: number; value: number };

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

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+/**
+ * Whether the system asks for less motion: Reduce Motion on iOS, animations off on Android. It
+ * follows the setting while mounted.
+ *
+ * The AI entry point cannot reach the core SDK's own hook, which also only applies once its
+ * accessibility layer is enabled; the voice visualizations always honour the setting, as on iOS
+ * and Android.
+ */
+export const useReduceMotion = () => {
+  const [reduceMotion, setReduceMotion] = useState(false);
+
+  useEffect(() => {
+    let mounted = true;
+    AccessibilityInfo.isReduceMotionEnabled?.()
+      .then((enabled) => {
+        // It starts off; only turning it on needs a render.
+        if (mounted && enabled) setReduceMotion(true);
+      })
+      .catch(() => undefined);
+    const subscription = AccessibilityInfo.addEventListener?.(
+      'reduceMotionChanged',
+      setReduceMotion,
+    );
+    return () => {
+      mounted = false;
+      subscription?.remove();
+    };
+  }, []);
+
+  return reduceMotion;
+};