Chars
Hero Reveal
01
让标题先抓住注意力
主标题常用起手式，逐字抬起，镜头感最强。
用 SplitType 拆标题与副标题，比较 chars、words、lines 在中文文案里的节奏差异。
SplitType / Text Motion
一页看完 7 种中文文本动画
把 chars、words、lines 全放在同一屏，直接比较哪种节奏更适合标题、副标题和长说明。
2 x chars2 x words3 x lines
Chars
Scatter In
02
把发布时刻点亮
字先散开再收拢，适合做更有表演感的强调。
Words
Phrase Rise
03
把信息 分成更稳的 节奏块
中文里更像词组块依次上来，比逐字更稳。
Words
Soft Focus
04
先讲重点 再补证据 最后给动作
从虚到实，适合层次更明确的说明文字。
Lines
Line Mask
05
把阅读顺序设计成镜头，而不是把每个字都抖一遍。
逐行进入最贴近真实阅读，长文案更不容易显得用力。
Lines
Line Drift
06
长说明更适合逐行进入，让读者顺着排版自然往下看。
横向轻推加淡入，信息会更像一段被展开的解释。
Lines
Line Step
07
第一行给结论，第二行补原因，第三行再给动作，阅读顺序会更清楚。
像字幕一样一行一行出现，信息顺序最明确。
为什么要单独练文本动画
文本动画最容易看起来“很用力”，尤其在中文里，逐字 reveal 和逐行 reveal 的气质差别非常大。
三种拆分思路
| 拆分方式 | 适合内容 | 观感 |
|---|---|---|
chars | 大标题、短句、品牌语 | 节奏最强、镜头感最重 |
words | 副标题、卖点说明 | 层次更稳，信息块感更明显 |
lines | 多行说明、固定宽度标题 | 最接近真实排版阅读 |
实战建议
- 先固定排版宽度，再拆文本，否则换行一变，动画也跟着失真。
- 每次切预设前先
revert()，不要让拆字包裹节点一层套一层。 - 中文标题默认先从
chars + hero reveal开始试，通常最稳。
生产注意点
- 文案如果会频繁变更，记得在宽度和内容变化后重新拆分。
- 长段正文不要做强逐字动画，容易拖慢阅读。
- 仍然需要为
prefers-reduced-motion提供无动画降级。