skills.rest
carterwayneskhizeine
carterwayneskhizeineCOMMUNITY
Explore all skills by this author →
GitHub

pretext

Generate browser demos with DOM-free multiline text measurement and obstacle reflow.

19|4|Updated Apr 22, 2026
Search Tags:#typography#creative coding#canvas#ascii art#text layout#kinetic typography#pretext
One-click install
npx skills add https://github.com/carterwayneskhizeine/hermes-agent-windows-R --skill pretext-carterwayneskhizeine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/carterwayneskhizeine/hermes-agent-windows-R/tree/main/skills/creative/pretext
Command: npx skills add https://github.com/carterwayneskhizeine/hermes-agent-windows-R --skill pretext-carterwayneskhizeine

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Pretext removes the guesswork of measuring and wrapping text by providing exact line breaks and per-grapheme positions, enabling layouts that behave like real geometry rather than approximate DOM reflow.

Core Features & Use Cases

  • DOM-free text measurement and layout: compute line breaks, widths, grapheme positions, and total height from text + font + width without relying on layout thrash.
  • Text reflow around obstacles: flow paragraphs through variable-width corridors defined by moving shapes (circles, rectangles, sprites, or ASCII masks).
  • Text-as-geometry effects: build typographic games and kinetic typography where per-glyph positions drive canvas rendering and animation.
  • Single-file HTML demo output: produce shippable, self-contained browser demos by default.

Use cases: a moving orb that paragraph-flow wraps around, a text-powered Breakout/Tetris-style game where “bricks” are measured words, and kinetic typography where each grapheme becomes a particle in motion.

Quick Start

Use the pretext skill to create a single-file HTML demo that flows a real paragraph around a moving orb using fixed-width row-by-row measurement and rendering.

Frequently Asked Questions about pretext

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

FAQPage Schema
How do I measure text and wrap lines on a canvas without reading DOM layout?▼

Canvas text measurement without DOM layout reads requires a precomputed prepared layout from text and an exact matching font string, then streaming rows via layoutNextLineRange to get deterministic per-line widths and per-grapheme positions.

Can I reflow a paragraph around moving obstacles in a browser without layout thrash?▼

Reflowing paragraphs around moving obstacles like circles or rectangles uses an obstacle-defined per-row corridor width to stream text through variable-width corridors, avoiding DOM reflow and layout thrash entirely during animation.

What is kinetic typography and how does per-glyph positioning work for canvas rendering?▼

Kinetic typography uses per-grapheme positions to drive canvas rendering, treating each character as an individual particle or geometry element in motion, enabled by computing exact line breaks and grapheme coordinates from text and font data.

Do I need any external dependencies to generate self-contained HTML text demos?▼

No external dependencies are required to generate single-file HTML demos; the layout engine computes multiline text geometry, line breaks, and grapheme positions independently, producing shippable, self-contained browser demos by default.

When should I not use DOM-based text wrapping for typographic canvas games?▼

DOM-based text wrapping should be avoided for typographic canvas games where words act as measured geometry, as it introduces non-deterministic reflow; geometry-accurate row streaming ensures exact per-line width for deterministic rendering.

Does ASCII art obstacle typography work with variable-width corridor text reflow?▼

ASCII art obstacle typography works with variable-width corridor text reflow by using ASCII masks as obstacles, defining the per-row corridor width that determines how text streams around the masked shapes during canvas rendering.

Related Skills

Explore More Design & Creative Skills→
cabeznocabezno

pretext

Measure and lay out multiline text around obstacles without DOM.

Community
Intermediate
PlaidmustachePlaidmustache

pretext

Measure and layout text without a DOM for canvas rendering.

Community
Intermediate
paxlabs-incpaxlabs-inc
7

pretext

Generate DOM-free kinetic typography with canvas-based text layout.

Community
Advanced
icyzhicyzh
1

pretext

Measure and lay out multiline text without the DOM using the @chenglou/pretext library.

Community
Intermediate