pretext

Name: pretext
Availability: InStock
Author: zangjeicy

Measure and render DOM-free kinetic typography on HTML5 Canvas.

Updated Jul 13, 2026

Search Tags:#typography #canvas #creative-coding #generative-art #kinetic-typography #pretext

Ready to run

npx skills add https://github.com/zangjeicy/Hermes --skill pretext-zangjeicy

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/zangjeicy/Hermes/tree/main/skills/creative/pretext
Command: npx skills add https://github.com/zangjeicy/Hermes --skill pretext-zangjeicy

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 complex, high-performance typographic layouts and creative text-based visuals that are difficult or impossible to achieve with standard CSS and DOM manipulation.

Core Features & Use Cases

Creative Layouts: Enables text to flow around moving obstacles, create kinetic typography, and build text-as-geometry games.
High Performance: Uses canvas-based measurement to avoid expensive browser reflows, ensuring 60fps animations.
Use Case: Use this skill to generate a single-file HTML demo where a paragraph of text dynamically reflows around a draggable sprite or morphing shape.

Quick Start

Use the pretext skill to generate a creative HTML demo that displays a paragraph of text flowing around a moving circular obstacle.

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 that maintains 60fps in the browser?▼

Kinetic typography at 60fps requires DOM-free canvas rendering to bypass expensive browser reflows. This skill uses the pretext library for high-performance text measurement, enabling real-time geometric reflow for smooth animations.

What is DOM-free text measurement and when do I need it for creative coding?▼

DOM-free text measurement calculates text geometry directly via canvas without creating HTML elements. You need it for creative coding tasks like text-based games or editorial layouts requiring real-time text flowing around moving obstacles.

How do I make text dynamically reflow around a moving shape in HTML5 Canvas?▼

Dynamic text reflow around moving shapes uses the pretext library for geometric measurement on HTML5 Canvas. This skill generates single-file HTML demos where paragraphs continuously reflow around draggable sprites or morphing obstacles.

Does this pretext skill require HTML5 Canvas to perform text layout?▼

Yes, the pretext skill requires HTML5 Canvas to execute high-performance DOM-free text measurement and layout. It relies on the canvas API alongside the pretext library to avoid browser reflows during creative rendering.

What's the best way to build text-as-geometry games without CSS layout limitations?▼

Building text-as-geometry games without CSS limitations is best achieved through DOM-free canvas rendering. This skill provides a creative coding interface using pretext for real-time text measurement, avoiding standard DOM manipulation constraints.