pretext

Measure text and calculate line breaks on canvas without DOM reflow.

1|Updated May 12, 2026

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

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/projectedanx/hermes-agent/tree/main/skills/creative/pretext
Command: npx skills add https://github.com/projectedanx/hermes-agent --skill pretext-projectedanx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @chenglou/pretext, gsap, lil-gui, and includes assets (resource) and 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 high-performance, canvas-based engine for complex typographic layouts and kinetic text effects.

Core Features & Use Cases

Creative Layouts: Enables text to flow around moving obstacles, create typographic games, and generate kinetic art at 60fps.
Geometric Precision: Provides exact per-grapheme measurement and line-break calculation without browser reflow thrashing.
Use Case: Use this to build interactive hero sections where prose flows around a draggable sprite, or to create generative art where text shatters into particles on click.

Quick Start

Use the pretext skill to generate a single-file HTML demo that features a paragraph flowing 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 DOM reflow issues?▼

Canvas-based text layout engines calculate line-breaks and per-grapheme geometry without browser reflow. This approach handles complex typographic layouts and kinetic text interactions at 60fps, avoiding DOM performance bottlenecks.

What is the best way to make text flow around moving obstacles in creative coding?▼

Using a canvas-based text layout engine enables dynamic text reflow around moving obstacles with geometric precision. This approach handles complex text-as-geometry interactions, allowing interactive prose to flow around draggable sprites in real-time.

Does canvas-based text rendering work with GSAP for generative art animations?▼

Canvas-based text rendering integrates with GSAP to create generative art and kinetic typography. Combining precise text measurement engines with GSAP enables dynamic text-as-geometry interactions and particle effects at high frame rates.

How do I calculate exact line-breaks for typography in a browser game?▼

A specialized canvas text layout engine provides exact per-grapheme measurement and line-break calculation without browser reflow. This ensures high-performance typographic layouts for browser games and interactive creative demos.

Why does DOM-based text reflow thrash performance in kinetic typography demos?▼

DOM-based text reflow thrashes performance during kinetic typography because continuous layout recalculations consume resources. A DOM-free canvas engine bypasses browser reflow by handling text measurement independently, maintaining smooth 60fps animations.