pretext

Measure and layout text without the DOM using the pretext library.

Updated Jul 3, 2026

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

Ready to run

npx skills add https://github.com/Toqsick/MaxClaw --skill pretext-toqsick

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/Toqsick/MaxClaw/tree/main/.claude/skills/pretext
Command: npx skills add https://github.com/Toqsick/MaxClaw --skill pretext-toqsick

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill enables the creation of unique text-based layouts and animations, providing a creative solution for ASCII art, typographic effects, and kinetic typography without the need for traditional DOM-based web design.

Core Features & Use Cases

DOM-free Text Layout: Offers a way to measure and layout text without using the DOM, enabling creative text placement.
ASCII Art and Typography: Enables the creation of ASCII art, typographic flow around obstacles, and text-as-geometry games.
Use Case: Design a visually engaging webpage that features text flowing around a dynamic shape, creating a unique user experience.

Quick Start

Use the pretext skill to generate a text layout demo that reflows text around a moving shape.

Frequently Asked Questions about pretext

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

FAQPage Schema

How do I create kinetic typography without relying on DOM layout techniques?▼

Kinetic typography can be created without DOM layouts by utilizing canvas measurement for text geometry. This approach allows for DOM-free text measurement and layout, enabling creative typographic animations and effects.

What is generative ASCII art and how does DOM-free text layout work?▼

Generative ASCII art uses DOM-free text layout to measure and position characters creatively without traditional web elements. It leverages canvas measurement to render text-based visual effects and typographic flows.

Can I make text flow around dynamic shapes using a DOM-free text layout?▼

Yes, DOM-free text layout supports text flowing around dynamic shapes. It measures text geometry via canvas to calculate reflow, allowing you to design webpages with text wrapping around moving obstacles.

Does kinetic typography require traditional DOM-based web design to function?▼

No, kinetic typography does not require traditional DOM-based web design. By using the pretext library, you can achieve creative text placement and animations entirely through DOM-free text measurement.

Are there limitations to using canvas measurement for ASCII art instead of DOM layout?▼

Using canvas measurement for ASCII art means you bypass traditional DOM layout techniques entirely. This DOM-free approach requires handling text measurement and layout logic manually to achieve your desired visual effects.

What is the best way to build text-as-geometry games for web browsers?▼

The best way to build text-as-geometry games is using DOM-free text layout. This method measures text via canvas to treat characters as geometric objects, enabling unique interactive typography without standard web layout constraints.