Pretext Creative Demos

@chenglou/pretext is a 15KB zero-dependency TypeScript library by Cheng Lou (React core, ReasonML, Midjourney) for DOM-free multiline text measurement and layout: given (text, font, width), it returns line breaks, per-line widths, per-grapheme positions, and total height via canvas measurement, no reflow. It is a creative primitive: reflow paragraphs around a moving sprite at 60fps, build games whose level geometry is real words, shatter text into particles, or pack shrink-wrapped multiline UI with zero getBoundingClientRect thrash.

This skill makes cool demos with it — the kind people post to X. The community demo corpus is at pretext.cool and chenglou.me/pretext.

Global rules

• Creative standard. Pretext returns numbers; you draw the thing. Don't ship a "hello world" demo — the hello-orb-flow.html template is the starting point; every delivered demo adds intentional color, motion, composition, and one visual detail the user didn't ask for. Dark backgrounds with considered palettes (amber-on-black, editorial white-on-charcoal, risograph pastels). Proportional fonts are the point — lean into "not monospaced". Use real source text, never lorem ipsum. First-paint excellence: no loading states, no blank frames.
• Scope. Use pretext only when the demo needs to know line breaks before rendering. Don't use for static CSS/HTML layouts, rich text editors, image → text (use ascii-art / ascii-video skills), or canvas generative art with no text role (use p5js).
• Stack. Single self-contained HTML file per demo, no build step: @chenglou/pretext via esm.sh CDN, Canvas 2D for rendering, Intl.Segmenter for grapheme splits, raw DOM events for interaction. Details: references/stack-and-use-cases.md.
• API invariants. Call prepare()/prepareWithSegments() once per text+font pair and cache the handle; set ctx.font once per frame; keep the prepare() font string exactly in sync with the rendered CSS; use Intl.Segmenter for grapheme splits. Pitfalls + verification: references/pitfalls.md.

Routing