pretext

Generate interactive text-based visual demos with HTML5 Canvas rendering.

Updated May 9, 2026

Search Tags:#creative coding #HTML5 Canvas #ASCII art #text layout #kinetic typography

Ready to run

npx skills add https://github.com/robertbr123/Linket-Agent --skill pretext-robertbr123

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @chenglou/pretext, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill empowers you to build engaging and interactive text-based visual demos, bringing your creative ideas to life without complex coding.

Core Features & Use Cases

Text Layout: DOM-free text measurement and layout, allowing for creative text manipulation.
Canvas Rendering: Render text using HTML5 Canvas, enabling advanced visual effects.
Use Case: Imagine you want to create an interactive demo that shows text reflowing around a moving orb. This Skill provides the tools to measure text and layout it accordingly, creating a visually appealing and dynamic demo.

Quick Start

Run the pretext skill with the command 'pretext demo' to start creating your text-based visual demo.

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 interactive text reflowing on HTML5 Canvas?▼

Kinetic typography and text reflowing on HTML5 Canvas are created by measuring text and rendering layouts without the DOM. This process uses @chenglou/pretext for DOM-free measurement, enabling dynamic visual effects around moving shapes.

What is DOM-free text measurement and how does it work for generative ASCII art?▼

DOM-free text measurement calculates layout dimensions without browser elements, enabling generative ASCII art. It uses @chenglou/pretext to compute metrics and HTML5 Canvas to render text, allowing creative manipulation and dynamic visual output.

How do I render interactive text-based visual demos around moving elements?▼

Interactive text-based visual demos are rendered around moving elements by measuring text and dynamically adjusting layout via HTML5 Canvas. The pretext skill handles measurement and reflow, creating visually appealing and dynamic interactions.

Does this text layout skill require any specific libraries for canvas rendering?▼

Yes, this text layout skill requires the @chenglou/pretext library for canvas rendering. It depends on this specific package to handle DOM-free text measurement and generate the interactive layout for your visual demos.

Can I use HTML5 Canvas for creative coding without relying on the DOM for text layout?▼

Yes, you can use HTML5 Canvas for creative coding without the DOM by leveraging DOM-free text measurement. The pretext skill handles measurement independently and renders directly to canvas, enabling advanced kinetic typography and ASCII art effects.

What is the best way to start building interactive text-based visual demos?▼

The best way to start building interactive text-based visual demos is by running the pretext skill with the command 'pretext demo'. This initiates the text measurement and HTML5 Canvas rendering setup for your creative project.