Measure and lay out multiline text on canvas without DOM reflows.
npx skills add https://github.com/cxnaive/hermes-agent-llbot --skill pretext-cxnaive
Please help me install this Agent Skill. Skill: pretext Source: https://github.com/cxnaive/hermes-agent-llbot/tree/main/skills/creative/pretext Command: npx skills add https://github.com/cxnaive/hermes-agent-llbot --skill pretext-cxnaive
This skill solves the performance and layout limitations of standard DOM-based text rendering by providing a creative primitive for high-performance, canvas-based text measurement and layout.
Use the pretext skill to generate a creative demo where a paragraph of text flows around a moving circular obstacle.
High-intent search queries and answers about installing and using this skill.
Canvas-based kinetic typography avoids DOM reflows by calculating text measurements and line breaks independently, enabling dynamic text reflow and shattered glyph animations at 60fps without layout thrash.
Text can dynamically reflow around moving geometric obstacles by using a canvas-based layout engine to calculate grapheme positions and line breaks, updating text positions without expensive browser reflow calculations.
Canvas-based text layout supports multiline measurement by calculating line breaks and grapheme positions, providing the exact dimensions needed for custom rendering in creative coding projects.
The best way to build shattered glyph effects without the DOM is using a canvas-based engine to measure text and calculate grapheme positions, allowing direct custom rendering on the canvas.
You need the @chenglou/pretext library to calculate line breaks and grapheme positions, providing the underlying measurements required for custom canvas rendering of complex creative typography.
humanerd-drewMeasure and lay out text with canvas rendering for creative applications.
PlaidmustacheMeasure and layout text without a DOM for canvas rendering.
projectedanxMeasure text and calculate line breaks on canvas without DOM reflow.
InverterNetworkMeasure and lay out multiline text on HTML5 Canvas without DOM reflow.
