環形旋轉文字

字元沿圓形排列並可持續旋轉，支援懸停變速、換向與 reduced-motion。

字元沿圓周等角排列，整圈連續旋轉；滑鼠懸停時可加速、減速、暫停或反向。

載入預覽⋯

Playground

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

環繞文字text

一圈秒數spinDuration

旋轉方向direction

圓半徑radius

字級fontSize

懸停效果onHover

<CircularText />

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

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

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

npm install motion clsx tailwind-merge

import { CircularText } from "@/components/ui/circular-text";

<CircularText text="WEBBER*UI*ANIMATED*" spinDuration={16} onHover="speedUp" />

字串中的 * 或空白只是分隔符，讓字元在圓周上留出視覺間隔。

Prop	型別	預設值	說明
`text`	`string`	—	沿圓形排列的文字，每個字元佔一個角度分格
`spinDuration`	`number`	`18`	轉一整圈所需秒數，越小越快
`direction`	`"cw" \| "ccw"`	`"cw"`	旋轉方向：順時針或逆時針
`radius`	`number`	`84`	文字基準圓的半徑（px）
`fontSize`	`number`	`20`	字級（px），同時決定容器留白
`onHover`	`"speedUp" \| "slowDown" \| "pause" \| "reverse" \| "none"`	`"speedUp"`	懸停時的速度變化模式