波浪文字
每個字素沿正弦波上下起伏，可調振幅、波長與速度，hover 可加速
每個字素依索引取得正弦相位偏移，沿 y 軸連續起伏並隨波形切線輕微傾斜，形成由左至右流動的波浪；滑鼠移入時波速平滑加速、移出後緩和回復，適合標題或品牌字的趣味點綴。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
8
8
1
2.5
<WaveText />
安裝
npx shadcn@latest add https://webberui.com/r/wave-text.json或在 components.json 設定 registries 後，改用 @webberui/wave-text 安裝。
安裝依賴後，從 registry JSON（/r/wave-text.json 的 files[0].content）複製 wave-text.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { WaveText } from "@/components/ui/wave-text";
<h1 className="text-4xl font-bold">
<WaveText text="乘著波浪前進的文字" amplitude={10} wavelength={7} />
</h1>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
text | string | — | 要呈現波浪起伏的文字內容 |
amplitude | number | 8 | 波峰振幅（px），每個字素上下位移的最大距離 |
wavelength | number | 8 | 一個完整正弦週期橫跨的字素數，越大波形越平緩 |
speed | number | 1 | 每秒完成的正弦週期數，數值越大流動越快 |
hoverBoost | number | 2.5 | hover 時的波速倍率，移入後平滑加速到此倍數 |
className | string | — | 透傳到外層容器 |
可及性
- 使用者系統開啟「減少動態效果」時，直接渲染靜態文字，不啟動任何動畫迴圈
- 完整文字以
sr-only提供給螢幕閱讀器朗讀，拆分後的字素對輔助科技隱藏（aria-hidden） - 動畫僅使用
transform（位移與旋轉），不改變版面流，不會造成內容重排