变形标题 <MorphHeadline />
同一位置的两句超大字:第一句逐字模糊散开,第二句在原处凝聚出来;底部两栏分别注释前后两句。
Template and style descriptions are currently available in Chinese only.
- Group
- 转折 · 一句话变成另一句
- Component
MorphHeadline·#morph-headline- Interaction
- build 模式下按 → 变形;直接进入本页时停顿约 1.6 秒后自动变形,打印只显示第二句
Good for
- 前后对照的名句、口号
- “从 A 到 B”的立场转变
Avoid when
- 两句都要同时被读到:用 Compare 类模板
- 句子超过 12 字
Content limits
| 1 | from、to 各 ≤ 12 字 |
| 2 | notes 正好 2 条:label ≤ 6 字,body ≤ 40 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名,2–8 字 |
from · required | string | 第一句 |
to · required | string | 变成的第二句 |
notes | [{ label, body }, { label, body }] | 前后两句的注释 |
source | string | 事实出处 |
Example
<MorphHeadline kicker="那句话" from="一个人的一小步" to="人类的一大步" notes={[{ label: '前半句', body: '…' }, { label: '后半句', body: '…' }]} />