...
npx skills add https://github.com/devMoez/titan --skill pretext-devmoez
Please help me install this Agent Skill. Skill: pretext Source: https://github.com/devMoez/titan/tree/main/skills/creative/pretext Command: npx skills add https://github.com/devMoez/titan --skill pretext-devmoez
It solves the challenge of building creative, browser-based text layouts (like word-games, ASCII-style typography, and text-as-geometry) without relying on DOM layout tricks or expensive reflows.
Use it when the user wants a “pretext demo,” text that flows around an orb/shape, text-as-collision/gameplay geometry, kinetic typography, or single-file HTML generative artwork using real prose (not lorem ipsum).
Create a single self-contained HTML file that imports @chenglou/pretext, prepares the user’s text with the exact canvas font string, then uses layoutNextLineRange to stream line segments around the obstacle each frame.
High-intent search queries and answers about installing and using this skill.
Kinetic typography in single-file HTML requires computing deterministic, DOM-free text metrics to calculate exact grapheme positions and per-line widths. By streaming line segments around obstacles each frame, you can generate generative typographic animations and custom canvas layouts without relying on browser layout engines.
To ensure stable, accurate text reflowing, you must synchronize the exact canvas font string with the DOM-free measurement API and pin library versions. Correct font-string synchronization guarantees that computed line breaks and grapheme positions remain deterministic across renders.
The best way to generate ASCII art masks for creative coding is using DOM-free multiline measurement to project text as geometry. This technique computes per-line widths and grapheme positions, allowing you to route text row-by-row around projected ASCII masks and create custom typographic effects on canvas.
Kinetic typography rendering shifts between frames when font-string synchronization fails or library versions are not pinned during DOM-free text measurement. Accurate reflowed rendering requires deterministic grapheme positions, which break if the canvas font string does not exactly match the computed layout metrics.
jordanhubbardGenerate interactive text-based visual effects using @chenglou/pretext for DOM-free text measurement and layout.
StarryCodMeasure and lay out text in the browser without DOM reflows.
davpatel605-beepGenerate interactive browser typography with measured text layouts and animated compositions.
projectedanxMeasure text and calculate line breaks on canvas without DOM reflow.
