skills.rest
TylerSimons1127
TylerSimons1127COMMUNITY
Explore all skills by this author →
GitHub

pretext

Builds browser demos with DOM-free text measurement and canvas layout using @chenglou/pretext.

Updated Aug 21, 2026
Search Tags:#creative coding#canvas#ASCII art#text layout#kinetic typography#pretext#html demo
One-click install
npx skills add https://github.com/TylerSimons1127/vibe --skill pretext-tylersimons1127
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/TylerSimons1127/vibe/tree/main/skills/creative/pretext
Command: npx skills add https://github.com/TylerSimons1127/vibe --skill pretext-tylersimons1127

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Measuring multiline text layout in the browser normally requires DOM reflows and getBoundingClientRect calls, which are slow and block creative effects like text flowing around moving shapes. This Skill uses the @chenglou/pretext library to compute line breaks, per-line widths, and per-grapheme positions purely via canvas measurement, enabling 60fps kinetic typography and text-as-geometry demos. ## Core Features & Use Cases - Variable-width text reflow: Stream paragraphs around moving obstacles (orbs, sprites, ASCII logos) row-by-row using layoutNextLineRange, the pattern behind viral text-flow demos. - Text-as-geometry games and particles: Turn measured words into Breakout bricks or explode sentences into per-grapheme physics particles with exact starting positions. - Multiline shrink-wrap and editorial layouts: Compute the tightest container width with measureLineStats, or flow one cursor across multiple magazine-style columns. - Use Case: A user asks for a hero section where a paragraph parts around a draggable glowing orb. The Skill starts from the hello-orb-flow.html template, swaps in real prose, tunes the palette and font, and delivers a single self-contained HTML file verified with a local HTTP server. ## Quick Start Ask the agent to build a pretext demo where a paragraph of real prose flows around a draggable orb, then open the generated HTML file in your 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: for each line, compute how wide the corridor is at that y position, then ask pretext to break the line accordingly. This runs fast enough to recompute every frame at 60fps as the obstacle moves.

What is @chenglou/pretext used for?▼

Pretext is a 15KB zero-dependency TypeScript library that measures multiline text layout via canvas without touching the DOM. Given text, font, and width, it returns line breaks, per-line widths, per-grapheme positions, and total height for creative rendering or layout prediction.

How do I import pretext in a browser without a build step?▼

Import from esm.sh with a pinned version, for example https://esm.sh/@chenglou/[email protected], inside a script type=module tag. Avoid unpkg, which can 404 or serve raw TypeScript that browsers cannot execute.

Why do my pretext measurements not match the rendered text?▼

Measurement drift happens when the canvas ctx.font string differs from the rendered CSS, usually because a web font failed to load and CSS fell back to another family. Preload the font explicitly and keep the font string exactly in sync between prepare() and your CSS.

When should I not use pretext for text layout?▼

Skip pretext for static pages where CSS already solves layout, for rich text editors, and for general inline formatting engines, since the library is intentionally narrow. Also use dedicated image-to-ASCII tools instead when converting images to text.

Why does pretext animation lag in my demo?▼

Lag usually comes from calling prepare() or prepareWithSegments() inside the animation loop, which is the expensive operation. Prepare once per text-font pair, cache the handle, and only rerun the cheap layout functions per frame or on resize.

Related Skills

Explore More Design & Creative Skills→
per-simmonsper-simmons
224

clone-app-pat-pro

Analyze source code and rendered styles to generate HTML, CSS, and JavaScript clones.

Community
Advanced
mooch10mooch10
1

website-to-video

Capture a website and produce a HyperFrames video from its brand assets.

Community
Advanced
nyxoraAInyxoraAI
5

p5js

Generate interactive and generative visual art with p5.js.

Community
Advanced
mattdowneymattdowney

favicon

Generate a complete favicon set and update HTML link tags.

Community
Intermediate