Skip to content
Native Animation
Gooey Dots Loader animation preview
LoaderSkia

Gooey Dots Loader

A warm, glossy planning loader where four real metaballs orbit, merge, complete a status list, and become the next action.

$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 gooey-dots-loader

About this animation

A warm, glossy planning loader where four real metaballs orbit, merge, complete a status list, and become the next action.

Why this one

Typical dot loaders only translate flat circles. This one treats the dots as a material: a blurred alpha threshold creates visible liquid necks, each mass keeps its own gradient and specular highlight, status icons draw into checks, and the final merge grows into the primary action. Reduced Motion replaces the orbit with a restrained progress line without losing the sequence's meaning.

How it works

  1. The component measures its container and sizes the liquid scene from the available width.
  2. A frame clock drives a perfectly periodic 3.2-second orbit and never resets, so every drop has the same position and shape at t and t + period.
  3. A separate normalized Reanimated progress value drives the nine-second product timeline: step changes, final convergence, and action reveal.
  4. Skia draws all four colored circles into one offscreen layer, then applies blur and an alpha-threshold ColorMatrix to create genuine metaball bridges.
  5. Separate highlights preserve the glossy volume after the liquid layer is composited.
  6. Replay reverses the final morph with a spring, fades the completed checklist into its opening state, and leaves the orbit clock untouched.
  7. Each Lucide status icon crossfades into a progressively drawn check as its step completes.

Icons: Lucide (ISC).

Install

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

On web, configure CanvasKit using Expo's React Native Skia guide before rendering the component.

Usage

import GooeyDotsLoader from './GooeyDotsLoader';

export function PlanScreen() {
  return <GooeyDotsLoader onActionPress={() => openPlan()} />;
}

Customize the liquid palette, copy, and timing:

import { useRef } from 'react';
import GooeyDotsLoader, { type GooeyDotsLoaderRef } from './GooeyDotsLoader';

export function CustomPlanLoader() {
  const loaderRef = useRef<GooeyDotsLoaderRef>(null);

  return (
    <GooeyDotsLoader
      ref={loaderRef}
      colors={['#FF7A9E', '#9B8AFB', '#4EB5FF', '#FFC857']}
      duration={8000}
      steps={[
        'Reading your preferences',
        'Balancing your schedule',
        'Choosing daily goals',
        'Preparing your plan',
      ]}
      actionLabel="Open my plan"
    />
  );
}

The forwarded ref exposes start() and reset(). Calling start() during or after a run performs the seamless return transition before beginning again.

Props

PropTypeDefaultDescription
stepsFour-string tuplePlan-building stepsStatus labels shown below the liquid scene.
colorsFour-color tuplePink, violet, blue, amberMain color of each drop.
durationnumber9000Full sequence duration in milliseconds.
actionLabelstring'See my plan'Label shown after the final merge.
autoStartbooleantrueStarts playback after mount.
fontFamilystringSystemFont used for steps and the action.
onComplete() => void—Runs after the final transformation settles.
onActionPress() => void—Runs before tapping the action restarts playback.
accessibilityLabelstring'Building your plan'Screen-reader label for the sequence.
styleStyleProp<ViewStyle>—Outer-container styling.
testIDstring—Test identifier for the outer container.

Compatibility

  • Expo SDK 57
  • React Native 0.86
  • Reanimated 4.5 and Worklets 0.10
  • React Native Skia 2.6
  • iOS: supported, not yet verified on a device
  • Android: supported, not yet verified on a device
  • Web: supported, pending visual verification
  • Expo Go: supported because all native dependencies are included in the SDK runtime

Accessibility

The sequence exposes a labeled progressbar and the final action is a 56-point labeled button. With Reduce Motion enabled, the orbit and spatial status transitions are removed; a thin progress bar communicates timing while steps update without translation. Tapping the final action or calling start() provides a replay path.

More animations