skills.rest
loteiron
loteironCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

pretext

Builds single-file browser demos using DOM-free text measurement and canvas layout.

Updated Sep 10, 2026
Search Tags:#typography#creative coding#generative art#canvas#text layout#kinetic typography#pretext
One-click install
npx skills add https://github.com/loteiron/ZeusAgent --skill pretext-loteiron
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/loteiron/ZeusAgent/tree/main/optional-skills/creative/pretext
Command: npx skills add https://github.com/loteiron/ZeusAgent --skill pretext-loteiron

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @chenglou/pretext, gsap, lil-gui, and includes references (resource) and assets (resource) components.

What problem does it solve? Creating text layouts that flow around moving shapes, shatter into particles, or form game geometry requires knowing line breaks before rendering, which the DOM cannot provide without expensive reflows. This Skill uses the @chenglou/pretext library to measure multiline text via canvas and render it with full creative control. ## Core Features & Use Cases - Variable-width text reflow: Stream paragraphs around draggable sprites, ASCII logos, or morphing shapes at 60fps using layoutNextLineRange. - Text-as-geometry demos: Build Breakout-style games with word bricks, shatter typography into per-grapheme particles, or drive kinetic type animations. - Multiline shrink-wrap and measurement: Compute exact heights and tightest container widths without DOM reads for virtualized lists and masonry layouts. - Use Case: A user asks for a hero section where an editorial paragraph parts around a cursor-following orb; the Skill starts from the hello-orb-flow.html template, swaps in real prose, tunes the palette and font, and delivers a self-contained HTML file. ## Quick Start Ask the agent to create a pretext demo where a paragraph of real prose flows around a draggable glowing orb, saved as a single HTML file you can open in the browser.

Frequently Asked Questions about pretext

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

FAQPage Schema
How do I make text flow around a moving shape in the browser?▼

Use pretext's layoutNextLineRange with a per-row width function that subtracts the obstacle's horizontal span at each y position. Call prepareWithSegments once, then stream lines each frame, skipping rows where the corridor is too narrow.

What is the @chenglou/pretext library used for?▼

Pretext is a 15KB zero-dependency TypeScript library for DOM-free multiline text measurement. Given text, font, and width, it returns line breaks, per-line widths, and grapheme positions via canvas measurement, enabling layouts the browser cannot draw on its own.

Does pretext work with emoji and CJK characters?▼

Yes, but you must use Intl.Segmenter with grapheme granularity when splitting text into visible glyphs. Splitting strings directly breaks emoji, combining marks, and CJK characters into invalid fragments.

Why do pretext measurements not match my rendered text?▼

Measurement drift happens when the canvas ctx.font string differs from the rendered CSS font, often because a web font failed to load and CSS fell back to another family. Preload the font and keep both font strings exactly in sync.

When should I not use pretext for text layout?▼

Avoid pretext for static pages where CSS already solves layout, rich text editors, and image-to-ASCII conversion. It is intentionally narrow: measurement and line layout only, with rendering left to you.

Related Skills

Explore More Design & Creative Skills→
91zgaoge91zgaoge

canvas-design

Generates visual art and design manifestos as PNG and PDF documents.

Community
Advanced
dadafingerdadafinger

okestro-planning-html

Renders planning spec markdown into static and interactive standalone HTML prototypes.

Community
Advanced
ChenYCLChenYCL

algorithmic-art

Generate p5.js algorithmic art with seeded randomness and interactive parameters.

Community
Intermediate
heximaoheximao

diagramming

Create JSON Excalidraw diagrams, SVG/HTML architecture layouts, and ASCII art.

Community
Advanced