TEXT EFFECT
字重动画Kinetic Text
字符在细体与粗体之间波浪式变化，用可变字体的字重轴（wght）做动画。Magic UI 的 Kinetic Text 就是这个名字。
效果预览
Kinetic
适合用在哪
需要「文字在呼吸」的品牌标题、音乐/艺术类站点、加载态文案。需使用可变字体（如 Inter Variable）。
容易踩的坑
- 字重变化改变字宽，未用等宽或预留宽度时整行会抖动重排。
- 可变字体文件常超过 300KB，未子集化会拖慢首屏渲染。
- 动画 font-weight 会触发每帧重排，长段文字上使用代价很高。
设计提示词 · Prompt
字重动画（Kinetic Text）：容器 display:flex、 gap 1px，每个字符一个 <i>。动画 2.6s ease-in-out 无限循环，属性在 font-weight:300 与 font-weight:850 之间往复（对应可变字体的 wght 轴 300↔850）。字符间 animation-delay 依次递增 0.08-0.12s，形成字重从左到右波动传播的观感。字号 24-48px、字距 -0.03em。备用方案：不可变字体时改用 @font-face 的 font-variation-settings 或降级为 opacity/scale 动画。
Kinetic Text: the container is display:flex with gap 1px, one <i> per character. Animate 2.6s ease-in-out, infinite, alternating between font-weight:300 and font-weight:850 (corresponding to the variable font's wght axis 300↔850). Increase the animation-delay between characters by 0.08-0.12s each, so the weight appears to ripple from left to right. Font size 24-48px, letter-spacing -0.03em. Fallback: with a non-variable font, use font-variation-settings via @font-face or degrade to an opacity/scale animation.
常见搭配
同一页面里经常和「字重动画」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="tx-kinetic">
<i style="animation-delay:0s">K</i><i style="animation-delay:.1s">i</i><i style="animation-delay:.2s">n</i><i style="animation-delay:.3s">e</i><i style="animation-delay:.4s">t</i><i style="animation-delay:.5s">i</i><i style="animation-delay:.6s">c</i>
</div>
</div>