skills.rest
projectedanx
projectedanxCOMMUNITY
Explore all skills by this author →
𝕏@ALifeInArtifyAIGitHub

pretext

Measure text and calculate line breaks on canvas without DOM reflow.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill solves the performance and layout limitations of standard DOM-based text rendering by providing a high-performance, canvas-based engine for complex typographic layouts and kinetic text effects.

Core Features & Use Cases

  • Creative Layouts: Enables text to flow around moving obstacles, create typographic games, and generate kinetic art at 60fps.
  • Geometric Precision: Provides exact per-grapheme measurement and line-break calculation without browser reflow thrashing.
  • Use Case: Use this to build interactive hero sections where prose flows around a draggable sprite, or to create generative art where text shatters into particles on click.

Quick Start

Use the pretext skill to generate a single-file HTML demo that features a paragraph 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 render kinetic typography on a canvas without DOM reflow issues?▼

Canvas-based text layout engines calculate line-breaks and per-grapheme geometry without browser reflow. This approach handles complex typographic layouts and kinetic text interactions at 60fps, avoiding DOM performance bottlenecks.

What is the best way to make text flow around moving obstacles in creative coding?▼

Using a canvas-based text layout engine enables dynamic text reflow around moving obstacles with geometric precision. This approach handles complex text-as-geometry interactions, allowing interactive prose to flow around draggable sprites in real-time.

Does canvas-based text rendering work with GSAP for generative art animations?▼

Canvas-based text rendering integrates with GSAP to create generative art and kinetic typography. Combining precise text measurement engines with GSAP enables dynamic text-as-geometry interactions and particle effects at high frame rates.

How do I calculate exact line-breaks for typography in a browser game?▼

A specialized canvas text layout engine provides exact per-grapheme measurement and line-break calculation without browser reflow. This ensures high-performance typographic layouts for browser games and interactive creative demos.

Why does DOM-based text reflow thrash performance in kinetic typography demos?▼

DOM-based text reflow thrashes performance during kinetic typography because continuous layout recalculations consume resources. A DOM-free canvas engine bypasses browser reflow by handling text measurement independently, maintaining smooth 60fps animations.

Related Skills

Explore More Design & Creative Skills→
humanerd-drewhumanerd-drew
2

pretext

Measure and lay out text with canvas rendering for creative applications.

Official
Advanced
heysuhasheysuhas
2

pretext

Measure and layout DOM-free text for canvas-based visualizations.

Community
Advanced
hungthinh04hungthinh04

pretext

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

Community
Advanced
lengoctuong2005lengoctuong2005
5

pretext

Measure and layout text for DOM-free ASCII art and typography demos.

Community
Intermediate