Journey Map

Animate global routes on a map.

AboutJourneyMap brings high-end geospatial visualization to your Framer projects. Designed for brands with a global footprint, this component allows you to draw animated paths across a world map, highlighting your international presence, shipping routes, or office locations with smooth, professional motion.

What it doesRenders a fully customizable SVG world map with animated routes connecting global points. It handles complex path drawing with adjustable "glow" effects and directional arrows to show movement. The component supports custom markers with pulsing animations to draw attention to specific hubs and includes a stylized title overlay that integrates perfectly into hero sections or "About Us" pages.

What you can customize

• Map Styling: Change colors for Land, Ocean, Borders, and Grid. Toggle custom country highlights, upload custom map images, and adjust opacity.
• Route Animation: Control route width, glow intensity, and duration. Add directional arrows and set animation loops with custom delays.
• Markers & Labels: Customize marker size, ring colors, and pulsing effects. Style location labels with custom fonts (like Inter), colors, and padding.
• Title Overlay: Full control over the floating title’s text, alignment, background opacity, and typography (Montserrat support included).

Great for

• Logistics & Supply Chain websites
• SaaS "Global Infrastructure" sections
• Agency "Clients Worldwide" maps
• Travel & Tourism itineraries
• Contact pages with multiple office locations

Share your buildIf you ship something cool with it, post it on X and tag me @Dulajweb, or send it over. I’d love to see what you create.

Need help?Questions or feedback? Reach me anytime: [email protected] or on X @Dulajweb