詞語翻轉
自動循環翻閃一組詞語，容器寬度隨字自適應。
自動循環翻閃一組詞語，逐字帶模糊淡入、換詞時整段上飄退場，容器寬度隨當前詞平滑自適應，常用於標題中強調可替換的關鍵字。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
2600
0.5
0.045
<FlipWords />
安裝
npx shadcn@latest add https://webberui.com/r/flip-words.json或在 components.json 設定 registries 後，改用 @webberui/flip-words 安裝。
安裝依賴後，從 registry JSON（/r/flip-words.json 的 files[0].content）複製 flip-words.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { FlipWords } from "@/components/ui/flip-words";
<h1 className="text-4xl font-semibold">
打造
<FlipWords words={["快速的", "動畫的", "美麗的"]} />
網頁介面
</h1>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
words | string[] | — | 要循環翻閃的詞語清單 |
interval | number | 2600 | 每個詞停留的時間（毫秒） |
duration | number | 0.5 | 換詞時整段動畫的基準時長（秒） |
stagger | number | 0.045 | 逐字進場的間隔（秒） |
className | string | — | 透傳到外層容器 |
可及性
- 使用者系統開啟「減少動態效果」時，直接渲染第一個詞的靜態文字，不啟動計時器
- 當前詞以
sr-only完整朗讀，拆分後的字素對輔助科技隱藏（aria-hidden）