pretext

Measure and layout multiline text on HTML5 Canvas without DOM reflows.

Updated Jun 25, 2026
One-click install
npx skills add https://github.com/Rheasilvia/hermes-desktop --skill pretext-rheasilvia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/Rheasilvia/hermes-desktop/tree/main/skills/creative/pretext
Command: npx skills add https://github.com/Rheasilvia/hermes-desktop --skill pretext-rheasilvia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @chenglou/pretext, gsap, lil-gui, and includes references (resource) components.

What problem does it solve?

This Skill solves the challenge of creating high-performance, creative text layouts that flow around dynamic shapes or particles without the performance overhead of DOM reflows.

Core Features & Use Cases

  • Creative Typography: Enables kinetic typography, text-as-geometry games, and complex editorial layouts using HTML5 Canvas.
  • Dynamic Reflow: Allows text to wrap around moving obstacles or sprites at 60fps by calculating line breaks and widths in real-time.
  • Use Case: Use this to build a hero section where a paragraph of text fluidly parts around a user-dragged sprite or a morphing ASCII logo.

Quick Start

Use the pretext skill to generate a creative demo where a paragraph of text flows around a circular obstacle.

Frequently Asked Questions about pretext

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

FAQPage Schema
How do I render kinetic typography on an HTML5 Canvas without triggering browser reflows?▼

Kinetic typography on an HTML5 Canvas requires a DOM-free text measurement framework to avoid reflows. This approach calculates line breaks and positions per-grapheme independently, maintaining high performance without triggering browser DOM updates.

What is the best way to make text dynamically flow around moving obstacles at 60fps?▼

Dynamic text reflow at 60fps is achieved by calculating real-time line breaks and widths without DOM dependencies. This allows multiline text to wrap fluidly around moving sprites or morphing shapes on a Canvas without performance degradation.

Can I measure multiline text and position per-grapheme for generative art without using DOM elements?▼

Yes, you can measure multiline text and position per-grapheme for generative art without DOM elements. A creative coding framework can provide sub-millisecond text measurement capabilities directly on the Canvas, bypassing DOM layout engine limitations.

Does GSAP work with canvas-based generative text layouts for interactive editorial designs?▼

GSAP can be integrated with canvas-based generative text layouts to drive interactive editorial designs. The underlying text measurement framework handles sub-millisecond layout calculations for the Canvas, allowing animation libraries to control the dynamic visual output.

Why does my creative text layout experience performance drops when wrapping text around dynamic shapes?▼

Performance drops in creative text layouts usually occur because DOM reflows are repeatedly triggered during dynamic shape wrapping. Moving text measurement and layout calculations to a DOM-free Canvas environment eliminates these bottlenecks and restores 60fps rendering.