Skip to content
Native Animation
Lightline Orb Search animation preview

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

npx nativeanimation add lightline-orb-search
Glass

Lightline Orb Search

An orb-led search-to-answer transition with configurable result content, greeting, orb colors, and font.

$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

An orb-led search-to-answer transition with configurable result content, greeting, orb colors, and font.

Why this one

Lightline gives a search assistant a tactile center: thin luminous paths rotate above a low blue horizon, then the answer gathers into one translucent reading surface. The query is real user input, while the response remains caller supplied and reusable.

How it works

  1. Draw seven layered closed light paths in a single Skia canvas.
  2. Let a pan gesture add directional rotation and settling inertia.
  3. Accept a query through a native TextInput or the imperative ask method.
  4. Reveal the response and transform the screen into a rounded glass card.
  5. Supply response text, imagery, colors, and callbacks from the host app.

Install

Copy this folder into your project, excluding demo/.

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

Expo SDK 58 compatible versions: Skia 2.14.0, expo-blur ~58.0.5, expo-image ~58.0.17, expo-linear-gradient ~58.0.3, Gesture Handler ~3.3.0, Reanimated 4.7.1.

Usage

import LightlineOrbSearch, { type LightlineOrbSearchRef } from './lightline-orb-search';
import { useRef } from 'react';

const assistant = useRef<LightlineOrbSearchRef>(null);

<LightlineOrbSearch
  ref={assistant}
  result={{ intro: 'A short overview.', sections: [{ title: 'A place', body: 'A useful detail.' }], images: [] }}
/>;

assistant.current?.ask('Where should I go?');

Set fontFamily to your interface font and pass local image sources in result.images. Use colors to adapt the full background and orb palette.

Props

PropTypeDefaultDescription
userNamestringAlexGreeting name.
greetingstringHelloGreeting prefix.
questionstringAsk anything...Input placeholder.
answerTitlestring[]Great! / Here is what / I foundThree-line answer reveal.
resultLightlineResultRequiredIntro, sections, and image sources.
colors{ glow, ribbon, core, background }Blue on near-blackComplete palette overrides.
fontFamilystringSystemInterface typeface.
onSubmit(query: string) => void—Submitted query callback.
onResultClose() => void—Result dismissal callback.
styleStyleProp<ViewStyle>—Root container style.
testIDstringlightline-orb-searchRoot test identifier.

The forwarded ref exposes ask(text) and reset(). ask types the query at 45 ms per character with a blinking cursor, then submits it; keyboard and button submission use the text already entered. onSubmit fires when submission starts, after the typing preview.

On submission, the greeting and prompt rise 20 pt and fully fade out while a mass-1 spring contracts the input into a searching pill with wave dots. The answer starts 1.2 seconds later, revealing each line from blur with a 12 pt rise and 120 ms spacing. At 3 seconds, one contraction progress controls scene margins, corner radius, background blur, orb scale, and the fading light ring. The user bubble and photos arrive from the right on mass-1 springs; answer paragraphs follow at 60 ms intervals. The result dissolves upward on reset, and the orb grows back from a light point. Non-spring transitions use the (0.2, 0.8, 0.2, 1) Bezier curve.

Typing timers are canceled when the user edits or focuses the input. The demo stops scheduling autoplay when touched. Reduced motion shows the complete query immediately and uses 200 ms fades without travel, rings, or blur.

Compatibility

Targets iOS, Android, and web with Expo SDK 58, React Native 0.88.0, Reanimated 4.7.1, and Skia 2.14.0.

Accessibility

The search field has an accessible label, and the send and new-question controls have button roles and labels. Reduced motion uses shorter fades and holds the orb still. Dragging is an optional enhancement; text entry and button submission remain available.

More animations