Skip to content
Native Animation
Plasma Orb Listening animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add plasma-orb-listening
Skia

Plasma Orb Listening

A voice assistant with a charging orb and reactive wave fields, with configurable status copy, home content, colors, and fonts.

$9 for this animation

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.

About this animation

A voice assistant with a charging orb and reactive wave fields, with configurable status copy, home content, colors, and fonts.

Why this one

The orb carries the listening state as visible material: its edge catches a cool refracted rim, eight moving energy filaments wind around a bright core, and warm and cool wave bands meet at its center. The same orb travels toward the microphone tile as the glass dashboard home appears.

How it works

  1. One Reanimated clock feeds the Skia shaders without React renders. The optional level shared value drives the orb's filament speed and the amplitude of both wave fields.
  2. Eight inclined, noisy 3D rings are projected analytically into thin additive light filaments. The dark glass body adds a luminous core, a circular Fresnel rim, interior shadow, and an upper specular arc. Its Canvas measures exactly the orb diameter; no ray marching, animated blur masks, or screen-sized orb rendering.
  3. A shallow second Canvas paints three variable-width luminous ribbons per side, with a soft halo and brighter edges. Tapping the microphone uses a Gesture Handler tap and one active value to flatten and dim them.
  4. The close action moves and scales the orb to the measured microphone badge on the home talk tile, with an interruptible spring, while the greeting, action cards, recent searches, and glass navigation bar appear.
  5. A separate static background shader paints two soft night-color pools and fine grain. Expo BlurView samples that background through an SDK 58 BlurTargetView for the dashboard glass, including Android SDK 31+.
  6. Reduced motion keeps the shaders still and uses short fades for state changes. Autoplay stops when the user touches the demo.

Install

npx expo install @expo/vector-icons @shopify/react-native-skia expo-blur expo-linear-gradient react-native-gesture-handler react-native-reanimated react-native-worklets

For web, initialize CanvasKit before mounting the component through the host app's Skia loader.

Usage

import PlasmaOrbListening, { type PlasmaOrbListeningRef } from './plasma-orb-listening';

const assistant = useRef<PlasmaOrbListeningRef>(null);
<PlasmaOrbListening ref={assistant} onMicToggle={(listening) => saveListeningState(listening)} />;
assistant.current?.goHome();

Theme and copy can be replaced independently:

<PlasmaOrbListening
  title="Northstar"
  assistantName="Northstar Assistant"
  hint="Find a little more clarity in your day."
  colors={{ background: ['#10182C', '#202647', '#3B2854'], mic: ['#6946D8', '#B15AEF'] }}
/>

Props

PropTypeDefaultPurpose
titlestringLumen AIHeader title.
assistantNamestringLumen AssistantListening screen heading.
listeningLabel / pausedLabelstringListening / PausedListening status copy.
hintstringPersonalized guidance sentenceSupporting listening copy.
greetingstringSamName in the home greeting.
colorsobjectNight blue and violet paletteBackground stops, warm and cool wave colors, five filament colors, and microphone gradient.
fontFamilystringGeist_400RegularTypeface used by body and home copy.
levelSharedValue<number>Simulated levelOptional normalized audio level from 0 to 1.
onMicToggle(listening: boolean) => voidundefinedCalled when listening changes.
onChatPress / onImagePress() => voidundefinedCalled by the chat shortcut and image-search card.
onClose() => voidundefinedCalled when returning home.
accessibilityLabelsobjectEnglish control labelsAccessible names for icon-only controls.
homeobjectLumen home labels and three recent itemsHome greeting, action, navigation, and recent search copy.
styleStyleProp<ViewStyle>undefinedRoot container style.
testIDstringundefinedRoot test identifier; microphone uses the -mic suffix.

The ref exposes listen(), pause(), goHome(), and openListening().

Compatibility

Targets Expo SDK 58, React Native 0.88.0, Reanimated 4.7.1, Worklets 0.13.0, and Skia 2.14.0. Uses Expo Go bundled modules. Supports iOS, Android, and web.

Accessibility

Microphone, close, chat, and home actions have button semantics and labels. The microphone supports tap as the direct alternative to audio input. Reduced motion freezes the shaders, removes flight and scale motion, disables blur, and uses 200 ms fades. The host applies safe-area insets. Layout follows the measured container, including a 300 × 400 embed; the dashboard scrolls on short screens and caps its content width on tablets.

Icons: Feather from @expo/vector-icons.

statusFontFamily optionally supplies a serif status face; by default the status uses fontFamily or the system face. The optional home.greetingPrefix string replaces the complete greeting prefix (default: "Hi,"). All existing props and ref methods remain supported. The greeting, cards, and navigation keep the reference hierarchy, with original assistant copy and colored icon badges. The procedural orb approximates refraction; it is not a physically traced glass render.

More animations