DottedWorldMap

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