Globe Arc
Great-circle arcs drawing between cities on a slowly spinning globe.
PrimitiveMaps & deviceAdvanced
$ npx remotion-ui@latest add globe-arcThe globe is projected arithmetically — orthographic, the way a sphere looks
from far away — rather than drawn from map tiles. There is no network
dependency and no delayRender: every frame is a pure function of its own
number, which is what a render farm wants and what a spinning globe made of
tiles cannot give you.
Arcs are great circles, sampled and clipped to the front hemisphere. The clipping is the part that matters: without a visibility test, points on the far side project onto the near side and routes fold back across the disc, which is the single thing that makes a hand-rolled globe look wrong. A route that leaves the front hemisphere breaks its path and picks up again where it returns.
Each route draws in turn, with a head dot riding the line while it grows. The origin's label exists from the first frame and the destination's only once the arc has landed, so a label never precedes its route.
spinPerSecond and tilt set the camera. Keep the spin slow — 10 to 20 degrees
a second reads as a globe; faster reads as a loading spinner.
For real geography with coastlines and place names, use map-flight, which
flies a MapLibre camera along the route instead.
Projected arithmetically rather than drawn from tiles, so there is no network dependency and no delayRender — every frame is a pure function of its number. Arcs are great circles clipped to the front hemisphere: without the visibility test, far-side points project onto the near side and routes fold across the disc, which is what makes a hand-rolled globe look wrong. For real coastlines and place names, use map-flight.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/globe-arc- Use when: map scenes, routes, markers, and spatial storytelling.
- Customize: routes, size, spinPerSecond, startLongitude, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { GlobeArc } from "@/remotion/primitives/globe-arc";
<GlobeArc
size={380}
routes={[
{ from: { lng: -74, lat: 40.7, label: "NYC" }, to: { lng: -0.1, lat: 51.5, label: "London" } },
]}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| routes | GlobeArcRoute[] | 4 sample routes | from / to coordinates with optional labels, colour and its own delay. |
| size | number | 420 | Rendered size in pixels. |
| spinPerSecond | number | 14 | Degrees of longitude turned per second. Above ~20 it reads as a loading spinner. |
| startLongitude | number | -40 | Longitude facing the viewer at frame 0. |
| tilt | number | 18 | Camera latitude. Positive tilts the north pole toward you. |
| delayInFrames | number | 6 | Frames to wait before the first arc draws. |
| durationInFrames | number | 34 | Frames one arc takes to draw. |
| staggerInFrames | number | 16 | Frames between arcs, when a route sets no delay of its own. |
| sphereColor | string | "#0E1524" | Fill of the globe itself. |
| graticuleColor | string | "rgba(125,211,232,0.22)" | Meridians, parallels and the limb. |
| arcColor | string | "#E8B86D" | Default route colour. |
| cityColor | string | "#7DD3E8" | City dots and labels. |
| exitAtInFrames | number | - | Frame the globe starts leaving. Omit to leave it on screen. |
| exitInFrames | number | 16 | Frames the exit takes. |