pretext

Convert measured text layout data into interactive canvas typography compositions.

Updated Feb 21, 2026

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

Ready to run

npx skills add https://github.com/Gitnapp/Skills --skill pretext-gitnapp

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps creators turn measured text layout into interactive browser experiences without relying on fragile DOM reflow, enabling expressive typography and generative text visuals.

Core Features & Use Cases

Creative Text Rendering: Build canvas-based demos with text flowing around obstacles, kinetic typography, ASCII-inspired effects, and text-as-geometry experiences.
Generative Typography Workflows: Use pretext measurement APIs for games, editorial layouts, animated prose, particle text, and responsive shrink-wrap interfaces.
Use Case: Create a single-file browser demo where a paragraph dynamically wraps around a moving object while maintaining precise typography and smooth animation.

Quick Start

Use the pretext skill to create an interactive browser demo with text flowing around a moving shape using canvas rendering.

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 and generative text art in a browser?▼

You create kinetic typography by using canvas rendering and measured text layout APIs to convert text into interactive visual compositions. This approach enables dynamic generative text visuals without relying on DOM reflow.

How does canvas text rendering avoid DOM reflow for dynamic layouts?▼

Canvas text rendering avoids DOM reflow by using measurement APIs to calculate text layout data and directly draw visual compositions onto the canvas. This enables smooth animated typography and generative text visuals.

What is the best way to make text flow around a moving object on an HTML canvas?▼

The best way to make text flow around moving objects is by applying pretext layout measurement APIs to calculate text boundaries and dynamically render the composition on an HTML canvas.

Can I use grapheme-aware text handling for ASCII-inspired effects in generative art?▼

Yes, you can use grapheme-aware text handling to accurately measure and render complex characters for ASCII-inspired effects. This ensures precise typography within interactive generative art workflows.

Why use measured text layout APIs instead of DOM reflow for interactive browser typography?▼

Measured text layout APIs are used instead of DOM reflow to prevent layout thrashing and maintain precise control over typography. This enables smooth, interactive browser experiences like kinetic typography and text-based games.

Do I need canvas rendering to build interactive text-based games with pretext?▼

Yes, canvas rendering is required to build interactive text-based games using pretext. It provides the necessary drawing context to transform measured text layout data into dynamic visual compositions.