模糊聚焦文字
進入視窗時整段文字由重模糊逐行聚焦清晰，適合段落敘事。
進入視窗時整段文字由重模糊逐步對焦清晰，可選擇逐行或逐詞的拆分粒度，依序淡入形成如鏡頭轉實般的敘事節奏，適合品牌故事、關於頁與段落文案。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.9
0.16
12
0
<BlurRevealText />
安裝
npx shadcn@latest add https://webberui.com/r/blur-reveal-text.json或在 components.json 設定 registries 後，改用 @webberui/blur-reveal-text 安裝。
安裝依賴後，從 registry JSON（/r/blur-reveal-text.json 的 files[0].content）複製 blur-reveal-text.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { BlurRevealText } from "@/components/ui/blur-reveal-text";
<BlurRevealText
text={"清晨五點的山徑，霧氣還未散去。\n直到稜線的光穿透而來，\n世界才一行一行地，重新變得清晰。"}
granularity="line"
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
text | string | — | 要顯示的整段文字；granularity 為 "line" 時以換行符 \n 分行 |
granularity | "line" | "word" | "line" | 拆分粒度：逐行或逐詞聚焦（逐詞使用 Intl.Segmenter，中文也能正確分詞） |
duration | number | 0.9 | 單一片段從模糊到清晰的時長（秒） |
stagger | number | 0.16 | 相鄰片段之間的延遲（秒） |
blur | number | 12 | 起始模糊強度（px） |
delay | number | 0 | 進入視窗後、開始動畫前的整體延遲（秒） |
once | boolean | true | 是否只播放一次；false 時離開視窗會重新模糊，再進入時重播 |
amount | number | 0.3 | 觸發動畫所需的可見比例（0–1） |
className | string | — | 透傳到外層容器 |
可及性
- 使用者系統開啟「減少動態效果」時，跳過模糊動畫，直接渲染完整靜態文字
- 完整文字以
sr-only提供給螢幕閱讀器一次朗讀，拆分後的動畫片段對輔助科技隱藏（aria-hidden） once預設為true，避免捲動時反覆重播造成干擾