skills.rest
Piaoxuemoli
PiaoxuemoliCOMMUNITY
Explore all skills by this author →
GitHub

pretext

Measure, layout, and render text using canvas without the DOM.

Updated Jun 15, 2026
Search Tags:#typography#creative coding#generative art#ASCII art#text layout#kinetic typography
One-click install
npx skills add https://github.com/Piaoxuemoli/qoobeeHermes --skill pretext-piaoxuemoli
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/Piaoxuemoli/qoobeeHermes/tree/main/hermes/skills/creative/pretext
Command: npx skills add https://github.com/Piaoxuemoli/qoobeeHermes --skill pretext-piaoxuemoli

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a powerful tool for creating innovative text layouts and interactive demos, especially those involving ASCII art and typography, without relying on the DOM.

Core Features & Use Cases

  • Text Measurement and Layout: Measure and layout text using canvas measurement, without the need for a DOM read.
  • ASCII Art Effects: Generate ASCII art effects using real words or prose, not monospace rasters.
  • Kinetic Typography: Create kinetic typography with per-glyph physics, including shatter, scatter, flock, and flow effects.
  • Generative Art: Use text to create generative art, especially with non-Latin scripts or mixed scripts.
  • Shrink-wrap UI: Design multiline "shrink-wrap" UI that adjusts to the text's tightest container.
  • Use Case: Create a text-based game where the playfield is made of text, or a typographic animation that evolves over time.

Quick Start

Use the pretext skill to create a simple text-based game with ASCII obstacles.

Frequently Asked Questions about pretext

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

FAQPage Schema
How do I render text layouts and measure text without relying on the DOM?▼

To create text layouts without the DOM, you use canvas-based text measurement to calculate glyph dimensions and generate precise multiline shrink-wrap UI containers. This approach enables DOM-free text rendering for environments lacking standard web APIs.

Can I generate ASCII art using real words instead of monospace raster characters?▼

Yes, you can generate ASCII art effects using real words or prose rather than relying on monospace rasters. This allows dynamic typographic layouts where actual text content forms the visual structure.

What is kinetic typography and how do I create per-glyph physics effects?▼

Kinetic typography is text animation involving per-glyph physics, including shatter, scatter, flock, and flow effects. You create it by applying physics algorithms to individual glyphs on a canvas to build interactive demos.

Does this approach support generative art with non-Latin or mixed scripts?▼

Yes, this approach supports generative art with non-Latin scripts or mixed scripts. By leveraging canvas text measurement, it accurately lays out complex character sets for creative coding projects.

What do I need to set up before building a text-based interactive game with ASCII obstacles?▼

To build a text-based game with ASCII obstacles, you need a canvas environment and text layout algorithms. These allow you to render the text playfield and manage DOM-free rendering for interactive gameplay.

Related Skills

Explore More Design & Creative Skills→
humanerd-drewhumanerd-drew
2

pretext

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

Official
Advanced
webdevtodayjasonwebdevtodayjason

pretext

Generate visual demos with text layout and rendering using the @chenglou/pretext library.

Community
Intermediate
tomada1114tomada1114
4

fixing-srt-subtitles

Correct transcription errors and optimize line breaks in SRT subtitle files.

Community
Basic
eliottbusinesseliottbusiness

pretext

Generate interactive text-based visual effects using canvas measurement and layout.

Community
Advanced