skills.rest
xu1713
xu1713COMMUNITY
Explore all skills by this author →
GitHub

pretext

Generates single-file HTML demos using @chenglou/pretext for DOM-free text layout and kinetic typography.

Updated Jun 5, 2026
Search Tags:#generative art#canvas#ascii art#text layout#kinetic typography#pretext#html demo
One-click install
npx skills add https://github.com/xu1713/openhorse --skill pretext-xu1713
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/xu1713/openhorse/tree/main/openhorse/openhorse/skills/creative/pretext
Command: npx skills add https://github.com/xu1713/openhorse --skill pretext-xu1713

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building creative browser demos with text that flows around moving shapes, shatters into particles, or forms game geometry requires knowing line breaks before rendering, which the DOM cannot provide without expensive reflows. ## Core Features & Use Cases - Variable-width text reflow: Uses layoutNextLineRange to flow paragraphs around draggable orbs, ASCII logos, and morphing wire shapes at 60fps. - Text-as-geometry games and kinetic typography: Turns measured words into Breakout bricks, explodes sentences into per-grapheme particles, and animates per-line transforms. - Single-file HTML output: Produces self-contained demos importing @chenglou/pretext via esm.sh with no build step, verified locally with python3 -m http.server. - Use Case: Ask for a demo where an editorial paragraph parts around a draggable glowing orb, and receive a ready-to-open HTML file with a considered dark palette and real prose corpus. ## Quick Start Create a pretext demo where a paragraph of real prose flows around a draggable glowing orb and save it as a single HTML file I can open in my 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 materializeLineRange to get each line's text, then draw it with canvas fillText at the computed offset.

What is @chenglou/pretext used for?▼

Pretext is a 15KB zero-dependency TypeScript library that measures multiline text layout via canvas without DOM reflow. Given text, font, and width, it returns line breaks, per-line widths, and grapheme positions for custom rendering.

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

Import from https://esm.sh/@chenglou/[email protected] inside a script type="module" tag. Use esm.sh rather than unpkg because unpkg serves raw TypeScript that browsers cannot execute.

Why does my pretext text measurement not match the rendered CSS?▼

The canvas ctx.font string must exactly match the CSS font, and the web font must actually load. If the font 404s and CSS falls back to another family, measurements drift by 5-20 percent, so preload fonts explicitly.

When should I not use pretext for text layout?▼

Avoid pretext for static pages where CSS already handles layout, rich text editors, and image-to-ASCII conversion. It is intentionally narrow: measurement and line breaking only, not a general inline formatting engine.

Why is my pretext animation slow at 60fps?▼

The prepare or prepareWithSegments call is expensive and must run once per text-font pair, never per frame. Only the layout functions are cheap enough to rerun each frame, and ctx.font should be set once per frame rather than per fillText call.

Related Skills

Explore More Design & Creative Skills→
91zgaoge91zgaoge

canvas-design

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

Community
Advanced
DirtybitGamesDirtybitGames
15

demo-page

Convert a Markdown source document into an HTML demo page and deploy it to the gh-pages branch.

Official
Intermediate
markus41markus41
18

SVG Animations Skill

Animate SVG path data and morph shapes with Framer Motion and GSAP.

Community
Intermediate
OpenCovenOpenCoven
20

pretext

Measure and lay out text without triggering DOM reflow.

Official
Advanced