What we built
Most data visualisation tools give you a flat map and call it a day. We wanted something that felt alive a globe that rotates, reacts to interaction, and carries weight without needing a massive library. So we built one from scratch using React Three Fiber.
The core idea
A globe is just a sphere with dots on the surface. The trick is making those dots feel physical. We use a Fibonacci lattice to distribute ~2,000 points evenly across the surface no clustering at the poles, no visible seams. Each dot is a small instanced mesh, which means one draw call for the entire surface. On top of that, a Fresnel shader handles the rim glow. The equation is simple: the more a surface faces away from the camera, the more it glows. That one effect is responsible for 90% of the "premium" feel.
// Fibonacci lattice — even dot distribution with no polar clustering
function fibonacciSphere(count: number, radius: number) {
const points: THREE.Vector3[] = [];
const phi = Math.PI * (3 - Math.sqrt(5)); // golden angle
for (let i = 0; i < count; i++) {
const y = 1 - (i / (count - 1)) * 2;
const r = Math.sqrt(1 - y * y);
const theta = phi * i;
points.push(
new THREE.Vector3(
Math.cos(theta) * r * radius,
y * radius,
Math.sin(theta) * r * radius
)
);
}
return points;
}Dropping it into your project
The component takes three props you'll actually use. Everything else has sensible defaults so you can be up and running in two lines.
import Globe from "@/components/blitcore/Globe";
// Two lines. Done.
<Globe />
// With location markers
<Globe
markers={[
{ lat: 51.5, lng: -0.1, label: "London" },
{ lat: 40.7, lng: -74.0, label: "New York" },
{ lat: 6.5, lng: 3.4, label: "Lagos" },
]}
autoRotate
autoRotateSpeed={0.4}
/>What's next
We're working on a version with animated arc lines between markers — the kind you see on flight tracking dashboards. The maths is straightforward (great-circle interpolation), the hard part is making the arcs fade in smoothly without a separate shader. The Globe is available now in the Blitcore component library. Free tier, copy-paste ready.
Built by the BlitCore team. Questions or integration help — reach us at info@blitcore.com.