World Map
點線程序動畫的世界地圖／連線圖，以 canvas 2D 繪製，支援跨洲弧線與端點脈衝。
以等距圓柱投影將各大洲近似成點陣底圖，並在指定地點之間畫出逐步繪製的弧線，適合放在 Hero 或全球佈局的背景。純 canvas 2D 實作，無任何 WebGL 或外部圖片。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
16
1.1
0.3
1.6
0.6
<WorldMap />
安裝
npx shadcn@latest add https://webberui.com/r/world-map.json或在 components.json 設定 registries 後，改用 @webberui/world-map 安裝。
安裝依賴後，從 registry JSON（/r/world-map.json 的 files[0].content）複製 world-map.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
connections 內每個項目由 from 與 to 兩個 GeoPoint（{ lat, lng }）組成，元件會依序畫出跨點弧線。
import { WorldMap } from "@/components/ui/world-map";
<WorldMap
connections={[
{ from: { lat: 37.77, lng: -122.42 }, to: { lat: 51.51, lng: -0.13 } },
{ from: { lat: 51.51, lng: -0.13 }, to: { lat: 35.68, lng: 139.69 } },
]}
lineColor="#38bdf8"
/>底圖點顏色未指定時採用 currentColor，會隨 text-* 類別與深淺主題自動切換。容器預設 aspect-[2/1]，可用 className 覆蓋外觀與尺寸。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
connections | MapConnection[] | 一組跨洲航線 | 每條弧線的起訖 GeoPoint |
dotColor | string | currentColor | 底圖點顏色；未指定時隨主題切換 |
lineColor | string | "#38bdf8" | 弧線與端點顏色 |
dotGap | number | 16 | 底圖點間距（CSS px） |
dotRadius | number | 1.1 | 底圖點半徑（CSS px） |
lineDuration | number | 1.6 | 單條弧線畫完的時長（秒） |
staggerDelay | number | 0.6 | 每條弧線起始的錯開間隔（秒） |
curvature | number | 0.3 | 弧線隆起高度倍率（相對兩端距離） |
GeoPoint 為 { lat: number; lng: number }；MapConnection 為 { from: GeoPoint; to: GeoPoint }。
可及性
- 使用者系統開啟「減少動態效果」時，靜態畫出完整地圖與所有弧線，不啟動動畫迴圈
- 底圖與弧線為純裝飾，容器標記
aria-hidden，不干擾輔助科技朗讀