skills.rest
ldzhhxx
ldzhhxxCOMMUNITY
Explore all skills by this author →
GitHub

pretext

Generate text layouts and animations using the @chenglou/pretext library.

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

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 allows for the creation of unique text layouts, such as ASCII art, typographic flow around obstacles, kinetic typography, and text-as-geometry games, providing a creative and efficient way to manipulate text without relying on traditional DOM structures.

Core Features & Use Cases

  • Text Measurement and Layout: Provides precise text measurement and layout capabilities using canvas measurement, enabling creative text manipulation.
  • ASCII Art Effects: Generates ASCII art effects using real words or prose, offering a novel approach to visual representation.
  • Text-as-Geometry Games: Creates games where the playfield, obstacles, or bricks are made of text, providing an interactive and educational experience.
  • Kinetic Typography: Animates text with per-glyph physics, allowing for dynamic and engaging text presentations.
  • Typographic Generative Art: Generates art with text, especially with non-Latin scripts or mixed scripts, enabling artistic exploration.
  • Multiline 'Shrink-wrap' UI: Provides a way to create UI elements that fit text tightly to their container, offering a compact and efficient layout option.
  • Use Case: For a design agency creating an interactive demo showcasing typography in a unique and engaging way, this skill can be used to create a kinetic typography animation that changes with user interaction.

Quick Start

Use the pretext skill to create a text layout around a moving orb. Open the template 'hello-orb-flow.html' and adjust the orb position with the mouse.

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 structures?▼

Kinetic typography without DOM structures is created by using canvas measurement for precise text layout and animating text with per-glyph physics. This approach enables dynamic presentations without traditional DOM dependencies.

What is the best way to generate ASCII art using real prose?▼

Generating ASCII art with real prose is achieved by utilizing precise text measurement to map words into visual representations. This allows text to form complex shapes while remaining readable.

Can I create typographic flow around obstacles in a text-as-geometry game?▼

Typographic flow around obstacles is possible by treating text as geometry for interactive games. This allows the playfield and obstacles to be made of text, creating an educational and interactive experience.

How does canvas measurement handle multiline shrink-wrap UI for non-Latin scripts?▼

Canvas measurement handles multiline shrink-wrap UI by fitting text tightly to its container, which is especially useful for non-Latin or mixed scripts. This provides a compact and efficient layout option.

Does this pretext approach work for generative text-based art with mixed scripts?▼

Yes, this approach works for generative text-based art with mixed scripts by leveraging canvas measurement. It enables artistic exploration and precise layout for non-Latin typographic generative art.

Related Skills

Explore More Design & Creative Skills→
ToqsickToqsick

pretext

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

Community
Advanced
faramirezsfaramirezs

pretext

Compute DOM-free text layouts with pretext for canvas-based browser demos.

Community
Intermediate
davpatel605-beepdavpatel605-beep

pretext

Generate interactive browser typography with measured text layouts and animated compositions.

Community
Advanced
matthew-johnsonmatthew-johnson

pretext

Measure and lay out multiline browser text without DOM reflows.

Community
Advanced