skills.rest
srivtx
srivtxCOMMUNITY
Explore all skills by this author →
Website𝕏@srivtxGitHub

pretext

Measure and layout DOM-free text for creative browser demos.

Updated Jun 13, 2026
Search Tags:#creative coding#ASCII art#text layout#kinetic typography#browser demos
One-click install
npx skills add https://github.com/srivtx/supercharger-opencode --skill pretext-srivtx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/srivtx/supercharger-opencode/tree/main/creative-coding/pretext
Command: npx skills add https://github.com/srivtx/supercharger-opencode --skill pretext-srivtx

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 users to build DOM-free text layouts for creative browser demos, enabling ASCII art, typographic flow, and kinetic typography effects.

Core Features & Use Cases

  • Text Layout: Measure and layout text without a DOM, for geometrically-driven design.
  • Creative Demos: Produce single-file HTML demos, suitable for ASCII art, typographic flow, and kinetic typography.
  • Use Case: Create an interactive ASCII logo that morphs into text, using Pretext to control the layout and animation.

Quick Start

To get started, use the pretext skill with the following command:

pretext --add [preset]

Replace [preset] with the desired preset name, such as 'visual' or 'creative'.

Frequently Asked Questions about pretext

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

FAQPage Schema
How do I create DOM-free text layouts for browser demos?▼

You can build DOM-free text layouts by using geometric text measurement to position characters directly, bypassing standard HTML DOM structure. This enables interactive ASCII art, typographic flow, and kinetic typography effects for browser demos.

Can I generate ASCII art animations and kinetic typography in a single HTML file?▼

Yes, you can generate single-file HTML demos for ASCII art and kinetic typography effects. The library handles geometrically-driven text layout and measurement, enabling interactive visual animations directly in the browser.

Do I need the @chenglou/pretext library to build geometrically-driven text designs?▼

Yes, the @chenglou/pretext library is required as a dependency. It provides the core text measurement and geometric layout engine needed to create DOM-free interactive browser demos and kinetic typography effects.

What is geometrically-driven text layout and when do I need it for creative coding?▼

Geometrically-driven text layout positions characters using mathematical measurements rather than relying on standard DOM flow rules. You need it for creative coding projects like ASCII art, typographic flow, and kinetic typography that require precise visual control.

How do I get started with a preset for creative text layout projects?▼

To get started with creative text layout projects, run the command 'pretext --add [preset]' with a preset name like 'visual' or 'creative'. This initializes the necessary scripts and assets for your interactive browser demos.

Related Skills

Explore More Design & Creative Skills→
jordanhubbardjordanhubbard
9

pretext

Generate interactive text-based visual effects using @chenglou/pretext for DOM-free text measurement and layout.

Community
Advanced
nadicodeainadicodeai

pretext

Measure and lay out text without the DOM using the @chenglou/pretext API.

Official
Intermediate
CyapstayeCyapstaye
9

pretext

Measure and lay out text on canvas without DOM reflows.

Community
Advanced
ToqsickToqsick

pretext

Measure and layout text without the DOM using the pretext library.

Community
Advanced