Generate single-file HTML demos with DOM-free text layout around obstacles.
npx skills add https://github.com/JamesFincher/gengar --skill pretext-jamesfincher
Please help me install this Agent Skill. Skill: pretext Source: https://github.com/JamesFincher/gengar/tree/main/skills/creative/pretext Command: npx skills add https://github.com/JamesFincher/gengar --skill pretext-jamesfincher
Pretext solves the problem of creating visually rich, browser-native text layouts that must wrap around shapes without expensive DOM measurement and reflow.
Use Case Example: You want a single-file HTML demo where a long paragraph curves around a dragged orb and stays stable at high frame rates; pretext lets you measure once, then stream layout every frame based on the obstacle’s current position.
Use the pretext skill to generate a single-file HTML demo that measures your chosen real prose with @chenglou/pretext and renders it to a canvas with text flowing around a moving obstacle.
High-intent search queries and answers about installing and using this skill.
Text reflow around moving obstacles requires precomputing line breaks and grapheme positions with measurement APIs, then streaming variable-width line layout row-by-row to render interactive typography on a canvas without DOM measurement overhead.
Kinetic typography uses measured geometry to drive text motion and layout effects. By precomputing per-line widths and grapheme positioning from text and font data, you can render particle or shatter typography effects on a canvas at high frame rates.
To build a single-file HTML demo, you measure your chosen prose with cached prepared handles, then stream the layout every frame based on the obstacle's current position to render text that curves around a dragged orb or shape on a canvas.
Yes, shrink-wrapped text cards are driven by measured geometry rather than CSS guessing. By precomputing line breaks and per-line widths from text, font, and width inputs, you can render text that fits precisely within changing interactive geometry on a canvas.
Yes, the DOM-free text measurement approach precomputes all layout data including line breaks and grapheme positioning, enabling stable high frame rate interactive rendering on a canvas without relying on CSS or DOM reflow.
You should avoid CSS text wrapping when text must flow around moving obstacles, fit changing geometry precisely, or support kinetic typography effects, as CSS cannot precompute grapheme positions or stream row-by-row layout for interactive canvas rendering.
carterwayneskhizeineGenerate browser demos with DOM-free multiline text measurement and obstacle reflow.
jleechanorgMeasure and lay out multiline text around shapes without DOM reflow.
SethyPagnaCreate browser-based text layout demos with canvas rendering and grapheme segmentation.
SignmanalGenerate single-file HTML demos with dynamic text layout using pretext and Canvas.
