彈性繩分隔線
可撥彈的橡皮筋分隔線，拉起放開會彈跳波動。
像一條繃緊的橡皮筋橫在區段之間：滑鼠靠近會自動吸附、拉成 V 形跟隨指標，放開（或拉超過極限脫手）後以阻尼彈簧震盪回位，帶著放開瞬間的慣性。物理以自寫的 rAF 阻尼彈簧驅動 quadratic bezier 控制點，靜止收斂後迴圈自動停止。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
2
0
110
28
<ElasticRopeDivider />
安裝
npx shadcn@latest add https://webberui.com/r/elastic-rope-divider.json或在 components.json 設定 registries 後，改用 @webberui/elastic-rope-divider 安裝。
安裝依賴後，從 registry JSON（/r/elastic-rope-divider.json 的 files[0].content）複製 elastic-rope-divider.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { ElasticRopeDivider } from "@/components/ui/elastic-rope-divider";
<section>上一段內容</section>
<ElasticRopeDivider className="text-neutral-300 dark:text-neutral-700" />
<section>下一段內容</section>
{/* 客製：粗一點的彩色繩，帶自然下垂 */}
<ElasticRopeDivider color="#f43f5e" thickness={3} sag={12} />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
color | string | "currentColor" | 繩子顏色，預設繼承文字顏色，可用外層 text-* 類別控制 |
thickness | number | 2 | 線條粗細（px） |
sag | number | 0 | 靜止時的自然下垂量（px），0 為完全直線 |
height | number | 64 | 互動熱區高度（px），繩子垂直置中於其中 |
maxStretch | number | 110 | 拉伸極限（px），拉超過時繩子會脫手彈回 |
grabRadius | number | 28 | 指標靠近繩子多少 px 內會吸附跟隨 |
className | string | — | 透傳到外層容器 |
可及性
- 以
role="separator"加aria-orientation="horizontal"標示，輔助科技視為一般水平分隔線 - SVG 本體標記
aria-hidden，撥彈互動純屬裝飾，不承載任何內容或操作 - 使用者系統開啟「減少動態效果」時，停用吸附、拖曳與彈跳，僅渲染靜態繩線
- 元件不可聚焦、不攔截 Tab 順序，鍵盤導覽完全不受影響