Dot Map

A dotted world map lights up city by city while a counter rises to its final value.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { DotMap } from "@/components/remocn/dot-map";
 
const DotMapScene = () => <DotMap count={142} label="countries" />;
 
export const RemotionRoot = () => (
  <Composition
    id="DotMap"
    component={DotMapScene}
    durationInFrames={135}
    fps={30}
    width={1280}
    height={720}
  />
);

A dotted world map fades in and cities light up from west to east, each with a ripple ring, while the count rises with them to its final value and a label sits beneath. Pass count, label and cities as { lon, lat } points. It ships light and dark through theme.

Props6

Prop	Type	Default
count	number142 Final number shown once every city is lit.
label	string"countries" Word shown beside the count.
cities	DotMapCity[]DEFAULT_CITIES Points that light up, each with lon and lat.
accent	string"#3B5BFD" Color of the ripple rings.
theme	"dark" \| "light""dark" Light or dark palette.
speed	number1 Playback speed multiplier.

countnumber
Final number shown once every city is lit.
Default142
labelstring
Word shown beside the count.
Default"countries"
citiesDotMapCity[]
Points that light up, each with lon and lat.
DefaultDEFAULT_CITIES
accentstring
Color of the ripple rings.
Default"#3B5BFD"
theme"dark" | "light"
Light or dark palette.
Default"dark"
speednumber
Playback speed multiplier.
Default1