文字特效 · 字怎么动
波浪文字Wave text
- 轻快
- 连续
- 有节奏
每个字都在沿正弦上下浮动，相位错开，看起来像一道波从字上走过去。指针靠近时幅度变大 —— 所以它是「一行的呼吸」，不是逐个字的跳动。
什么时候用它
适合短、轻、一眼看完的地方：促销标语、空状态、加载中的问候。别用它排长段落或表单标签 —— 一行字一直在动，读起来会累；也别把相位差调成 0，那样整行会一起跳，看起来是「弹跳」而不是「波浪」。要长时间停留的界面里，让它停在静止状态。
参数
sin(ωt − 0.46i) · amplitude 5→11px · 22% tilt · 160ms proximity ease
配方
波浪文字 → 160ms波浪文字 → sin(ωt − 0.46i) · amplitude 5→11px · 22% tilt · 160ms proximity ease
给 AI 的一句话
做一行波浪文字：把每个字拆成独立的 span，逐字按 sin(ωt 减去 0.46 乘 i) 上下浮动，相位差固定 0.46（等于 0 就变成整行一起跳）；再叠一点与幅度成正比的轻微旋转（约 22%）。用 requestAnimationFrame 每帧按时间戳计算，不要给每个字写 CSS 动画 —— 那样字与字的相位无法保证。基础幅度 5px，指针进入这一行所在区域时放大到 11px，用约 160ms 的一阶跟随过渡，离开再收回。