pretext

Measure and layout DOM-free text for canvas-based visualizations.

2|1|Updated Jul 14, 2026

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

Ready to run

npx skills add https://github.com/heysuhas/hermes_cli --skill pretext-heysuhas

💬 Prompt for ChatGPT / Claude Chat▼

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

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 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.

Core Features & Use Cases

DOM-free Measurement: Calculate line breaks, widths, and heights without triggering browser reflows.
Creative Typography: Enable text to flow around moving sprites, build text-based game geometry, or create kinetic typography with per-glyph physics.
Use Case: Build a hero section where a paragraph of text dynamically wraps around a user-dragged orb or a morphing ASCII logo in real-time.

Quick Start

Use the pretext skill to generate a single-file HTML demo that features a paragraph of text 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 in the browser without causing DOM reflows?▼

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.

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

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.

Can I build text-as-geometry game mechanics using canvas-based text measurement?▼

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.

Does generative text layout work with GSAP for kinetic typography animations?▼

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.

When should I avoid DOM-based text rendering for creative visualizations?▼

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.

Do I need a specific library to perform DOM-free text measurement for interactive layouts?▼

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.