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

package/src/ai-components/transcription/useDictationAudioLevel.ts

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+
+import { type SharedValue, useSharedValue } from 'react-native-reanimated';
+
+import { AIDictation } from '../native/AIDictation';
+
+/**
+ * The microphone's live level while dictation listens, from 0 to 1, for the `audioLevel` of
+ * `VoiceWave` and `VoiceGlow`. It is `null` while dictation is not listening, which lets a
+ * visualization animate speech on its own.
+ *
+ * The level is a shared value rather than state, so a level changing many times a second
+ * re-renders nothing: the visualizations read it once a frame on the UI thread.
+ */
+export const useDictationAudioLevel = (): SharedValue<number | null> => {
+  const level = useSharedValue<number | null>(null);
+
+  useEffect(() => {
+    const unsubscribeLevel = AIDictation.addLevelListener((payload) => {
+      level.value = typeof payload?.level === 'number' ? payload.level : null;
+    });
+    const unsubscribeState = AIDictation.addStateListener(({ state }) => {
+      if (state !== 'listening' && state !== 'starting') level.value = null;
+    });
+    const unsubscribeError = AIDictation.addErrorListener(() => {
+      level.value = null;
+    });
+
+    return () => {
+      unsubscribeLevel();
+      unsubscribeState();
+      unsubscribeError();
+      level.value = null;
+    };
+  }, [level]);
+
+  return level;
+};

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

@@ -0,0 +1,79 @@
+import React from 'react';
+
+import { useDerivedValue } from 'react-native-reanimated';
+
+import { Canvas, Fill, Shader } from '@shopify/react-native-skia';
+
+import { driverReact, driverScale } from './driver';
+import { getGlowEffect } from './glowShader';
+import { GLOW_STYLE } from './styles';
+import type { VoiceVisualizationProps } from './types';
+import type { VoiceVisualization } from './useVoiceVisualization';
+import { type VoiceCanvasSize, VoiceVisualizationView } from './VoiceVisualizationView';
+
+export type VoiceGlowProps = VoiceVisualizationProps;
+
+const GlowCanvas = ({
+  size: { height, width },
+  visualization: { dark, driver },
+}: {
+  size: VoiceCanvasSize;
+  visualization: VoiceVisualization;
+}) => {
+  const effect = getGlowEffect();
+  const uniforms = useDerivedValue(() => {
+    const d = driver.value;
+    const color = (i: number) => [d.colors[i].hue, d.colors[i].saturation, d.colors[i].value, 0];
+    return {
+      bright: d.bright,
+      col0: color(0),
+      col1: color(1),
+      col2: color(2),
+      col3: color(3),
+      col4: color(4),
+      count: d.count,
+      dark: dark.value,
+      flow: d.flow,
+      flowSpin: d.flowSpin,
+      hover: [d.hoverX, d.hoverY],
+      hoverAmt: d.hoverAmount,
+      load: d.load,
+      mic: d.mic,
+      orbSpin: d.orbSpin,
+      react: driverReact(d),
+      resolution: [width, height],
+      sat: d.sat,
+      scale: driverScale(d),
+      tap: [d.tapX, d.tapY],
+      tapTime: d.tapAge,
+      time: d.time,
+      voice: d.voice,
+    };
+  });
+
+  if (!effect) return null;
+
+  return (
+    <Canvas style={{ height, width }}>
+      <Fill>
+        <Shader source={effect} uniforms={uniforms} />
+      </Fill>
+    </Canvas>
+  );
+};
+
+const renderGlow = (visualization: VoiceVisualization, size: VoiceCanvasSize) => (
+  <GlowCanvas size={size} visualization={visualization} />
+);
+
+/**
+ * A voice agent as a soft, airy globe: color masses orbit inside it and swell with speech, and the
+ * gaps between them let the background show through. Tapping the globe bounces it and 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 half as wide
+ * as its shorter side, so give it a square.
+ */
+export const VoiceGlow = (props: VoiceGlowProps) => (
+  <VoiceVisualizationView {...props} renderCanvas={renderGlow} visualStyle={GLOW_STYLE} />
+);

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

@@ -0,0 +1,179 @@
+import React, { type ReactNode, useCallback, useMemo, useState } from 'react';
+import {
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  PixelRatio,
+  type PointerEvent,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+import Animated from 'react-native-reanimated';
+
+import type { VoiceVisualizationStyle } from './styles';
+import type { VoiceAgentState, VoiceVisualizationProps } from './types';
+import { useVoiceVisualization, type VoiceVisualization } from './useVoiceVisualization';
+
+/** What the renderer draws in: the canvas size, in its own units, and the screen's pixels per unit. */
+export type VoiceCanvasSize = { height: number; pixelRatio: number; width: number };
+
+type ViewProps = VoiceVisualizationProps & {
+  /** Draws the visualization into a canvas of the given size. */
+  renderCanvas: (visualization: VoiceVisualization, size: VoiceCanvasSize) => ReactNode;
+  visualStyle: VoiceVisualizationStyle;
+};
+
+const DEFAULT_STATE_LABELS: Record<VoiceAgentState, string> = {
+  connecting: 'Connecting',
+  idle: 'Ready',
+  listening: 'Listening',
+  speaking: 'Speaking',
+  thinking: 'Thinking',
+};
+
+/**
+ * What VoiceWave and VoiceGlow share: the motion, the canvas kept at the view's size and at most
+ * the style's density, reduced motion, taps and hover, and accessibility.
+ *
+ * It names itself "Voice agent" with its state as the value, as on iOS and Android. Touches are
+ * only watched, never claimed, so a press handler on the view or a parent still gets them, and
+ * only the shape takes them: around it they reach whatever is behind.
+ */
+export const VoiceVisualizationView = ({
+  accessibilityLabel = 'Voice agent',
+  accessibilityValue,
+  audioLevel,
+  colors,
+  expressivity,
+  onLayout,
+  pointerEvents = 'box-none',
+  renderCanvas,
+  state,
+  stateLabels,
+  style,
+  visualStyle,
+  ...restProps
+}: ViewProps) => {
+  const visualization = useVoiceVisualization(
+    { audioLevel, colors, expressivity, state },
+    visualStyle,
+  );
+  const { hover, opacity, tap } = visualization;
+  const [layout, setLayout] = useState({ height: 0, width: 0 });
+
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      onLayout?.(event);
+      const { height, width } = event.nativeEvent.layout;
+      setLayout((current) =>
+        current.width === width && current.height === height ? current : { height, width },
+      );
+    },
+    [onLayout],
+  );
+
+  const side = Math.min(layout.width, layout.height);
+  const pixelRatio = PixelRatio.get();
+  // Drawn at no more than the style's density, then scaled up to the view: the glow's soft
+  // gradients look the same at 2x with fewer pixels to fill, while the wave's line needs 3x.
+  const density = Math.min(1, visualStyle.maxScale / pixelRatio);
+  const canvasSize = useMemo<VoiceCanvasSize>(
+    () => ({
+      height: layout.height * density,
+      pixelRatio: pixelRatio * density,
+      width: layout.width * density,
+    }),
+    [density, layout.height, layout.width, pixelRatio],
+  );
+  const hitWidth = visualStyle.hitArea.width * side;
+  const hitHeight = visualStyle.hitArea.height * side;
+
+  /** A touch on the hit area, centred on the view and normalized to its shorter side, y up. */
+  const toLocalPoint = useCallback(
+    (locationX: number, locationY: number) => ({
+      x: (locationX - hitWidth / 2) / (side || 1),
+      y: (hitHeight / 2 - locationY) / (side || 1),
+    }),
+    [hitHeight, hitWidth, side],
+  );
+
+  const handleTouchEnd = useCallback(
+    (event: GestureResponderEvent) => {
+      const { x, y } = toLocalPoint(event.nativeEvent.locationX, event.nativeEvent.locationY);
+      if (visualStyle.contains(x, y)) tap(x, y);
+    },
+    [tap, toLocalPoint, visualStyle],
+  );
+
+  const handlePointerMove = useCallback(
+    (event: PointerEvent) => {
+      // Only a hovering mouse or pen ripples it; a finger has no hover.
+      const { buttons, offsetX, offsetY, pointerType } = event.nativeEvent;
+      if (pointerType === 'touch') return;
+      const { x, y } = toLocalPoint(offsetX, offsetY);
+      const hovering = buttons === 0 && visualStyle.contains(x, y);
+      hover(hovering ? x : null, hovering ? y : null);
+    },
+    [hover, toLocalPoint, visualStyle],
+  );
+
+  const handlePointerLeave = useCallback(() => hover(null, null), [hover]);
+
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole='image'
+      accessibilityValue={
+        accessibilityValue ?? { text: stateLabels?.[state] ?? DEFAULT_STATE_LABELS[state] }
+      }
+      accessible
+      onLayout={handleLayout}
+      pointerEvents={pointerEvents}
+      style={style}
+      {...restProps}
+    >
+      {side > 0 ? (
+        <>
+          <Animated.View
+            pointerEvents='none'
+            style={[
+              styles.canvas,
+              {
+                height: canvasSize.height,
+                left: (layout.width - canvasSize.width) / 2,
+                opacity,
+                top: (layout.height - canvasSize.height) / 2,
+                transform: [{ scale: 1 / density }],
+                width: canvasSize.width,
+              },
+            ]}
+          >
+            {renderCanvas(visualization, canvasSize)}
+          </Animated.View>
+          <View
+            // A transparent view with only handlers could be flattened away, leaving no target.
+            collapsable={false}
+            onPointerLeave={handlePointerLeave}
+            onPointerMove={handlePointerMove}
+            onTouchEnd={handleTouchEnd}
+            style={[
+              styles.hitArea,
+              {
+                height: hitHeight,
+                left: (layout.width - hitWidth) / 2,
+                top: (layout.height - hitHeight) / 2,
+                width: hitWidth,
+              },
+            ]}
+            testID='voice-visualization-hit-area'
+          />
+        </>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  canvas: { position: 'absolute' },
+  hitArea: { position: 'absolute' },
+});

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