Measure and lay out multiline text around obstacles without DOM.
npx skills add https://github.com/cabezno/bmb-encover-agent --skill pretext-cabezno
Please help me install this Agent Skill. Skill: pretext Source: https://github.com/cabezno/bmb-encover-agent/tree/main/skills/creative/pretext Command: npx skills add https://github.com/cabezno/bmb-encover-agent --skill pretext-cabezno
Pretext helps you build creative browser demos where text must wrap and reflow around dynamic obstacles without relying on normal DOM layout, avoiding guesswork and layout shift.
Use the pretext skill to generate a single-file HTML demo that flows a short, intentional paragraph around a moving obstacle (like an orb) using DOM-free pre-measured line ranges.
High-intent search queries and answers about installing and using this skill.
DOM-free text reflow around moving obstacles is achieved by pre-measuring text metrics and computing variable-width line ranges row-by-row. You provide a text measurement handle and font string, then route lines dynamically around shapes during canvas rendering.
Obstacle-aware line routing calculates per-line widths that change at every row, allowing text to flow into corridors around moving shapes. This enables kinetic typography and ASCII-word geometry effects without relying on normal DOM layout or experiencing layout shift.
Yes, you can generate self-contained single-file HTML demos by measuring text once and reusing the prepared layout during animation. This supports per-glyph animated effects and grapheme-safe segmentation for accurate single-file HTML text animations.
Grapheme-safe segmentation is fully supported to ensure accurate per-glyph positioning. The layout functions accept a prepared text measurement handle and font string, providing next-line range layout capabilities where widths can vary per row.
Canvas text reflow causes layout shift when relying on DOM measurement instead of pre-computed text metrics. By measuring multiline text upfront and applying obstacle-aware line routing with variable per-row widths, you avoid guesswork and achieve smooth shrink-wrapping.
DOM-free text measurement is needed for ASCII-word geometry when text must wrap around dynamic obstacles like morphing ASCII masks. It provides pre-calculated line breaks and grapheme-aware positioning to render creative typography without browser layout dependencies.
PlaidmustacheMeasure and layout text without a DOM for canvas rendering.
rickyanandaCreate single-file browser demos for measured text layout without DOM reflow.
GitnappConvert measured text layout data into interactive canvas typography compositions.
carterwayneskhizeineGenerate browser demos with DOM-free multiline text measurement and obstacle reflow.
