Wireframe Globe

Component 1

About

A turning line globe with markers and great circle routes, for showing regions and where requests go. Gray strokes, a faint back side and a slow turn that holds still under reduced motion.

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

Code

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

Usage.tsx

"use client"

import { GlobeMarker, WireframeGlobe } from "@/components/ui/wireframe-globe"

const regions: GlobeMarker[] = [
  { id: "fra", lat: 50.1, lon: 8.7, label: "Frankfurt", active: true },
  { id: "iad", lat: 38.9, lon: -77.4, label: "Virginia" },
  { id: "bom", lat: 19.1, lon: 72.9, label: "Mumbai" },
  { id: "sin", lat: 1.35, lon: 103.8, label: "Singapore" },
  { id: "gru", lat: -23.5, lon: -46.6, label: "Sao Paulo" },
]

/** Inference regions and the routes a request can take, on a slowly turning line globe. */
function WireframeGlobeDemo() {
  return (
    <div className="grid w-full max-w-3xl grid-cols-1 items-center gap-10 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
      <WireframeGlobe
        markers={regions}
        routes={[
          ["fra", "iad"],
          ["fra", "bom"],
          ["bom", "sin"],
          ["iad", "gru"],
        ]}
        longitude={20}
        label="Inference regions"
        className="mx-auto max-w-sm"
      />
      <div className="flex flex-col gap-2">
        <p className="text-(color:--chatcn-fg) text-[1.75rem] leading-8 font-semibold tracking-[-0.03em] text-balance">
          Answers from the region nearest your users.
        </p>
        <p className="text-[0.9375rem]/[1.5rem] tracking-[-0.006em] text-(color:--chatcn-fg-muted) text-pretty">
          Five regions, one endpoint. Requests route to Frankfurt for the EU and fail over in under
          a second.
        </p>
      </div>
    </div>
  )
}

/** The line under each 21st demo that points back to the kit. */
function MoreOn({ slug, children }: { slug: string; children: React.ReactNode }) {
  return (
    <p className="text-[0.75rem]/[1rem] text-(color:--chatcn-fg-faint) text-center text-balance">
      {children}{" "}
      <a
        href={`https://chatcn.dev/docs/components/${slug}`}
        target="_blank"
        rel="noopener"
        className="text-(color:--chatcn-fg-subtle) hover:text-(color:--chatcn-fg) underline underline-offset-2"
      >
        chatcn.dev
      </a>
    </p>
  )
}

export default function WireframeGlobePreview() {
  return (
    <div className="flex min-h-[520px] w-full flex-col items-center justify-center gap-10 p-6">
      <WireframeGlobeDemo />
      <MoreOn slug="wireframe-globe">Markers, routes and a slow turn. More effects on</MoreOn>
    </div>
  )
}