skills.rest
MarbleSodas
MarbleSodasCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

pretext

Measure and lay out multiline text in the browser without DOM geometry.

Updated Apr 9, 2026
Search Tags:#typography#canvas#creative-coding#ascii-art#kinetic-typography#text-layout#pretext
One-click install
npx skills add https://github.com/MarbleSodas/Mavis --skill pretext-marblesodas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/MarbleSodas/Mavis/tree/main/skills/creative/pretext
Command: npx skills add https://github.com/MarbleSodas/Mavis --skill pretext-marblesodas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Pretext lets you create creative browser demos where text layout must be measured precisely before rendering, enabling effects like reflow around moving obstacles and text-as-geometry visuals without DOM-based layout thrashing.

Core Features & Use Cases

  • DOM-free multiline text measurement: Compute line breaks, widths, grapheme positions, and total height from (text, font, width) to eliminate layout shift.
  • Two key workflows: Use measurement only (DOM/CSS rendering) or measure-and-render yourself (canvas/WebGL/SVG with per-glyph transforms).
  • Creative demo patterns: Flow text around obstacles with layoutNextLineRange, animate kinetic typography, build text-based games, shatter typography into particles, and derive obstacle spans from ASCII/raster masks.
  • No build step demos: Produce single-file HTML demos that import @chenglou/pretext via a CDN.

Quick Start

Use the pretext templates to generate a single-file HTML demo (for example, templates/hello-orb-flow.html) that imports @chenglou/[email protected] and flows a paragraph around a moving orb.

Frequently Asked Questions about pretext

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

FAQPage Schema
How do I measure multiline text layout for canvas without causing DOM layout thrashing?▼

Multiline text layout is measured using DOM-free geometry by computing line breaks, widths, and grapheme positions directly from text and font data. This eliminates layout shift and provides precise coordinates before rendering frames.

What is kinetic typography and how do I animate text as geometry in the browser?▼

Kinetic typography animates text by treating glyphs as geometric objects. You measure per-glyph positions first, then apply custom transforms via canvas, SVG, or WebGL to shatter, move, or flow text dynamically.

How do I flow text around moving obstacles in a creative web demo?▼

Text flows around obstacles by calculating layout ranges that account for dynamic shapes. Using layoutNextLineRange, the text measurement engine identifies available space per line so paragraphs reflow precisely around moving elements.

Can I generate single-file HTML demos with no build step for text-as-geometry visuals?▼

Single-file HTML demos are generated by importing the pretext library directly via a CDN. Templates like hello-orb-flow.html import the pinned package version and render complete generative text visuals without requiring a build step.

Does this text layout engine work with custom canvas and WebGL rendering logic?▼

Custom canvas and WebGL rendering is fully supported by using measure-and-render workflows. The engine provides line break and grapheme position data that you feed into your own per-glyph drawing logic across canvas, SVG, or WebGL contexts.

Why does text reflow break when obstacles change position during animation?▼

Text reflow breaks when layout is not recalculated for each frame. Pretext solves this by preparing text once per text and font pair, then using layoutNextLineRange to compute precise line breaks before drawing each frame.

Related Skills

Explore More Design & Creative Skills→
ruiyangruiyiruiyangruiyi

pretext

Measure multiline text geometry with pretext for DOM-free browser demos.

Community
Advanced
tomada1114tomada1114
4

fixing-srt-subtitles

Correct transcription errors and optimize line breaks in SRT subtitle files.

Community
Basic
JuanMS20JuanMS20

pretext

Generate DOM-free text measurement and layout for browser demos.

Community
Advanced
icyzhicyzh
1

pretext

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

Community
Intermediate