Dot Globe

A dotted globe spins while arcs fly between cities and a counter ticks up with each landing.

Installation

$ pnpm dlx shadcn@latest add @remocn/dot-globe

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { DotGlobe } from "@/components/remocn/dot-globe";
 
const DotGlobeScene = () => <DotGlobe count={142} prefix="Live in" suffix="countries" />;
 
export const RemotionRoot = () => (
  <Composition
    id="DotGlobe"
    component={DotGlobeScene}
    durationInFrames={210}
    fps={30}
    width={1280}
    height={720}
  />
);

A dotted globe fades in and keeps rotating while accent arcs lift off one city and land on another along great circles; each landing pulses a ring, drops a labeled pin and ticks the counter up by one, ending on the final count in big type. Pass count, prefix, suffix and routes (pairs of { name, lat, lon } cities). It ships light and dark through theme.

Props7

Prop	Type	Default
count	number142 Final counter value; it ticks up once per landed route.
prefix	string"Live in" Text before the counter.
suffix	string"countries" Text after the counter.
routes	GlobeRoute[]DEFAULT_ROUTES Arcs to draw; each has a from city and a to city with name, lat and lon.
accent	string"#3B5BFD" Color of the arcs, pins and rings.
speed	number1 Playback multiplier.
theme	"dark" \| "light""dark" Light or dark palette.

countnumber
Final counter value; it ticks up once per landed route.
Default142
prefixstring
Text before the counter.
Default"Live in"
suffixstring
Text after the counter.
Default"countries"
routesGlobeRoute[]
Arcs to draw; each has a from city and a to city with name, lat and lon.
DefaultDEFAULT_ROUTES
accentstring
Color of the arcs, pins and rings.
Default"#3B5BFD"
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"