playground

Glyph

v2.0.0

零依赖流体文本动画库 · Web Animations API 合成层满帧 · 灵感来自 calligraph

—FPS
最低 —
119
峰值 FPS
0
掉帧 / 卡顿
0
运行时依赖
GPU
合成层动画

点「压力测试」：每 130ms 切一个大跨度词 + 数字高频滚动，过渡相互重叠。 FPS 表会盯着真实帧率——合成层动画下它纹丝不动地贴满刷新率。

Glyph
Text
Craft
Number
$24.89
Slots
$0123456789,012345678901234567890123456789

Performance

  • 0 运行时依赖弃用 framer-motion，纯浏览器原生 Web Animations API。
  • 合成层动画只动 transform / opacity，跑在 compositor 线程，主线程再忙也不掉帧。
  • FLIP 一次测量字符位移只测一次旧/新位置，剩下交给合成层，不每帧重排。
  • 数字直写 DOM单条 requestAnimationFrame 弹簧 + 直写 textContent，零 React 重渲染。
  • spring 预采样把弹簧物理积分成关键帧，连回弹也在合成层。

实测（120Hz 屏，过渡重叠压测）：119 FPS · p95 9ms · 最长帧 16.5ms · >20ms 卡顿帧 0。

Installation

# 零依赖，直接拷贝 glyph.tsx

Usage

import { Glyph, GlyphNumber, GlyphSlots } from "./glyph";

<Glyph>Glyph</Glyph>
<GlyphNumber value={25} />
<GlyphSlots value={1204} />