Measure and lay out DOM-free multiline text using canvas metrics.
npx skills add https://github.com/jaredcroxton/hermes-mirror --skill pretext-jaredcroxton
Please help me install this Agent Skill. Skill: pretext Source: https://github.com/jaredcroxton/hermes-mirror/tree/main/agents/skills/creative/pretext Command: npx skills add https://github.com/jaredcroxton/hermes-mirror --skill pretext-jaredcroxton
Pretext solves the challenge of measuring and laying out multiline text with precision in the browser without relying on DOM reflow or bounding-box reads, so your visuals can be driven by accurate typography.
Ask Hermes to generate a single-file HTML “pretext demo” where text reflows around a moving obstacle and ships with an immediately visible first-paint style choice.
High-intent search queries and answers about installing and using this skill.
You can measure text and compute multiline layouts without DOM reflow by using canvas measurement to calculate line breaks, per-line widths, and per-grapheme positions directly. This DOM-free approach avoids bounding-box reads and prevents layout thrash.
Yes, you can flow typography around moving obstacles using variable-width streaming, which continuously queries for the next line range that fits a dynamic corridor width. This allows text to actively wrap around changing shapes row-by-row without DOM layout updates.
Kinetic typography and text-as-geometry effects are built by drawing visuals directly from computed layout numbers. You generate multiline text layouts to obtain precise per-grapheme positions, enabling generative art like particle shatters or ASCII-from-prose obstacle layouts.
Browser canvas text layout works for text-based geometry games by providing accurate line breaks and per-grapheme positions before rendering. This allows you to draw game elements and obstacles entirely from returned layout numbers without relying on DOM elements.
Calculating line breaks before rendering is required for generative art to ensure visuals are driven by accurate typography. Knowing exact line widths and per-grapheme positions beforehand lets you draw complex effects like particle shatters without causing DOM layout thrash.
GuiGPaPMeasure text metrics and line breaks using Canvas measureText and Intl.Segmenter.
MarbleSodasMeasure and lay out multiline text in the browser without DOM geometry.
davpatel605-beepGenerate interactive browser typography with measured text layouts and animated compositions.
wk-jMeasure and layout multiline text without DOM reflow using prepare and layout APIs.
