Measure and lay out text on HTML5 Canvas without DOM reflows.
npx skills add https://github.com/ghufronbagaskara/agent-im --skill pretext-ghufronbagaskara
Please help me install this Agent Skill. Skill: pretext Source: https://github.com/ghufronbagaskara/agent-im/tree/main/hermes-home/skills/creative/pretext Command: npx skills add https://github.com/ghufronbagaskara/agent-im --skill pretext-ghufronbagaskara
This skill solves the performance bottleneck of browser-based text layout by enabling precise, geometric text measurement and wrapping without triggering expensive DOM reflows.
Use the pretext skill to generate a new HTML demo file that flows a paragraph of text around a circular obstacle.
High-intent search queries and answers about installing and using this skill.
You can render text flowing around obstacles on an HTML5 Canvas without DOM reflows by using a DOM-free text measurement engine to calculate geometric line breaks and positions at 60fps.
DOM-free text measurement is the process of calculating typographic widths and line breaks without triggering browser reflows. You need it for creative visualizations requiring high-performance, obstacle-aware text layout.
You can build kinetic typography effects reacting to user interaction at 60fps by materializing line ranges geometrically, bypassing DOM updates to maintain smooth frame rates during dynamic text animations.
This text layout engine supports complex typographic flows around arbitrary shapes by calculating precise geometric measurements, enabling paragraphs to dynamically wrap around morphing ASCII logos or draggable sprites.
The best way to handle high-performance text wrapping for browser-based games is using a DOM-free layout engine that treats text as geometry, enabling obstacle-aware layouts without expensive reflow calculations.
You need the @chenglou/pretext library to perform non-reflow text measurement and line-range materialization, which provides the underlying geometric calculations for DOM-free typographic flows.
humanerd-drewMeasure and lay out text with canvas rendering for creative applications.
CyapstayeMeasure and lay out text on canvas without DOM reflows.
heximaoMeasure and lay out text without DOM using the Pretext TypeScript library.
InverterNetworkMeasure and lay out multiline text on HTML5 Canvas without DOM reflow.
