Globe

1"use client";
2 
3import createGlobe, { type COBEOptions } from "cobe";
4import * as React from "react";
5 
6export type GlobeProps = React.HTMLAttributes<HTMLDivElement> & {
7  /** Override any cobe option (markers, colors, glow, etc.). */
8  config?: Partial<COBEOptions>;
9};
10 
11const DEFAULT_CONFIG: COBEOptions = {
12  width: 800,
13  height: 800,
14  devicePixelRatio: 2,
15  phi: 0,
16  theta: 0.3,
17  dark: 0,
18  diffuse: 0.4,
19  mapSamples: 16000,
20  mapBrightness: 1.2,
21  baseColor: [1, 1, 1],
22  markerColor: [0.23, 0.51, 0.96],
23  glowColor: [1, 1, 1],
24  markers: [
25    { location: [37.7595, -122.4367], size: 0.05 },
26    { location: [40.7128, -74.006], size: 0.08 },
27    { location: [51.5074, -0.1278], size: 0.06 },
28    { location: [35.6762, 139.6503], size: 0.07 },
29    { location: [-23.5505, -46.6333], size: 0.06 },
30    { location: [1.3521, 103.8198], size: 0.05 },
31  ],
32};
33 
34const Globe = React.forwardRef<HTMLDivElement, GlobeProps>(
35  ({ config, className, style, ...props }, forwardedRef) => {
36    const wrapRef = React.useRef<HTMLDivElement>(null);
37    React.useImperativeHandle(
38      forwardedRef,
39      () => wrapRef.current as HTMLDivElement,
40    );
41    const canvasRef = React.useRef<HTMLCanvasElement>(null);
42 
43    const phiRef = React.useRef(0);
44    const widthRef = React.useRef(0);
45    const pointerInteracting = React.useRef<number | null>(null);
46    const pointerMovement = React.useRef(0);
47 
48    React.useEffect(() => {
49      const canvas = canvasRef.current;
50      const wrap = wrapRef.current;
51      if (!canvas || !wrap) return;
52 
53      const onResize = () => {
54        widthRef.current = wrap.offsetWidth;
55      };
56      window.addEventListener("resize", onResize);
57      onResize();
58 
59      const merged: COBEOptions = {
60        ...DEFAULT_CONFIG,
61        ...config,
62        width: widthRef.current * 2,
63        height: widthRef.current * 2,
64      };
65 
66      const globe = createGlobe(canvas, merged);
67      let raf = 0;
68      // Honor reduced motion — hold the globe still instead of auto-rotating.
69      const reduceMotion = window.matchMedia(
70        "(prefers-reduced-motion: reduce)",
71      ).matches;
72      // Auto-rotate while idle; hand control to the pointer on drag.
73      const tick = () => {
74        if (pointerInteracting.current === null && !reduceMotion)
75          phiRef.current += 0.005;
76        globe.update({
77          phi: phiRef.current + pointerMovement.current / 200,
78          width: widthRef.current * 2,
79          height: widthRef.current * 2,
80        });
81// … truncated