react-native-ai-animations 0.9.0 → 0.9.1

package/src/chat/thinking-block.tsx

@@ -126,6 +126,7 @@ export function ThinkingBlock({
   };
 
   const heading = title ?? (thinking ? copy.thinking : copy.done(totalSeconds));
+  const label = thinking && startedAt !== undefined ? `${heading} ${elapsed}s` : heading;
 
   return (
     <View style={style}>
@@ -142,13 +143,13 @@ export function ThinkingBlock({
         <Animated.View key={thinking ? "thinking" : "done"} entering={reduceMotion ? undefined : FadeIn.duration(220)}>
           {thinking && !reduceMotion ? (
             <ShimmerText
-              text={thinking && startedAt !== undefined ? `${heading} ${elapsed}s` : heading}
+              text={label}
               activeColor={palette.text}
               mutedColor={palette.textTertiary}
               textStyle={textStyle}
             />
           ) : (
-            <Text style={[textStyle, { color: palette.textSecondary }]}>{heading}</Text>
+            <Text style={[textStyle, { color: palette.textSecondary }]}>{label}</Text>
           )}
         </Animated.View>
         {hasBody && (

package/src/internal/color.ts

@@ -1,18 +1,33 @@
+import { processColor } from "react-native";
+
+type Rgba = [number, number, number, number];
+
+export function parseColor(color: string): Rgba | null {
+  const processed = processColor(color);
+  if (typeof processed !== "number") return null;
+  const argb = processed >>> 0;
+  return [(argb >>> 16) & 255, (argb >>> 8) & 255, argb & 255, (argb >>> 24) / 255];
+}
+
+function roundAlpha(value: number) {
+  return Math.round(value * 1000) / 1000;
+}
+
 export function withAlpha(color: string, alpha: number): string {
-  if (color.startsWith("rgb")) {
-    const parts = color.replace(/rgba?\(|\)/g, "").split(",").map((part) => part.trim());
-    return `rgba(${parts[0]}, ${parts[1]}, ${parts[2]}, ${alpha})`;
+  const parsed = parseColor(color);
+  if (!parsed) return color;
+  const [red, green, blue, source] = parsed;
+  return `rgba(${red}, ${green}, ${blue}, ${roundAlpha(source * alpha)})`;
+}
+
+export function mixColors(from: string, to: string, t: number): string {
+  const a = parseColor(from);
+  const b = parseColor(to);
+  if (!a || !b) return t < 0.5 ? from : to;
+  const [red, green, blue, alpha] = a.map((value, index) => value + (b[index] - value) * t);
+  if (alpha >= 1) {
+    const hex = (value: number) => Math.round(value).toString(16).padStart(2, "0");
+    return `#${hex(red)}${hex(green)}${hex(blue)}`;
   }
-  const hex = color.replace("#", "");
-  const full =
-    hex.length === 3
-      ? hex
-          .split("")
-          .map((char) => char + char)
-          .join("")
-      : hex.slice(0, 6);
-  const r = parseInt(full.slice(0, 2), 16);
-  const g = parseInt(full.slice(2, 4), 16);
-  const b = parseInt(full.slice(4, 6), 16);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  return `rgba(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)}, ${roundAlpha(alpha)})`;
 }

package/src/internal/graphemes.ts

@@ -0,0 +1,40 @@
+const EXTEND = /^[\p{M}\u200C\uFE00-\uFE0F\u{E0020}-\u{E007F}\u{1F3FB}-\u{1F3FF}]$/u;
+const REGIONAL = /^[\u{1F1E6}-\u{1F1FF}]$/u;
+const ZWJ = "\u200D";
+const SHAPED = /[\u0590-\u08FF\u0900-\u0DFF\u0E00-\u0FFF\u1000-\u109F\u1780-\u18AF\uA800-\uABFF\uFB1D-\uFDFF\uFE70-\uFEFF]/;
+const CJK = /^[\u2E80-\u303F\u3040-\u9FFF\uAC00-\uD7AF\uF900-\uFAFF\uFF00-\uFFEF]/;
+
+type Segmenter = { segment(text: string): Iterable<{ segment: string }> };
+type SegmenterConstructor = new (locale?: string, options?: { granularity: "grapheme" }) => Segmenter;
+
+function nativeSegmenter(): Segmenter | null {
+  const constructor = (Intl as unknown as { Segmenter?: SegmenterConstructor }).Segmenter;
+  return constructor ? new constructor(undefined, { granularity: "grapheme" }) : null;
+}
+
+export function splitGraphemes(text: string): string[] {
+  const segmenter = typeof Intl === "undefined" ? null : nativeSegmenter();
+  if (segmenter) return Array.from(segmenter.segment(text), (part) => part.segment);
+  const clusters: string[] = [];
+  let joinNext = false;
+  for (const point of text) {
+    const last = clusters.length - 1;
+    const previous = clusters[last];
+    const pairsFlag = REGIONAL.test(point) && previous !== undefined && REGIONAL.test(previous);
+    if (previous !== undefined && (joinNext || point === ZWJ || EXTEND.test(point) || pairsFlag)) {
+      clusters[last] = previous + point;
+    } else {
+      clusters.push(point);
+    }
+    joinNext = point === ZWJ;
+  }
+  return clusters;
+}
+
+export function needsShaping(text: string) {
+  return SHAPED.test(text);
+}
+
+export function isCjk(cluster: string) {
+  return CJK.test(cluster);
+}

package/src/internal/use-elapsed.ts

@@ -4,8 +4,9 @@ export function useElapsed(startedAt: number | undefined, running: boolean, inte
   const [now, setNow] = useState(() => Date.now());
 
   useEffect(() => {
-    if (!running || startedAt === undefined) return;
+    if (startedAt === undefined) return;
     setNow(Date.now());
+    if (!running) return;
     const id = setInterval(() => setNow(Date.now()), interval);
     return () => clearInterval(id);
   }, [interval, running, startedAt]);

package/src/internal/use-motion-clock.ts

@@ -0,0 +1,9 @@
+import { type SharedValue, useFrameCallback, useSharedValue } from "react-native-reanimated";
+
+export function useMotionClock(running: boolean, initial = 0): SharedValue<number> {
+  const clock = useSharedValue(initial);
+  useFrameCallback((info) => {
+    clock.value += info.timeSincePreviousFrame ?? 0;
+  }, running);
+  return clock;
+}

package/src/skia/dot-orb.tsx

@@ -1,7 +1,8 @@
-import { Canvas, Path, Skia, type SkPath, useClock } from "@shopify/react-native-skia";
+import { Canvas, Path, Skia, type SkPath } from "@shopify/react-native-skia";
 import { useEffect, useMemo } from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
 import { Easing, useDerivedValue, useReducedMotion, useSharedValue, withDelay, withRepeat, withSequence, withTiming } from "react-native-reanimated";
+import { useMotionClock } from "../internal/use-motion-clock";
 import { useMotionPalette } from "../theme/provider";
 
 export type DotOrbVariant = "orbit" | "scan" | "constellation" | "helix";
@@ -96,9 +97,9 @@ export function DotOrb({
   const reduceMotion = useReducedMotion();
   const ink = color ?? palette.text;
   const highlight = accent ?? palette.accent;
-  const clock = useClock();
-  const layout = useSharedValue({ width: size ?? 0, height: size ?? 0 });
   const still = reduceMotion || paused;
+  const clock = useMotionClock(!still);
+  const layout = useSharedValue({ width: size ?? 0, height: size ?? 0 });
   const spread = useSharedValue(scatter === true ? 1 : 0);
 
   useEffect(() => {
@@ -116,7 +117,7 @@ export function DotOrb({
   const edges = useMemo(() => (variant === "constellation" ? buildEdges(sphere, 0.6) : []), [sphere, variant]);
 
   const frame = useDerivedValue<Frame>(() => {
-    const t = (still ? STILL_TIME : clock.value) * 0.001 * speed;
+    const t = (reduceMotion ? STILL_TIME : clock.value) * 0.001 * speed;
     const width = layout.value.width;
     const height = layout.value.height;
     const cx = width / 2;

package/src/skia/matrix-orb.tsx

@@ -7,6 +7,8 @@ import {
   useReducedMotion,
   useSharedValue,
 } from "react-native-reanimated";
+import { type MotionPalette } from "../theme/palette";
+import { useMotionPalette } from "../theme/provider";
 
 export type MatrixOrbState = "idle" | "listening" | "thinking";
 
@@ -24,7 +26,6 @@ const MAX_DELTA = 0.05;
 const MIN_DOTS = 3;
 const DEFAULT_DOTS = 11;
 const DEFAULT_SIZE = 240;
-const DEFAULT_COLOR = "#FFFFFF";
 
 const ORB_SPAN = 0.74;
 const ORB_DOT = 0.6;
@@ -195,6 +196,7 @@ export type MatrixOrbProps = {
   color?: string;
   stateColors?: Partial<Record<MatrixOrbState, string>>;
   dots?: number;
+  colors?: Partial<MotionPalette>;
 };
 
 export function MatrixOrb({
@@ -202,10 +204,13 @@ export function MatrixOrb({
   level,
   size = DEFAULT_SIZE,
   cover = false,
-  color = DEFAULT_COLOR,
+  color: colorProp,
   stateColors,
   dots = DEFAULT_DOTS,
+  colors,
 }: MatrixOrbProps) {
+  const palette = useMotionPalette(colors);
+  const color = colorProp ?? palette.text;
   const reduceMotion = useReducedMotion();
 
   const grid = Math.max(MIN_DOTS, Math.round(dots));

package/src/skia/media-generating.tsx

@@ -7,7 +7,6 @@ import {
   LinearGradient,
   Paint,
   Rect,
-  useClock,
   vec,
 } from "@shopify/react-native-skia";
 import { useEffect, useState, type ReactNode } from "react";
@@ -36,6 +35,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { withAlpha } from "../internal/color";
 import { formatElapsed, useElapsed } from "../internal/use-elapsed";
+import { useMotionClock } from "../internal/use-motion-clock";
 import { ShimmerText } from "../text/shimmer-text";
 import { moodstoneSwatches, type MotionPalette } from "../theme/palette";
 import { useMotionPalette } from "../theme/provider";
@@ -138,7 +138,7 @@ export function MediaGenerating({
   const seconds = useElapsed(startedAt, true);
   const copy = { ...DEFAULT_LABELS, ...labels };
   const title = status ? copy[status] : (label ?? copy.generating);
-  const headline = chrome === "header" && label && status ? label : title;
+  const headline = chrome === "header" && label && status ? (status === "queued" ? `${label} \u00B7 ${copy.queued}` : label) : title;
   const percent = progress === undefined ? undefined : Math.round(Math.min(1, Math.max(0, progress)) * 100);
   const chip = withAlpha(palette.background, 0.72);
   const showSweep = sweep ?? variant === "blobs";
@@ -241,7 +241,7 @@ type BlobFieldProps = { colors: string[]; grain: boolean; sweep: boolean; sweepC
 
 function BlobField({ colors, grain, sweep, sweepColor, still }: BlobFieldProps) {
   const size = useSharedValue({ width: 0, height: 0 });
-  const clock = useClock();
+  const clock = useMotionClock(!still);
   const time = useDerivedValue(() => (still ? 0 : clock.value), [still]);
   const canvasWidth = useDerivedValue(() => size.value.width);
   const canvasHeight = useDerivedValue(() => size.value.height);

package/src/skia/voice-wave.tsx

@@ -1,7 +1,10 @@
-import { Canvas, LinearGradient, Path, Skia, useClock, vec } from "@shopify/react-native-skia";
+import { Canvas, LinearGradient, Path, Skia, vec } from "@shopify/react-native-skia";
 import { useState } from "react";
 import { View, type LayoutChangeEvent, type StyleProp, type ViewStyle } from "react-native";
 import { type SharedValue, useDerivedValue, useFrameCallback, useReducedMotion, useSharedValue } from "react-native-reanimated";
+import { useMotionClock } from "../internal/use-motion-clock";
+import { moodstoneSwatches } from "../theme/palette";
+import { useMotionPalette } from "../theme/provider";
 
 const DEFAULT_HEIGHT = 32;
 const SAMPLE_STEP = 2;
@@ -29,7 +32,7 @@ export type VoiceWaveVariant = "lines" | "bars" | "dots" | "pulse";
 
 export type VoiceWaveProps = {
   level: SharedValue<number>;
-  colors: [string, string, string];
+  colors?: [string, string, string];
   variant?: VoiceWaveVariant;
   height?: number;
   style?: StyleProp<ViewStyle>;
@@ -168,10 +171,12 @@ function Pulse({ width, height, level, clock, colors }: FieldProps) {
   );
 }
 
-export function VoiceWave({ level, colors, variant = "lines", height = DEFAULT_HEIGHT, style }: VoiceWaveProps) {
+export function VoiceWave({ level, colors: colorsProp, variant = "lines", height = DEFAULT_HEIGHT, style }: VoiceWaveProps) {
+  const palette = useMotionPalette();
+  const colors = colorsProp ?? [palette.accent, moodstoneSwatches.sky, moodstoneSwatches.mint];
   const [width, setWidth] = useState(0);
   const reduceMotion = useReducedMotion();
-  const ticking = useClock();
+  const ticking = useMotionClock(!reduceMotion);
   const clock = useDerivedValue(() => (reduceMotion ? 1200 : ticking.value), [reduceMotion]);
 
   const handleLayout = (event: LayoutChangeEvent) => setWidth(event.nativeEvent.layout.width);

package/src/text/shimmer-text.tsx

@@ -14,6 +14,7 @@ import Animated, {
   withSequence,
   withTiming,
 } from "react-native-reanimated";
+import { isCjk, needsShaping, splitGraphemes } from "../internal/graphemes";
 
 const DEFAULT_DURATION = 1400;
 const DEFAULT_HIGHLIGHT_WIDTH = 0.22;
@@ -50,20 +51,26 @@ export function ShimmerText({
 }: ShimmerTextProps) {
   const reduceMotion = useReducedMotion();
   const progress = useSharedValue(0);
+  const shaped = useMemo(() => needsShaping(text), [text]);
   const { words, total } = useMemo(() => {
-    const characters = Array.from(text);
+    const characters = shaped ? [] : splitGraphemes(text);
     const groups: Glyph[][] = [];
     let current: Glyph[] = [];
     characters.forEach((char, index) => {
+      const breakAfter = char === " " || isCjk(char);
+      if (isCjk(char) && current.length) {
+        groups.push(current);
+        current = [];
+      }
       current.push({ char, index });
-      if (char === " ") {
+      if (breakAfter) {
         groups.push(current);
         current = [];
       }
     });
     if (current.length) groups.push(current);
     return { words: groups, total: characters.length };
-  }, [text]);
+  }, [shaped, text]);
 
   useEffect(() => {
     if (reduceMotion) return;
@@ -80,6 +87,21 @@ export function ShimmerText({
     return <Text style={[textStyle, { color: activeColor }]}>{text}</Text>;
   }
 
+  if (shaped) {
+    return (
+      <ShimmerChar
+        char={text}
+        index={1}
+        total={3}
+        progress={progress}
+        activeColor={activeColor}
+        mutedColor={mutedColor}
+        textStyle={textStyle}
+        highlightWidth={Math.max(highlightWidth, 0.5)}
+      />
+    );
+  }
+
   return (
     <View
       accessible

package/src/text/spoken-text.tsx

@@ -40,7 +40,11 @@ export function SpokenText({
   if (reduceMotion) {
     return (
       <Text accessibilityLabel={text} style={[textStyle, { color: active, textAlign: align }, style as StyleProp<TextStyle>]}>
-        {text}
+        {words.map((word, index) => (
+          <Text key={index} style={{ color: index < current ? done : index === current ? active : upcoming }}>
+            {word}
+          </Text>
+        ))}
       </Text>
     );
   }

package/src/text/streaming-text.tsx

@@ -1,5 +1,5 @@
 import { isValidElement, memo, useEffect, useMemo, useState, type ReactNode } from "react";
-import { StyleSheet, Text, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import { StyleSheet, Text, View, type ColorValue, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
 import Animated, {
   cancelAnimation,
   useAnimatedStyle,
@@ -9,7 +9,6 @@ import Animated, {
   withSequence,
   withTiming,
 } from "react-native-reanimated";
-import { withAlpha } from "../internal/color";
 import { type MotionPalette } from "../theme/palette";
 import { useMotionPalette } from "../theme/provider";
 
@@ -108,7 +107,8 @@ export function StreamingText({
   const [reveal, setReveal] = useState<Reveal>(() => (streaming && animate ? settledReveal("") : settledReveal(text)));
   const [now, setNow] = useState(() => Date.now());
   const fading = reveal.chunks.length > 0;
-  const color = palette.text;
+  const flatStyle = StyleSheet.flatten(textStyle);
+  const color = flatStyle?.color ?? palette.text;
 
   useEffect(() => {
     if (!streaming || !animate) {
@@ -164,7 +164,7 @@ export function StreamingText({
               const value = text.slice(Math.max(piece.start, range.start), Math.min(piece.end, range.end));
               if (piece.alpha >= 1) return value;
               return (
-                <Text key={piece.start} style={{ color: withAlpha(color, piece.alpha) }}>
+                <Text key={piece.start} style={{ opacity: piece.alpha }}>
                   {value}
                 </Text>
               );
@@ -180,7 +180,7 @@ export function StreamingText({
 type PlainParagraphProps = {
   value: string;
   textStyle: StyleProp<TextStyle>;
-  color: string;
+  color: ColorValue;
   selectable: boolean;
 };
 
@@ -192,7 +192,7 @@ const PlainParagraph = memo(function PlainParagraph({ value, textStyle, color, s
   );
 });
 
-function Caret({ color, blink, textStyle }: { color: string; blink: boolean; textStyle: StyleProp<TextStyle> }) {
+function Caret({ color, blink, textStyle }: { color: ColorValue; blink: boolean; textStyle: StyleProp<TextStyle> }) {
   const opacity = useSharedValue(1);
   const flat = StyleSheet.flatten(textStyle);
   const height = Math.round((flat?.fontSize ?? 16) * 1.05);