Globe

自轉可互動的 WebGL 風地球（GitHub 風），以 canvas 2D 點雲、弧線與大氣光暈模擬。

自轉的點雲地球，陸地由等距柱狀遮罩繪成，可用指標拖曳旋轉，並帶行進弧線與發光標記。純 canvas 2D 實作，不依賴 WebGL 或 three.js。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

地球直徑（px）size

300

自動旋轉autoRotate

自轉速度（弧度/秒）rotationSpeed

0.12

弧線數量arcCount

可拖曳旋轉interactive

<Globe />

安裝

npx shadcn@latest add https://webberui.com/r/globe.json

或在 components.json 設定 registries 後，改用 @webberui/globe 安裝。

安裝依賴後，從 registry JSON（/r/globe.json 的 files[0].content）複製 globe.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

使用

import { Globe } from "@/components/ui/globe";

<Globe size={460} />

自訂配色與標記：

<Globe
  size={400}
  dotColor="#34d399"
  arcColor="#a7f3d0"
  arcCount={10}
  markers={[
    { lat: 25.03, lng: 121.56 },
    { lat: 37.77, lng: -122.42 },
  ]}
/>

Props

Prop	型別	預設值	說明
`size`	`number`	`460`	地球直徑（px），容器為正方形並受 `max-w-full` 限制
`dotColor`	`string`	依主題	陸地點雲顏色
`arcColor`	`string`	依主題	弧線與行進脈衝顏色
`baseColor`	`string`	依主題	球體底色（海洋）
`glowColor`	`string`	依主題	大氣光暈顏色
`autoRotate`	`boolean`	`true`	是否自轉
`rotationSpeed`	`number`	`0.12`	自轉速度（弧度／秒）
`interactive`	`boolean`	`true`	是否可用指標拖曳旋轉
`arcCount`	`number`	`8`	隨機弧線數量，設 `0` 可關閉
`markers`	`GlobeMarker[]`	內建城市	高亮標記，型別為 `{ lat, lng, size? }`
`className`	`string`	—	透傳到容器

可及性

使用者系統開啟「減少動態效果」時，渲染一張靜態地球，不自轉、不播放弧線動畫
canvas 標記 aria-hidden，屬純裝飾層，不影響輔助科技朗讀
顏色未指定時跟隨深淺主題自動切換，也可用 --wb-globe-dark 觀察目前主題

Playground

安裝

使用

Props

可及性

On this page