Live Preview: https://worldmaparc.framer.website/
About Component
WorldMapArc is an animated route map component for Framer. Drop in a set of city pairs and watch curved arcs draw across the globe with animated pins and hover cards revealing route data. Includes 7 color presets, two pin styles and a live demo panel. Built for dashboards, SaaS landing pages and data-driven storytelling.
What's Included
Animated route arcs — quadratic Bézier curves draw between any two coordinates with smooth easing
Bracket & glow pins — choose a tactical corner-bracket marker or a soft radial glow for each endpoint
Hover cards — mouse over any pin to reveal a card with route title, key metric and detail line
7 color presets — Navy, Midnight, Teal, Forest, Rose, Snow and Onyx, plus a fully custom mode
Dots & flat map — render land as a dot-grid or a solid fill with a single toggle
Sequential & all-at-once animation — arcs can draw one after another or all simultaneously
Loop mode — animation replays automatically with a configurable delay
6 default routes — real city pairs with metrics included so it works on first drop
Use Cases
SaaS dashboards showing active connections, data flows or delivery routes
Agency and portfolio sites visualising global client reach
Logistics and supply-chain landing pages mapping shipping lanes
Fintech platforms displaying cross-border transaction corridors
Travel and airline products illustrating route networks
Annual reports and data stories with animated geographic context
Keywords
world map, animated map, route map, arc map, framer map component, interactive map, SVG map, flight map, route visualization, data map, animated arcs, world map framer, map component, framer component, dashboard map, connection map, route arcs, animated routes, city connections, global map
Live Preview: https://worldmaparc.framer.website/
About Component
WorldMapArc is an animated route map component for Framer. Drop in a set of city pairs and watch curved arcs draw across the globe with animated pins and hover cards revealing route data. Includes 7 color presets, two pin styles and a live demo panel. Built for dashboards, SaaS landing pages and data-driven storytelling.
What's Included
Animated route arcs — quadratic Bézier curves draw between any two coordinates with smooth easing
Bracket & glow pins — choose a tactical corner-bracket marker or a soft radial glow for each endpoint
Hover cards — mouse over any pin to reveal a card with route title, key metric and detail line
7 color presets — Navy, Midnight, Teal, Forest, Rose, Snow and Onyx, plus a fully custom mode
Dots & flat map — render land as a dot-grid or a solid fill with a single toggle
Sequential & all-at-once animation — arcs can draw one after another or all simultaneously
Loop mode — animation replays automatically with a configurable delay
6 default routes — real city pairs with metrics included so it works on first drop
Use Cases
SaaS dashboards showing active connections, data flows or delivery routes
Agency and portfolio sites visualising global client reach
Logistics and supply-chain landing pages mapping shipping lanes
Fintech platforms displaying cross-border transaction corridors
Travel and airline products illustrating route networks
Annual reports and data stories with animated geographic context
Keywords
world map, animated map, route map, arc map, framer map component, interactive map, SVG map, flight map, route visualization, data map, animated arcs, world map framer, map component, framer component, dashboard map, connection map, route arcs, animated routes, city connections, global map
