DottedWorldMap

Interactive dotted world map background

Details Dotted World Map is a Framer code component that renders a geographically accurate world map as a soft dot grid on a dark background. Continent boundaries are derived from real world topology data, so every shape is precise — not hand-drawn or approximated. Hovering a continent fades its dots up smoothly and sends a quiet ripple wave across the landmass. All transitions use linear interpolation for a calm, flicker-free feel. The animation is intentionally subtle — it adds life without distracting from your content. What's included: Single .tsx file, paste-and-use in Framer 6 property controls: dot spacing, dot size, background color, base opacity, hover opacity, ripple duration Works as a full-page background or section background Dark navy default — pairs well with light-colored text layers on top

Interactive dotted world map background