Skip to content
Native Animation
Dotted Globe Routes animation preview

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

npx nativeanimation add dotted-globe-routes
Skia

Dotted Globe Routes

A dotted route globe with animated flight paths and configurable destinations, title, gradient 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 dotted route globe with animated flight paths and configurable destinations, title, gradient colors, and fonts.

Why this one

Typical route globes are either a static illustration or a heavy map. This piece keeps the recognizable globe pattern but makes it portable: a deterministic land mask, a single UI-thread rotation value, one Skia point cloud, and a focused route rail create a premium travel moment without map tiles, images, or a component per dot.

How it works

  1. A compact lat/long grid is classified with a lightweight continent mask and projected orthographically in a Reanimated worklet.
  2. Skia Points draws ocean and land layers in one canvas, hiding the back hemisphere and softening the atmosphere at the edge.
  3. Six sampled great-circle paths rise by 12% of the radius at midpoint, draw in sequence, and clip their gradient strokes and traveling pulses behind the sphere.
  4. A horizontal destination rail springs the continuous globe rotation to the selected route; a pan adds decay before the idle turn resumes.
  5. Reduced Motion freezes rotation and pulse while retaining the route reveal and clear selected state.

Install

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

For web, follow the React Native Skia CanvasKit setup used by your Expo app before mounting Skia content.

Usage

<DottedGlobeRoutes />
<DottedGlobeRoutes
  accentStart="#38BDF8"
  accentEnd="#1D4ED8"
  title="42 destinations"
  onDestinationChange={(index) => trackRoute(index)}
/>

Props

PropTypeDefaultDescription
destinationsreadonly DottedGlobeRoute[]DESTINATIONSDestinations connected from the home airport.
titlestring'42 destinations'Main heading shown below the globe.
statsreadonly string[]['6 routes', '42 destinations', '118 weekly flights']Three compact network facts shown below the heading.
backgroundColorstring'#04070F'Background color.
accentStartstring'#0EA5E9'The first brand gradient stop.
accentEndstring'#1E3A8A'The second brand gradient stop.
fontFamilystringundefinedTypeface for body labels.
monoFontFamilystringundefinedTypeface for airport codes.
titleFontFamilystringundefinedTypeface for the editorial heading.
onDestinationChange(index: number) => voidundefinedCalled when a destination receives focus.
styleStyleProp<ViewStyle>undefinedStyle for the outer component.
testIDstringundefinedTest identifier for the outer component.
durationnumber26000Globe rotation cycle in milliseconds. Spring physics and reduced-motion timing are unchanged.

Compatibility

Built for Expo SDK 58, React Native 0.88.0, Reanimated 4.7.1, Worklets 0.13.0, and Skia 2.14.0. Supports iOS, Android, and web. Expo Go includes the required modules in this project; another project may need a development build for Skia.

Accessibility

Every destination card is a labeled button with selected state and a 44-point minimum touch area. Pan is complemented by direct card taps. With reduced motion, the globe stays fixed and route pulses stop while the destination selection remains visible.

More animations