pretext

Name: pretext
Availability: InStock
Author: zeronx

Measure and lay out text on HTML5 Canvas using the pretext ESM module.

Updated Jul 13, 2026

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

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill solves the difficulty of creating complex, high-performance typographic layouts and text-based generative art in the browser without relying on heavy DOM manipulation or reflow-heavy CSS.

Core Features & Use Cases

Creative Typography: Enables text to flow around moving obstacles, shatter into particles, or act as geometry in games.
Performance-First Layout: Uses canvas-based measurement to calculate line breaks and widths at 60fps, avoiding layout thrash.
Use Case: Build a hero section where a paragraph of text dynamically parts around a user-dragged sprite, or create a game where the level geometry is composed of real, readable prose.

Quick Start

Use the pretext skill to generate a single-file HTML 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 an HTML5 Canvas without DOM reflow?▼

You can render kinetic typography without DOM reflow by using the pretext library to calculate text measurement and line breaks directly on an HTML5 Canvas at 60fps, bypassing heavy DOM manipulation and avoiding CSS layout thrash.

What is the best way to make text flow around moving obstacles in a browser?▼

The best way to make text flow around moving obstacles is using a DOM-free text measurement framework like pretext to dynamically calculate layout boundaries against canvas-based sprites, enabling text to part around user-dragged objects in real-time.

Can I use real readable prose as level geometry in a canvas game?▼

Yes, you can use readable prose as level geometry by applying the pretext layout framework to treat text-as-geometry, enabling editorial-style layouts where game mechanics interact directly with typographic boundaries rendered on the HTML5 Canvas.

Does this kinetic typography framework require specific dependencies to function?▼

Yes, this kinetic typography framework requires the @chenglou/pretext ESM module for text measurement, GSAP for animation, and lil-gui for control interfaces, alongside an HTML5 Canvas element for rendering the final generative output.

Why does my high-performance typographic layout cause browser lag?▼

High-performance typographic layouts cause browser lag when relying on heavy DOM manipulation and reflow-heavy CSS; switching to a canvas-based measurement approach calculates line breaks independently of the DOM to maintain 60fps performance.