[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6G9AV4HMP2XHPFSNJFSCX6J":3,"skill-same:01M6G9AV4HMP2XHPFSNJFSCX6J":87},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":65,"commitSha":66,"skillDirectory":67,"forksCount":68,"repositoryHtmlUrl":69,"repositoryHomepageUrl":6,"ownerHtmlUrl":70,"ownerBlogUrl":6,"ownerDescription":71,"updatedAt":72,"install":73,"resources":86},"01M6G9AV4HMP2XHPFSNJFSCX6J","pretext",null,"Use when building creative browser demos with @chenglou\u002Fpretext — 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.","zapabob\u002FSkills","zapabob","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F130830376?v=4","01M6DBMYZAGRTFQDSQYW3W764P","峯岸 亮","01M6DBMZ3GKDSJ01NZ9XTZD7JD",2,"MIT","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Farchive\u002Fskill-md-reviewed\u002Fsha256\u002F76\u002F76210dc7eb255058ef9d857fa981be30e1d3845186f86d2bfda7af73c6aadd7f\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",[5,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"html","creative-coding","demos","free","layout","geometry","default","generative art","Art","design","typography","coding","text","excalidraw","flow","browser","diagram","architecture","canvas","2026-11-10 10:12:30",false,"---\r\nname: pretext\r\ndescription: \"Use when building creative browser demos with @chenglou\u002Fpretext — 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.\"\r\nversion: 1.0.0\r\nauthor: Hermes Agent\r\nlicense: MIT\r\nplatforms: [linux, macos, windows]\r\nmetadata:\r\n  hermes:\r\n    tags: [creative-coding, typography, pretext, ascii-art, canvas, generative, text-layout, kinetic-typography]\r\n    related_skills: [p5js, claude-design, excalidraw, architecture-diagram]\r\n---\r\n\r\n# Pretext Creative Demos\r\n\r\n## Overview\r\n\r\n[`@chenglou\u002Fpretext`](https:\u002F\u002Fgithub.com\u002Fchenglou\u002Fpretext) 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.\r\n\r\nThat 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.\r\n\r\nThis skill exists so Hermes can make **cool demos** with it — the kind people post to X. See `pretext.cool` and `chenglou.me\u002Fpretext` for the community demo corpus.\r\n\r\n## When to Use\r\n\r\nUse when the user asks for:\r\n- A \"pretext demo\" \u002F \"cool pretext thing\" \u002F \"text-as-X\"\r\n- Text flowing around a moving shape (hero sections, editorial layouts, animated long-form pages)\r\n- ASCII-art effects using **real words or prose**, not monospace rasters\r\n- Games where the playfield \u002F obstacles \u002F bricks are made of text (Tetris-from-letters, Breakout-of-prose)\r\n- Kinetic typography with per-glyph physics (shatter, scatter, flock, flow)\r\n- Typographic generative art, especially with non-Latin scripts or mixed scripts\r\n- Multiline \"shrink-wrap\" UI (smallest container width that still fits the text)\r\n- Anything that would require knowing line breaks *before* rendering\r\n\r\nDon't use for:\r\n- Static SVG\u002FHTML pages where CSS already solves layout — just use CSS\r\n- Rich text editors, general inline formatting engines (pretext is intentionally narrow)\r\n- Image → text (use `ascii-art` \u002F `ascii-video` skills)\r\n- Pure canvas generative art with no text role — use `p5js`\r\n\r\n## Creative Standard\r\n\r\nThis is visual art rendered in a browser. Pretext returns numbers; **you** draw the thing.\r\n\r\n- **Don't ship a \"hello world\" demo.** The `hello-orb-flow.html` template is the *starting* point. Every delivered demo must add intentional color, motion, composition, and one visual detail the user didn't ask for but will appreciate.\r\n- **Dark backgrounds, warm cores, considered palette.** Classic amber-on-black (CRT \u002F terminal) works, but so do cold-white-on-charcoal (editorial) and desaturated pastels (risograph). Pick one and commit.\r\n- **Proportional fonts are the point.** Pretext's whole vibe is \"not monospaced\" — lean into it. Use Iowan Old Style, Inter, JetBrains Mono, Helvetica Neue, or a variable font. Never default sans.\r\n- **Real source\u002Ftext, not lorem ipsum.** The corpus should mean something. Short manifestos, poetry, real source code, a found text, the library's own README — never `lorem ipsum`.\r\n- **First-paint excellence.** No loading states, no blank frames. The demo must look shippable the instant it opens.\r\n\r\n## Stack\r\n\r\nSingle self-contained HTML file per demo. No build step.\r\n\r\n| Layer | Tool | Purpose |\r\n|-------|------|---------|\r\n| Core | `@chenglou\u002Fpretext` via `esm.sh` CDN | Text measurement + line layout |\r\n| Render | HTML5 Canvas 2D | Glyph rendering, per-frame composition |\r\n| Segmentation | `Intl.Segmenter` (built-in) | Grapheme splitting for emoji \u002F CJK \u002F combining marks |\r\n| Interaction | Raw DOM events | Mouse \u002F touch \u002F wheel — no framework |\r\n\r\n```html\r\n\u003Cscript type=\"module\">\r\nimport {\r\n  prepare, layout,                   \u002F\u002F use-case 1: simple height\r\n  prepareWithSegments, layoutWithLines,  \u002F\u002F use-case 2a: fixed-width lines\r\n  layoutNextLineRange, materializeLineRange, \u002F\u002F use-case 2b: streaming \u002F variable width\r\n  measureLineStats, walkLineRanges,  \u002F\u002F stats without string allocation\r\n} from \"https:\u002F\u002Fesm.sh\u002F@chenglou\u002Fpretext@0.0.6\";\r\n\u003C\u002Fscript>\r\n```\r\n\r\nPin the version. `@0.0.6` at time of writing — check [npm](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@chenglou\u002Fpretext) for the latest if demo behavior is off.\r\n\r\n## The Two Use Cases\r\n\r\nAlmost everything reduces to one of these two shapes. Learn both.\r\n\r\n### Use-case 1 — measure, then render with CSS\u002FDOM\r\n\r\n```js\r\nconst prepared = prepare(text, \"16px Inter\");\r\nconst { height, lineCount } = layout(prepared, 320, 20);\r\n```\r\n\r\nYou still let the browser draw the text. Pretext just tells you how tall the box will be at a given width, **without** a DOM read. Use for:\r\n- Virtualized lists where rows contain wrapping text\r\n- Masonry with precise card heights\r\n- \"Does this label fit?\" dev-time checks\r\n- Preventing layout shift when remote text loads\r\n\r\n**Keep `font` and `letterSpacing` exactly in sync with your CSS.** The canvas `ctx.font` format (e.g. `\"16px Inter\"`, `\"500 17px 'JetBrains Mono'\"`) must match the rendered CSS, or measurements drift.\r\n\r\n### Use-case 2 — measure *and* render yourself\r\n\r\n```js\r\nconst prepared = prepareWithSegments(text, FONT);\r\nconst { lines } = layoutWithLines(prepared, 320, 26);\r\nfor (let i = 0; i \u003C lines.length; i++) {\r\n  ctx.fillText(lines[i].text, 0, i * 26);\r\n}\r\n```\r\n\r\nThis is where the creative work lives. You own the drawing, so you can:\r\n- Render to canvas, SVG, WebGL, or any coordinate system\r\n- Substitute per-glyph transforms (rotation, jitter, scale, opacity)\r\n- Use line metadata (width, grapheme positions) as geometry\r\n\r\nFor **variable-width-per-line** flow (text around a shape, text in a donut band, text in a non-rectangular column):\r\n\r\n```js\r\nlet cursor = { segmentIndex: 0, graphemeIndex: 0 };\r\nlet y = 0;\r\nwhile (true) {\r\n  const lineWidth = widthAtY(y);  \u002F\u002F your function: how wide is the corridor at this y?\r\n  const range = layoutNextLineRange(prepared, cursor, lineWidth);\r\n  if (!range) break;\r\n  const line = materializeLineRange(prepared, range);\r\n  ctx.fillText(line.text, leftEdgeAtY(y), y);\r\n  cursor = range.end;\r\n  y += lineHeight;\r\n}\r\n```\r\n\r\nThis is the most important pattern in the whole library. It's what unlocks \"text flowing around a dragged sprite\" — the demo that went viral on X.\r\n\r\n### Helpers worth knowing\r\n\r\n- `measureLineStats(prepared, maxWidth)` → `{ lineCount, maxLineWidth }` — the widest line, i.e. multiline shrink-wrap width.\r\n- `walkLineRanges(prepared, maxWidth, callback)` — iterate lines without allocating strings. Use for stats\u002Fphysics over graphemes when you don't need the characters.\r\n- `@chenglou\u002Fpretext\u002Frich-inline` — the same system but for paragraphs mixing fonts \u002F chips \u002F mentions. Import from the subpath.\r\n\r\n## Demo Recipe Patterns\r\n\r\nThe community corpus (see `references\u002Fpatterns.md`) clusters into a handful of strong patterns. Pick one and riff — don't invent a new category unless asked.\r\n\r\n| Pattern | Key API | Example idea |\r\n|---|---|---|\r\n| **Reflow around obstacle** | `layoutNextLineRange` + per-row width function | Editorial paragraph that parts around a dragged cursor sprite |\r\n| **Text-as-geometry game** | `layoutWithLines` + per-line collision rects | Breakout where each brick is a measured word |\r\n| **Shatter \u002F particles** | `walkLineRanges` → per-grapheme (x,y) → physics | Sentence that explodes into letters on click |\r\n| **ASCII obstacle typography** | `layoutNextLineRange` + measured per-row obstacle spans | Bitmap ASCII logo, shape morphs, and draggable wire objects that make text open around their actual geometry |\r\n| **Editorial multi-column** | `layoutNextLineRange` per column + shared cursor | Animated magazine spread with pull quotes |\r\n| **Kinetic type** | `layoutWithLines` + per-line transform over time | Star Wars crawl, wave, bounce, glitch |\r\n| **Multiline shrink-wrap** | `measureLineStats` | Quote card that auto-sizes to its tightest container |\r\n\r\nSee `templates\u002Fdonut-orbit.html` and `templates\u002Fhello-orb-flow.html` for working single-file starters.\r\n\r\n## Workflow\r\n\r\n1. **Pick a pattern** from the table above based on the user's brief.\r\n2. **Start from a template**:\r\n   - `templates\u002Fhello-orb-flow.html` — text reflowing around a moving orb (reflow-around-obstacle pattern)\r\n   - `templates\u002Fdonut-orbit.html` — advanced example: measured ASCII logo obstacles, draggable wire sphere\u002Fcube, morphing shape fields, selectable DOM text, and dev-only controls\r\n   - `write_file` to a new `.html` in `\u002Ftmp\u002F` or the user's workspace.\r\n3. **Swap the corpus** for something intentional to the brief. Real prose, 10-100 sentences, no lorem.\r\n4. **Tune the aesthetic** — font, palette, composition, interaction. This is the work; don't skip it.\r\n5. **Verify locally**:\r\n   ```sh\r\n   cd \u003Cdir-with-html> && python3 -m http.server 8765\r\n   # then open http:\u002F\u002Flocalhost:8765\u002F\u003Cfile>.html\r\n   ```\r\n6. **Check the console** — pretext will throw if `prepareWithSegments` is called with a bad font string; `Intl.Segmenter` is available in every modern browser.\r\n7. **Show the user the file path**, not just the code — they want to open it.\r\n\r\n## Performance Notes\r\n\r\n- `prepare()` \u002F `prepareWithSegments()` is the expensive call. Do it **once** per text+font pair. Cache the handle.\r\n- On resize, only rerun `layout()` \u002F `layoutWithLines()` — never re-prepare.\r\n- For per-frame animations where text doesn't change but geometry does, `layoutNextLineRange` in a tight loop is cheap enough to do every frame at 60fps for normal-length paragraphs.\r\n- When rendering ASCII masks per frame, keep a cell buffer (`Uint8Array`\u002Ftyped arrays), derive measured per-row obstacle spans from the cells or projected geometry, merge spans, then feed those spans into `layoutNextLineRange` before drawing text.\r\n- Keep visual animation and layout animation coupled. If a sphere morphs into a cube, tween both the rendered cell buffer and the obstacle spans with the same value; otherwise the demo looks painted-on instead of physically reflowed.\r\n- For fades, prefer layer opacity over changing glyph intensity or obstacle scale. Put transient ASCII sprites on their own canvas and fade the canvas with CSS\u002FGSAP opacity so geometry does not appear to shrink.\r\n- Canvas `ctx.font` setting is surprisingly slow; set it **once** per frame if font doesn't vary, not per `fillText` call.\r\n\r\n## Common Pitfalls\r\n\r\n1. **Drifting CSS\u002Fcanvas font strings.** `ctx.font = \"16px Inter\"` measured, but CSS says `font-family: Inter, sans-serif; font-size: 16px`. Fine *if* Inter loads. If Inter 404s, CSS falls back to sans-serif and measurements drift by 5-20%. Always `preload` the font or use a web-safe family.\r\n\r\n2. **Re-preparing inside the animation loop.** Only `layout*` is cheap. Re-calling `prepare` every frame will tank perf. Keep the prepared handle in module scope.\r\n\r\n3. **Forgetting `Intl.Segmenter` for grapheme splits.** Emoji, combining marks, CJK — `\"é\".split(\"\")` gives you two chars. Use `new Intl.Segmenter(undefined, { granularity: \"grapheme\" })` when sampling individual visible glyphs.\r\n\r\n4. **`break: 'never'` chips without `extraWidth`.** In `rich-inline`, if you use `break: 'never'` for an atomic chip\u002Fmention, you must also supply `extraWidth` for the pill padding — otherwise chip chrome overflows the container.\r\n\r\n5. **Using `@chenglou\u002Fpretext` from `unpkg` with TypeScript-only entry.** Use `esm.sh` — it compiles the TS exports to browser-ready ESM automatically. `unpkg` will 404 or serve raw TS.\r\n\r\n6. **Monospace fallbacks silently erasing the whole point.** Users seeing monospace-looking output often have a CSS `font-family` that fell through to `monospace`. Verify the actual rendered font via DevTools.\r\n\r\n7. **Skipping rows vs adjusting width** when flowing around a shape. If the corridor on this row is too narrow to fit a line, *skip the row* (`y += lineHeight; continue;`) rather than passing a tiny maxWidth to `layoutNextLineRange` — pretext will return one-grapheme lines that look broken.\r\n\r\n8. **Shipping a cold demo.** The default first-paint looks tutorial-grade. Add: vignette, subtle scanline, idle auto-motion, one carefully chosen interactive response (drag, hover, scroll, click). Without these, \"cool pretext demo\" lands as \"intern repro of the README.\"\r\n\r\n## Verification Checklist\r\n\r\n- [ ] Demo is a single self-contained `.html` file — opens by double-click or `python3 -m http.server`\r\n- [ ] `@chenglou\u002Fpretext` imported via `esm.sh` with pinned version\r\n- [ ] Corpus is real prose, not lorem ipsum, and matches the demo's concept\r\n- [ ] Font string passed to `prepare` matches the CSS font exactly\r\n- [ ] `prepare()` \u002F `prepareWithSegments()` called once, not per frame\r\n- [ ] Dark background + considered palette — not the default white canvas\r\n- [ ] At least one interactive response (drag \u002F hover \u002F scroll \u002F click) or idle auto-motion\r\n- [ ] Tested locally with `python3 -m http.server` and confirmed no console errors\r\n- [ ] 60fps on a mid-tier laptop (or graceful degradation documented)\r\n- [ ] One \"extra mile\" detail the user didn't ask for\r\n\r\n## Reference: Community Demos\r\n\r\nClone these for inspiration \u002F patterns (all MIT-ish, linked from [pretext.cool](https:\u002F\u002Fwww.pretext.cool\u002F)):\r\n\r\n- **Pretext Breaker** — breakout with word-bricks — `github.com\u002Frinesh\u002Fpretext-breaker`\r\n- **Tetris × Pretext** — `github.com\u002Fshinichimochizuki\u002Ftetris-pretext`\r\n- **Dragon animation** — `github.com\u002Fqtakmalay\u002FPreTextExperiments`\r\n- **Somnai editorial engine** — `github.com\u002Fsomnai-dreams\u002Fpretext-demos`\r\n- **Bad Apple!! ASCII** — `github.com\u002Ffrmlinn\u002Fbad-apple-pretext`\r\n- **Drag-sprite reflow** — `github.com\u002Fdokobot\u002Fpretext-demo`\r\n- **Alarmy editorial clock** — `github.com\u002FSmisLee\u002Falarmy-pretext-demo`\r\n\r\nOfficial playground: [chenglou.me\u002Fpretext](https:\u002F\u002Fchenglou.me\u002Fpretext\u002F) — accordion, bubbles, dynamic-layout, editorial-engine, justification-comparison, masonry, markdown-chat, rich-note.\r\n","# Pretext Creative Demos\r\n\r\n## Overview\r\n\r\n[`@chenglou\u002Fpretext`](https:\u002F\u002Fgithub.com\u002Fchenglou\u002Fpretext) 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.\r\n\r\nThat 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.\r\n\r\nThis skill exists so Hermes can make **cool demos** with it — the kind people post to X. See `pretext.cool` and `chenglou.me\u002Fpretext` for the community demo corpus.\r\n\r\n## When to Use\r\n\r\nUse when the user asks for:\r\n- A \"pretext demo\" \u002F \"cool pretext thing\" \u002F \"text-as-X\"\r\n- Text flowing around a moving shape (hero sections, editorial layouts, animated long-form pages)\r\n- ASCII-art effects using **real words or prose**, not monospace rasters\r\n- Games where the playfield \u002F obstacles \u002F bricks are made of text (Tetris-from-letters, Breakout-of-prose)\r\n- Kinetic typography with per-glyph physics (shatter, scatter, flock, flow)\r\n- Typographic generative art, especially with non-Latin scripts or mixed scripts\r\n- Multiline \"shrink-wrap\" UI (smallest container width that still fits the text)\r\n- Anything that would require knowing line breaks *before* rendering\r\n\r\nDon't use for:\r\n- Static SVG\u002FHTML pages where CSS already solves layout — just use CSS\r\n- Rich text editors, general inline formatting engines (pretext is intentionally narrow)\r\n- Image → text (use `ascii-art` \u002F `ascii-video` skills)\r\n- Pure canvas generative art with no text role — use `p5js`\r\n\r\n## Creative Standard\r\n\r\nThis is visual art rendered in a browser. Pretext returns numbers; **you** draw the thing.\r\n\r\n- **Don't ship a \"hello world\" demo.** The `hello-orb-flow.html` template is the *starting* point. Every delivered demo must add intentional color, motion, composition, and one visual detail the user didn't ask for but will appreciate.\r\n- **Dark backgrounds, warm cores, considered palette.** Classic amber-on-black (CRT \u002F terminal) works, but so do cold-white-on-charcoal (editorial) and desaturated pastels (risograph). Pick one and commit.\r\n- **Proportional fonts are the point.** Pretext's whole vibe is \"not monospaced\" — lean into it. Use Iowan Old Style, Inter, JetBrains Mono, Helvetica Neue, or a variable font. Never default sans.\r\n- **Real source\u002Ftext, not lorem ipsum.** The corpus should mean something. Short manifestos, poetry, real source code, a found text, the library's own README — never `lorem ipsum`.\r\n- **First-paint excellence.** No loading states, no blank frames. The demo must look shippable the instant it opens.\r\n\r\n## Stack\r\n\r\nSingle self-contained HTML file per demo. No build step.\r\n\r\n| Layer | Tool | Purpose |\r\n|-------|------|---------|\r\n| Core | `@chenglou\u002Fpretext` via `esm.sh` CDN | Text measurement + line layout |\r\n| Render | HTML5 Canvas 2D | Glyph rendering, per-frame composition |\r\n| Segmentation | `Intl.Segmenter` (built-in) | Grapheme splitting for emoji \u002F CJK \u002F combining marks |\r\n| Interaction | Raw DOM events | Mouse \u002F touch \u002F wheel — no framework |\r\n\r\n```html\r\n\u003Cscript type=\"module\">\r\nimport {\r\n  prepare, layout,                   \u002F\u002F use-case 1: simple height\r\n  prepareWithSegments, layoutWithLines,  \u002F\u002F use-case 2a: fixed-width lines\r\n  layoutNextLineRange, materializeLineRange, \u002F\u002F use-case 2b: streaming \u002F variable width\r\n  measureLineStats, walkLineRanges,  \u002F\u002F stats without string allocation\r\n} from \"https:\u002F\u002Fesm.sh\u002F@chenglou\u002Fpretext@0.0.6\";\r\n\u003C\u002Fscript>\r\n```\r\n\r\nPin the version. `@0.0.6` at time of writing — check [npm](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@chenglou\u002Fpretext) for the latest if demo behavior is off.\r\n\r\n## The Two Use Cases\r\n\r\nAlmost everything reduces to one of these two shapes. Learn both.\r\n\r\n### Use-case 1 — measure, then render with CSS\u002FDOM\r\n\r\n```js\r\nconst prepared = prepare(text, \"16px Inter\");\r\nconst { height, lineCount } = layout(prepared, 320, 20);\r\n```\r\n\r\nYou still let the browser draw the text. Pretext just tells you how tall the box will be at a given width, **without** a DOM read. Use for:\r\n- Virtualized lists where rows contain wrapping text\r\n- Masonry with precise card heights\r\n- \"Does this label fit?\" dev-time checks\r\n- Preventing layout shift when remote text loads\r\n\r\n**Keep `font` and `letterSpacing` exactly in sync with your CSS.** The canvas `ctx.font` format (e.g. `\"16px Inter\"`, `\"500 17px 'JetBrains Mono'\"`) must match the rendered CSS, or measurements drift.\r\n\r\n### Use-case 2 — measure *and* render yourself\r\n\r\n```js\r\nconst prepared = prepareWithSegments(text, FONT);\r\nconst { lines } = layoutWithLines(prepared, 320, 26);\r\nfor (let i = 0; i \u003C lines.length; i++) {\r\n  ctx.fillText(lines[i].text, 0, i * 26);\r\n}\r\n```\r\n\r\nThis is where the creative work lives. You own the drawing, so you can:\r\n- Render to canvas, SVG, WebGL, or any coordinate system\r\n- Substitute per-glyph transforms (rotation, jitter, scale, opacity)\r\n- Use line metadata (width, grapheme positions) as geometry\r\n\r\nFor **variable-width-per-line** flow (text around a shape, text in a donut band, text in a non-rectangular column):\r\n\r\n```js\r\nlet cursor = { segmentIndex: 0, graphemeIndex: 0 };\r\nlet y = 0;\r\nwhile (true) {\r\n  const lineWidth = widthAtY(y);  \u002F\u002F your function: how wide is the corridor at this y?\r\n  const range = layoutNextLineRange(prepared, cursor, lineWidth);\r\n  if (!range) break;\r\n  const line = materializeLineRange(prepared, range);\r\n  ctx.fillText(line.text, leftEdgeAtY(y), y);\r\n  cursor = range.end;\r\n  y += lineHeight;\r\n}\r\n```\r\n\r\nThis is the most important pattern in the whole library. It's what unlocks \"text flowing around a dragged sprite\" — the demo that went viral on X.\r\n\r\n### Helpers worth knowing\r\n\r\n- `measureLineStats(prepared, maxWidth)` → `{ lineCount, maxLineWidth }` — the widest line, i.e. multiline shrink-wrap width.\r\n- `walkLineRanges(prepared, maxWidth, callback)` — iterate lines without allocating strings. Use for stats\u002Fphysics over graphemes when you don't need the characters.\r\n- `@chenglou\u002Fpretext\u002Frich-inline` — the same system but for paragraphs mixing fonts \u002F chips \u002F mentions. Import from the subpath.\r\n\r\n## Demo Recipe Patterns\r\n\r\nThe community corpus (see `references\u002Fpatterns.md`) clusters into a handful of strong patterns. Pick one and riff — don't invent a new category unless asked.\r\n\r\n| Pattern | Key API | Example idea |\r\n|---|---|---|\r\n| **Reflow around obstacle** | `layoutNextLineRange` + per-row width function | Editorial paragraph that parts around a dragged cursor sprite |\r\n| **Text-as-geometry game** | `layoutWithLines` + per-line collision rects | Breakout where each brick is a measured word |\r\n| **Shatter \u002F particles** | `walkLineRanges` → per-grapheme (x,y) → physics | Sentence that explodes into letters on click |\r\n| **ASCII obstacle typography** | `layoutNextLineRange` + measured per-row obstacle spans | Bitmap ASCII logo, shape morphs, and draggable wire objects that make text open around their actual geometry |\r\n| **Editorial multi-column** | `layoutNextLineRange` per column + shared cursor | Animated magazine spread with pull quotes |\r\n| **Kinetic type** | `layoutWithLines` + per-line transform over time | Star Wars crawl, wave, bounce, glitch |\r\n| **Multiline shrink-wrap** | `measureLineStats` | Quote card that auto-sizes to its tightest container |\r\n\r\nSee `templates\u002Fdonut-orbit.html` and `templates\u002Fhello-orb-flow.html` for working single-file starters.\r\n\r\n## Workflow\r\n\r\n1. **Pick a pattern** from the table above based on the user's brief.\r\n2. **Start from a template**:\r\n   - `templates\u002Fhello-orb-flow.html` — text reflowing around a moving orb (reflow-around-obstacle pattern)\r\n   - `templates\u002Fdonut-orbit.html` — advanced example: measured ASCII logo obstacles, draggable wire sphere\u002Fcube, morphing shape fields, selectable DOM text, and dev-only controls\r\n   - `write_file` to a new `.html` in `\u002Ftmp\u002F` or the user's workspace.\r\n3. **Swap the corpus** for something intentional to the brief. Real prose, 10-100 sentences, no lorem.\r\n4. **Tune the aesthetic** — font, palette, composition, interaction. This is the work; don't skip it.\r\n5. **Verify locally**:\r\n   ```sh\r\n   cd \u003Cdir-with-html> && python3 -m http.server 8765\r\n   # then open http:\u002F\u002Flocalhost:8765\u002F\u003Cfile>.html\r\n   ```\r\n6. **Check the console** — pretext will throw if `prepareWithSegments` is called with a bad font string; `Intl.Segmenter` is available in every modern browser.\r\n7. **Show the user the file path**, not just the code — they want to open it.\r\n\r\n## Performance Notes\r\n\r\n- `prepare()` \u002F `prepareWithSegments()` is the expensive call. Do it **once** per text+font pair. Cache the handle.\r\n- On resize, only rerun `layout()` \u002F `layoutWithLines()` — never re-prepare.\r\n- For per-frame animations where text doesn't change but geometry does, `layoutNextLineRange` in a tight loop is cheap enough to do every frame at 60fps for normal-length paragraphs.\r\n- When rendering ASCII masks per frame, keep a cell buffer (`Uint8Array`\u002Ftyped arrays), derive measured per-row obstacle spans from the cells or projected geometry, merge spans, then feed those spans into `layoutNextLineRange` before drawing text.\r\n- Keep visual animation and layout animation coupled. If a sphere morphs into a cube, tween both the rendered cell buffer and the obstacle spans with the same value; otherwise the demo looks painted-on instead of physically reflowed.\r\n- For fades, prefer layer opacity over changing glyph intensity or obstacle scale. Put transient ASCII sprites on their own canvas and fade the canvas with CSS\u002FGSAP opacity so geometry does not appear to shrink.\r\n- Canvas `ctx.font` setting is surprisingly slow; set it **once** per frame if font doesn't vary, not per `fillText` call.\r\n\r\n## Common Pitfalls\r\n\r\n1. **Drifting CSS\u002Fcanvas font strings.** `ctx.font = \"16px Inter\"` measured, but CSS says `font-family: Inter, sans-serif; font-size: 16px`. Fine *if* Inter loads. If Inter 404s, CSS falls back to sans-serif and measurements drift by 5-20%. Always `preload` the font or use a web-safe family.\r\n\r\n2. **Re-preparing inside the animation loop.** Only `layout*` is cheap. Re-calling `prepare` every frame will tank perf. Keep the prepared handle in module scope.\r\n\r\n3. **Forgetting `Intl.Segmenter` for grapheme splits.** Emoji, combining marks, CJK — `\"é\".split(\"\")` gives you two chars. Use `new Intl.Segmenter(undefined, { granularity: \"grapheme\" })` when sampling individual visible glyphs.\r\n\r\n4. **`break: 'never'` chips without `extraWidth`.** In `rich-inline`, if you use `break: 'never'` for an atomic chip\u002Fmention, you must also supply `extraWidth` for the pill padding — otherwise chip chrome overflows the container.\r\n\r\n5. **Using `@chenglou\u002Fpretext` from `unpkg` with TypeScript-only entry.** Use `esm.sh` — it compiles the TS exports to browser-ready ESM automatically. `unpkg` will 404 or serve raw TS.\r\n\r\n6. **Monospace fallbacks silently erasing the whole point.** Users seeing monospace-looking output often have a CSS `font-family` that fell through to `monospace`. Verify the actual rendered font via DevTools.\r\n\r\n7. **Skipping rows vs adjusting width** when flowing around a shape. If the corridor on this row is too narrow to fit a line, *skip the row* (`y += lineHeight; continue;`) rather than passing a tiny maxWidth to `layoutNextLineRange` — pretext will return one-grapheme lines that look broken.\r\n\r\n8. **Shipping a cold demo.** The default first-paint looks tutorial-grade. Add: vignette, subtle scanline, idle auto-motion, one carefully chosen interactive response (drag, hover, scroll, click). Without these, \"cool pretext demo\" lands as \"intern repro of the README.\"\r\n\r\n## Verification Checklist\r\n\r\n- [ ] Demo is a single self-contained `.html` file — opens by double-click or `python3 -m http.server`\r\n- [ ] `@chenglou\u002Fpretext` imported via `esm.sh` with pinned version\r\n- [ ] Corpus is real prose, not lorem ipsum, and matches the demo's concept\r\n- [ ] Font string passed to `prepare` matches the CSS font exactly\r\n- [ ] `prepare()` \u002F `prepareWithSegments()` called once, not per frame\r\n- [ ] Dark background + considered palette — not the default white canvas\r\n- [ ] At least one interactive response (drag \u002F hover \u002F scroll \u002F click) or idle auto-motion\r\n- [ ] Tested locally with `python3 -m http.server` and confirmed no console errors\r\n- [ ] 60fps on a mid-tier laptop (or graceful degradation documented)\r\n- [ ] One \"extra mile\" detail the user didn't ask for\r\n\r\n## Reference: Community Demos\r\n\r\nClone these for inspiration \u002F patterns (all MIT-ish, linked from [pretext.cool](https:\u002F\u002Fwww.pretext.cool\u002F)):\r\n\r\n- **Pretext Breaker** — breakout with word-bricks — `github.com\u002Frinesh\u002Fpretext-breaker`\r\n- **Tetris × Pretext** — `github.com\u002Fshinichimochizuki\u002Ftetris-pretext`\r\n- **Dragon animation** — `github.com\u002Fqtakmalay\u002FPreTextExperiments`\r\n- **Somnai editorial engine** — `github.com\u002Fsomnai-dreams\u002Fpretext-demos`\r\n- **Bad Apple!! ASCII** — `github.com\u002Ffrmlinn\u002Fbad-apple-pretext`\r\n- **Drag-sprite reflow** — `github.com\u002Fdokobot\u002Fpretext-demo`\r\n- **Alarmy editorial clock** — `github.com\u002FSmisLee\u002Falarmy-pretext-demo`\r\n\r\nOfficial playground: [chenglou.me\u002Fpretext](https:\u002F\u002Fchenglou.me\u002Fpretext\u002F) — accordion, bubbles, dynamic-layout, editorial-engine, justification-comparison, masonry, markdown-chat, rich-note.\r\n",{"name":5,"author":48,"license":15,"version":49,"metadata":50,"platforms":61,"description":7},"Hermes Agent","1.0.0",{"hermes":51},{"tags":52,"related_skills":57},[25,34,5,53,42,54,55,56],"ascii-art","generative","text-layout","kinetic-typography",[58,59,37,60],"p5js","claude-design","architecture-diagram",[62,63,64],"linux","macos","windows","main","0d1434f89f4bc6b07e9d272accd8c1013768820f","archive\u002Fskill-md-reviewed\u002Fsha256\u002F76\u002F76210dc7eb255058ef9d857fa981be30e1d3845186f86d2bfda7af73c6aadd7f",0,"https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills","https:\u002F\u002Fgithub.com\u002Fzapabob","The Open University of JAPAN　2019-now\r\n\r\nTokyo University of Science　2007-2010","2026-10-26 16:29:01",{"source":8,"skillName":5,"commands":74,"prompt":84,"zipAvailable":85},[75,78,81],{"tool":76,"command":77},"npx","npx skills add zapabob\u002FSkills --skill pretext",{"tool":79,"command":80},"bunx","bunx skills add zapabob\u002FSkills --skill pretext",{"tool":82,"command":83},"pnpm","pnpm dlx skills add zapabob\u002FSkills --skill pretext","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Farchive\u002Fskill-md-reviewed\u002Fsha256\u002F76\u002F76210dc7eb255058ef9d857fa981be30e1d3845186f86d2bfda7af73c6aadd7f\u002FSKILL.md",true,[],[88,121,153,179,206,223],{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":105,"publishedAt":43},"01M6GJTE1GESGGF9K028Y7753E","xurl","X\u002FTwitter via xurl CLI: post, search, DM, media, v2 API.","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fxurl\u002Fvariants\u002Fhermes-agent\u002FSKILL.md",[94,97,100],{"categoryNo":95,"categoryName":96,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":98,"categoryName":99,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":101,"categoryName":102,"taxonomyType":103,"taxonomyTypeDesc":104},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[90,106,63,107,108,62,64,109,110,111,112,113,114,115,116,117,65,118,119,120],"openclaw","cli","github","official","search","https","social-media","api","Media","hermes","hermes agent","twitter","social","via","post",{"skillNo":122,"name":123,"nameZh":6,"description":124,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":125,"categories":126,"keywords":136,"publishedAt":43},"01M6GJT8S1PXQ8WPXT1HSNBWH2","writing-plans","Write implementation plans: bite-sized tasks, paths, code.","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fwriting-plans\u002Fvariants\u002Fhermes-agent\u002FSKILL.md",[127,128,131,132,133],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":129,"categoryName":130,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":98,"categoryName":99,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":101,"categoryName":102,"taxonomyType":103,"taxonomyTypeDesc":104},{"categoryNo":134,"categoryName":135,"taxonomyType":103,"taxonomyTypeDesc":104},"01JBSEEDCAT000000000000036","内容创作者",[137,138,139,33,63,140,62,141,64,142,143,144,145,146,147,148,149,150,151,152],"writing","writing plans","plans","review","workflow","documentation","tasks","development","code","planning","code-review","subagent","write","superpowers","paths","test-driven-development",{"skillNo":154,"name":155,"nameZh":6,"description":156,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":157,"categories":158,"keywords":162,"publishedAt":43},"01M6GJST0H5X7WHBJ3BZK0DVKH","whisper","OpenAI's general-purpose speech recognition model. Supports 99 languages, transcription, translation to English, and language identification. Six model sizes from tiny (39M params) to large (1550M params). Use for speech-to-text, podcast transcription, or multilingual audio processing. Best for robust, multilingual ASR.","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fwhisper\u002Fvariants\u002Fhermes-agent-optional\u002FSKILL.md",[159],{"categoryNo":160,"categoryName":161,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",[155,63,62,163,164,165,166,167,168,36,169,170,171,172,173,174,175,176,177,178],"openai","speech","multimodal","Transformers","ASR","Audio","model","speech recognition","use","general","multilingual","translation","english","identification","processing","Audio Processing",{"skillNo":180,"name":181,"nameZh":6,"description":182,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":183,"categories":184,"keywords":188,"publishedAt":43},"01M6GJSMRQ8EETZTYMG72P70EA","weights-and-biases","W&B: log ML experiments, sweeps, model registry, dashboards.","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fweights-and-biases\u002Fvariants\u002Fhermes-agent\u002FSKILL.md",[185],{"categoryNo":186,"categoryName":187,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000013","分析与可视化",[189,63,190,191,64,192,193,194,195,196,197,169,198,199,200,201,202,203,204,205],"weights and biases","tensorflow","experiments","pytorch","visualization","registry","real-time","tuning","dashboards","experiment","log","time","Experiment Tracking","Model Registry","Hyperparameter Tuning","WandB","Real-Time Visualization",{"skillNo":207,"name":208,"nameZh":6,"description":209,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":210,"categories":211,"keywords":213,"publishedAt":43},"01M6GJS19KDPRY112JTR326S06","watchers","Poll RSS, JSON APIs, and GitHub with watermark dedup.","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fwatchers\u002Fvariants\u002Fhermes-agent-optional\u002FSKILL.md",[212],{"categoryNo":98,"categoryName":99,"taxonomyType":21,"taxonomyTypeDesc":22},[208,63,214,108,62,215,216,217,218,219,220,115,116,221,222],"terminal","automation","http","monitoring","cron","json","rss","devops","with",{"skillNo":224,"name":225,"nameZh":6,"description":226,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":227,"categories":228,"keywords":231,"publishedAt":43},"01M6GJRHJD2A6Q830SWF9W48BC","serving-llms-vllm","vLLM: high-throughput LLM serving, OpenAI API, quantization.","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fvllm\u002Fvariants\u002Fhermes-agent\u002FSKILL.md",[229,230],{"categoryNo":95,"categoryName":96,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":101,"categoryName":102,"taxonomyType":103,"taxonomyTypeDesc":104},[232,233,234,62,235,163,236,237,238,166,239,113,240,241,242,243,244,245,246,247],"llms","vLLM","serving llms vllm","research","openai api","tensor","Inference Serving","Production","llm serving","High Throughput","PagedAttention","Continuous Batching","Quantization","Tensor Parallelism","high-throughput","throughput"]