Create single-file browser demos for measured text layout without DOM reflow.
npx skills add https://github.com/rickyananda/hermes-skills --skill pretext-rickyananda
Please help me install this Agent Skill. Skill: pretext Source: https://github.com/rickyananda/hermes-skills/tree/main/creative/pretext Command: npx skills add https://github.com/rickyananda/hermes-skills --skill pretext-rickyananda
This Skill turns measured text layout into interactive browser art, letting you build compositions that flow around objects, animate by glyph, and stay precise without DOM reflow or layout guessing.
Create a single-file browser demo that uses pretext to make a dark, animated paragraph flow around a draggable orb.
High-intent search queries and answers about installing and using this skill.
You can build obstacle-aware text flow by measuring text and rendering it via canvas without triggering DOM reflow. This Skill generates single-file browser demos that lay out prose row by row around moving shapes using variable-width line layout.
Yes, ASCII art from real prose is generated by treating text as geometry within a single-file browser demo. The process uses grapheme-aware segmentation and canvas rendering to construct visual structures from actual source text instead of placeholder characters.
Yes, building text-as-geometry demos requires the pinned @chenglou/pretext library accessed via esm.sh. The Skill incorporates this dependency into single-file HTML output to handle grapheme-aware segmentation and variable-width line layout.
The best way to prototype shrink-wrap layouts for interactive games is using canvas rendering with precise text measurement. This avoids layout guessing by calculating variable-width line layouts independently of the DOM, allowing words to act as visual geometry.
Yes, grapheme-aware segmentation is explicitly required for this text layout approach. It ensures accurate measurement and rendering of complex scripts within the canvas-based single-file browser demos, maintaining precision across different character sets.
You should avoid canvas-based text rendering when you need native DOM accessibility, standard text selection, or SEO indexing for your kinetic typography. This approach focuses on visual compositions and standalone demos where layout precision matters more than semantic HTML structure.
carterwayneskhizeineGenerate browser demos with DOM-free multiline text measurement and obstacle reflow.
GitnappConvert measured text layout data into interactive canvas typography compositions.
davpatel605-beepGenerate interactive browser typography with measured text layouts and animated compositions.
SignmanalGenerate single-file HTML demos with dynamic text layout using pretext and Canvas.
