Globe Pins: Free Sections Component by Sabo Sugi

How to use: Click to button "Copy Component" and paste (Cmd+V) to Framer section (Stack) on your website.

A lightweight Three.js globe that renders countries as shimmering point clouds and lets you place labeled “pins” anywhere on Earth. Designed for Framer, it balances visual polish with strict GPU/CPU budgeting, so it feels smooth in both the canvas and on published sites.

🌎 Where You Can Use

Store/office locator: highlight your locations with rich labels.
Global footprint / client map: show presence, partners, shipments.
Data storytelling: keynote slides and hero sections with subtle motion.
Landing pages: ambient, low-distraction background with interactive points.
Event sites: visualize attendees, venues, or tour stops.
Dashboards: at-a-glance geographic status without heavy tile maps.

💎 Key Features

Auto-rotate the globe and control speed.
Zoom & orbit (optional) with inertia.
Country rendering as edge + fill point layers (color, size, density, opacity).
Pins with labels: name, address, phone; glowing dot + halo.
Styling: label color, background, border, opacity; pin dot color.
Typography: pick a font family and label size.

You can find LON/LAT coordinates on www.latlong.net