skills.rest
humanerd-drew
humanerd-drewOFFICIAL
Explore all skills by this author →
GitHub

pretext

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

2|7|Updated Jun 19, 2026
Search Tags:#creative coding#generative art#ASCII art#text layout#kinetic typography
One-click install
npx skills add https://github.com/humanerd-drew/opencode-drewgent --skill pretext-humanerd-drew
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/humanerd-drew/opencode-drewgent/tree/main/skills/creative/pretext
Command: npx skills add https://github.com/humanerd-drew/opencode-drewgent --skill pretext-humanerd-drew

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 provides a way to create intricate and visually appealing text layouts without using the DOM, enabling creative text placement and animation.

Core Features & Use Cases

  • Text Measurement and Layout: Measure text and lay it out in various shapes and sizes.
  • Creative Layouts: Generate text-as-geometry games, kinetic typography, and generative art.
  • Use Case: A designer wants to create a digital typographic canvas that flows text around an orbiting orb and shatters it on user interaction.

Quick Start

Run the pretext skill with the provided template to create a text layout around an orb.

Frequently Asked Questions about pretext

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

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

DOM-free text layout renders typography directly to canvas without HTML elements, needed for generative art, kinetic typography, and interactive text effects requiring geometric placement and dynamic animation unavailable in standard web layouts.

How do I measure text and lay it out in geometric shapes using canvas?▼

You measure text and lay it out in geometric shapes by using the @chenglou/pretext library for calculation and HTML5 Canvas for rendering, enabling text to flow around objects or form custom typographic patterns.

Can I create kinetic typography and ASCII art without relying on DOM elements?▼

Yes, you can create kinetic typography and ASCII art without DOM elements by employing canvas rendering for dynamic text effects and using the pretext library to handle measurement and geometric layout calculations.

Do I need the @chenglou/pretext library to generate text-as-geometry layouts?▼

Yes, the @chenglou/pretext library is required to generate text-as-geometry layouts, as it provides the underlying DOM-free measurement and layout calculations necessary for the HTML5 Canvas rendering process.

What are the limitations of using canvas rendering for generative text layouts?▼

Canvas rendering for generative text layouts requires manual handling of measurement and layout via the pretext library, meaning you lose native DOM text features like accessibility tags and dynamic reflow without custom calculation logic.

Related Skills

Explore More Design & Creative Skills→
zangjeicyzangjeicy

pretext

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

Community
Advanced
guccangguccang
3

pretext

Create dynamic browser text layouts using measured text geometry with canvas rendering.

Community
Advanced
PiaoxuemoliPiaoxuemoli

pretext

Measure, layout, and render text using canvas without the DOM.

Community
Advanced
InverterNetworkInverterNetwork

pretext

Measure and lay out multiline text on HTML5 Canvas without DOM reflow.

Official
Advanced