World Map
A customizable world map with animated lines and dots.
Make it with Workshop
Build your own component with AI
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.
