pretext

Measure and lay out text on HTML5 Canvas without DOM reflows.

Updated Jul 6, 2026

Search Tags:#typography #layout #canvas #creative-coding #ascii-art #generative

Ready to run

npx skills add https://github.com/ghufronbagaskara/agent-im --skill pretext-ghufronbagaskara

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the performance bottleneck of browser-based text layout by enabling precise, geometric text measurement and wrapping without triggering expensive DOM reflows.

Core Features & Use Cases

Geometric Text Layout: Calculate line breaks, widths, and positions for text flowing around arbitrary shapes or obstacles at 60fps.
Creative Typography: Build kinetic typography, text-as-geometry games, and editorial layouts that react to user interaction.
Use Case: Create a hero section where a paragraph of text dynamically flows around a draggable sprite or a morphing ASCII logo in real-time.

Quick Start

Use the pretext skill to generate a new HTML demo file that flows a paragraph of text around a 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 text flowing around obstacles on an HTML5 Canvas without DOM reflows?▼

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.

What is DOM-free text measurement and when do I need it for creative visualizations?▼

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.

Can I build kinetic typography effects that react to user interaction at 60fps?▼

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.

Does this text layout engine support complex typographic flows around arbitrary shapes?▼

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.

What is the best way to handle high-performance text wrapping for browser-based games?▼

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.

Do I need external libraries to perform non-reflow text measurement and line-range materialization?▼

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.