Skip to content
Native Animation
AI Prompt Bar animation preview
Micro

AI Prompt Bar

A spring-grown AI composer with staggered suggestions, a rotating conic edge, and a luminous send transition.

$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 ai-prompt-bar

About this animation

A spring-grown AI composer with staggered suggestions, a rotating conic edge, and a luminous send transition.

How it works

  1. Focus drives one shared progress value that grows the composer, brightens its rotating edge, and reveals each suggestion with a short stagger.
  2. Attachment chips occupy a measured row above the input, and a spring expands the glass surface to make room without covering typed text.
  3. A sweep gradient renders the active edge in Skia on native platforms, with an equivalent conic treatment on web.
  4. Sending snapshots the current prompt, animates that copy upward, and expands a fading light pulse from the composer.
  5. The keyboard offset, attachment growth, active border, send flight, and busy indicator all stay on the UI thread.

Why this one

Most prompt fields stop at a growing text area and a loading icon. This one makes focus feel spatial: the surface opens, useful prompts arrive in sequence, and sending becomes a compact moment of transformation without turning the composer into a visual distraction.

Install

npx expo install react-native-reanimated react-native-worklets @shopify/react-native-skia

Skia on web also requires CanvasKit to be loaded before importing the component. Expo's Skia guide covers the required setup.

Usage

import { AiPromptBar } from './AiPromptBar';

<AiPromptBar onSend={(prompt) => submitPrompt(prompt)} />;

With personality knobs and suggestions:

<AiPromptBar
  accentColor="#8B7CFF"
  attachments={[{ id: 'brief', label: 'Launch brief' }]}
  fontFamily="Geist"
  onRemoveAttachment={removeAttachment}
  onSend={submitPrompt}
  onSuggestionPress={trackSuggestion}
  suggestions={['Distill the insight', 'Write a bold opening']}
/>

Props

PropTypeDefaultDescription
valuestring—Controlled prompt text.
defaultValuestring''Initial text when uncontrolled.
onChangeText(value: string) => void—Called when the prompt changes.
attachmentsPromptAttachment[][]Removable attachment chips.
onRemoveAttachment(id: string) => void—Called when an attachment is removed.
onAddAttachment() => void—Called from the add button.
suggestionsstring[]Three writing promptsSuggestions revealed on focus.
onSuggestionPress(suggestion: string) => void—Called after a suggestion fills the input.
onSend(text: string) => void—Called when a non-empty prompt is sent.
busybooleanfalseReplaces send with the stop control.
onStop() => void—Called from the stop control.
accentColorstring'#8B7CFF'Active edge, glow, and action color.
fontFamilystringSystemFont for the prompt and controls.
styleStyleProp<ViewStyle>—Style for the outer container.
accessibilityLabelstring'Message composer'Label for the composer region.
testIDstring—Test identifier for the outer container.

The forwarded ref exposes focus(), clear(), and send().

Compatibility

  • Expo SDK 57
  • React Native 0.86.3
  • Reanimated 4.5.1 and React Native Worklets 0.10.1
  • React Native Skia 2.6.2
  • iOS: unverified
  • Android: unverified
  • Web: verified
  • Expo Go: supported because Skia and Reanimated are included

Accessibility

Every action exposes a descriptive button label. Suggestions leave the accessibility tree while hidden. Reduced Motion replaces the spring growth, staggered movement, rotating edge, flying text, and expanding pulse with short opacity transitions.

More animations