About this animation
An assistant onboarding and voice flow with a shared hero transition and configurable artwork, history, copy, and colors.
Why this one
The chrome bust carries the welcome screen into the premium card, while the orb gives the listening state a distinct focal point. The screens remain connected through one interruptible progress value.
How it works
- Draw the reflective sphere and its depth-occluded band in a compact Skia shader.
- Derive band speed, width, pulse, and rings from the host-supplied
level. - Keep the listening clock on shared values, pause it offscreen, and freeze decorative motion when reduced motion is enabled.
Orb rendering
The dark glass sphere uses a compact Skia shader with violet and teal reflections, Fresnel edges, an upper-left specular highlight, and internal stars. A twisted gold band rotates every six seconds at rest, with depth occlusion against the sphere. level increases rotation speed and band width, pulses the sphere up to 1.06×, and emits violet rings. Drive level with your own microphone adapter; this component does not request microphone permission. The local chrome hero floats, responds to touch with spring parallax, and receives a highlight clipped to its alpha silhouette on both welcome and Premium screens.
Reduced motion freezes the orb, rings, float, sweep, and parallax. The orb Canvas mounts on the first listening visit and pauses its clock offscreen while preserving the exit fade; animation runs on shared values without React updates per frame.
Install
Copy this folder into your project, excluding demo/.
npx expo install expo-blur expo-linear-gradient @expo/vector-icons @shopify/react-native-skia react-native-reanimated react-native-workletsIcons: Feather from @expo/vector-icons (Lucide-compatible family).
Usage
import ChromeOrbAssistant from './chrome-orb-assistant';
<ChromeOrbAssistant
heroImage={require('./assistant.webp')}
onUpgrade={() => openUpgrade()}
/>The ref exposes goTo('onboarding' | 'home' | 'listening'). Supply the chrome hero locally. Omit orbImage for the animated Skia orb, or supply local artwork to override it. level accepts a Reanimated shared value from 0 to 1.
Props
| Prop | Type | Default | Purpose |
|---|---|---|---|
assistantName | string | Vela AI | Header name. |
heroImage | ImageSourcePropType | Required | Chrome hero artwork. |
orbImage | DataSourceParam | Animated Skia orb | Optional local artwork override. |
onboarding | object | Built-in copy | Welcome title, subtitle, CTA, and sign-in line. |
premium | object | Built-in copy | Plan title, body, and CTA. |
actions | object | Built-in labels | Chat and talk action labels. |
history | { id, text }[] | Three sample rows | Recent conversation list. |
listening | object | Built-in copy | Listening title and hint. |
colors | object | Violet theme | Background, accent, and text colors. |
level | SharedValue<number> | undefined | Voice level from 0 to 1. |
onStart, onUpgrade, onClose | () => void | undefined | Primary flow callbacks. |
onHistoryPress | (id: string) => void | undefined | Selected history row callback. |
style, testID | RN props | undefined | Root customization and testing. |
Compatibility
Targets Expo SDK 58, React Native 0.88.0, Reanimated 4.7.1, and Skia 2.14.0. Supports iOS, Android, and web. Expo Go includes these modules. Local image assets are supplied by the consumer.
Accessibility
All controls expose button roles and descriptive labels. Reduced motion uses the same screen transitions with a short timing fade and disables the animated listening dots.
