84 / Scenes

Wireframe Globe

A wireframe world with places marked on it, arcs between them, and the same places written out underneath as text.

Five regions. Drag to spin it.

"use client"

import { WireframeGlobe } from "mischief-ui/wireframe-globe"

const markers = [
  { id: "lhr", lat: 51.47, lng: -0.45, label: "London" },
  { id: "jfk", lat: 40.64, lng: -73.78, label: "New York" },
  { id: "sin", lat: 1.36, lng: 103.99, label: "Singapore" },
  { id: "gru", lat: -23.43, lng: -46.47, label: "Sao Paulo" },
  { id: "blr", lat: 13.2, lng: 77.71, label: "Bengaluru" },
]

const arcs = [
  { from: markers[0]!, to: markers[1]! },
  { from: markers[0]!, to: markers[4]! },
  { from: markers[2]!, to: markers[4]! },
]

export function WireframeGlobeDemo() {
  return (
    <div className="w-full max-w-sm">
      <WireframeGlobe
        markers={markers}
        arcs={arcs}
        className="aspect-square w-full"
      />
      <p className="text-muted-foreground mt-2 text-center text-xs">
        Five regions. Drag to spin it.
      </p>
    </div>
  )
}

Installation

Copy the source into your project, or keep it behind a package.

npx shadcn@latest add Tinkerers-Labs/mischief-ui/wireframe-globe

import { WireframeGlobe } from "mischief-ui/wireframe-globe"

Also installs

three

Or paste it in yourself. The source imports the shared cn helper from @/lib/utils, so point that at your own copy.

registry/default/wireframe-globe/wireframe-globe.tsx

1"use client"2 3import * as React from "react"4import * as THREE from "three"5import {6  RenderSurface,7  useThemeColors,8  type SurfaceColor,9} from "@/registry/default/render-surface/render-surface"10import { cn } from "@/lib/utils"11 12export type GlobeMarker = {13  id?: string14  lat: number

Usage

export function Regions() {
  return (
    <WireframeGlobe
      markers={[
        { id: "lhr", lat: 51.47, lng: -0.45, label: "London" },
        { id: "sin", lat: 1.36, lng: 103.99, label: "Singapore" },
      ]}
      className="aspect-square"
    />
  )
}

The list is not optional

A globe is usually showing something real: where the regions are, where the customers are, where the incident is. That information cannot live only in a canvas, so the markers are also rendered as a plain list for anything that does not read one.

This is why label is required rather than optional. A marker without a name is a dot on a sphere and there is nothing to say about it.

What it needs installed

Along with the scene hero, this is one of the two components that ask for three, and it is an optional peer. The package root does not export it, because a barrel holding it would fail to resolve for everyone who had not installed three.

npm install mischief-ui three

Import it from its own entry: mischief-ui/wireframe-globe, not the package root.

Turning it

It turns slowly on its own and can be dragged, and a drag carries a little momentum before the steady turn takes over again. Set interactive to false when the globe sits behind something else that should be receiving the pointer.

API

markersGlobeMarker[]Places to mark.

arcsGlobeArc[]Lines drawn between two places.

colorstringThe sphere. Defaults to "--border".

accentstringThe markers and arcs. Defaults to "--primary".

speednumberTurns per second. Defaults to 0.06.

interactivebooleanLets the pointer spin it. On by default.

GlobeMarker

latnumberDegrees north.

lngnumberDegrees east.

labelstringWhat the place is called. Required, and used in the text list.

idstringOptional key.

GlobeArc

from{ lat, lng }Where the line starts.

to{ lat, lng }Where it ends.

Accessibility

The canvas is decoration and the markers are a real list, so the places are read out in order whether or not anything renders. Under reduced motion one frame is drawn and the globe neither turns nor drifts, though it can still be dragged, because that movement is the reader's own.