Browse components
Globe Wireframe
A rotating wireframe globe of latitude and longitude lines with depth-faded hidden lines and a glowing scan that sweeps pole to pole or across the face. Drag to spin.
Installation
npx shadcn@latest add @glint-ui/globe-wireframeFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/globe-wireframe.json
Usage
import { GlobeWireframe } from "@/components/ui/globe-wireframe";
<GlobeWireframe accent="#22d3ee" scan="latitude" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| lineColor | string | "#64748b" | Grid line color. |
| accent | string | "#22d3ee" | Scan highlight and rim color. |
| scan | "latitude" | "longitude" | "none" | "latitude" | Scan direction. |
| scanDuration | number | 4 | Seconds per scan pass. |
| latStep | number | 15 | Degrees between parallels. |
| lonStep | number | 15 | Degrees between meridians. |
| speed | number | 10 | Auto-rotation, degrees per second. |
| tilt | number | 20 | Axial tilt in degrees. |
| className | string | — | Extra classes for the root element. |