Vercel / V154

Geist Serif

以三角标志进入蓝底工程图，再放大单字轮廓。细线、尺寸标记和控制点服务于笔画结构，不能盖过字形。

构图与编排可播放 · 可替换内容

整体编排规则示例

0.00 / 43.33 秒

查看 HTML 源码

<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Geist Serif · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#ffffff}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="sequence"><canvas width="1000" height="600"></canvas><script src="data.js"></script><script src="common.js"></script><script src="scene.js"></script><script src="bridge.js"></script></body></html>

画面元素衬线字形基线网格贝塞尔控制点字符集字重对比蓝色三角

MOTION LANGUAGE

动作与构图

局部动作 · 构图规则

把字体当作可观察的形状

以三角标志进入蓝底工程图，再放大单字轮廓。细线、尺寸标记和控制点服务于笔画结构，不能盖过字形。

在巨型细节与整套字符之间切换

裁切到衬线端部之后，拉回大小写、数字与符号的完整字符集；字重对照按由粗到细纵向排列，保持同一基线逻辑。

只让关键节点动起来

只让关键节点动起来规则示例

0.00 / 6.00 秒

21–27 秒 · 动作示意独立打开 ↗

查看 HTML 源码

<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Geist Serif · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#ffffff}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="clip" data-start="21" data-end="27"><canvas width="1000" height="600"></canvas><script src="data.js"></script><script src="common.js"></script><script src="scene.js"></script><script src="bridge.js"></script></body></html>

放大 k、R、O 等字形，展示曲线节点、替代字形或轴线角度。控制点与轮廓同步，不添加与字形无关的背景运动。