Measure and lay out multiline text around shapes without DOM reflow.
npx skills add https://github.com/jleechanorg/hermes-agent --skill pretext-jleechanorg
Please help me install this Agent Skill. Skill: pretext Source: https://github.com/jleechanorg/hermes-agent/tree/main/skills/creative/pretext Command: npx skills add https://github.com/jleechanorg/hermes-agent --skill pretext-jleechanorg
Measure and lay out multiline text around obstacles without DOM reflow, enabling fast, creative browser demos.
Open the sample pretext demo HTML in templates/hello-orb-flow.html and replace the sample text to render your own demo.
High-intent search queries and answers about installing and using this skill.
DOM-free text layout calculates line breaks, per-line widths, and per-glyph positions algorithmically, returning geometry data for direct canvas rendering without browser reflow.
Kinetic typography applies text-as-geometry by treating per-glyph positions as animated coordinates, enabling generative art where multiline text flows dynamically around obstacles on a canvas.
You measure multiline text and obtain per-glyph positions by passing pinned fonts and input text to a layout API that returns line breaks, line widths, and total height for rendering.
Yes, you can build a single-file HTML demo by using provided templates with pinned fonts and a straightforward layout API to render dynamic text wrapping around obstacles.
Yes, the DOM-free text layout approach works for editorial layouts by measuring multiline text and calculating line breaks around obstacles to return precise per-glyph positions for rendering.
devMoez...
PlaidmustacheMeasure and layout text without a DOM for canvas rendering.
paxlabs-incGenerate DOM-free kinetic typography with canvas-based text layout.
SignmanalGenerate single-file HTML demos with dynamic text layout using pretext and Canvas.
