npm - react-native-ai-animations - Versions diffs - 0.8.0 → 0.9.0 - Mend

react-native-ai-animations 0.8.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md +124 -72
package/lib/module/text/streaming-text.js +150 -54
package/lib/module/text/streaming-text.js.map +1 -1
package/lib/typescript/src/text/streaming-text.d.ts +2 -2
package/lib/typescript/src/text/streaming-text.d.ts.map +1 -1
package/package.json +2 -2
package/src/text/streaming-text.tsx +129 -53

package/README.md CHANGED Viewed

@@ -1,72 +1,71 @@
 # React Native AI Animations
+[![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
 ```
-Formerly published as `nami-motion`: replace `nami-motion` with
-`react-native-ai-animations` in your imports.
+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
-<table>
-  <tr>
-    <td align="center" valign="top" width="33%"><img src="https://raw.githubusercontent.com/AhmeetKaar/nami-motion/main/media/spinning-mark.gif" width="200" alt="Spinning Mark recording" /><br /><b>Spinning Mark</b><br /><code>react-native-ai-animations/brand</code></td>
-    <td align="center" valign="top" width="33%"><img src="https://raw.githubusercontent.com/AhmeetKaar/nami-motion/main/media/shimmer-text.gif" width="200" alt="Shimmer Text recording" /><br /><b>Shimmer Text</b><br /><code>react-native-ai-animations/text</code></td>
-    <td align="center" valign="top" width="33%"><img src="https://raw.githubusercontent.com/AhmeetKaar/nami-motion/main/media/streaming-text.gif" width="200" alt="Streaming Text recording" /><br /><b>Streaming Text</b><br /><code>react-native-ai-animations/text</code></td>
-  </tr>
-  <tr>
-    <td align="center" valign="top" width="33%"><img src="https://raw.githubusercontent.com/AhmeetKaar/nami-motion/main/media/status-row.gif" width="200" alt="Status Row recording" /><br /><b>Status Row</b><br /><code>react-native-ai-animations/chat</code></td>
-    <td align="center" valign="top" width="33%"><img src="https://raw.githubusercontent.com/AhmeetKaar/nami-motion/main/media/thinking-block.gif" width="200" alt="Thinking Block recording" /><br /><b>Thinking Block</b><br /><code>react-native-ai-animations/chat</code></td>
-    <td align="center" valign="top" width="33%"><img src="https://raw.githubusercontent.com/AhmeetKaar/nami-motion/main/media/question-card.gif" width="200" alt="Question Card recording" /><br /><b>Question Card</b><br /><code>react-native-ai-animations/chat</code></td>
-  </tr>
-  <tr>
-    <td align="center" valign="top" width="33%"><img src="https://raw.githubusercontent.com/AhmeetKaar/nami-motion/main/media/effort-bar.gif" width="200" alt="Effort Bar recording" /><br /><b>Effort Bar</b><br /><code>react-native-ai-animations/chat</code></td>
-    <td align="center" valign="top" width="33%"><img src="https://raw.githubusercontent.com/AhmeetKaar/nami-motion/main/media/media-generating.gif" width="200" alt="Media Generating recording" /><br /><b>Media Generating</b><br /><code>react-native-ai-animations/skia</code></td>
-    <td align="center" valign="top" width="33%"><img src="https://raw.githubusercontent.com/AhmeetKaar/nami-motion/main/media/voice-wave.gif" width="200" alt="Voice Wave recording" /><br /><b>Voice Wave</b><br /><code>react-native-ai-animations/skia</code></td>
-  </tr>
-</table>
-<table>
-  <tr>
-    <td align="center" valign="top" width="50%"><img src="https://raw.githubusercontent.com/AhmeetKaar/nami-motion/main/media/shimmer-text.gif" width="160" alt="Shimmer Text recording" /><br /><b>Shimmer Text</b><br /><code>react-native-ai-animations/text</code><br /><a href="https://github.com/AhmeetKaar/nami-motion/raw/main/media/shimmer-text.mp4">10s video</a></td>
-    <td align="center" valign="top" width="50%"><img src="https://raw.githubusercontent.com/AhmeetKaar/nami-motion/main/media/voice-wave.gif" width="160" alt="Voice Wave recording" /><br /><b>Voice Wave</b><br /><code>react-native-ai-animations/skia</code><br /><a href="https://github.com/AhmeetKaar/nami-motion/raw/main/media/voice-wave.mp4">10s video</a></td>
-  </tr>
-</table>
+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 | `react-native-ai-animations/text` | A light band sweeping across text while a response is being generated. |
-| Streaming Text | `react-native-ai-animations/text` | Words of a streaming answer fade and rise in, with a blinking caret. |
-| Spoken Text | `react-native-ai-animations/text` | Highlights the word being spoken and dims the words already read aloud, for voice replies. |
-| Spinning Mark | `react-native-ai-animations/brand` | Spins any icon you pass (your logo) with optional breathing and entrance. |
-| Media Generating | `react-native-ai-animations/skia` | One loading state shared by image and video generation, with six variants (blobs, matrix, orbit, scan, constellation, helix). `ImageGenerating` and `VideoGenerating` are its presets. |
-| DotOrb | `react-native-ai-animations/skia` | Dot sphere pictures behind the media variants, also usable on their own. |
-| Liquid Orb | `react-native-ai-animations/skia` | Liquid voice orb in metal, water, iridescent or ring material that reacts to idle, listening, thinking and speaking states and a live level. |
-| Voice Wave | `react-native-ai-animations/skia` | Live microphone waveform in four styles: lines, bars, dots and pulse. |
-| Status Row | `react-native-ai-animations/chat` | Pulsing icon, shimmering label and elapsed timer for agent status. |
-| Thinking Block | `react-native-ai-animations/chat` | "Thought for Ns" header that springs open into a step timeline. |
-| Question Card | `react-native-ai-animations/chat` | Paged questions with numbered options and a custom answer, for cards or sheets. |
-| Effort Bar | `react-native-ai-animations/chat` | Reasoning effort bar wired to `reasoning.effort` (low, medium, high) in four styles: rising bars (default), track, segmented pill and a slider whose knob stretches as you drag and snaps to a level under a tab with your model name, each with a compact form and a per level icon. |
+| Shimmer Text | `/text` | A light band sweeping across text while a response is being generated. |
+| Streaming Text | `/text` | A streaming answer fades in chunk by chunk with native text layout and 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` and `VoiceWavePulse`;
-`EffortBars`, `EffortTrack`, `EffortSegmented` and
-`EffortSlider`; `MediaGeneratingBlobs`, `MediaGeneratingMatrix`,
-`MediaGeneratingOrbit`, `MediaGeneratingScan`, `MediaGeneratingConstellation`
-and `MediaGeneratingHelix`; and `QuestionSheet`.
-Every component takes its icon, font, colors and timing as props and falls back
-to a static state when reduce motion is on. `react-native-ai-animations/theme` ships the
-Moodstone palette with `MotionThemeProvider` and `useMotionPalette`; pass
-`colors` to override one component.
+- `VoiceWaveLines`, `VoiceWaveBars`, `VoiceWaveDots`, `VoiceWavePulse`
+- `EffortBars`, `EffortTrack`, `EffortSegmented`, `EffortSlider`
+- `MediaGeneratingBlobs`, `MediaGeneratingMatrix`, `MediaGeneratingOrbit`,
+  `MediaGeneratingScan`, `MediaGeneratingConstellation`, `MediaGeneratingHelix`
+- `QuestionSheet`
-Optional peer: `@shopify/react-native-skia` for `react-native-ai-animations/skia`.
+## Usage
 ### Shimmer Text
@@ -76,16 +75,6 @@ import { ShimmerText } from "react-native-ai-animations/text";
 <ShimmerText text="Generating a response" activeColor={colors.text} mutedColor={colors.textTertiary} />;
 ```
-### 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>;
-```
 ### Streaming Text, Status Row, Thinking Block
 ```tsx
@@ -97,20 +86,33 @@ import { StatusRow, ThinkingBlock } from "react-native-ai-animations/chat";
 <StreamingText text={answer} streaming={streaming} textStyle={{ fontFamily: "Inter" }} />;
 ```
-### Media Generating (shared by image and video)
+### Spinning Mark
 ```tsx
-import { ImageGenerating, MediaGenerating, VideoGenerating } from "react-native-ai-animations/skia";
+import { SpinningMark } from "react-native-ai-animations/brand";
-<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" />;
+<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. `variant` picks the style: `bars` (default), `track`, `segmented` or `slider`; `size="compact"` gives each one a small inline form for model rows, `fillColors` tints any of them, `tabLabel` puts your model name in the slider's tab and `levelIcon` swaps every level name for your own icon, so the state reads without text. EffortBar is only the bar: put your own title, level label or description around it, wherever your UX needs it.
+`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";
@@ -123,15 +125,29 @@ import { EffortBar, REASONING_EFFORTS, reasoningRequest } from "react-native-ai-
 const body = { model, messages, max_tokens: 16000, ...reasoningRequest(effort) };
 ```
-### Question Card
+| 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 { QuestionCard } from "react-native-ai-animations/chat";
+import { ImageGenerating, MediaGenerating, VideoGenerating } from "react-native-ai-animations/skia";
-<QuestionCard questions={questions} variant="sheet" onSubmit={(answers) => send(answers)} />;
+<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" />;
 ```
-Both components 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.
+`ImageGenerating` and `VideoGenerating` are presets of `MediaGenerating`.
 ### Voice Wave
@@ -144,9 +160,13 @@ const level = useSharedValue(0);
 <VoiceWave level={level} variant="bars" colors={["#1F8A70", "#88C9F7", "#5FC7B0"]} />;
 ```
-### Liquid Orb and Spoken Text (voice mode)
+### Liquid Orb and Spoken Text
-`LiquidOrb` is a Skia liquid orb 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-1) makes it swell while listening or speaking. `SpokenText` highlights the word being read aloud: pass the index of the current word as `spoken`.
+`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";
@@ -160,6 +180,38 @@ const level = useSharedValue(0);
 <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
@@ -172,4 +224,4 @@ Changes that affect the package need a changeset: `npm run changeset`.
 ## License
-MIT.
+[MIT](LICENSE)

package/lib/module/text/streaming-text.js CHANGED Viewed

@@ -1,8 +1,9 @@
 "use strict";
-import { isValidElement, memo, useEffect, useMemo } from "react";
+import { isValidElement, memo, useEffect, useMemo, useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
-import Animated, { cancelAnimation, Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withRepeat, withSequence, withTiming } from "react-native-reanimated";
+import Animated, { cancelAnimation, useAnimatedStyle, useReducedMotion, useSharedValue, withRepeat, withSequence, withTiming } from "react-native-reanimated";
+import { withAlpha } from "../internal/color.js";
 import { useMotionPalette } from "../theme/provider.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_TEXT_STYLE = {
@@ -10,14 +11,85 @@ const DEFAULT_TEXT_STYLE = {
   lineHeight: 24
 };
 const DEFAULT_FADE = 360;
-const DEFAULT_RISE = 6;
+const FRAME_MS = 32;
 const CARET_BLINK = 530;
-function tokenize(paragraph) {
-  const parts = paragraph.match(/\S+\s*/g) ?? [];
-  return parts.map((value, key) => ({
-    value,
-    key
-  }));
+function easeOut(progress) {
+  const clamped = Math.min(1, Math.max(0, progress));
+  return 1 - (1 - clamped) ** 3;
+}
+function commonPrefix(a, b) {
+  const limit = Math.min(a.length, b.length);
+  let index = 0;
+  while (index < limit && a.charCodeAt(index) === b.charCodeAt(index)) index += 1;
+  return index;
+}
+function paragraphRanges(text) {
+  const ranges = [];
+  const breaks = /\n{2,}/g;
+  let start = 0;
+  let match = breaks.exec(text);
+  while (match) {
+    ranges.push({
+      start,
+      end: match.index
+    });
+    start = match.index + match[0].length;
+    match = breaks.exec(text);
+  }
+  ranges.push({
+    start,
+    end: text.length
+  });
+  return ranges;
+}
+function settledReveal(text) {
+  return {
+    text,
+    settled: text.length,
+    chunks: []
+  };
+}
+function nextReveal(previous, text, born) {
+  if (text === previous.text) return previous;
+  const common = commonPrefix(previous.text, text);
+  const chunks = previous.chunks.filter(chunk => chunk.start < common).map(chunk => chunk.end > common ? {
+    ...chunk,
+    end: common
+  } : chunk);
+  if (text.length > common) chunks.push({
+    start: common,
+    end: text.length,
+    born
+  });
+  return {
+    text,
+    settled: Math.min(previous.settled, common),
+    chunks
+  };
+}
+function revealPieces(reveal, length, now, fadeDuration) {
+  const pieces = [];
+  if (reveal.settled > 0) pieces.push({
+    start: 0,
+    end: reveal.settled,
+    alpha: 1
+  });
+  let cursor = reveal.settled;
+  for (const chunk of reveal.chunks) {
+    const end = Math.min(chunk.end, length);
+    if (end > cursor) pieces.push({
+      start: cursor,
+      end,
+      alpha: easeOut((now - chunk.born) / fadeDuration)
+    });
+    cursor = Math.max(cursor, end);
+  }
+  if (cursor < length) pieces.push({
+    start: cursor,
+    end: length,
+    alpha: 0
+  });
+  return pieces;
 }
 export function StreamingText({
   text,
@@ -25,17 +97,53 @@ export function StreamingText({
   textStyle = DEFAULT_TEXT_STYLE,
   paragraphGap = 12,
   fadeDuration = DEFAULT_FADE,
-  rise = DEFAULT_RISE,
   caret = true,
+  selectable = false,
   colors,
   style
 }) {
   const palette = useMotionPalette(colors);
   const reduceMotion = useReducedMotion();
-  const paragraphs = useMemo(() => text.split(/\n{2,}/), [text]);
-  const animate = streaming && !reduceMotion;
+  const animate = !reduceMotion && fadeDuration > 0;
+  const [reveal, setReveal] = useState(() => streaming && animate ? settledReveal("") : settledReveal(text));
+  const [now, setNow] = useState(() => Date.now());
+  const fading = reveal.chunks.length > 0;
   const color = palette.text;
-  const caretNode = caret === false ? null : /*#__PURE__*/isValidElement(caret) ? caret : /*#__PURE__*/_jsx(Caret, {
+  useEffect(() => {
+    if (!streaming || !animate) {
+      setReveal(previous => previous.text === text ? previous : settledReveal(text));
+      return;
+    }
+    const born = Date.now();
+    setNow(born);
+    setReveal(previous => nextReveal(previous, text, born));
+  }, [text, streaming, animate]);
+  useEffect(() => {
+    if (!fading) return;
+    const timer = setInterval(() => {
+      const time = Date.now();
+      setNow(time);
+      setReveal(previous => {
+        const live = previous.chunks.filter(chunk => time - chunk.born < fadeDuration);
+        if (live.length === previous.chunks.length) return previous;
+        const done = previous.chunks[previous.chunks.length - live.length - 1];
+        return {
+          ...previous,
+          settled: Math.max(previous.settled, done.end),
+          chunks: live
+        };
+      });
+    }, FRAME_MS);
+    return () => clearInterval(timer);
+  }, [fading, fadeDuration]);
+  const current = streaming ? nextReveal(reveal, text, Number.POSITIVE_INFINITY) : reveal.text === text ? reveal : settledReveal(text);
+  const pieces = animate ? revealPieces(current, text.length, now, fadeDuration) : [{
+    start: 0,
+    end: text.length,
+    alpha: 1
+  }];
+  const paragraphs = useMemo(() => paragraphRanges(text), [text]);
+  const caretNode = !streaming || caret === false ? null : /*#__PURE__*/isValidElement(caret) ? caret : /*#__PURE__*/_jsx(Caret, {
     color: color,
     blink: !reduceMotion,
     textStyle: textStyle
@@ -44,60 +152,48 @@ export function StreamingText({
     style: [{
       gap: paragraphGap
     }, style],
-    children: paragraphs.map((paragraph, index) => {
+    children: paragraphs.map((range, index) => {
       const last = index === paragraphs.length - 1;
-      if (!animate || !last) {
-        return /*#__PURE__*/_jsxs(Text, {
-          style: [textStyle, {
-            color
-          }],
-          children: [paragraph, last && streaming && caretNode]
-        }, index);
-      }
-      return /*#__PURE__*/_jsxs(View, {
-        accessible: true,
-        accessibilityRole: "text",
-        accessibilityLabel: paragraph,
-        style: {
-          flexDirection: "row",
-          flexWrap: "wrap",
-          alignItems: "flex-end"
-        },
-        children: [tokenize(paragraph).map(token => /*#__PURE__*/_jsx(StreamingWord, {
-          value: token.value,
+      const inside = pieces.filter(piece => piece.end > range.start && piece.start < range.end);
+      const plain = inside.length <= 1 && (inside[0]?.alpha ?? 1) >= 1;
+      if (plain && !last) {
+        return /*#__PURE__*/_jsx(PlainParagraph, {
+          value: text.slice(range.start, range.end),
           textStyle: textStyle,
           color: color,
-          fadeDuration: fadeDuration,
-          rise: rise
-        }, token.key)), caretNode]
+          selectable: selectable
+        }, index);
+      }
+      return /*#__PURE__*/_jsxs(Text, {
+        style: [textStyle, {
+          color
+        }],
+        selectable: selectable,
+        children: [inside.map(piece => {
+          const value = text.slice(Math.max(piece.start, range.start), Math.min(piece.end, range.end));
+          if (piece.alpha >= 1) return value;
+          return /*#__PURE__*/_jsx(Text, {
+            style: {
+              color: withAlpha(color, piece.alpha)
+            },
+            children: value
+          }, piece.start);
+        }), last && caretNode]
       }, index);
     })
   });
 }
-const StreamingWord = /*#__PURE__*/memo(function StreamingWord({
+const PlainParagraph = /*#__PURE__*/memo(function PlainParagraph({
   value,
   textStyle,
   color,
-  fadeDuration,
-  rise
+  selectable
 }) {
-  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 /*#__PURE__*/_jsx(Animated.Text, {
+  return /*#__PURE__*/_jsx(Text, {
     style: [textStyle, {
       color
-    }, animatedStyle],
+    }],
+    selectable: selectable,
     children: value
   });
 });

package/lib/module/text/streaming-text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["isValidElement","memo","useEffect","useMemo","StyleSheet","Text","View","Animated","cancelAnimation","~~Easing","~~useAnimatedStyle","useReducedMotion","useSharedValue","withRepeat","withSequence","withTiming","useMotionPalette","jsx","_jsx","jsxs","_jsxs","DEFAULT_TEXT_STYLE","fontSize","lineHeight","DEFAULT_FADE","~~DEFAULT_RISE~~","CARET_BLINK","~~tokenize~~","~~paragraph~~","~~parts~~","~~match~~","~~map~~","~~value~~","~~key~~","~~StreamingText~~","text","~~streaming~~","~~textStyle~~","~~paragraphGap~~","fadeDuration","~~rise~~","caret","colors","style","palette","reduceMotion","~~paragraphs~~","~~split~~","~~animate~~","~~color~~","~~caretNode~~","~~Caret~~","~~blink~~","~~gap~~","~~children~~","~~index~~","~~last~~","~~length~~","~~accessible~~","~~accessibilityRole~~","~~accessibilityLabel~~","~~flexDirection~~","~~flexWrap~~","~~alignItems~~","~~token~~","~~StreamingWord~~","~~progress~~","~~duration~~","~~easing~~","~~out~~","~~cubic~~","~~animatedStyle~~","~~opacity~~","~~transform~~","~~translateY~~","flat","flatten","height","~~Math~~","~~round~~","width","borderRadius","backgroundColor","marginLeft","marginBottom"],"sourceRoot":"../../../src","sources":["text/streaming-text.tsx"],"mappings":";;AAAA,SAASA,cAAc,EAAEC,IAAI,EAAEC,SAAS,EAAEC,OAAO,QAAwB,OAAO;~~AAChF~~,SAASC,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAwD,cAAc;AACrG,OAAOC,QAAQ,IACbC,eAAe,EACfC,~~MAAM,EACNC,~~gBAAgB,EAChBC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,EACVC,YAAY,EACZC,UAAU,QACL,yBAAyB;~~AAEhC~~,SAASC,gBAAgB,QAAQ,sBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAErD,MAAMC,kBAA6B,GAAG;EAAEC,QAAQ,EAAE,EAAE;EAAEC,UAAU,EAAE;AAAG,CAAC;AACtE,MAAMC,YAAY,GAAG,GAAG;AACxB,MAAMC,~~YAAY~~,GAAG,~~CAAC~~;~~AACtB~~,MAAMC,WAAW,GAAG,GAAG;~~AAgBvB~~,SAASC,~~QAAQA~~,CAACC,~~SAAiB~~,~~EAAW~~;~~EAC5C~~,MAAMC,KAAK,~~GAAGD~~,~~SAAS~~,CAACE,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE;~~EAC9C~~,~~OAAOD~~,KAAK,~~CAACE~~,GAAG,CAAC,CAACC,KAAK,EAAEC,GAAG,MAAM;~~IAAED~~,KAAK;~~IAAEC~~;~~EAAI~~,CAAC,CAAC,CAAC;~~AACpD~~;AAEA,OAAO,~~SAASC~~,aAAaA,CAAC;~~EAC5BC~~,IAAI;~~EACJC~~,SAAS;EACTC,SAAS,~~GAAGhB~~,kBAAkB;~~EAC9BiB~~,YAAY,GAAG,EAAE;~~EACjBC~~,YAAY,~~GAAGf~~,YAAY;~~EAC3BgB~~,~~IAAI~~,~~GAAGf~~,~~YAAY~~;~~EACnBgB~~,~~KAAK~~,GAAG,~~IAAI~~;~~EACZC~~,MAAM;EACNC;AACkB,CAAC,EAAE;EACrB,MAAMC,OAAO,~~GAAG5B~~,gBAAgB,~~CAAC0B~~,MAAM,CAAC;EACxC,MAAMG,YAAY,~~GAAGlC~~,gBAAgB,CAAC,CAAC;EACvC,~~MAAMmC~~,UAAU,~~GAAG3C~~,OAAO,CAAC,~~MAAMgC~~,IAAI,~~CAACY~~,KAAK,CAAC,QAAQ,CAAC,EAAE,~~CAACZ~~,IAAI,CAAC,CAAC;~~EAC9D~~,~~MAAMa~~,OAAO,~~GAAGZ~~,SAAS,IAAI,~~CAACS~~,YAAY;~~EAC1C~~,~~MAAMI~~,KAAK,~~GAAGL~~,OAAO,~~CAACT~~,IAAI;~~EAC1B~~,~~MAAMe~~,SAAS,~~GAAGT~~,KAAK,KAAK,KAAK,GAAG,IAAI,GAAG,~~aAAAzC~~,cAAc,~~CAACyC~~,KAAK,CAAC,GAAGA,KAAK,~~gBAAGvB~~,IAAA,~~CAACiC~~,KAAK;~~IAACF~~,KAAK,EAAEA,KAAM;~~IAACG~~,KAAK,EAAE,~~CAACP~~,YAAa;~~IAACR~~,SAAS,EAAEA;EAAU,CAAE,CAAC;~~EAE9I~~,~~oBACEnB~~,IAAA,CAACZ,IAAI;~~IAACqC~~,KAAK,EAAE,CAAC;~~MAAEU~~,GAAG,~~EAAEf~~;IAAa,CAAC,~~EAAEK~~,KAAK,CAAE;~~IAAAW~~,QAAA,~~EACzCR~~,UAAU,~~CAACf~~,GAAG,CAAC,~~CAACH~~,~~SAAS~~,~~EAAE2B~~,KAAK,KAAK;~~MACpC~~,~~MAAMC~~,IAAI,~~GAAGD~~,KAAK,~~KAAKT~~,UAAU,~~CAACW~~,MAAM,GAAG,CAAC;MAC5C,~~IAAI~~,~~CAACT~~,~~OAAO~~,~~IAAI~~,~~CAACQ~~,~~IAAI~~,~~EAAE;QACrB~~,~~oBACEpC~~,~~KAAA~~,~~CAACf,IAAI;UAAasC,~~KAAK,~~EAAE~~,~~CAACN~~,~~SAAS~~,~~EAAE;YAAEY;UAAM~~,~~CAAC~~,~~CAAE;UAAAK~~,~~QAAA~~,~~GAC7C1B~~,~~SAAS~~,~~EACT4B~~,~~IAAI~~,~~IAAIpB~~,~~SAAS~~,~~IAAIc~~,~~SAAS~~;~~QAAA~~,~~GAFtBK~~,~~KAGL~~,~~CAAC;MAEX;MACA~~,~~oBACEnC~~,~~KAAA~~,~~CAACd~~,IAAI~~;QAEHoD~~,~~UAAU;QACVC~~,~~iBAAiB~~,~~EAAC~~,MAAM~~;QACxBC~~,~~kBAAkB~~,~~EAAEhC~~,~~SAAU;QAC9Be~~,KAAK,~~EAAE;UAAEkB~~,~~aAAa~~,~~EAAE~~,~~KAAK~~;~~UAAEC~~,~~QAAQ~~,~~EAAE~~,~~MAAM;UAAEC~~,~~UAAU~~,EAAE;~~QAAW~~,~~CAAE;QAAAT~~,~~QAAA~~,~~GAEzE3B~~,~~QAAQ~~,~~CAACC~~,~~SAAS~~,CAAC,~~CAACG~~,~~GAAG~~,~~CAAEiC,~~KAAK,~~iBAC7B9C~~,~~IAAA~~,~~CAAC+C~~,~~aAAa;UAEZjC,~~KAAK,~~EAAEgC~~,~~KAAK~~,~~CAAChC,KAAM~~;~~UACnBK~~,SAAS,EAAEA,SAAU;~~UACrBY~~,KAAK,EAAEA,KAAM;UACbV,~~YAAY~~,EAAEA~~,YAAa~~;~~UAC3BC~~,~~IAAI~~,~~EAAEA~~;~~QAAK~~,~~GALNwB~~,~~KAAK~~,~~CAAC/B~~,~~GAMZ~~,~~CACF~~,~~CAAC~~,~~EACDiB~~,SAAS;~~MAAA~~,~~GAhBLK~~,~~KAiBD,CAAC~~;~~IAEX~~,~~CAAC~~;~~EAAC~~,~~CACE~~,~~CAAC~~;~~AAEX;AAUA~~,~~MAAMU~~,~~aAAa~~,~~gBAAGhE~~,IAAI,CAAC,~~SAASgE~~,~~aAAaA~~,~~CAAC;EAAEjC~~,KAAK~~;EAAEK~~,~~SAAS;EAAEY~~,KAAK~~;EAAEV~~,~~YAAY;EAAEC;AAAyB~~,CAAC,~~EAAE;EACrH~~,~~MAAM0B~~,~~QAAQ~~,~~GAAGtD~~,~~cAAc~~,~~CAAC~~,~~CAAC~~,~~CAAC;EAElCV~~,~~SAAS~~,CAAC,~~MAAM~~;~~IACdgE~~,~~QAAQ~~,~~CAAClC,~~KAAK,~~GAAGjB~~,~~UAAU~~,~~CAAC~~,CAAC,EAAE;~~MAAEoD~~,~~QAAQ~~,~~EAAE5B~~,~~YAAY~~;~~MAAE6B~~,~~MAAM~~,~~EAAE3D~~,~~MAAM~~,~~CAAC4D~~,~~GAAG~~,~~CAAC5D~~,~~MAAM~~,~~CAAC6D~~,KAAK~~;IAAE~~,~~CAAC~~,~~CAAC~~;~~EAC9F~~,~~CAAC~~,~~EAAE~~,~~CAAC/B~~,~~YAAY~~,~~EAAE2B~~,~~QAAQ~~,~~CAAC~~,CAAC;~~EAE5B~~,~~MAAMK~~,~~aAAa~~,~~GAAG7D~~,~~gBAAgB~~,~~CAAC~~,~~OAAO~~;~~IAC5C8D~~,~~OAAO~~,~~EAAEN~~,~~QAAQ~~,~~CAAClC,KAAK~~;~~IACvByC~~,~~SAAS~~,~~EAAE,~~CAAC;~~MAAEC~~,~~UAAU~~,~~EAAElC~~,~~IAAI~~,IAAI,CAAC,~~GAAG0B~~,~~QAAQ~~,~~CAAClC~~,KAAK;~~IAAE~~,~~CAAC~~;~~EACzD~~,~~CAAC~~,CAAC,~~CAAC~~;~~EAEH~~,~~oBAAOd~~,IAAA,~~CAACX~~,~~QAAQ,CAACF,~~IAAI;~~IAACsC~~,KAAK,EAAE,~~CAACN~~,SAAS,EAAE;~~MAAEY~~;IAAM,CAAC,~~EAAEsB~~,~~aAAa~~,~~CAAE~~;~~IAAAjB~~,QAAA,~~EAAEtB~~;EAAK,~~CAAgB~~,CAAC;~~AAC7F~~,CAAC,CAAC;AAEF,~~SAASmB~~,KAAKA,CAAC;~~EAAEF~~,KAAK;~~EAAEG~~,KAAK;~~EAAEf~~;AAA8E,CAAC,EAAE;EAC9G,~~MAAMmC~~,OAAO,~~GAAG5D~~,cAAc,CAAC,CAAC,CAAC;EACjC,MAAM+D,IAAI,~~GAAGvE~~,UAAU,~~CAACwE~~,OAAO,CAACvC,SAAS,CAAC;EAC1C,MAAMwC,MAAM,~~GAAGC~~,IAAI,~~CAACC~~,KAAK,CAAC,~~CAACJ~~,IAAI,~~EAAErD~~,QAAQ,IAAI,EAAE,IAAI,IAAI,CAAC;~~EAExDpB~~,SAAS,CAAC,MAAM;IACd,IAAI,~~CAACkD~~,KAAK,EAAE;~~IACZoB~~,OAAO,~~CAACxC~~,KAAK,~~GAAGnB~~,UAAU,CACxBC,YAAY,CAACC,UAAU,CAAC,CAAC,EAAE;~~MAAEoD~~,QAAQ,~~EAAEzC~~;IAAY,CAAC,CAAC,~~EAAEX~~,UAAU,CAAC,CAAC,EAAE;~~MAAEoD~~,QAAQ,~~EAAEzC~~;IAAY,CAAC,CAAC,CAAC,EAChG,CAAC,CAAC,EACF,KACF,CAAC;IACD,OAAO,MAAMlB,eAAe,~~CAACgE~~,OAAO,CAAC;EACvC,CAAC,EAAE,~~CAACpB~~,KAAK,~~EAAEoB~~,OAAO,CAAC,CAAC;EAEpB,~~MAAMD~~,aAAa,~~GAAG7D~~,gBAAgB,CAAC,OAAO;~~IAAE8D~~,OAAO,EAAEA,OAAO,~~CAACxC~~;EAAM,CAAC,CAAC,CAAC;EAE1E,~~oBACEd~~,IAAA,CAACX,QAAQ,CAACD,IAAI;~~IACZqC~~,KAAK,EAAE,CACL;~~MAAEqC~~,KAAK,EAAE,CAAC;~~MAAEH~~,MAAM;~~MAAEI~~,YAAY,EAAE,CAAC;MAAEC,eAAe,EAAEjC,KAAK;MAAEkC,UAAU,EAAE,CAAC;MAAEC,YAAY,EAAE;IAAE,CAAC,~~EAC7Fb~~,aAAa;EACb,CACH,CAAC;AAEN","ignoreList":[]}
1	+ {"version":3,"names":["isValidElement","memo","useEffect","useMemo","useState","StyleSheet","Text","View","Animated","cancelAnimation","useAnimatedStyle","useReducedMotion","useSharedValue","withRepeat","withSequence","withTiming","withAlpha","useMotionPalette","jsx","_jsx","jsxs","_jsxs","DEFAULT_TEXT_STYLE","fontSize","lineHeight","DEFAULT_FADE","FRAME_MS","CARET_BLINK","easeOut","progress","clamped","Math","min","max","commonPrefix","a","b","limit","length","index","charCodeAt","paragraphRanges","text","ranges","breaks","start","match","exec","push","end","settledReveal","settled","chunks","nextReveal","previous","born","common","filter","chunk","map","revealPieces","reveal","now","fadeDuration","pieces","alpha","cursor","StreamingText","streaming","textStyle","paragraphGap","caret","selectable","colors","style","palette","reduceMotion","animate","setReveal","setNow","Date","fading","color","timer","setInterval","time","live","done","clearInterval","current","Number","POSITIVE_INFINITY","paragraphs","caretNode","Caret","blink","gap","children","range","last","inside","piece","plain","PlainParagraph","value","slice","opacity","flat","flatten","height","round","duration","animatedStyle","width","borderRadius","backgroundColor","marginLeft","marginBottom"],"sourceRoot":"../../../src","sources":["text/streaming-text.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -7,10 +7,10 @@ export type StreamingTextProps = {
     textStyle?: StyleProp<TextStyle>;
     paragraphGap?: number;
     fadeDuration?: number;
-    rise?: number;
     caret?: boolean | ReactNode;
+    selectable?: boolean;
     colors?: Partial<MotionPalette>;
     style?: StyleProp<ViewStyle>;
 };
-export declare function StreamingText({ text, streaming, textStyle, paragraphGap, fadeDuration, rise, caret, colors, style, }: StreamingTextProps): import("react").JSX.Element;
+export declare function StreamingText({ text, streaming, textStyle, paragraphGap, fadeDuration, caret, selectable, colors, style, }: StreamingTextProps): import("react").JSX.Element;
 //# sourceMappingURL=streaming-text.d.ts.map

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

	@@ -1 +1 @@
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~~"}
1	+ {"version":3,"file":"streaming-text.d.ts","sourceRoot":"","sources":["../../../../src/text/streaming-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3F,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,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AA+DF,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,SAAS,EACT,SAA8B,EAC9B,YAAiB,EACjB,YAA2B,EAC3B,KAAY,EACZ,UAAkB,EAClB,MAAM,EACN,KAAK,GACN,EAAE,kBAAkB,+BA0EpB"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ai-animations",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "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",
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "git+https://github.com/AhmeetKaar/nami-motion.git"
   },
-  "homepage": "https://github.com/AhmeetKaar/nami-motion#readme",
+  "homepage": "https://nami-motion-web.vercel.app/",
   "keywords": [
     "react-native",
     "expo",

package/src/text/streaming-text.tsx CHANGED Viewed

@@ -1,8 +1,7 @@
-import { isValidElement, memo, useEffect, useMemo, type ReactNode } from "react";
+import { isValidElement, memo, useEffect, useMemo, useState, type ReactNode } from "react";
 import { StyleSheet, Text, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
 import Animated, {
   cancelAnimation,
-  Easing,
   useAnimatedStyle,
   useReducedMotion,
   useSharedValue,
@@ -10,12 +9,13 @@ import Animated, {
   withSequence,
   withTiming,
 } from "react-native-reanimated";
+import { withAlpha } from "../internal/color";
 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 FRAME_MS = 32;
 const CARET_BLINK = 530;
 export type StreamingTextProps = {
@@ -24,17 +24,71 @@ export type StreamingTextProps = {
   textStyle?: StyleProp<TextStyle>;
   paragraphGap?: number;
   fadeDuration?: number;
-  rise?: number;
   caret?: boolean | ReactNode;
+  selectable?: boolean;
   colors?: Partial<MotionPalette>;
   style?: StyleProp<ViewStyle>;
 };
-type Token = { value: string; key: number };
+type Chunk = { start: number; end: number; born: number };
-function tokenize(paragraph: string): Token[] {
-  const parts = paragraph.match(/\S+\s*/g) ?? [];
-  return parts.map((value, key) => ({ value, key }));
+type Reveal = { text: string; settled: number; chunks: Chunk[] };
+type Range = { start: number; end: number };
+type Piece = Range & { alpha: number };
+function easeOut(progress: number) {
+  const clamped = Math.min(1, Math.max(0, progress));
+  return 1 - (1 - clamped) ** 3;
+}
+function commonPrefix(a: string, b: string) {
+  const limit = Math.min(a.length, b.length);
+  let index = 0;
+  while (index < limit && a.charCodeAt(index) === b.charCodeAt(index)) index += 1;
+  return index;
+}
+function paragraphRanges(text: string): Range[] {
+  const ranges: Range[] = [];
+  const breaks = /\n{2,}/g;
+  let start = 0;
+  let match = breaks.exec(text);
+  while (match) {
+    ranges.push({ start, end: match.index });
+    start = match.index + match[0].length;
+    match = breaks.exec(text);
+  }
+  ranges.push({ start, end: text.length });
+  return ranges;
+}
+function settledReveal(text: string): Reveal {
+  return { text, settled: text.length, chunks: [] };
+}
+function nextReveal(previous: Reveal, text: string, born: number): Reveal {
+  if (text === previous.text) return previous;
+  const common = commonPrefix(previous.text, text);
+  const chunks = previous.chunks
+    .filter((chunk) => chunk.start < common)
+    .map((chunk) => (chunk.end > common ? { ...chunk, end: common } : chunk));
+  if (text.length > common) chunks.push({ start: common, end: text.length, born });
+  return { text, settled: Math.min(previous.settled, common), chunks };
+}
+function revealPieces(reveal: Reveal, length: number, now: number, fadeDuration: number): Piece[] {
+  const pieces: Piece[] = [];
+  if (reveal.settled > 0) pieces.push({ start: 0, end: reveal.settled, alpha: 1 });
+  let cursor = reveal.settled;
+  for (const chunk of reveal.chunks) {
+    const end = Math.min(chunk.end, length);
+    if (end > cursor) pieces.push({ start: cursor, end, alpha: easeOut((now - chunk.born) / fadeDuration) });
+    cursor = Math.max(cursor, end);
+  }
+  if (cursor < length) pieces.push({ start: cursor, end: length, alpha: 0 });
+  return pieces;
 }
 export function StreamingText({
@@ -43,77 +97,99 @@ export function StreamingText({
   textStyle = DEFAULT_TEXT_STYLE,
   paragraphGap = 12,
   fadeDuration = DEFAULT_FADE,
-  rise = DEFAULT_RISE,
   caret = true,
+  selectable = false,
   colors,
   style,
 }: StreamingTextProps) {
   const palette = useMotionPalette(colors);
   const reduceMotion = useReducedMotion();
-  const paragraphs = useMemo(() => text.split(/\n{2,}/), [text]);
-  const animate = streaming && !reduceMotion;
+  const animate = !reduceMotion && fadeDuration > 0;
+  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 caretNode = caret === false ? null : isValidElement(caret) ? caret : <Caret color={color} blink={!reduceMotion} textStyle={textStyle} />;
+  useEffect(() => {
+    if (!streaming || !animate) {
+      setReveal((previous) => (previous.text === text ? previous : settledReveal(text)));
+      return;
+    }
+    const born = Date.now();
+    setNow(born);
+    setReveal((previous) => nextReveal(previous, text, born));
+  }, [text, streaming, animate]);
+  useEffect(() => {
+    if (!fading) return;
+    const timer = setInterval(() => {
+      const time = Date.now();
+      setNow(time);
+      setReveal((previous) => {
+        const live = previous.chunks.filter((chunk) => time - chunk.born < fadeDuration);
+        if (live.length === previous.chunks.length) return previous;
+        const done = previous.chunks[previous.chunks.length - live.length - 1];
+        return { ...previous, settled: Math.max(previous.settled, done.end), chunks: live };
+      });
+    }, FRAME_MS);
+    return () => clearInterval(timer);
+  }, [fading, fadeDuration]);
+  const current = streaming ? nextReveal(reveal, text, Number.POSITIVE_INFINITY) : reveal.text === text ? reveal : settledReveal(text);
+  const pieces = animate ? revealPieces(current, text.length, now, fadeDuration) : [{ start: 0, end: text.length, alpha: 1 }];
+  const paragraphs = useMemo(() => paragraphRanges(text), [text]);
+  const caretNode =
+    !streaming || caret === false ? null : isValidElement(caret) ? caret : <Caret color={color} blink={!reduceMotion} textStyle={textStyle} />;
   return (
     <View style={[{ gap: paragraphGap }, style]}>
-      {paragraphs.map((paragraph, index) => {
+      {paragraphs.map((range, index) => {
         const last = index === paragraphs.length - 1;
-        if (!animate || !last) {
+        const inside = pieces.filter((piece) => piece.end > range.start && piece.start < range.end);
+        const plain = inside.length <= 1 && (inside[0]?.alpha ?? 1) >= 1;
+        if (plain && !last) {
           return (
-            <Text key={index} style={[textStyle, { color }]}>
-              {paragraph}
-              {last && streaming && caretNode}
-            </Text>
+            <PlainParagraph
+              key={index}
+              value={text.slice(range.start, range.end)}
+              textStyle={textStyle}
+              color={color}
+              selectable={selectable}
+            />
           );
         }
         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>
+          <Text key={index} style={[textStyle, { color }]} selectable={selectable}>
+            {inside.map((piece) => {
+              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) }}>
+                  {value}
+                </Text>
+              );
+            })}
+            {last && caretNode}
+          </Text>
         );
       })}
     </View>
   );
 }
-type StreamingWordProps = {
+type PlainParagraphProps = {
   value: string;
   textStyle: StyleProp<TextStyle>;
   color: string;
-  fadeDuration: number;
-  rise: number;
+  selectable: boolean;
 };
-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>;
+const PlainParagraph = memo(function PlainParagraph({ value, textStyle, color, selectable }: PlainParagraphProps) {
+  return (
+    <Text style={[textStyle, { color }]} selectable={selectable}>
+      {value}
+    </Text>
+  );
 });
 function Caret({ color, blink, textStyle }: { color: string; blink: boolean; textStyle: StyleProp<TextStyle> }) {