TEXT EFFECT
模糊聚焦入场Blur Text
文字从大模糊渐渐对焦变清晰，像镜头调焦。ReactBits 的 BlurText 是这类效果的标准命名。
效果预览
Blur
适合用在哪
AI 产品标题（暗示「正在生成/逐渐清晰」）、章节引子、需要安静高级感的开头。
容易踩的坑
- 同时对超过 20 个字符做 filter:blur，低端安卓机会明显卡顿。
- 首屏标题初始 opacity:0，JS 失败或延迟时用户看到的是空白。
- 文字反复模糊淡出，对阅读障碍用户极不友好，应只播放一次。
设计提示词 · Prompt
模糊聚焦入场（Blur Text）：每个字符（或按词分组）display:inline-block。动画 3.4s ease-out 无限循环：从 filter:blur(9px) opacity:0，到 filter:blur(0) opacity:1（18% 处），保持至 72%，再 blur(7px) 淡出。字符间用 0.06-0.1s 的 animation-delay 错开。字号 40-64px、字重 780、字距 -0.035em。注意：blur 在低端机上较吃性能，同屏元素不要超过 20 个字符同时动画。
Blur Text: each character (or each word group) is display:inline-block. Animate 3.4s ease-out, infinite: from filter:blur(9px) opacity:0 to filter:blur(0) opacity:1 (at 18%), hold until 72%, then fade out with blur(7px). Stagger characters with 0.06-0.1s animation-delay. Font size 40-64px, font weight 780, letter-spacing -0.035em. Note: blur is performance-heavy on low-end devices, so do not animate more than 20 characters on screen at once.
常见搭配
同一页面里经常和「模糊聚焦入场」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="tx-blur">
<i style="animation-delay:0s">B</i><i style="animation-delay:.08s">l</i><i style="animation-delay:.16s">u</i><i style="animation-delay:.24s">r</i>
</div>
</div>