Curved Text Loop

文字沿著一條 SVG 曲線持續流動，複本會自動鋪滿整條路徑形成無縫循環，並可用指標拖曳手動撥動、放開後帶著慣性繼續滑行。

載入預覽⋯

Playground

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

文字內容text

流動速度（px/秒）speed

字級fontSize

可拖曳撥動draggable

顯示參考曲線showPath

<CurvedTextLoop />

npx shadcn@latest add https://webberui.com/r/curved-text-loop.json

或在 components.json 設定 registries 後，改用 @webberui/curved-text-loop 安裝。

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

npm install motion clsx tailwind-merge

import { CurvedTextLoop } from "@/components/ui/curved-text-loop";

<CurvedTextLoop text="DESIGN IN MOTION" separator="   ✦   " speed={44} />

顏色由外層的文字色（currentColor）決定，字體大小用 fontSize（對應 viewBox 座標）。要換一條曲線，傳入自訂的 SVG path d 到 pathD，例如一個圓：pathD="M 320 40 A 90 90 0 1 1 319 40"。