等高線背景
SVG 等高線地形圖緩慢漂移變形的裝飾背景。
數座山丘的閉合 SVG 等高線以不同相位緩慢 morph 與漂移，形成低對比的地形圖裝飾層，內容透過 children 疊在背景之上，適合 hero 區塊、戶外或探索主題的頁面氛圍。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
6
1
1
0.5
<TopographicLinesBackground />
安裝
npx shadcn@latest add https://webberui.com/r/topographic-lines-background.json或在 components.json 設定 registries 後，改用 @webberui/topographic-lines-background 安裝。
安裝依賴後，從 registry JSON（/r/topographic-lines-background.json 的 files[0].content）複製 topographic-lines-background.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { TopographicLinesBackground } from "@/components/ui/topographic-lines-background";
<TopographicLinesBackground className="rounded-2xl border">
<section className="px-8 py-20 text-center">
<h2 className="text-3xl font-semibold">走進等高線之間</h2>
<p className="mt-3 text-neutral-500">用雙腳讀懂每一座山的輪廓。</p>
</section>
</TopographicLinesBackground>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
lineColor | string | "currentColor" | 等高線顏色，可透過外層 text-* class 在亮暗模式各自調整 |
density | number | 6 | 每座山丘的等高線圈數（2–12），值越大線越密 |
speed | number | 1 | 漂移與 morph 的速度倍率，越大越快 |
strokeWidth | number | 1 | 線條粗細（SVG 座標單位） |
lineOpacity | number | 0.5 | 最內圈線條的不透明度上限，往外圈逐步遞減 |
children | React.ReactNode | — | 疊在背景之上的前景內容 |
className | string | — | 合併到最外層容器的 class |
可及性
- 背景 SVG 為純裝飾，標記
aria-hidden且pointer-events-none，不會被輔助科技朗讀、也不攔截前景互動 - 使用者系統開啟「減少動態效果」時，停止 morph 與漂移動畫，改為靜態等高線
- 等高線為低對比、低不透明度，並置於內容層之下（
-z-10），不影響前景文字的可讀性 - 形狀由索引種子的確定性偽隨機函式產生，SSR 與客戶端渲染結果一致，不會發生 hydration 抖動