Liquid Orb Loader

A two-color fluid loader that continuously swirls, then settles into a softly drawn completion mark.

How it works

1. The component measures its own container with onLayout, positioning every layer as a fraction of that local width and height.
2. A five-octave value-noise shader applies two levels of domain warping, producing broad, continuous patches instead of hard bands.
3. A useFrameCallback clock updates on the UI thread. One done shared value simultaneously slows the clock and blends the fluid toward a calm gradient.
4. The orb is clipped to an antialiased Skia circle, while a separate blurred circle creates the breathing halo and a radial gradient adds the highlight.
5. Completion springs the orb smaller, crossfades the status copy, and trims a rounded Skia path from end={0} to end={1}.

Install

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

On web, copy CanvasKit into the public directory and load it before mounting the component:

npx setup-skia-web public

import { LoadSkiaWeb } from '@shopify/react-native-skia/lib/module/web';

await LoadSkiaWeb({ locateFile: () => '/canvaskit.wasm' });

Usage

import LiquidOrbLoader from './LiquidOrbLoader';

export function LoadingScreen() {
  return <LiquidOrbLoader />;
}

Use a palette and the imperative controls to adapt the pattern:

import { useRef } from 'react';
import LiquidOrbLoader, {
  ORB_PALETTES,
  type LiquidOrbLoaderRef,
} from './LiquidOrbLoader';

export function LoadingScreen() {
  const loaderRef = useRef<LiquidOrbLoaderRef>(null);

  return (
    <LiquidOrbLoader
      ref={loaderRef}
      colors={ORB_PALETTES.lagoon}
      label="Preparing your workspace"
      completeLabel="Ready"
      badge="SYNC"
      speed={0.85}
      turbulence={1.2}
      size={0.5}
      onCompleteAnimationEnd={() => continueToWorkspace()}
    />
  );
}

The forwarded ref exposes complete() and reset().

Props

Compatibility

• Expo SDK 57
• React Native 0.86
• Reanimated 4.5
• React Native Skia 2.6
• iOS: supported, not yet verified on a device
• Android: supported, not yet verified on a device
• Web: verified
• Works in Expo Go because Skia, Reanimated, and Worklets are included in the SDK

Accessibility

The component exposes a labeled progress bar and reports whether it is busy. With reduced motion enabled, the fluid stays on a fixed frame, the halo stops breathing, and the completion mark fades in instead of drawing along its path.