Animated world map component with curved route arcs, glowing pins, and hover cards. Supports dot & flat map styles, 7 color themes, sequential or simultaneous animations, bracket & glow pin styles. Fully customizable via Framer property controls.
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
Demo panel — floating control strip lets you switch style, type, animation, pin and dark mode live
6 default routes — real city pairs with metrics included so it works on first drop
localStorage cache — TopoJSON loads once and stays instant on every revisit
Fully responsive — scales to any container with preserved aspect ratio
How It Works
Each route is defined by a from/to latitude-longitude pair plus three card fields: a title, a value and a detail line. WorldMapArc projects coordinates onto a 960 × 540 Mercator canvas, builds a curved arc path and schedules CSS animations per route. When a visitor hovers a pin the component converts SVG coordinates to container space and positions a frosted-glass card nearby. The map data (110m TopoJSON, ~90 KB) is fetched once from a CDN and cached in localStorage so every subsequent load is instant.
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, framer template, logistics map, travel map, network map, framer widget, map visualization, animated SVG, dot map, world atlas, framer marketplace
Refund Policy
Due to the digital nature of this product, refunds are not available. Please review the product details before purchasing. If you have any questions, feel free to contact me before placing your order.
Ahmet Loca
