Globe

Composition

A rotating globe built from thousands of glowing points over a faint wire core.

Tip: pick a preset, use the custom picker, or paste your brand hex to preview this element in your colors. Some elements use a fixed multi-color palette.

Usage

Install: three @react-three/fiber @react-three/drei

Drop <Globe /> inside your own <Canvas>.

Mood: Connected, technical, planetary. A data globe from a network dashboard.
Colors: A cyan dot surface on dark that glows softly under bloom.
Motion: The dotted globe rotates slowly and steadily on its axis.

View component source

import { useMemo, useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import type { Group } from 'three';

// Even point distribution on a sphere (Fibonacci lattice).
function fibonacciSphere(n: number, radius: number) {
  const arr = new Float32Array(n * 3);
  const phi = Math.PI * (3 - Math.sqrt(5));
  for (let i = 0; i < n; i++) {
    const y = 1 - (i / (n - 1)) * 2;
    const r = Math.sqrt(1 - y * y);
    const theta = phi * i;
    arr[i * 3] = Math.cos(theta) * r * radius;
    arr[i * 3 + 1] = y * radius;
    arr[i * 3 + 2] = Math.sin(theta) * r * radius;
  }
  return arr;
}

export default function Globe({ color = '#22e0ff', scale = 1 }: { color?: string; scale?: number }) {
  const core = useRef<Group>(null);
  const points = useMemo(() => fibonacciSphere(2800, 1), []);

  useFrame((_, dt) => {
    if (core.current) core.current.rotation.y += dt * 0.15;
  });

  return (
    <group ref={core} scale={scale}>
      <points>
        <bufferGeometry>
          <bufferAttribute attach="attributes-position" args={[points, 3]} />
        </bufferGeometry>
        <pointsMaterial color={color} size={0.022} sizeAttenuation transparent opacity={0.9} toneMapped={false} />
      </points>
      <mesh>
        <sphereGeometry args={[0.97, 28, 28]} />
        <meshBasicMaterial color={color} wireframe transparent opacity={0.05} toneMapped={false} />
      </mesh>
    </group>
  );
}