Skip to content

component

World Map

By Iaroslav

Details

Summary

Animated World Map You can find more examples of customization in this demo Code component for visualizing global connections with animated curved paths.

Description

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.

Introduction

Global connections map component

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600166538/148/228/309/79/15
  • All · #2944