skills.rest
m4an5you6
m4an5you6COMMUNITY
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 May 29, 2026
Search Tags:#typography#generative art#canvas#ASCII art#text layout#pretext#html demo
One-click install
npx skills add https://github.com/m4an5you6/aspera-agent --skill pretext-m4an5you6
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/m4an5you6/aspera-agent/tree/main/skills/creative/pretext
Command: npx skills add https://github.com/m4an5you6/aspera-agent --skill pretext-m4an5you6

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 CSS cannot provide. This Skill produces polished single-file HTML demos using the @chenglou/pretext library for DOM-free text measurement and layout. ## Core Features & Use Cases - Text reflow around obstacles: Streams paragraphs around dragged sprites or ASCII logos at 60fps using layoutNextLineRange with per-row width functions. - Text-as-geometry games and kinetic typography: Builds Breakout-style word bricks, shatter effects, and per-glyph physics from measured line and grapheme positions. - Use Case: A user asks for a hero section where an editorial 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 self-contained HTML file verified with a local HTTP server. ## Quick Start Ask the agent to create a pretext demo where a paragraph of real prose flows around a draggable orb, then open the generated HTML file in a 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 @chenglou/pretext's layoutNextLineRange with a per-row width function that returns the corridor width at each y position. Call prepareWithSegments once, then recompute line ranges each frame as the obstacle moves, skipping rows too narrow to fit a line.

What is @chenglou/pretext used for?▼

Pretext is a 15KB zero-dependency TypeScript library for DOM-free multiline text measurement and layout. Given text, font, and width, it returns line breaks, per-line widths, and grapheme positions via canvas measurement, enabling creative layouts CSS cannot produce.

Does pretext work with emoji and CJK characters?▼

Yes, but you must use Intl.Segmenter with grapheme granularity when splitting text into individual glyphs. Splitting strings with split("") 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 the font string 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, or general inline formatting engines. 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
adamtpangadamtpang

paperclip-page

Publish static HTML directories to an S3 and CloudFront page host.

Community
Advanced
nyxoraAInyxoraAI
5

p5js

Generate interactive and generative visual art with p5.js.

Community
Advanced
MLT-OSSMLT-OSS
14

ascii-video

Generate colored ASCII character videos from video, audio, or generative inputs using Python and ffmpeg.

Official
Advanced