Globe Wireframe
An orthographic SVG globe with country strokes, drag, and a slow auto-rotate.
Import
tsx
import { GlobeWireframe } from "@cronus-ui/ui/globe-wireframe";
bash
npx cronus-ui add globe-wireframe
Examples
API Reference
Generated from the component's exported types.
GlobeWireframeLabels
| Prop | Type | Default | Description |
|---|---|---|---|
globe* | string | "Globe" | Accessible name for the globe. |
GlobeWireframeProps
Extends VariantProps<typeof globeWireframeVariants>
| Prop | Type | Default | Description |
|---|---|---|---|
ref | Ref<HTMLDivElement> | — | Ref forwarded to the underlying DOM node. |
className | string | — | Additional class names merged onto the root. |
width | number | — | — |
height | number | — | — |
strokeColor | string | "currentColor" | Country / graticule / outline stroke. |
strokeWidth | number | 1 | — |
graticuleColor | string | "currentColor" | — |
graticuleOpacity | number | 0.2 | — |
sphereOutlineColor | string | "currentColor" | — |
sphereOutlineWidth | number | 1 | — |
autoRotate | boolean | true | — |
autoRotateSpeed | number | 0.5 | Degrees per animation frame. |
initialRotation | [number, number] | [0, 0] | — |
enableInteraction | boolean | true | — |
showGraticule | boolean | true | — |
scale | number | 1 | — |
countryFillColor | string | — | — |
labels | Partial<GlobeWireframeLabels> | — | Override default English strings. |
variant | "wireframe" | "wireframesolid" | "solid" | "wireframe" | One of "wireframe" | "wireframesolid" | "solid". |