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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ahmet Kar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,227 @@
-# Temporary Holding Version
+# React Native AI Animations
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm](https://img.shields.io/npm/v/react-native-ai-animations)](https://www.npmjs.com/package/react-native-ai-animations)
+[![license](https://img.shields.io/npm/l/react-native-ai-animations)](LICENSE)
+
+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, themeable, and reduce motion aware.
+
+**Docs and live demos:** [nami-motion-web.vercel.app](https://nami-motion-web.vercel.app/)
+
+## Installation
+
+```bash
+npx expo install react-native-ai-animations react-native-reanimated react-native-worklets
+```
+
+The orbs, waveforms and media loaders in `react-native-ai-animations/skia` also need Skia:
+
+```bash
+npx expo install @shopify/react-native-skia
+```
+
+| Peer | Version |
+| --- | --- |
+| `react` | 19.2 or newer |
+| `react-native` | 0.83 or newer |
+| `react-native-reanimated` | 4.2 or newer |
+| `react-native-worklets` | 0.7 or newer |
+| `@shopify/react-native-skia` | 2.4 or newer, optional |
+
+> Formerly published as `nami-motion`. Replace `nami-motion` with
+> `react-native-ai-animations` in your imports.
+
+## Components
+
+Every component and style is shown in motion, with copyable code and agent
+prompts, on the [website](https://nami-motion-web.vercel.app/).
+
+| Component | Entry | What it does |
+| --- | --- | --- |
+| Shimmer Text | `/text` | A light band sweeping across text while a response is being generated. |
+| Streaming Text | `/text` | Words of a streaming answer fade and rise in, with a blinking caret. |
+| Spoken Text | `/text` | Highlights the word being spoken and dims the words already read aloud, for voice replies. |
+| Spinning Mark | `/brand` | Spins any icon you pass (your logo) with optional breathing and entrance. |
+| Status Row | `/chat` | Pulsing icon, shimmering label and elapsed timer for agent status. |
+| Thinking Block | `/chat` | "Thought for Ns" header that springs open into a step timeline. |
+| Question Card | `/chat` | Paged questions with numbered options and a custom answer, as a card or a sheet. |
+| Effort Bar | `/chat` | Reasoning effort control wired to `reasoning.effort` (low, medium, high) in four styles: bars, track, segmented and slider. |
+| Media Generating | `/skia` | One loading state for image and video generation in six variants: blobs, matrix, orbit, scan, constellation and helix. |
+| Dot Orb | `/skia` | The dot sphere behind the media variants, also usable on its own. |
+| Matrix Orb | `/skia` | Dot matrix orb with idle, listening and thinking states and per state colors. |
+| Liquid Orb | `/skia` | Voice orb in metal, water, iridescent or ring material that reacts to idle, listening, thinking and speaking and a live level. |
+| Voice Wave | `/skia` | Live microphone waveform in four styles: lines, bars, dots and pulse. |
+
+Entries are subpaths of `react-native-ai-animations`. The root export holds
+`/theme` and `/text`; nothing that needs Skia is imported from the root.
+
+Every style is also its own component with the same props minus `variant`:
+
+- `VoiceWaveLines`, `VoiceWaveBars`, `VoiceWaveDots`, `VoiceWavePulse`
+- `EffortBars`, `EffortTrack`, `EffortSegmented`, `EffortSlider`
+- `MediaGeneratingBlobs`, `MediaGeneratingMatrix`, `MediaGeneratingOrbit`,
+  `MediaGeneratingScan`, `MediaGeneratingConstellation`, `MediaGeneratingHelix`
+- `QuestionSheet`
+
+## Usage
+
+### Shimmer Text
+
+```tsx
+import { ShimmerText } from "react-native-ai-animations/text";
+
+<ShimmerText text="Generating a response" activeColor={colors.text} mutedColor={colors.textTertiary} />;
+```
+
+### Streaming Text, Status Row, Thinking Block
+
+```tsx
+import { StreamingText } from "react-native-ai-animations/text";
+import { StatusRow, ThinkingBlock } from "react-native-ai-animations/chat";
+
+<StatusRow label="Searching the web" icon={<Logo />} startedAt={startedAt} />;
+<ThinkingBlock thinking={thinking} startedAt={startedAt} steps={steps} />;
+<StreamingText text={answer} streaming={streaming} textStyle={{ fontFamily: "Inter" }} />;
+```
+
+### Spinning Mark
+
+```tsx
+import { SpinningMark } from "react-native-ai-animations/brand";
+
+<SpinningMark size={160} duration={3600} breathe entrance>
+  <Image source={require("./logo.png")} style={{ width: 160, height: 160 }} />
+</SpinningMark>;
+```
+
+### Question Card
+
+```tsx
+import { QuestionCard } from "react-native-ai-animations/chat";
+
+<QuestionCard questions={questions} variant="sheet" onSubmit={(answers) => send(answers)} />;
+```
+
+`QuestionCard` and `QuestionSheet` take a `ref` with `select(index)`,
+`goTo(page)` and `submit()`, so a demo, a voice flow or a test can drive the
+questions without touches.
+
+### Effort Bar
+
+`REASONING_EFFORTS` matches the `reasoning.effort` values OpenRouter and most
+reasoning APIs take (`low`, `medium`, `high`), with each level's share of
+`max_tokens`. `reasoningRequest(effort)` builds the request fields.
+
+```tsx
+import { EffortBar, REASONING_EFFORTS, reasoningRequest } from "react-native-ai-animations/chat";
+
+<EffortBar levels={REASONING_EFFORTS} value={index} onChange={(i, level) => setEffort(level.value)} accessibilityLabel="Reasoning" />;
+<EffortBar levels={REASONING_EFFORTS} value={index} onChange={(i) => setIndex(i)} variant="segmented" />;
+<EffortBar levels={REASONING_EFFORTS} value={index} onChange={(i) => setIndex(i)} variant="slider" tabLabel={model.name} fillColors={["#5AA2FF", "#2F7BF5"]} levelIcon={(i, color) => <BrainIcon level={i} color={color} />} />;
+<EffortBar levels={REASONING_EFFORTS} value={index} variant="slider" size="compact" />;
+
+const body = { model, messages, max_tokens: 16000, ...reasoningRequest(effort) };
+```
+
+| Prop | Does |
+| --- | --- |
+| `variant` | `bars` (default), `track`, `segmented` or `slider` |
+| `size="compact"` | Small inline form for model rows |
+| `fillColors` | Tints the fill of any style |
+| `tabLabel` | Your model name in the slider's tab |
+| `levelIcon` | Replaces every level name with your own icon |
+
+EffortBar is only the control: put your own title, level label or description
+around it.
+
+### Media Generating
+
+```tsx
+import { ImageGenerating, MediaGenerating, VideoGenerating } from "react-native-ai-animations/skia";
+
+<MediaGenerating variant="constellation" label="Creating image" startedAt={startedAt} />;
+<MediaGenerating variant="scan" chrome="overlay" status="generating" progress={0.42} meta="720p · 6s" aspectRatio={16 / 9} />;
+<ImageGenerating variant="helix" startedAt={startedAt} />;
+<VideoGenerating status="queued" variant="orbit" />;
+```
+
+`ImageGenerating` and `VideoGenerating` are presets of `MediaGenerating`.
+
+### Voice Wave
+
+```tsx
+import { useSharedValue } from "react-native-reanimated";
+import { VoiceWave } from "react-native-ai-animations/skia";
+
+const level = useSharedValue(0);
+
+<VoiceWave level={level} variant="bars" colors={["#1F8A70", "#88C9F7", "#5FC7B0"]} />;
+```
+
+### Liquid Orb and Spoken Text
+
+`LiquidOrb` comes in `metal`, `water` or `iridescent`, or three glowing loops
+with `ring` (color them with `colors`). `state` switches between `idle`,
+`listening`, `thinking` and `speaking`, and `level` (0 to 1) makes it swell
+while listening or speaking. `SpokenText` highlights the word being read aloud:
+pass the index of the current word as `spoken`.
+
+```tsx
+import { useSharedValue } from "react-native-reanimated";
+import { LiquidOrb } from "react-native-ai-animations/skia";
+import { SpokenText } from "react-native-ai-animations/text";
+
+const level = useSharedValue(0);
+
+<LiquidOrb material="water" state={isRecording ? "listening" : "idle"} level={level} size={240} />;
+<LiquidOrb material="ring" state="listening" level={level} size={240} colors={["#1F8A70", "#88C9F7", "#5FC7B0"]} />;
+<SpokenText text={reply} spoken={wordIndex} textStyle={{ fontFamily: "Inter", fontSize: 20, lineHeight: 28 }} />;
+```
+
+## Theming
+
+Components use the built-in Moodstone palette until you wrap your app in
+`MotionThemeProvider`. Pass one palette, or a `light` and `dark` pair with a
+`colorScheme`. Components that read the palette also take `colors` to override
+a single instance; Shimmer Text, Voice Wave, Dot Orb and Matrix Orb take their
+colors directly (`activeColor`, `colors`, `color`).
+
+```tsx
+import { useColorScheme } from "react-native";
+import { MotionThemeProvider } from "react-native-ai-animations/theme";
+
+<MotionThemeProvider
+  colorScheme={useColorScheme() ?? "light"}
+  palette={{ light: { accent: "#2F7BF5" }, dark: { accent: "#5AA2FF" } }}
+>
+  <App />
+</MotionThemeProvider>;
+```
+
+Palette keys: `background`, `card`, `surface`, `raised`, `text`,
+`textSecondary`, `textTertiary`, `accent`, `accentContrast`, `success`,
+`danger`. Read the active palette in your own components with
+`useMotionPalette()`.
+
+## Customization and accessibility
+
+- Icons, fonts, colors and timing are props on every component; nothing is
+  tied to a brand or an icon set.
+- When the system's reduce motion setting is on, every component settles to a
+  static final state.
+
+## Development
+
+```bash
+npm install
+npm run typecheck
+npm run build
+```
+
+Changes that affect the package need a changeset: `npm run changeset`.
+
+## License
+
+[MIT](LICENSE)

package/lib/module/brand/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { SpinningMark } from "./spinning-mark.js";
+//# sourceMappingURL=index.js.map

package/lib/module/brand/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SpinningMark"],"sourceRoot":"../../../src","sources":["brand/index.ts"],"mappings":";;AAAA,SACEA,YAAY,QAGP,oBAAiB","ignoreList":[]}

package/lib/module/brand/spinning-mark.js

@@ -0,0 +1,96 @@
+"use strict";
+
+import { useEffect } from "react";
+import Animated, { cancelAnimation, Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withRepeat, withSequence, withSpring, withTiming } from "react-native-reanimated";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_DURATION = 3630;
+const DEFAULT_BREATHE = {
+  scale: 1.06,
+  duration: 1800
+};
+const ENTRANCE_SPRING = {
+  damping: 14,
+  stiffness: 120,
+  mass: 1
+};
+export function SpinningMark({
+  children,
+  size,
+  duration = DEFAULT_DURATION,
+  direction = "clockwise",
+  easing = Easing.linear,
+  breathe = false,
+  entrance = false,
+  paused = false,
+  style,
+  accessibilityLabel
+}) {
+  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 /*#__PURE__*/_jsx(Animated.View, {
+    accessible: !!accessibilityLabel,
+    accessibilityRole: accessibilityLabel ? "image" : undefined,
+    accessibilityLabel: accessibilityLabel,
+    style: [size !== undefined && {
+      width: size,
+      height: size
+    }, {
+      alignItems: "center",
+      justifyContent: "center"
+    }, style, animatedStyle],
+    children: children
+  });
+}
+//# sourceMappingURL=spinning-mark.js.map

package/lib/module/brand/spinning-mark.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","Animated","cancelAnimation","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withRepeat","withSequence","withSpring","withTiming","jsx","_jsx","DEFAULT_DURATION","DEFAULT_BREATHE","scale","duration","ENTRANCE_SPRING","damping","stiffness","mass","SpinningMark","children","size","direction","easing","linear","breathe","entrance","paused","style","accessibilityLabel","reduceMotion","angle","pulse","intro","sign","breatheScale","undefined","breatheDuration","start","value","half","curve","inOut","sin","animatedStyle","opacity","Math","min","transform","rotate","View","accessible","accessibilityRole","width","height","alignItems","justifyContent"],"sourceRoot":"../../../src","sources":["brand/spinning-mark.tsx"],"mappings":"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","ignoreList":[]}