Skip to content
Native Animation
Streaming AI Reply animation preview
AIChatStreamingTypingMicro

Streaming AI Reply

A premium assistant response that turns a thinking shimmer into softly revealed, structured copy.

$9 for this animation

Checkout opens soon. Leave your email and we will tell you the moment you can buy it.

One email when checkout opens. No spam.

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

npx nativeanimation add streaming-ai-reply

About this animation

A premium assistant response that turns a thinking shimmer into softly revealed, structured copy.

Why this one

Most streaming treatments slide a bright rectangle over text and leave the cursor detached from the current word. This version keeps the shimmer inside the Thinking letterforms, anchors the cursor directly after the latest token, and reveals each word with a 4-point lift and a blur-to-sharp transition. Paragraphs, real bullet rows, and fenced code remain visually distinct while using the same text API.

How it works

  1. Each character in the thinking label derives its color and opacity from one looping shared phase, so no opaque overlay crosses the text.
  2. Incoming text is parsed into paragraphs, bullet rows, spacers, and fenced code without introducing a second content model.
  3. Every new word mounts with a short stagger, fades in, rises 4 points, and sharpens from a 4-point blur.
  4. The blinking cursor lives in the same wrapping row as the latest word, keeping it attached at every line length.
  5. A forwarded ref exposes replay() so a host can restart the signature thinking shimmer.

Install

npx expo install react-native-reanimated

Usage

import StreamingAiReply from './StreamingAiReply';

export function AssistantMessage() {
  return (
    <StreamingAiReply
      text={'Here is a focused plan:\n\n• Polish the core flow\n• Invite a small beta'}
      done
    />
  );
}

Customize the surface, typography, and streaming state:

import { useRef } from 'react';
import StreamingAiReply, { type StreamingAiReplyRef } from './StreamingAiReply';

export function LiveAssistantMessage() {
  const replyRef = useRef<StreamingAiReplyRef>(null);

  return (
    <StreamingAiReply
      ref={replyRef}
      text={partialReply}
      thinking={!partialReply}
      thinkingSeconds={3}
      done={isComplete}
      accentColor="#6E56FF"
      surfaceColor="rgba(255,255,255,0.82)"
      fontFamily="Geist-Regular"
      monoFontFamily="GeistMono-Regular"
      accessibilityLabel="Planning assistant response"
    />
  );
}

The forwarded ref exposes replay().

Props

PropTypeDefaultDescription
textstringRequiredStreamed text. Supports paragraphs, •, -, or * bullets, and fenced code.
thinkingbooleanfalseShows the animated thinking label while the reply is empty.
thinkingSecondsnumber4Duration shown after thinking completes.
donebooleanfalseHides the cursor and announces the completed response.
accentColorstring'#6E56FF'Thinking shimmer, status light, bullet, and cursor color.
textColorstring'#20202A'Main response color.
mutedColorstring'#777487'Metadata and resting thinking-label color.
surfaceColorstring'rgba(255,255,255,0.82)'Card surface color.
fontFamilystringSystem fontResponse and metadata family.
monoFontFamilystringSystem fontFenced-code family.
styleStyleProp<ViewStyle>—Outer-container style.
accessibilityLabelstring'Assistant reply'Screen-reader prefix for the response.
testIDstring—Test identifier for the outer container.

Compatibility

  • Expo SDK 57
  • React Native 0.86
  • Reanimated 4.5
  • iOS: supported, not yet verified on a device
  • Android: supported, not yet verified on a device
  • Web: supported and verified by the project gate
  • Works in Expo Go because Reanimated is included in the SDK

Accessibility

The container exposes the current response as text and uses a polite live region once streaming completes. Reduced Motion keeps the hierarchy and fades words in without blur, lift, cursor blinking, or a traveling shimmer.

More animations