pretextlisted

Create text effects impossible with CSS alone — kinetic typography, flowing text around animated obstacles, calligrams, shrinkwrap chat bubbles, typographic ASCII art, glyph path animation, variable font waves, glyph morphing, and illuminated manuscripts. This skill should be used when building single-file HTML pages with advanced text layout, proportional character measurement, per-glyph SVG rendering, text-on-path, animated text reflow, or letter art. Powered by @chenglou/pretext + opentype.js. All output is a single HTML file with zero build step.
tdimino/claude-code-minoan · ★ 32 · Web & Frontend · score 85

Install: claude install-skill tdimino/claude-code-minoan

# Pretext Text Effects Generate browser pages powered by Pretext (`@chenglou/pretext`)—a pure-arithmetic text measurement library that bypasses DOM layout reflow entirely. Pretext measures text with proportional font precision using canvas `measureText`, enabling effects impossible with CSS alone. **Companion library: opentype.js** (`opentype.js@1.3.4`) — direct font binary parsing for per-glyph SVG path rendering, Bezier control point access, kerning tables, and variable font axes. Pretext handles line breaking; opentype.js handles what happens *inside* each glyph. Together they unlock effects neither can achieve alone. Output is always a **single self-contained HTML file**. No build step, no framework, runs in any modern browser. ## Quick Start Describe a text effect. Claude picks the right Pretext pattern and generates a complete HTML file. Examples: - `/pretext fluid smoke ASCII art with gold characters on black` - `/pretext chat bubbles that shrinkwrap tighter than CSS` - `/pretext calligram — the word "ocean" shaped like a wave` - `/pretext editorial layout with text flowing around draggable circles` - `/pretext masonry grid of shower thoughts with instant height prediction` - `/pretext glyph path art — SVG letterforms with stroke animation` - `/pretext animated dragon cursor that pushes text aside as it moves` - `/pretext illuminated manuscript with live vine growth reflow` - `/pretext variable font wave — per-character weight animation` - `/pretext glyph morph —