TEXT EFFECT
逐字拆分入场Split Text
标题里的每个字符依次（可带旋转）入场，节奏感极强。ReactBits 的 SplitText 与 Magic UI 的 text-animate 都属这一族。
效果预览
Split
适合用在哪
首屏大标题、产品名揭示、需要「一字一顿」强调的口号。只用于一级标题。
容易踩的坑
- 拆成单字 span 后读屏会逐字念出，需给父元素 aria-label 并隐藏子节点。
- 无限循环的入场让标题周期性消失，用户读到一半文字就没了。
- 中文按字拆分后与英文单词混排，英文单词被拆开换行。
设计提示词 · Prompt
逐字拆分入场（Split Text）：把标题文本用 JS 拆成单个 <i> 或 <span>，每个字符 display:inline-block。动画 3.2s cubic-bezier(.2,.9,.2,1) 无限循环：从 opacity:0、translateY(16px)、rotate(-8deg) 到原位（16% 处），保持到 74%，再向上淡出。每个字符的 animation-delay 按索引递增 0.05-0.08s，形成逐字跳入的节奏。父容器 display:flex、gap 2px，字重 780、字距 -0.03em、字号 40-72px。
Split Text: split the title text with JS into individual <i> or <span> elements, each character display:inline-block. Animate 3.2s cubic-bezier(.2,.9,.2,1), infinite: from opacity:0, translateY(16px), rotate(-8deg) to the resting position (at 16%), hold until 74%, then fade out upward. Each character's animation-delay increases by 0.05-0.08s by index, creating a letter-by-letter jumping rhythm. The parent container is display:flex with gap 2px, font weight 780, letter-spacing -0.03em, font size 40-72px.
常见搭配
同一页面里经常和「逐字拆分入场」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="tx-split">
<i style="animation-delay:0s">S</i><i style="animation-delay:.05s">p</i><i style="animation-delay:.1s">l</i><i style="animation-delay:.15s">i</i><i style="animation-delay:.2s">t</i>
</div>
</div>