Dotted Globe

"use client";

// A slowly turning globe drawn as dots of land, with arcs of light flying
// between cities. Drag to spin it; it coasts and settles back to its own pace.
// Drawn on a 2D canvas (no WebGL), sleeps while off screen, and holds still
// for reduced motion.

import { useEffect, useRef, useState, type RefObject } from "react";
import { cn } from "@/lib/utils";

// Generated from Natural Earth (land-50m, public domain): one bit per point of a
// 16000-point Fibonacci sphere, set when that point is on land. Point i sits at
// latitude asin(1 - (2i + 1) / 16000) and longitude i × the golden angle.
const LAND_POINTS = 16000;

const LAND = "AAAAAAAAABAAQkJIAAhLIQMkJIWEhIAEEBJCAkDAAZk6IQNgYAAMhJAjMjJADsTYgRk5MkNi7sjMGplpMfEtZv3Mpr3WNvf6Sttf+ztff+Xt//2Vt7/+9t732tv5/ztvf+ft/P+dt/v2Vv7+ylv5eztv9++tvN21s/L3Vsbu31t5Oysn5e+snJ2Xk3J3VmbOzUm5OSMr5+ak7JyR03JzRn7OzUmZOSMv5+aE7Jy70zNzQn7OzInZOTG3Z+bE/Jyb03NzRm7Pzen5OTU35+bk3J6b03NzSm7Ozcm5OTW35+bU3Jybk3Nzak7Ozek5OTWn5+b0nJyb03Nzam7Pyak5OTW35+bUnJybU3Nyam7Ozam5OTWn4+bUnJybUXNyakbGzak5OTGj5ubUnIybUXNyakbNzeg5OTOj5uTEjIqRkXN6akbFyYgZNSOj5+TEjIqREXNqTk7FyYkZNScmZtSEnIqTE3NqRkzMyYk5FSMmZtSEmIiRE3NqRkzOiQk5FSMmZtSUmJyTE3NqRk7MqAk5ESOmZtSEjJ6RUzJiRkzNiAkZPSOmZuSEmJoREzJqRkzN6AkZNSOmZNSEmJoREzJqRkzJ6Ak5NSOmZNSEmJLRUzJqTkzJqAk5JaemZNSEmJJRU3JqTkzJqSkxJaem5NSUmJJTUnJqSk3JKSkxJaem5JSUmJJTUGJKSknJKSkxJaek9NSUkpJTUGJKSknJKSklJaekxFSckpJTUGpKSknJKCglJaekxBSUkpJTUEoKSkmJKCklBaek1BSckgJTUEoKSkmpKCklBaeklBSckgJTUkoKSkmpKCklBaamlBSUkkJTUkoKSEmpoSElBaaklBSQmkJBUkoKTEmhKSA1BYaElFSQkkJBQEoqDAkpISA1hYaklBSQkkJBQGoqDAmpKSAlhYaA1BQQklJBQGoKCgGpKSAkhYaA1BQQglJBQEoKCwGpISAEhYKA1BQUglJCQGgKCQGpKSAUhYCA0BQWglpCQCgKCQGpKSAEpYCAUBQWAlJCQCgKSQEhICAEpYCAUBQSAlJQQAgKCQEhICQEpICAUBQSAkJAQQgKCQUhISQEpISCUBQSAkJCQQhoCQUhoCwEhISCUFASCkJCQShICQUhqCwEpISCUFASCkJAUQgICQUhoCwUpISCEFASCkJAUQgICQUhoCQUhICCEFASCkJAUSgoSQUBoCQUlYCCEFASigJAQSgoQAUBoCQVFYCCAFAQCgJAQSgqQAUBoCAVFICCUFQACgJAQSgqAAUBqAAVBICCQFQACgJAQagqAAWBqAAVBICiUFQACgJRASgoAAWBqAAVBKACUFQACgJRASoqAEWgqAAVBKICUFAACgJRESooAAWgqAAVFKICUFAACoBRASooBAWgoAgVFKIiVFCECkhRESooBgWkoAgUEIICUFQMCkhBESooBgXkqAgUEIICUFQMCkhBESogBkWkoAgUEIICUFAMCkhBESogBkWkoAgUEIICUECMCkhBESogBAWgoAgVkIIiUECICkhBESggRAWgoBAUkIICUEAMCkBBASggBAWggBAUkKICUEAICkBBASggBAWggBAUgIICUEAICkBBASggBQWggBAUgIIiUEAICkABASgCBQWggBAUgYICUAQKCkABISgKBUWgiBAUgIICUAQKCkARISgABUWgiBQUgCICUBQKCkARISgCBUWgKBQUgCIDUAQKikBRCSgCRUSgKBQUgCICcASKiEBRCCgCRQSgKBQQgaICUASKiEBRKCgCRQSgCBQRgaIQUASKiEBRKCICRUSgCBQRgaIQVASKiEARKCICRQGoCBQRgaJQRASKiFARKCICRQGoCBQRoSJQRASKglARKCICRaGoCBQBoSJQRASKglARKAICReCICBQBoSJQBASKgBARKAJCRaAICBQBoSJQBASKgBERKAJCRaAICBQBISJQBASKQBERKAJCRaAICBQBIyJQBASKQBEQKAJCRKAICBQBIyBQBISKQBEQKAJGQKAICBQBIiBQBISIQBEQKAJGQKAICBABIiBQAISAQAEQIABEQKAACBGBIiAQAIiAQAEQIAAEQIAACAGAAiAAAAiAAAEQAAAEQIAAEAAAAiAAAAiAAAEQAAAEQIAAEAAAAiAAAAiEAAEgAAAEQgAAEAAAAgAAAAgEAAAgAAAEAAAAEAAAAEAAAAgAAAAgAAAEAAAAEAgAAEAAAACAAAAgEAAAgAAAEAAAAEAgAACAAAAgAAAAgEAAAAAAAEAAAAAAgQAgAAAAgAAAAAAAAEAAAAAAgQAAAAAAgAAAAAAAAEAAAAAAAQAAAAAAgAAAAAACAAAAAAAAAQAAAAAAgAAAAAACAAAAAAAAAQAAAAQAAAAAAAACAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAIASkRICCghISUgpISUgJASUlJCSkZJCSk9paWntLSWntPSWlpKS+9pKT0/p6f1/JSf3/N7fl7P7/v5Pb//9/X8vN6f//N7fn/v7/v9//////8=";

export type GlobeMarker = { lat: number; lon: number };

export type DottedGlobeProps = {
  /** Cities the arcs fly between. */
  markers?: readonly GlobeMarker[];
  /** Turn speed in degrees per second. */
  speed?: number;