文字動畫
詞語翻轉
自動循環翻閃一組詞語，容器寬度隨字自適應。
自動循環翻閃一組詞語，逐字帶模糊淡入、換詞時整段上飄退場，容器寬度隨當前詞平滑自適應，常用於標題中強調可替換的關鍵字。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add flip-wordsPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
2600
0.5
0.045
編輯中的呼叫預設屬性
<FlipWords/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/flip-words.json或在 components.json 設定 registries 後，改用 @webberui/flip-words 安裝。
使用
import { FlipWords } from "@/components/ui/flip-words";
<h1 className="text-4xl font-semibold">
打造
<FlipWords words={["快速的", "動畫的", "美麗的"]} />
網頁介面
</h1>捲軸模式
mode="reel" 像拉霸捲軸：目前詞置中，上一個與下一個詞淡化、縮小地留在上下方，換詞時整條捲軸往上滾一格。容器寬度取最長的詞，捲動時版面不會抖動。
<FlipWords mode="reel" words={["登入頁", "儀表板", "結帳流程"]} interval={2000} />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
words | string[] | — | 要循環翻閃的詞語清單 |
interval | number | 2600 | 每個詞停留的時間（毫秒） |
duration | number | 0.5 | 換詞時整段動畫的基準時長（秒） |
stagger | number | 0.045 | 逐字進場的間隔（秒）；僅 flip 模式使用 |
mode | "flip" | "reel" | "flip" | flip 為逐字翻閃；reel 像拉霸捲軸，同時顯示上下相鄰詞並垂直滾動切換 |
className | string | — | 透傳到外層容器 |
細節
- reel 模式一次顯示三列（上一個、目前、下一個），相鄰詞透明度 0.35、縮放 0.78，上下邊緣以遮罩淡出
- reel 模式用遞增步數當作 key，清單繞回開頭時也是同一條捲軸繼續往上滾，不會整列跳回
duration在 reel 模式是捲動一格的時長；stagger不作用
可及性
- 使用者系統開啟「減少動態效果」時，直接渲染第一個詞的靜態文字，不啟動計時器
- 當前詞以
sr-only完整朗讀，拆分後的字素與 reel 模式的相鄰詞對輔助科技隱藏（aria-hidden） - 減少動態效果：flip 模式直接渲染第一個詞的靜態文字、不啟動計時器；reel 模式照常換詞，但改為原位淡接，不做垂直捲動