World Map Component for Framer

Animated World Map

Preview

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), Anim Type (sequential/simultaneous), Loop, Speed, Delay, Line Width, Dot/Pulse Radius, Map Dot Size, Colors (per theme).