pretext

Measure and lay out multiline text on canvas without DOM reflows.

Updated Jun 17, 2026

Search Tags:#typography #layout #canvas #creative-coding #generative #kinetic-typography

Ready to run

npx skills add https://github.com/cxnaive/hermes-agent-llbot --skill pretext-cxnaive

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @chenglou/pretext, gsap, lil-gui, and includes references (resource) components.

What problem does it solve?

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.

Core Features & Use Cases

Creative Typography: Build kinetic text effects, shattered glyphs, and text that flows around moving obstacles at 60fps.
DOM-Free Layout: Measure text dimensions and line breaks without triggering expensive browser reflows or layout thrash.
Use Case: Create a hero section where a paragraph of text dynamically reflows around a user-dragged sprite or a morphing geometric shape.

Quick Start

Use the pretext skill to generate a creative demo where a paragraph of text flows around a moving circular obstacle.

Frequently Asked Questions about pretext

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I render kinetic typography on a canvas without triggering expensive browser reflows?▼

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.

Can I make text dynamically flow around moving geometric obstacles in a web layout?▼

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.

Does canvas-based text layout support multiline measurement for creative coding projects?▼

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.

What is the best way to build shattered glyph effects without relying on the DOM?▼

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.

Do I need the @chenglou/pretext library to calculate line breaks for custom canvas rendering?▼

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.