Globe Points 3d
Lit sphere with instanced city markers and arcs rising between them, turning slowly under a rim light. Install with npx remotion-ui@latest add globe-points-3d.
Scene3DAdvanced
$ npx remotion-ui@latest add globe-points-3dLit sphere with instanced city markers and arcs rising between them, turning slowly under a rim light. The real-3D counterpart to the flat globe-arc projection, with genuine occlusion as markers pass behind the horizon.
Install the map data
The dot matrix is cut from real coastlines, so it needs a GeoJSON land file.
add globe-points-3d copies the component but not the data — download
land-110m.json (Natural Earth 1:110m,
public domain, 75 KB) into your public/geo/, or point landUrl at any GeoJSON
FeatureCollection, Feature or MultiPolygon of land in lng/lat degrees.
Without it the render stops with an actionable error rather than quietly drawing a bare blue ball.
Usage
import { GlobePoints3d } from "@/remotion/scenes/globe-points-3d";
<GlobePoints3d />
// Your own polygons:
<GlobePoints3d landUrl={staticFile("geo/my-land.json")} />Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/globe-points-3d- Use when: 3D product shots and WebGL scenes rendered frame by frame.
- Customize: delayInFrames, durationInFrames, 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 { GlobePoints3d } from "@/remotion/scenes/globe-points-3d";
<GlobePoints3d />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| delayInFrames | number | 0 | Frames to wait before this starts. |
| durationInFrames | number | 30 | Length of the entrance. |