pretext

Solid

Use when building creative browser demos with @chenglou/pretext — DOM-free text layout for ASCII art, typographic flow around obstacles, text-as-geometry games, kinetic typography, and text-powered generative art. Produces single-file HTML demos by default.

Web & Frontend 12 stars 3 forks Updated 6 days ago MIT

Install

View on GitHub

Quality Score: 78/100

Stars 20%
37
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Pretext Creative Demos ## Overview [`@chenglou/pretext`](https://github.com/chenglou/pretext) is a 15KB zero-dependency TypeScript library by Cheng Lou (React core, ReasonML, Midjourney) for **DOM-free multiline text measurement and layout**. It does one thing: given `(text, font, width)`, return the line breaks, per-line widths, per-grapheme positions, and total height — all via canvas measurement, no reflow. That sounds like plumbing. It is not. Because it is fast and geometric, it is a **creative primitive**: you can reflow paragraphs around a moving sprite at 60fps, build games whose level geometry is made of real words, drive ASCII logos through prose, shatter text into particles with exact per-grapheme starting positions, or pack shrink-wrapped multiline UI without any `getBoundingClientRect` thrash. This skill exists so Hermes can make **cool demos** with it — the kind people post to X. See `pretext.cool` and `chenglou.me/pretext` for the community demo corpus. ## When to Use Use when the user asks for: - A "pretext demo" / "cool pretext thing" / "text-as-X" - Text flowing around a moving shape (hero sections, editorial layouts, animated long-form pages) - ASCII-art effects using **real words or prose**, not monospace rasters - Games where the playfield / obstacles / bricks are made of text (Tetris-from-letters, Breakout-of-prose) - Kinetic typography with per-glyph physics (shatter, scatter, flock, flow) - Typographic generative art, especially with non-Latin ...

Details

Author
kevinnft
Repository
kevinnft/ai-agent-skills
Created
2 months ago
Last Updated
6 days ago
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

text-motion

Kinetic text-motion + gradient + transition toolkit for HTML/CSS motion-graphics videos — the polished "launch reel" look: keyword glow-highlight sweeps, gradient-filled hero words, scramble-decode headlines, ticker-roll word swaps, living color-arc gradient backgrounds with drifting blobs, concentric ring ripples, blueprint grids, and glass UI accents (pills, cursors, prompt cards). Use when making an animated title/heading feel dynamic and varied, adding a moving gradient background, giving each scene its own heading entrance, or matching a reference reel's text motion. Triggers: "make the headings more dynamic", "text motion", "highlight the keyword", "gradient background through the video", "animate the title like that reel", "scramble/decode text", "words rolling like a ticker", "make it more graphic". Complements kinetic-typography (word cascade / hero-push) and smooth-render (capture).

1 Updated 2 days ago
JagZ999
Web & Frontend Listed

textmode-js

Use when building real-time ASCII or textmode graphics in the browser with the textmode.js library — generative glyph-grid sketches, retro/terminal visuals, audio-reactive or VJ textmode, or turning images and video into ASCII on a WebGL2 character grid. Trigger whenever textmode.js is named, when a sketch calls textmode.create, t.setup/t.draw, t.grid, t.char/charColor/cellColor, glyph ramps, or character-cell rendering, or when the user wants to build, debug, or export a grid-of-characters visual. Covers UMD/ESM setup, the setup/draw/resize lifecycle, drawing primitives, char and color cells, print and glyph ramps, animation and noise, layers, filters, custom GLSL ES 3.00 shaders, media conversion, and export to TXT/SVG/PNG/GIF/MP4/WebM. Not for generic ASCII art or Python image-to-ASCII — this is specifically the textmode.js JavaScript/TypeScript library.

1 Updated 3 days ago
vinsonconsulting
Web & Frontend Featured

text-animation

Dependency-free kinetic typography: roll/slot text, reveals, typewriter, crossfade.

412 Updated 3 days ago
notque