skills.rest
vivekgoquest
vivekgoquestCOMMUNITY
Explore all skills by this author →
GitHub

pretext

Create browser demos with DOM-free text measurement and canvas layout using @chenglou/pretext.

Updated Aug 22, 2026
Search Tags:#typography#creative coding#canvas#text layout#kinetic typography#pretext#html demo
One-click install
npx skills add https://github.com/vivekgoquest/hermes-agent-stable --skill pretext-vivekgoquest
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/vivekgoquest/hermes-agent-stable/tree/main/skills/creative/pretext
Command: npx skills add https://github.com/vivekgoquest/hermes-agent-stable --skill pretext-vivekgoquest

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @chenglou/pretext, gsap, lil-gui, and includes references (resource) and assets (resource) components.

What problem does it solve? Measuring multiline text layout in the browser normally requires DOM reads like getBoundingClientRect, which cause reflow thrash and make real-time text effects impractical. This Skill uses the @chenglou/pretext library to compute line breaks, per-line widths, and per-grapheme positions purely via canvas measurement, enabling 60fps creative text demos. ## Core Features & Use Cases - Variable-width text reflow: Flow paragraphs around moving obstacles, sprites, or ASCII-art shapes using layoutNextLineRange with per-row width functions. - Text-as-geometry games and kinetic typography: Build Breakout-style word bricks, shatter-into-particles effects, and animated editorial layouts from measured line and grapheme positions. - Multiline shrink-wrap and measurement: Compute exact container heights and tightest-fitting widths without touching the DOM, for virtualized lists and masonry layouts. - Use Case: A user asks for a hero section where a paragraph parts around a draggable glowing orb. The Skill starts from the hello-orb-flow.html template, swaps in real prose, tunes the palette and font, and delivers a single self-contained HTML file. ## Quick Start Ask the agent to build a pretext demo where text flows around a draggable shape, and it will generate a self-contained HTML file you can open with python -m http.server.

Frequently Asked Questions about pretext

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make text flow around a moving shape in the browser?▼

Use pretext's layoutNextLineRange with a per-row width function that returns the corridor width at each y position. Call prepareWithSegments once, then stream lines row-by-row each frame, skipping rows where the corridor is too narrow.

What is the @chenglou/pretext library used for?▼

Pretext is a 15KB zero-dependency TypeScript library for DOM-free multiline text measurement. Given text, font, and width, it returns line breaks, per-line widths, per-grapheme positions, and total height via canvas measurement without reflow.

How do I import pretext in a browser HTML file?▼

Import from https://esm.sh/@chenglou/[email protected] inside a script type="module" tag. Use esm.sh rather than unpkg because esm.sh compiles the TypeScript exports to browser-ready ESM, while unpkg may 404 or serve raw TS.

Why do my pretext measurements not match the rendered text?▼

Measurement drift happens when the canvas ctx.font string does not exactly match the rendered CSS font, often because a web font failed to load and CSS fell back to another family. Preload the font explicitly and keep font and letterSpacing in sync.

When should I not use pretext for text layout?▼

Avoid pretext for static pages where CSS already solves layout, for rich text editors, and for general inline formatting engines. It is intentionally narrow: measurement and line layout only, not a rendering or editing framework.

How do I split text into graphemes for per-letter animation?▼

Use the built-in Intl.Segmenter with granularity set to grapheme. Plain string splitting breaks emoji, combining marks, and CJK characters, while Intl.Segmenter returns correct visible glyphs for per-particle physics.

Related Skills

Explore More Design & Creative Skills→
tayiorbeiitayiorbeii

web-typography

Select, pair, and implement web typefaces with CSS and font loading optimization.

Community
Intermediate
openaiopenai
5.3k

publish-artifact-to-sites

Publishes validated Data Analytics report and dashboard artifacts as Sites-hosted snapshots.

Official
Advanced
LuminaVaultLuminaVault

p5js

Generate interactive and generative visual art with the p5.js library.

Official
Advanced
stromy-orgstromy-org

pptx-hd

Convert HTML/CSS slide designs into editable PowerPoint decks.

Official
Advanced