Measure and layout DOM-free text for canvas-based visualizations.
npx skills add https://github.com/heysuhas/hermes_cli --skill pretext-heysuhas
Please help me install this Agent Skill. Skill: pretext Source: https://github.com/heysuhas/hermes_cli/tree/main/skills/creative/pretext Command: npx skills add https://github.com/heysuhas/hermes_cli --skill pretext-heysuhas
This Skill solves the performance and layout limitations of standard CSS and DOM-based text rendering, allowing for high-performance, geometric text layouts that can flow around moving objects or form complex interactive shapes at 60fps.
Use the pretext skill to generate a single-file HTML demo that features a paragraph of text flowing around a moving circular obstacle.
High-intent search queries and answers about installing and using this skill.
DOM-free text measurement calculates line breaks and dimensions on a canvas, enabling kinetic typography at 60fps. This approach bypasses CSS rendering limitations by using geometric layout calculations instead of standard DOM elements.
Creative text layout engines allow text to dynamically flow around moving obstacles by recalculating geometric positions in real-time. This enables interactive visualizations where paragraphs wrap around user-dragged sprites or morphing shapes without browser reflows.
Canvas-based text measurement supports text-as-geometry game mechanics by treating typography as physical layout data. You can build interactive game environments where per-glyph physics and dynamic reflow respond to real-time collisions.
Generative text layouts integrate with animation libraries like GSAP to sequence kinetic typography effects. The underlying layout engine handles the canvas-based measurement and geometric positioning, while GSAP drives the motion.
DOM-based text rendering should be avoided when you need high-performance, complex typographic effects like per-glyph physics or dynamic text reflow. Standard CSS lacks the geometric precision and frame-rate consistency required for 60fps interactive visualizations.
DOM-free text measurement requires the @chenglou/pretext library to calculate geometric layouts and line breaks on a canvas. This dependency provides the core engine needed to bypass standard browser reflows for creative coding visualizations.
humanerd-drewMeasure and lay out text with canvas rendering for creative applications.
InverterNetworkMeasure and lay out multiline text on HTML5 Canvas without DOM reflow.
projectedanxMeasure text and calculate line breaks on canvas without DOM reflow.
zangjeicyMeasure and render DOM-free kinetic typography on HTML5 Canvas.
