pretext

Measure and lay out text in the browser without DOM reflows.

11|Updated May 17, 2026
One-click install
npx skills add https://github.com/StarryCod/cogitum --skill pretext-starrycod
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/StarryCod/cogitum/tree/main/cogitum/data/skills/creative/pretext
Command: npx skills add https://github.com/StarryCod/cogitum --skill pretext-starrycod

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill enables DOM-free text measurement and layout in the browser to power fast, canvas-based creative demos.

Core Features & Use Cases

  • Creative, DOM-free text layout primitives for building demos that flow text around shapes, render text as geometry, and drive kinetic typography.
  • Self-contained HTML demos with a minimal, dependency-light approach suitable for single-file distribution.
  • Real-world patterns and templates to kick off artistic typography projects without traditional DOM reflows.

Quick Start

Open a sample pretext demo HTML to see real-time, DOM-free typography patterns.

Frequently Asked Questions about pretext

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

FAQPage Schema
How do I render text on a canvas without causing DOM reflows?▼

DOM-free text layout measures and positions characters directly, bypassing standard HTML rendering to prevent DOM reflows during canvas-based typographic animations and creative demos.

What is the best way to build kinetic typography demos in a single HTML file?▼

The best way to build single-file kinetic typography demos is using a dependency-light, DOM-free text layout library that renders typographic patterns directly onto a canvas element.

Can I flow text around obstacles using canvas instead of the DOM?▼

Yes, you can flow text around obstacles on canvas by applying DOM-free text layout primitives that calculate dynamic wrapping paths around shapes without standard HTML text containers.

Does this text layout approach work for text-as-geometry games?▼

Yes, this text layout approach works for text-as-geometry games by measuring typographic boundaries and treating characters as geometric primitives to drive spatial interactions on a canvas.

Do I need external dependencies to create canvas-based typographic demos?▼

You do not need heavy external dependencies; this approach uses a minimal, dependency-light library to generate self-contained HTML demos with sample corpora and canvas rendering.

Why does my canvas text layout slow down during dynamic animations?▼

Canvas text layout slows down during dynamic animations when relying on DOM measurements, which cause reflow bottlenecks; switching to DOM-free text measurement eliminates these performance bottlenecks.