pretext

Measure and layout text for DOM-free ASCII art and typography demos.

5|1|Updated Mar 24, 2026
One-click install
npx skills add https://github.com/lengoctuong2005/Branding-Focused-Skills --skill pretext-lengoctuong2005
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/lengoctuong2005/Branding-Focused-Skills/tree/main/antigravity/skills/hermes-collection/creative/pretext
Command: npx skills add https://github.com/lengoctuong2005/Branding-Focused-Skills --skill pretext-lengoctuong2005

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill allows users to create complex text-based visual effects and interactive demos without relying on traditional DOM-based layouts.

Core Features & Use Cases

  • Text Measurement and Layout: Provides precise text measurement and layout capabilities for creative uses.
  • ASCII Art Effects: Enables the creation of ASCII art effects using real words or prose.
  • Typographic Generative Art: Allows users to create generative art using typography.
  • Use Case: Imagine you want to create an interactive demo where text flows around a moving orb. This Skill can help you achieve that without any DOM manipulation.

Quick Start

Run the 'hello-orb-flow.html' template with the 'pretext' skill to create a text reflowing around a moving orb.

Frequently Asked Questions about pretext

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

FAQPage Schema
How do I create ASCII art using real words instead of static characters?

To create ASCII art using real words, this Skill provides a DOM-free text measurement and layout library to map prose onto visual structures. It calculates text dimensions directly, enabling generative art and interactive text demos without traditional DOM layouts.

How do I make text flow around a moving object without DOM manipulation?

Text flows around moving objects by using canvas-based measurement instead of DOM layouts. This Skill calculates text geometry independently, allowing you to build interactive demos where typographic elements reflow dynamically around moving orbs.

Can I build kinetic typography and text-as-geometry games in a browser?

Yes, you can build kinetic typography and text-as-geometry games. This Skill provides the precise text measurement and layout logic required to animate text and treat it as interactive geometry within canvas-based browser applications.

Does this text layout library rely on traditional DOM elements?

No, this text layout library does not rely on traditional DOM elements. It performs DOM-free text visualization by utilizing canvas measurement, which allows for creative generative art and interactive text effects without standard HTML layout constraints.

What is the best way to generate interactive text demos with precise text measurement?

The best way to generate interactive text demos is using a dedicated canvas measurement library. This Skill provides the necessary text measurement and layout functions to calculate dimensions dynamically, enabling complex typographic visual effects without DOM overhead.