Route Globe

Component 13

About

An animated dotted-globe canvas showing flight routes arcing from a hub city to several destinations, with comet animations along each great circle and drag-to-spin rotation.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Route Globe to your project and fits it to your theme.

Code

How Route Globe is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { RouteGlobe, type GlobeTheme } from "@/components/ui/route-globe";

const NIGHT: GlobeTheme = {
  ground: "#06080d",
  land: "#9fb4d6",
  arc: "#ffb547",
  glow: "rgb(90 140 255 / 0.18)",
  text: "#eef2fb",
  muted: "#7c8aa5",
};

export default function Demo() {
  return (
    <div
      className="relative h-screen min-h-full w-full"
      style={{ background: NIGHT.ground, color: NIGHT.text }}
    >
      <RouteGlobe theme={NIGHT} className="!absolute inset-0" />
      <div className="pointer-events-none absolute left-6 top-6">
        <p
          className="font-mono text-[11px] uppercase tracking-[0.16em]"
          style={{ color: NIGHT.muted }}
        >
          From Muscat · 10 routes
        </p>
        <p className="mt-2 text-[1.5rem] font-semibold tracking-[-0.02em]">
          Where we fly this winter
        </p>
      </div>
    </div>
  );
}