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

package/lib/typescript/src/text/index.d.ts

@@ -0,0 +1,4 @@
+export { ShimmerText, type ShimmerTextProps } from "./shimmer-text.js";
+export { StreamingText, type StreamingTextProps } from "./streaming-text.js";
+export { SpokenText, type SpokenTextProps } from "./spoken-text.js";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAgB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,qBAAkB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAe,CAAC"}

package/lib/typescript/src/text/shimmer-text.d.ts

@@ -0,0 +1,13 @@
+import { type StyleProp, type TextStyle } from "react-native";
+export type ShimmerTextProps = {
+    text: string;
+    activeColor: string;
+    mutedColor: string;
+    textStyle?: StyleProp<TextStyle>;
+    duration?: number;
+    highlightWidth?: number;
+    pause?: number;
+    direction?: "ltr" | "rtl";
+};
+export declare function ShimmerText({ text, activeColor, mutedColor, textStyle, duration, highlightWidth, pause, direction, }: ShimmerTextProps): import("react").JSX.Element;
+//# sourceMappingURL=shimmer-text.d.ts.map

package/lib/typescript/src/text/shimmer-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shimmer-text.d.ts","sourceRoot":"","sources":["../../../../src/text/shimmer-text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AA0B1E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAC3B,CAAC;AAIF,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,WAAW,EACX,UAAU,EACV,SAA8B,EAC9B,QAA2B,EAC3B,cAAwC,EACxC,KAAS,EACT,SAAiB,GAClB,EAAE,gBAAgB,+BA2DlB"}

package/lib/typescript/src/text/spoken-text.d.ts

@@ -0,0 +1,15 @@
+import { type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import { type MotionPalette } from "../theme/palette.js";
+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 declare function SpokenText({ text, spoken, textStyle, activeColor, spokenColor, upcomingColor, align, colors, style, }: SpokenTextProps): import("react").JSX.Element;
+//# sourceMappingURL=spoken-text.d.ts.map

package/lib/typescript/src/text/spoken-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spoken-text.d.ts","sourceRoot":"","sources":["../../../../src/text/spoken-text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1F,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAkB,CAAC;AAKtD,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAAM,EACN,SAA8B,EAC9B,WAAW,EACX,WAAW,EACX,aAAa,EACb,KAAgB,EAChB,MAAM,EACN,KAAK,GACN,EAAE,eAAe,+BAqCjB"}

package/lib/typescript/src/text/streaming-text.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import { type MotionPalette } from "../theme/palette.js";
+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>;
+};
+export declare function StreamingText({ text, streaming, textStyle, paragraphGap, fadeDuration, rise, caret, colors, style, }: StreamingTextProps): import("react").JSX.Element;
+//# sourceMappingURL=streaming-text.d.ts.map

package/lib/typescript/src/text/streaming-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"streaming-text.d.ts","sourceRoot":"","sources":["../../../../src/text/streaming-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjF,OAAO,EAA0B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAWtG,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAkB,CAAC;AAQtD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AASF,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,SAAS,EACT,SAA8B,EAC9B,YAAiB,EACjB,YAA2B,EAC3B,IAAmB,EACnB,KAAY,EACZ,MAAM,EACN,KAAK,GACN,EAAE,kBAAkB,+BA4CpB"}

package/lib/typescript/src/theme/index.d.ts

@@ -0,0 +1,3 @@
+export { moodstone, moodstoneSwatches, type MotionPalette, type MotionPaletteSet, } from "./palette.js";
+export { MotionThemeProvider, useMotionPalette, type MotionThemeProviderProps, } from "./provider.js";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,iBAAiB,EACjB,KAAK,aAAa,EAClB,KAAK,gBAAgB,GACtB,MAAM,cAAW,CAAC;AACnB,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,KAAK,wBAAwB,GAC9B,MAAM,eAAY,CAAC"}

package/lib/typescript/src/theme/palette.d.ts

@@ -0,0 +1,33 @@
+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 declare const moodstone: MotionPaletteSet;
+export declare const moodstoneSwatches: {
+    readonly sand: "#F5D48A";
+    readonly sun: "#FFD447";
+    readonly tangerine: "#FF9F43";
+    readonly blossom: "#F48FB1";
+    readonly coral: "#F2705B";
+    readonly ember: "#D63A2F";
+    readonly lilac: "#C9B8F0";
+    readonly sky: "#3FC1F5";
+    readonly plum: "#9B59B6";
+    readonly lime: "#C5D94A";
+    readonly mint: "#5FC7B0";
+    readonly pine: "#1F8A70";
+};
+//# sourceMappingURL=palette.d.ts.map

package/lib/typescript/src/theme/palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../../../src/theme/palette.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,aAAa,CAAC;IACrB,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,gBA2BvB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;CAapB,CAAC"}

package/lib/typescript/src/theme/provider.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+import { type MotionPalette } from "./palette.js";
+export type MotionThemeProviderProps = {
+    palette?: Partial<MotionPalette> | {
+        light?: Partial<MotionPalette>;
+        dark?: Partial<MotionPalette>;
+    };
+    colorScheme?: "light" | "dark";
+    children?: ReactNode;
+};
+export declare function MotionThemeProvider({ palette, colorScheme, children }: MotionThemeProviderProps): import("react").JSX.Element;
+export declare function useMotionPalette(override?: Partial<MotionPalette>): MotionPalette;
+//# sourceMappingURL=provider.d.ts.map

package/lib/typescript/src/theme/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../src/theme/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,EAAa,KAAK,aAAa,EAAyB,MAAM,cAAW,CAAC;AASjF,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;QAAC,IAAI,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;KAAE,CAAC;IACrG,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAQF,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,wBAAwB,+BAsB/F;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,aAAa,CAMjF"}

package/package.json

@@ -1,6 +1,135 @@
 {
   "name": "react-native-ai-animations",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.8.1",
+  "description": "Animated React Native and Expo components for AI chat apps: streaming text, shimmer loading text, thinking and status indicators, voice orbs and waveforms, image and video generation loaders, question cards and reasoning effort bars. Built on Reanimated and Skia.",
+  "license": "MIT",
+  "author": "Ahmet Kar",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AhmeetKaar/nami-motion.git"
+  },
+  "homepage": "https://nami-motion-web.vercel.app/",
+  "keywords": [
+    "react-native",
+    "expo",
+    "ai",
+    "ai-chat",
+    "chatbot",
+    "llm",
+    "chat-ui",
+    "animation",
+    "animations",
+    "reanimated",
+    "skia",
+    "streaming-text",
+    "shimmer",
+    "loading",
+    "loader",
+    "typing-indicator",
+    "thinking",
+    "reasoning",
+    "voice",
+    "waveform",
+    "orb",
+    "generative-ui",
+    "ios",
+    "android"
+  ],
+  "sideEffects": false,
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "source": "./src/index.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./theme": {
+      "source": "./src/theme/index.ts",
+      "types": "./lib/typescript/src/theme/index.d.ts",
+      "default": "./lib/module/theme/index.js"
+    },
+    "./text": {
+      "source": "./src/text/index.ts",
+      "types": "./lib/typescript/src/text/index.d.ts",
+      "default": "./lib/module/text/index.js"
+    },
+    "./brand": {
+      "source": "./src/brand/index.ts",
+      "types": "./lib/typescript/src/brand/index.d.ts",
+      "default": "./lib/module/brand/index.js"
+    },
+    "./chat": {
+      "source": "./src/chat/index.ts",
+      "types": "./lib/typescript/src/chat/index.d.ts",
+      "default": "./lib/module/chat/index.js"
+    },
+    "./skia": {
+      "source": "./src/skia/index.ts",
+      "types": "./lib/typescript/src/skia/index.d.ts",
+      "default": "./lib/module/skia/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "typecheck": "tsc --noEmit",
+    "prepack": "bob build",
+    "changeset": "changeset",
+    "release": "bob build && changeset publish"
+  },
+  "peerDependencies": {
+    "@shopify/react-native-skia": ">=2.4.0",
+    "react": ">=19.2.0",
+    "react-native": ">=0.83.0",
+    "react-native-reanimated": ">=4.2.0",
+    "react-native-worklets": ">=0.7.0"
+  },
+  "peerDependenciesMeta": {
+    "@shopify/react-native-skia": {
+      "optional": true
+    }
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "devDependencies": {
+    "@changesets/cli": "^3.0.3",
+    "@shopify/react-native-skia": "2.4.18",
+    "@types/react": "~19.2.2",
+    "react": "19.2.0",
+    "react-native": "0.83.10",
+    "react-native-builder-bob": "^0.43.2",
+    "react-native-reanimated": "4.2.1",
+    "react-native-worklets": "0.7.4",
+    "typescript": "~5.9.2"
+  },
+  "packageManager": "npm@11.6.2"
+}

package/src/brand/index.ts

@@ -0,0 +1,5 @@
+export {
+  SpinningMark,
+  type SpinningMarkBreathe,
+  type SpinningMarkProps,
+} from "./spinning-mark";

package/src/brand/spinning-mark.tsx

@@ -0,0 +1,118 @@
+import { useEffect, type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import Animated, {
+  cancelAnimation,
+  Easing,
+  type EasingFunction,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withSpring,
+  withTiming,
+} from "react-native-reanimated";
+
+const DEFAULT_DURATION = 3630;
+const DEFAULT_BREATHE = { scale: 1.06, duration: 1800 };
+const ENTRANCE_SPRING = { damping: 14, stiffness: 120, mass: 1 };
+
+export type SpinningMarkBreathe = { scale?: number; duration?: number };
+
+export type SpinningMarkProps = {
+  children: ReactNode;
+  size?: number;
+  duration?: number;
+  direction?: "clockwise" | "counterclockwise";
+  easing?: EasingFunction;
+  breathe?: boolean | SpinningMarkBreathe;
+  entrance?: boolean;
+  paused?: boolean;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+};
+
+export function SpinningMark({
+  children,
+  size,
+  duration = DEFAULT_DURATION,
+  direction = "clockwise",
+  easing = Easing.linear,
+  breathe = false,
+  entrance = false,
+  paused = false,
+  style,
+  accessibilityLabel,
+}: SpinningMarkProps) {
+  const reduceMotion = useReducedMotion();
+  const angle = useSharedValue(0);
+  const pulse = useSharedValue(1);
+  const intro = useSharedValue(entrance && !reduceMotion ? 0 : 1);
+  const sign = direction === "clockwise" ? 1 : -1;
+  const breatheScale = breathe ? ((breathe === true ? undefined : breathe.scale) ?? DEFAULT_BREATHE.scale) : 1;
+  const breatheDuration = breathe
+    ? ((breathe === true ? undefined : breathe.duration) ?? DEFAULT_BREATHE.duration)
+    : 0;
+
+  useEffect(() => {
+    if (reduceMotion || paused) {
+      cancelAnimation(angle);
+      return;
+    }
+    const start = angle.value % 360;
+    angle.value = start;
+    angle.value = withRepeat(withTiming(start + 360, { duration, easing }), -1, false);
+    return () => cancelAnimation(angle);
+  }, [angle, duration, easing, paused, reduceMotion]);
+
+  useEffect(() => {
+    if (reduceMotion || paused || breatheScale === 1) {
+      cancelAnimation(pulse);
+      pulse.value = withTiming(1, { duration: 200 });
+      return;
+    }
+    const half = breatheDuration / 2;
+    const curve = Easing.inOut(Easing.sin);
+    pulse.value = withRepeat(
+      withSequence(
+        withTiming(breatheScale, { duration: half, easing: curve }),
+        withTiming(1, { duration: half, easing: curve }),
+      ),
+      -1,
+      false,
+    );
+    return () => cancelAnimation(pulse);
+  }, [breatheDuration, breatheScale, paused, pulse, reduceMotion]);
+
+  useEffect(() => {
+    if (!entrance || reduceMotion) {
+      intro.value = 1;
+      return;
+    }
+    intro.value = withSpring(1, ENTRANCE_SPRING);
+  }, [entrance, intro, reduceMotion]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: Math.min(1, intro.value * 1.4),
+    transform: [
+      { rotate: `${sign * angle.value - (1 - intro.value) * 90 * sign}deg` },
+      { scale: pulse.value * (0.6 + intro.value * 0.4) },
+    ],
+  }));
+
+  return (
+    <Animated.View
+      accessible={!!accessibilityLabel}
+      accessibilityRole={accessibilityLabel ? "image" : undefined}
+      accessibilityLabel={accessibilityLabel}
+      style={[
+        size !== undefined && { width: size, height: size },
+        { alignItems: "center", justifyContent: "center" },
+        style,
+        animatedStyle,
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+}