pretext

Featured

Build creative browser demos with DOM-free text layout.

AI & Automation 244,407 stars 50594 forks Updated today MIT

Install

View on GitHub

Quality Score: 93/100

Stars 20%
100
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
NousResearch
Repository
NousResearch/hermes-agent
Created
1 years ago
Last Updated
today
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

pretext

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.

14 Updated 1 months ago
kevinnft
Web & Frontend Solid

pretext

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, illuminated manuscripts. Single-file HTML output, zero build step. Powered by @chenglou/pretext + opentype.js. Triggers on text effects, kinetic typography, text animation, calligram, glyph art, typography art.

41 Updated today
tdimino
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 1 months ago
JagZ999