TEXT EFFECT
变形文字Morphing Text
同一位置的多组词交替：旧的放大模糊消失，新的从缩小清晰浮现。Magic UI 的 Morphing Text 与 ReactBits 的 Word Rotate 同类。
效果预览
DesignBuildShip
适合用在哪
首屏标题里轮换多个卖点（「让想法 上线/变现/被看见」），节省版面又能多说几件事。
容易踩的坑
- 候选词长度差异大时容器宽度不固定，整行标题会左右跳动。
- 读屏只能读到当前可见词或全部叠放的词，需提供完整静态文案。
- 轮换超过 4 个卖点，用户等一整轮要十几秒，后面的根本没人看到。
设计提示词 · Prompt
变形文字（Morphing Text）：把候选词都放在同一个 grid 单元格（grid-area:1/1）里叠起来。每个词动画 5.4s cubic-bezier(.4,0,.2,1) 无限循环：0% 时 opacity:0、filter:blur(8px)、scale(.85)，10%-28% 完全清晰居中，34% 后 opacity:0、blur(8px)、scale(1.12)。词的 animation-delay 依次错开 1.8s（词数 × 单段时长），保证任一时刻只有一个词可见。容器设固定高度与 overflow:hidden 防抖动。
Morphing Text: stack all candidate words in the same grid cell (grid-area:1/1). Each word animates 5.4s cubic-bezier(.4,0,.2,1), infinite: at 0% opacity:0, filter:blur(8px), scale(.85); fully sharp and centered at 10%-28%; after 34% opacity:0, blur(8px), scale(1.12). Stagger the words' animation-delay by 1.8s each (word count × segment duration) so only one word is visible at any moment. Give the container a fixed height and overflow:hidden to prevent jitter.
常见搭配
同一页面里经常和「变形文字」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center"> <div class="tx-morph"><i>Design</i><i>Build</i><i>Ship</i></div> </div>