react-native-ai-animations 0.0.0-stage → 0.8.0

package/src/text/shimmer-text.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useMemo } from "react";
+import { Text, View, type StyleProp, type TextStyle } from "react-native";
+import Animated, {
+  Easing,
+  Extrapolation,
+  interpolate,
+  interpolateColor,
+  type SharedValue,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from "react-native-reanimated";
+
+const DEFAULT_DURATION = 1400;
+const DEFAULT_HIGHLIGHT_WIDTH = 0.22;
+const GLYPH_BLEED: TextStyle = { paddingHorizontal: 2, marginHorizontal: -2 };
+
+const DEFAULT_TEXT_STYLE: TextStyle = {
+  fontSize: 14,
+  fontWeight: "500",
+  lineHeight: 20,
+};
+
+export type ShimmerTextProps = {
+  text: string;
+  activeColor: string;
+  mutedColor: string;
+  textStyle?: StyleProp<TextStyle>;
+  duration?: number;
+  highlightWidth?: number;
+  pause?: number;
+  direction?: "ltr" | "rtl";
+};
+
+type Glyph = { char: string; index: number };
+
+export function ShimmerText({
+  text,
+  activeColor,
+  mutedColor,
+  textStyle = DEFAULT_TEXT_STYLE,
+  duration = DEFAULT_DURATION,
+  highlightWidth = DEFAULT_HIGHLIGHT_WIDTH,
+  pause = 0,
+  direction = "ltr",
+}: ShimmerTextProps) {
+  const reduceMotion = useReducedMotion();
+  const progress = useSharedValue(0);
+  const { words, total } = useMemo(() => {
+    const characters = Array.from(text);
+    const groups: Glyph[][] = [];
+    let current: Glyph[] = [];
+    characters.forEach((char, index) => {
+      current.push({ char, index });
+      if (char === " ") {
+        groups.push(current);
+        current = [];
+      }
+    });
+    if (current.length) groups.push(current);
+    return { words: groups, total: characters.length };
+  }, [text]);
+
+  useEffect(() => {
+    if (reduceMotion) return;
+    progress.value = 0;
+    const sweep = withTiming(1, { duration, easing: Easing.linear });
+    progress.value = withRepeat(
+      pause > 0 ? withSequence(sweep, withDelay(pause, withTiming(0, { duration: 0 }))) : sweep,
+      -1,
+      false,
+    );
+  }, [duration, pause, progress, reduceMotion]);
+
+  if (reduceMotion) {
+    return <Text style={[textStyle, { color: activeColor }]}>{text}</Text>;
+  }
+
+  return (
+    <View
+      accessible
+      accessibilityRole="text"
+      accessibilityLabel={text}
+      style={{ flexDirection: "row", flexWrap: "wrap" }}
+    >
+      {words.map((word, wordIndex) => (
+        <View key={wordIndex} style={{ flexDirection: "row" }}>
+          {word.map((glyph) => (
+            <ShimmerChar
+              key={glyph.index}
+              char={glyph.char}
+              index={direction === "rtl" ? total - 1 - glyph.index : glyph.index}
+              total={total}
+              progress={progress}
+              activeColor={activeColor}
+              mutedColor={mutedColor}
+              textStyle={textStyle}
+              highlightWidth={highlightWidth}
+            />
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+function ShimmerChar({
+  char,
+  index,
+  total,
+  progress,
+  activeColor,
+  mutedColor,
+  textStyle,
+  highlightWidth,
+}: {
+  char: string;
+  index: number;
+  total: number;
+  progress: SharedValue<number>;
+  activeColor: string;
+  mutedColor: string;
+  textStyle: StyleProp<TextStyle>;
+  highlightWidth: number;
+}) {
+  const style = useAnimatedStyle(() => {
+    const phase = total > 1 ? index / (total - 1) : 0;
+    const position = -highlightWidth + progress.value * (1 + highlightWidth * 2);
+    const distance = Math.abs(position - phase);
+    const linear = interpolate(distance, [0, highlightWidth], [0, 1], Extrapolation.CLAMP);
+    const t = linear * linear * (3 - 2 * linear);
+    return { color: interpolateColor(t, [0, 1], [activeColor, mutedColor]) };
+  });
+
+  return <Animated.Text style={[textStyle, GLYPH_BLEED, style]}>{char}</Animated.Text>;
+}

package/src/text/spoken-text.tsx

@@ -0,0 +1,82 @@
+import { memo, useEffect, useMemo } from "react";
+import { Text, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import Animated, { interpolateColor, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { type MotionPalette } from "../theme/palette";
+import { useMotionPalette } from "../theme/provider";
+
+const DEFAULT_TEXT_STYLE: TextStyle = { fontSize: 22, lineHeight: 30, fontWeight: "600" };
+
+export type SpokenTextProps = {
+  text: string;
+  spoken: number;
+  textStyle?: StyleProp<TextStyle>;
+  activeColor?: string;
+  spokenColor?: string;
+  upcomingColor?: string;
+  align?: "left" | "center";
+  colors?: Partial<MotionPalette>;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function SpokenText({
+  text,
+  spoken,
+  textStyle = DEFAULT_TEXT_STYLE,
+  activeColor,
+  spokenColor,
+  upcomingColor,
+  align = "center",
+  colors,
+  style,
+}: SpokenTextProps) {
+  const palette = useMotionPalette(colors);
+  const reduceMotion = useReducedMotion();
+  const words = useMemo(() => text.match(/\S+\s*/g) ?? [], [text]);
+  const active = activeColor ?? palette.text;
+  const done = spokenColor ?? palette.textSecondary;
+  const upcoming = upcomingColor ?? palette.textTertiary;
+  const current = Math.min(words.length, Math.max(0, Math.floor(spoken)));
+
+  if (reduceMotion) {
+    return (
+      <Text accessibilityLabel={text} style={[textStyle, { color: active, textAlign: align }, style as StyleProp<TextStyle>]}>
+        {text}
+      </Text>
+    );
+  }
+
+  return (
+    <View
+      accessible
+      accessibilityRole="text"
+      accessibilityLabel={text}
+      style={[{ flexDirection: "row", flexWrap: "wrap", justifyContent: align === "center" ? "center" : "flex-start" }, style]}
+    >
+      {words.map((word, index) => (
+        <SpokenWord
+          key={index}
+          word={word}
+          phase={index < current ? 2 : index === current ? 1 : 0}
+          textStyle={textStyle}
+          active={active}
+          done={done}
+          upcoming={upcoming}
+        />
+      ))}
+    </View>
+  );
+}
+
+type SpokenWordProps = { word: string; phase: number; textStyle: StyleProp<TextStyle>; active: string; done: string; upcoming: string };
+
+const SpokenWord = memo(function SpokenWord({ word, phase, textStyle, active, done, upcoming }: SpokenWordProps) {
+  const value = useSharedValue(phase);
+  useEffect(() => {
+    value.value = withTiming(phase, { duration: 180 });
+  }, [phase, value]);
+  const style = useAnimatedStyle(() => ({
+    color: interpolateColor(value.value, [0, 1, 2], [upcoming, active, done]),
+    transform: [{ translateY: -2 * Math.max(0, 1 - Math.abs(value.value - 1)) }],
+  }));
+  return <Animated.Text style={[textStyle, style]}>{word}</Animated.Text>;
+});

package/src/text/streaming-text.tsx

@@ -0,0 +1,144 @@
+import { isValidElement, memo, useEffect, useMemo, type ReactNode } from "react";
+import { StyleSheet, Text, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import Animated, {
+  cancelAnimation,
+  Easing,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from "react-native-reanimated";
+import { type MotionPalette } from "../theme/palette";
+import { useMotionPalette } from "../theme/provider";
+
+const DEFAULT_TEXT_STYLE: TextStyle = { fontSize: 16, lineHeight: 24 };
+const DEFAULT_FADE = 360;
+const DEFAULT_RISE = 6;
+const CARET_BLINK = 530;
+
+export type StreamingTextProps = {
+  text: string;
+  streaming: boolean;
+  textStyle?: StyleProp<TextStyle>;
+  paragraphGap?: number;
+  fadeDuration?: number;
+  rise?: number;
+  caret?: boolean | ReactNode;
+  colors?: Partial<MotionPalette>;
+  style?: StyleProp<ViewStyle>;
+};
+
+type Token = { value: string; key: number };
+
+function tokenize(paragraph: string): Token[] {
+  const parts = paragraph.match(/\S+\s*/g) ?? [];
+  return parts.map((value, key) => ({ value, key }));
+}
+
+export function StreamingText({
+  text,
+  streaming,
+  textStyle = DEFAULT_TEXT_STYLE,
+  paragraphGap = 12,
+  fadeDuration = DEFAULT_FADE,
+  rise = DEFAULT_RISE,
+  caret = true,
+  colors,
+  style,
+}: StreamingTextProps) {
+  const palette = useMotionPalette(colors);
+  const reduceMotion = useReducedMotion();
+  const paragraphs = useMemo(() => text.split(/\n{2,}/), [text]);
+  const animate = streaming && !reduceMotion;
+  const color = palette.text;
+  const caretNode = caret === false ? null : isValidElement(caret) ? caret : <Caret color={color} blink={!reduceMotion} textStyle={textStyle} />;
+
+  return (
+    <View style={[{ gap: paragraphGap }, style]}>
+      {paragraphs.map((paragraph, index) => {
+        const last = index === paragraphs.length - 1;
+        if (!animate || !last) {
+          return (
+            <Text key={index} style={[textStyle, { color }]}>
+              {paragraph}
+              {last && streaming && caretNode}
+            </Text>
+          );
+        }
+        return (
+          <View
+            key={index}
+            accessible
+            accessibilityRole="text"
+            accessibilityLabel={paragraph}
+            style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "flex-end" }}
+          >
+            {tokenize(paragraph).map((token) => (
+              <StreamingWord
+                key={token.key}
+                value={token.value}
+                textStyle={textStyle}
+                color={color}
+                fadeDuration={fadeDuration}
+                rise={rise}
+              />
+            ))}
+            {caretNode}
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+type StreamingWordProps = {
+  value: string;
+  textStyle: StyleProp<TextStyle>;
+  color: string;
+  fadeDuration: number;
+  rise: number;
+};
+
+const StreamingWord = memo(function StreamingWord({ value, textStyle, color, fadeDuration, rise }: StreamingWordProps) {
+  const progress = useSharedValue(0);
+
+  useEffect(() => {
+    progress.value = withTiming(1, { duration: fadeDuration, easing: Easing.out(Easing.cubic) });
+  }, [fadeDuration, progress]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: progress.value,
+    transform: [{ translateY: rise * (1 - progress.value) }],
+  }));
+
+  return <Animated.Text style={[textStyle, { color }, animatedStyle]}>{value}</Animated.Text>;
+});
+
+function Caret({ color, blink, textStyle }: { color: string; blink: boolean; textStyle: StyleProp<TextStyle> }) {
+  const opacity = useSharedValue(1);
+  const flat = StyleSheet.flatten(textStyle);
+  const height = Math.round((flat?.fontSize ?? 16) * 1.05);
+
+  useEffect(() => {
+    if (!blink) return;
+    opacity.value = withRepeat(
+      withSequence(withTiming(0, { duration: CARET_BLINK }), withTiming(1, { duration: CARET_BLINK })),
+      -1,
+      false,
+    );
+    return () => cancelAnimation(opacity);
+  }, [blink, opacity]);
+
+  const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
+
+  return (
+    <Animated.View
+      style={[
+        { width: 2, height, borderRadius: 1, backgroundColor: color, marginLeft: 2, marginBottom: 3 },
+        animatedStyle,
+      ]}
+    />
+  );
+}

package/src/theme/index.ts

@@ -0,0 +1,11 @@
+export {
+  moodstone,
+  moodstoneSwatches,
+  type MotionPalette,
+  type MotionPaletteSet,
+} from "./palette";
+export {
+  MotionThemeProvider,
+  useMotionPalette,
+  type MotionThemeProviderProps,
+} from "./provider";

package/src/theme/palette.ts

@@ -0,0 +1,62 @@
+export type MotionPalette = {
+  background: string;
+  card: string;
+  surface: string;
+  raised: string;
+  text: string;
+  textSecondary: string;
+  textTertiary: string;
+  accent: string;
+  accentContrast: string;
+  success: string;
+  danger: string;
+};
+
+export type MotionPaletteSet = {
+  light: MotionPalette;
+  dark: MotionPalette;
+};
+
+export const moodstone: MotionPaletteSet = {
+  light: {
+    background: "#F3F4F5",
+    card: "#FFFFFF",
+    surface: "#E6EAEC",
+    raised: "#D5DCDF",
+    text: "#1A2023",
+    textSecondary: "#6D7A7F",
+    textTertiary: "#A3AEB2",
+    accent: "#1F8A70",
+    accentContrast: "#FFFFFF",
+    success: "#1F8A70",
+    danger: "#D63A2F",
+  },
+  dark: {
+    background: "#0B0E10",
+    card: "#141A1D",
+    surface: "#1B2327",
+    raised: "#2A353A",
+    text: "#EEF2F3",
+    textSecondary: "#7D8A8F",
+    textTertiary: "#4F5B60",
+    accent: "#5FC7B0",
+    accentContrast: "#0B0E10",
+    success: "#5FC7B0",
+    danger: "#F2705B",
+  },
+};
+
+export const moodstoneSwatches = {
+  sand: "#F5D48A",
+  sun: "#FFD447",
+  tangerine: "#FF9F43",
+  blossom: "#F48FB1",
+  coral: "#F2705B",
+  ember: "#D63A2F",
+  lilac: "#C9B8F0",
+  sky: "#3FC1F5",
+  plum: "#9B59B6",
+  lime: "#C5D94A",
+  mint: "#5FC7B0",
+  pine: "#1F8A70",
+} as const;

package/src/theme/provider.tsx

@@ -0,0 +1,54 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import { useColorScheme } from "react-native";
+import { moodstone, type MotionPalette, type MotionPaletteSet } from "./palette";
+
+type MotionThemeValue = {
+  palettes: MotionPaletteSet;
+  colorScheme?: "light" | "dark";
+};
+
+const MotionPaletteContext = createContext<MotionThemeValue | null>(null);
+
+export type MotionThemeProviderProps = {
+  palette?: Partial<MotionPalette> | { light?: Partial<MotionPalette>; dark?: Partial<MotionPalette> };
+  colorScheme?: "light" | "dark";
+  children?: ReactNode;
+};
+
+function isPaletteSet(
+  palette: MotionThemeProviderProps["palette"],
+): palette is { light?: Partial<MotionPalette>; dark?: Partial<MotionPalette> } {
+  return !!palette && ("light" in palette || "dark" in palette);
+}
+
+export function MotionThemeProvider({ palette, colorScheme, children }: MotionThemeProviderProps) {
+  const value = useMemo<MotionThemeValue>(() => {
+    if (!palette) return { palettes: moodstone, colorScheme };
+    if (isPaletteSet(palette)) {
+      return {
+        palettes: {
+          light: { ...moodstone.light, ...palette.light },
+          dark: { ...moodstone.dark, ...palette.dark },
+        },
+        colorScheme,
+      };
+    }
+    return {
+      palettes: {
+        light: { ...moodstone.light, ...palette },
+        dark: { ...moodstone.dark, ...palette },
+      },
+      colorScheme,
+    };
+  }, [palette, colorScheme]);
+
+  return <MotionPaletteContext.Provider value={value}>{children}</MotionPaletteContext.Provider>;
+}
+
+export function useMotionPalette(override?: Partial<MotionPalette>): MotionPalette {
+  const value = useContext(MotionPaletteContext);
+  const systemScheme = useColorScheme();
+  const scheme = value?.colorScheme ?? (systemScheme === "dark" ? "dark" : "light");
+  const base = (value?.palettes ?? moodstone)[scheme];
+  return useMemo(() => (override ? { ...base, ...override } : base), [base, override]);
+}