Skip to content
Sign in
EffectsWireframe globeMenu

Wireframe globePro

A line or dot globe with markers and great circle routes for global inference stories.

Markdown
On this page
ProInference regions and routes on a slowly turning line globe.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/wireframe-globe

Usage

tsx
import { WireframeGlobe } from "@/components/ui/chatcn/pro/wireframe-globe"

<WireframeGlobe markers={regions} routes={[["fra", "iad"]]} />

Markers are the kit's small rounded square, solid when active. Routes are great circle arcs lifted slightly off the surface toward their middle, so they read as paths rather than seams. The marker labels join the globe's accessible name.

Examples

Variants

ProDot lattice, back hidden, a coarse accent grid and a paused globe.

Props

PropTypeNotes
variant"lines" | "dots"Default lines
gridStepnumberDegrees between lines. Default 15
markersGlobeMarker[]{ id, lat, lon, label?, active? }
routes[string, string][]Pairs of marker ids
speednumberDegrees per second. Default 6
tiltnumberAxial tilt in degrees. Default 18
longitudenumberFacing longitude at rest. Default 10
backface"faint" | "hidden"Default faint

Accessibility

  • The globe is an image named by label. Pass an empty label when it is only decoration.
  • It loops past 5 s, so a pause control sits in its corner (WCAG 2.2.2): quiet until hover or focus, always shown on touch screens and while paused.
  • Under forced-colors the canvas gives way to a plain outline.

Motion

  • One turn takes a minute at the default speed: slow enough to sit beside text.
  • The loop runs from the shared frame clock only while the effect is on screen, the tab is visible and nothing paused it. Under reduced motion it draws one still frame.