World Map

Animated World Map

You can find more examples of customization in this demo

Code component for visualizing global connections with animated curved paths. Built on DottedMap + Framer Motion for smooth performance.

What you get:

• Dynamic route system — Add unlimited connection pairs via property controls (lat/lng input). No manual path drawing.

• Sequential or simultaneous animations — Lines draw one-by-one for storytelling, or all at once for impact.

• Theme-aware — Boolean toggle switches between light/dark color schemes. Map dots, background, and accent colors are independently configurable per theme.

• Loop control — Turn infinite repeat on/off without touching code.

• Pulsing markers — SVG-native animations for connection endpoints.

Good for:

SaaS landing pages (server locations), logistics dashboards, agency portfolios (office network), travel blogs, etc.

Config options:

Dark Mode (boolean), Routes (array of objects), Animation Type (sequential/simultaneous), Loop, Speed, Delay, Line Width, Dot/Pulse Radius, Map Dot Size, Colors per theme.