What problem does it solve? Building creative text-layout demos (text flowing around moving shapes, word-brick games, shattering typography) normally requires expensive DOM reflows or guesswork about line breaks. This Skill uses the @chenglou/pretext library to measure multiline text on canvas without touching the DOM, so line breaks, per-grapheme positions, and heights are known before rendering. ## Core Features & Use Cases - Reflow around obstacles: Stream lines with layoutNextLineRange and a per-row width function so prose parts around a draggable sprite or ASCII logo at 60fps. - Text-as-geometry and kinetic type: Use prepareWithSegments, walkLineRanges, and Intl.Segmenter to get per-grapheme coordinates for shatter/particle physics, word-brick Breakout, and animated editorial layouts. - Use Case: A user asks for a demo where a paragraph of real prose flows around a draggable glowing orb. The Skill starts from the hello-orb-flow.html template, swaps in meaningful corpus text, tunes the dark palette and proportional font, and delivers one self-contained HTML file verified via python3 -m http.server. ## Quick Start Ask the agent to build a pretext demo where a paragraph of real prose reflows around a draggable orb, delivered as a single self-contained HTML file.
