pretext

Route text around obstacles and animate typography as geometry in browser demos.

Updated May 12, 2026
One-click install
npx skills add https://github.com/hungthinh04/Hermes_AI_Agent --skill pretext-hungthinh04
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/hungthinh04/Hermes_AI_Agent/tree/main/skills/creative/pretext
Command: npx skills add https://github.com/hungthinh04/Hermes_AI_Agent --skill pretext-hungthinh04

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

pretext solves the problem of laying out text in the browser when you need precise line breaks, flowing copy, and glyph-level control before anything is rendered.

Core Features & Use Cases

  • Obstacle-aware text flow: Route paragraphs around moving shapes, sprites, and custom corridors without relying on DOM reflow.
  • Creative typography rendering: Build kinetic type, ASCII art made from real prose, and text-as-geometry interactions for browser demos.
  • Measured layout workflows: Use precomputed line widths, grapheme positions, and shrink-wrapped sizing for single-file HTML experiments and editorial-style compositions.

Quick Start

Ask Hermes to create a single-file pretext demo that turns your idea into a browser scene with measured text layout, motion, and a polished visual style.

Frequently Asked Questions about pretext

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

FAQPage Schema
How do I flow text around obstacles in a canvas without relying on DOM reflow?

Obstacle-aware text flow in a canvas requires DOM-free text measurement to calculate per-row corridors and route paragraphs dynamically around moving shapes. This approach enables precise line breaks and glyph-level control in single-file HTML creative coding projects.

What is kinetic typography and how do I render it as geometry in the browser?

Kinetic typography animates text as geometry in the browser by applying measured text layout and canvas rendering to manipulate grapheme positions. This creates motion-driven editorial reflow and text-as-geometry interactions for single-file HTML creative coding projects.

How do I handle grapheme-safe text segmentation for ASCII art in creative coding?

Grapheme-safe text segmentation for ASCII art ensures complex characters are measured correctly by using DOM-free text measurement to precompute line widths and grapheme positions. This prevents broken glyphs during canvas rendering of text-driven generative art.

Can I build single-file HTML generative art demos with precise line breaks?

Yes, single-file HTML generative art demos with precise line breaks are built using precomputed text measurement to calculate glyph positions and shrink-wrapped sizing before canvas rendering. This enables editorial-style text compositions and kinetic type interactions.

Does pretext work for editorial reflow and text-driven generative art without external dependencies?

Pretext works for editorial reflow and text-driven generative art without external dependencies by applying DOM-free text measurement and canvas rendering. It provides per-row corridor layout APIs to route text around obstacles in single-file HTML projects.

Why does my canvas typography layout break when rendering complex scripts?

Canvas typography layout breaks with complex scripts when grapheme-safe segmentation is missing. Accurate creative typography rendering requires precomputed line widths and DOM-free text measurement to handle combining characters before applying per-row corridor layout.