pretext

Name: pretext
Availability: InStock
Author: HUMANERD

Measure and lay out text with canvas rendering for creative applications.

2|7|Updated Jun 19, 2026

Search Tags:#creative coding #generative art #ASCII art #text layout #kinetic typography

Ready to run

npx skills add https://github.com/humanerd-drew/opencode-drewgent --skill pretext-humanerd-drew

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/humanerd-drew/opencode-drewgent/tree/main/skills/creative/pretext
Command: npx skills add https://github.com/humanerd-drew/opencode-drewgent --skill pretext-humanerd-drew

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @chenglou/pretext, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a way to create intricate and visually appealing text layouts without using the DOM, enabling creative text placement and animation.

Core Features & Use Cases

Text Measurement and Layout: Measure text and lay it out in various shapes and sizes.
Creative Layouts: Generate text-as-geometry games, kinetic typography, and generative art.
Use Case: A designer wants to create a digital typographic canvas that flows text around an orbiting orb and shatters it on user interaction.

Quick Start

Run the pretext skill with the provided template to create a text layout around an orb.

Frequently Asked Questions about pretext

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

FAQPage Schema

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

DOM-free text layout renders typography directly to canvas without HTML elements, needed for generative art, kinetic typography, and interactive text effects requiring geometric placement and dynamic animation unavailable in standard web layouts.

How do I measure text and lay it out in geometric shapes using canvas?▼

You measure text and lay it out in geometric shapes by using the @chenglou/pretext library for calculation and HTML5 Canvas for rendering, enabling text to flow around objects or form custom typographic patterns.

Can I create kinetic typography and ASCII art without relying on DOM elements?▼

Yes, you can create kinetic typography and ASCII art without DOM elements by employing canvas rendering for dynamic text effects and using the pretext library to handle measurement and geometric layout calculations.

Do I need the @chenglou/pretext library to generate text-as-geometry layouts?▼

Yes, the @chenglou/pretext library is required to generate text-as-geometry layouts, as it provides the underlying DOM-free measurement and layout calculations necessary for the HTML5 Canvas rendering process.

What are the limitations of using canvas rendering for generative text layouts?▼

Canvas rendering for generative text layouts requires manual handling of measurement and layout via the pretext library, meaning you lose native DOM text features like accessibility tags and dynamic reflow without custom calculation logic.