Pretext 创意演示

使用 @chet 使用 Pretext 构建创意浏览器演示。

概述

@chenglou/pretext 是一个 15KB 零依赖 TypeScript 库，用于无 DOM 多行文本测量和布局。它做一件事：给定 (text, font, width)，返回换行、每行宽度、每个字素的位置和总高度——全部通过 canvas 测量，无重排。

这是一个创意原语：你可以在 60fps 下让段落围绕移动的精灵重排、构建关卡几何由真实单词组成的游戏、驱动 ASCII logo 穿过散文、用精确的每个字素起始位置将文本粉碎成粒子。

使用场景

• 文本围绕移动形状流动（hero 部分、编辑布局、动画长页面）
• 使用真实单词或散文的 ASCII 艺术效果，而非等宽光栅
• 游戏场/障碍物/砖块由文本组成的游戏（字母俄罗斯方块、散文打砖块）
• 每个字形物理的动态排版（粉碎、散射、群集、流动）
• 排版生成艺术，尤其是非拉丁脚本或混合脚本
• 多行"收缩包装" UI（仍然适合文本的最小容器宽度）

创意标准

• 不要发布"hello world"演示。每个交付的演示必须添加有意的颜色、运动、构图和一个视觉细节。
• 深色背景、温暖核心、考究的调色板。经典琥珀黑（CRT / 终端）可行。
• 比例字体是重点。使用 Iowan Old Style、Inter、JetBrains Mono、Helvetica Neue 或可变字体。
• 真实源/文本，非 lorem ipsum。语料应该有意义。
• 首帧卓越。无加载状态、无空白帧。

技术栈

每个演示单个自包含 HTML 文件。无构建步骤。

两种用例

用例 1——测量，然后用 CSS/DOM 渲染

const prepared = prepare(text, "16px Inter");
const { height, lineCount } = layout(prepared, 320, 20);

你仍然让浏览器绘制文本。Pretext 只是告诉你盒子在给定宽度下有多高。

用例 2——测量*并*自己渲染

const prepared = prepareWithSegments(text, FONT);
const { lines } = layoutWithLines(prepared, 320, 26);
for (let i = 0; i < lines.length; i++) {
  ctx.fillText(lines[i].text, 0, i * 26);
}

这是创意工作所在。你拥有绘制，所以你可以渲染到 canvas、SVG、WebGL 或任何坐标系。

演示配方模式

性能说明

• prepare() 是昂贵调用。每个 text+font 对执行一次。缓存句柄。
• 调整大小时，只重新运行 layout()——永不重新 prepare。
• Canvas ctx.font 设置惊人地慢；每帧设置一次。