文字動畫
環形旋轉文字
字元沿圓形排列並可持續旋轉，支援懸停變速、換向與 reduced-motion。
字元沿圓周等角排列，整圈連續旋轉；滑鼠懸停時可加速、減速、暫停或反向。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add circular-textPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
18
84
20
編輯中的呼叫預設屬性
<CircularText/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/circular-text.json或在 components.json 設定 registries 後，改用 @webberui/circular-text 安裝。
使用
import { CircularText } from "@/components/ui/circular-text";
<CircularText text="WEBBER*UI*ANIMATED*" spinDuration={16} onHover="speedUp" />字串中的 * 或空白只是分隔符，讓字元在圓周上留出視覺間隔。
Props
| 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" | 懸停時的速度變化模式 |
可及性
- 使用者系統開啟「減少動態效果」時，環形靜止不旋轉
- 完整文字以
sr-only提供給輔助科技，旋轉層標記aria-hidden