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.

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.