calvyn-code 0.14.0

package/skills/creative/popular-web-designs/templates/zapier.md

@@ -0,0 +1,341 @@
+# Design System: Zapier
+
+
+> **Hermes Agent — Implementation Notes**
+>
+> The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:
+> - **Primary:** `Inter` | **Mono:** `system monospace stack`
+> - **Font stack (CSS):** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **Mono stack (CSS):** `font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`
+> ```html
+> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+> ```
+> Use `write_file` to create HTML, serve via `generative-widgets` skill (cloudflared tunnel).
+> Verify visual accuracy with `browser_vision` after generating.
+
+## 1. Visual Theme & Atmosphere
+
+Zapier's website radiates warm, approachable professionalism. It rejects the cold monochrome minimalism of developer tools in favor of a cream-tinted canvas (`#fffefb`) that feels like unbleached paper -- the digital equivalent of a well-organized notebook. The near-black (`#201515`) text has a faint reddish-brown warmth, creating an atmosphere more human than mechanical. This is automation designed to feel effortless, not technical.
+
+The typographic system is a deliberate interplay of two distinct personalities. **Degular Display** -- a geometric, wide-set display face -- handles hero-scale headlines at 56-80px with medium weight (500) and extraordinarily tight line-heights (0.90), creating headlines that compress vertically like stacked blocks. **Inter** serves as the workhorse for everything else, from section headings to body text and navigation, with fallbacks to Helvetica and Arial. **GT Alpina**, an elegant thin-weight serif with aggressive negative letter-spacing (-1.6px to -1.92px), makes occasional appearances for softer editorial moments. This three-font system gives Zapier the ability to shift register -- from bold and punchy (Degular) to clean and functional (Inter) to refined and literary (GT Alpina).
+
+The brand's signature orange (`#ff4f00`) is unmistakable -- a vivid, saturated red-orange that sits precisely between traffic-cone urgency and sunset warmth. It's used sparingly but decisively: primary CTA buttons, active state underlines, and accent borders. Against the warm cream background, this orange creates a color relationship that feels energetic without being aggressive.
+
+**Key Characteristics:**
+- Warm cream canvas (`#fffefb`) instead of pure white -- organic, paper-like warmth
+- Near-black with reddish undertone (`#201515`) -- text that breathes rather than dominates
+- Degular Display for hero headlines at 0.90 line-height -- compressed, impactful, modern
+- Inter as the universal UI font across all functional typography
+- GT Alpina for editorial accents -- thin-weight serif with extreme negative tracking
+- Zapier Orange (`#ff4f00`) as the single accent -- vivid, warm, sparingly applied
+- Warm neutral palette: borders (`#c5c0b1`), muted text (`#939084`), surface tints (`#eceae3`)
+- 8px base spacing system with generous padding on CTAs (20px 24px)
+- Border-forward design: `1px solid` borders in warm grays define structure over shadows
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Zapier Black** (`#201515`): Primary text, headings, dark button backgrounds. A warm near-black with reddish undertones -- never cold.
+- **Cream White** (`#fffefb`): Page background, card surfaces, light button fills. Not pure white; the yellowish warmth is intentional.
+- **Off-White** (`#fffdf9`): Secondary background surface, subtle alternate tint. Nearly indistinguishable from cream white but creates depth.
+
+### Brand Accent
+- **Zapier Orange** (`#ff4f00`): Primary CTA buttons, active underline indicators, accent borders. The signature color -- vivid and warm.
+
+### Neutral Scale
+- **Dark Charcoal** (`#36342e`): Secondary text, footer text, border color for strong dividers. A warm dark gray-brown with 70% opacity variant.
+- **Warm Gray** (`#939084`): Tertiary text, muted labels, timestamp-style content. Mid-range with greenish-warm undertone.
+- **Sand** (`#c5c0b1`): Primary border color, hover state backgrounds, divider lines. The backbone of Zapier's structural elements.
+- **Light Sand** (`#eceae3`): Secondary button backgrounds, light borders, subtle card surfaces.
+- **Mid Warm** (`#b5b2aa`): Alternate border tone, used on specific span elements.
+
+### Interactive
+- **Orange CTA** (`#ff4f00`): Primary action buttons and active tab underlines.
+- **Dark CTA** (`#201515`): Secondary dark buttons with sand hover state.
+- **Light CTA** (`#eceae3`): Tertiary/ghost buttons with sand hover.
+- **Link Default** (`#201515`): Standard link color, matching body text.
+- **Hover Underline**: Links remove `text-decoration: underline` on hover (inverse pattern).
+
+### Overlay & Surface
+- **Semi-transparent Dark** (`rgba(45, 45, 46, 0.5)`): Overlay button variant, backdrop-like elements.
+- **Pill Surface** (`#fffefb`): White pill buttons with sand borders.
+
+### Shadows & Depth
+- **Inset Underline** (`rgb(255, 79, 0) 0px -4px 0px 0px inset`): Active tab indicator -- orange underline using inset box-shadow.
+- **Hover Underline** (`rgb(197, 192, 177) 0px -4px 0px 0px inset`): Inactive tab hover -- sand-colored underline.
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: `Degular Display` -- wide geometric display face for hero headlines
+- **Primary**: `Inter`, with fallbacks: `Helvetica, Arial`
+- **Editorial**: `GT Alpina` -- thin-weight serif for editorial moments
+- **System**: `Arial` -- fallback for form elements and system UI
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero XL | Degular Display | 80px (5.00rem) | 500 | 0.90 (tight) | normal | Maximum impact, compressed block |
+| Display Hero | Degular Display | 56px (3.50rem) | 500 | 0.90-1.10 (tight) | 0-1.12px | Primary hero headlines |
+| Display Hero SM | Degular Display | 40px (2.50rem) | 500 | 0.90 (tight) | normal | Smaller hero variant |
+| Display Button | Degular Display | 24px (1.50rem) | 600 | 1.00 (tight) | 1px | Large CTA button text |
+| Section Heading | Inter | 48px (3.00rem) | 500 | 1.04 (tight) | normal | Major section titles |
+| Editorial Heading | GT Alpina | 48px (3.00rem) | 250 | normal | -1.92px | Thin editorial headlines |
+| Editorial Sub | GT Alpina | 40px (2.50rem) | 300 | 1.08 (tight) | -1.6px | Editorial subheadings |
+| Sub-heading LG | Inter | 36px (2.25rem) | 500 | normal | -1px | Large sub-sections |
+| Sub-heading | Inter | 32px (2.00rem) | 400 | 1.25 (tight) | normal | Standard sub-sections |
+| Sub-heading MD | Inter | 28px (1.75rem) | 500 | normal | normal | Medium sub-headings |
+| Card Title | Inter | 24px (1.50rem) | 600 | normal | -0.48px | Card headings |
+| Body Large | Inter | 20px (1.25rem) | 400-500 | 1.00-1.20 (tight) | -0.2px | Feature descriptions |
+| Body Emphasis | Inter | 18px (1.13rem) | 600 | 1.00 (tight) | normal | Emphasized body text |
+| Body | Inter | 16px (1.00rem) | 400-500 | 1.20-1.25 | -0.16px | Standard reading text |
+| Body Semibold | Inter | 16px (1.00rem) | 600 | 1.16 (tight) | normal | Strong labels |
+| Button | Inter | 16px (1.00rem) | 600 | normal | normal | Standard buttons |
+| Button SM | Inter | 14px (0.88rem) | 600 | normal | normal | Small buttons |
+| Caption | Inter | 14px (0.88rem) | 500 | 1.25-1.43 | normal | Labels, metadata |
+| Caption Upper | Inter | 14px (0.88rem) | 600 | normal | 0.5px | Uppercase section labels |
+| Micro | Inter | 12px (0.75rem) | 600 | 0.90-1.33 | 0.5px | Tiny labels, often uppercase |
+| Micro SM | Inter | 13px (0.81rem) | 500 | 1.00-1.54 | normal | Small metadata text |
+
+### Principles
+- **Three-font system, clear roles**: Degular Display commands attention at hero scale only. Inter handles everything functional. GT Alpina adds editorial warmth sparingly.
+- **Compressed display**: Degular at 0.90 line-height creates vertically compressed headline blocks that feel modern and architectural.
+- **Weight as hierarchy signal**: Inter uses 400 (reading), 500 (navigation/emphasis), 600 (headings/CTAs). Degular uses 500 (display) and 600 (buttons).
+- **Uppercase for labels**: Section labels (like "01 / Colors") and small categorization use `text-transform: uppercase` with 0.5px letter-spacing.
+- **Negative tracking for elegance**: GT Alpina uses -1.6px to -1.92px letter-spacing for its thin-weight editorial headlines.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Orange**
+- Background: `#ff4f00`
+- Text: `#fffefb`
+- Padding: 8px 16px
+- Radius: 4px
+- Border: `1px solid #ff4f00`
+- Use: Primary CTA ("Start free with email", "Sign up free")
+
+**Primary Dark**
+- Background: `#201515`
+- Text: `#fffefb`
+- Padding: 20px 24px
+- Radius: 8px
+- Border: `1px solid #201515`
+- Hover: background shifts to `#c5c0b1`, text to `#201515`
+- Use: Large secondary CTA buttons
+
+**Light / Ghost**
+- Background: `#eceae3`
+- Text: `#36342e`
+- Padding: 20px 24px
+- Radius: 8px
+- Border: `1px solid #c5c0b1`
+- Hover: background shifts to `#c5c0b1`, text to `#201515`
+- Use: Tertiary actions, filter buttons
+
+**Pill Button**
+- Background: `#fffefb`
+- Text: `#36342e`
+- Padding: 0px 16px
+- Radius: 20px
+- Border: `1px solid #c5c0b1`
+- Use: Tag-like selections, filter pills
+
+**Overlay Semi-transparent**
+- Background: `rgba(45, 45, 46, 0.5)`
+- Text: `#fffefb`
+- Radius: 20px
+- Hover: background becomes fully opaque `#2d2d2e`
+- Use: Video play buttons, floating actions
+
+**Tab / Navigation (Inset Shadow)**
+- Background: transparent
+- Text: `#201515`
+- Padding: 12px 16px
+- Shadow: `rgb(255, 79, 0) 0px -4px 0px 0px inset` (active orange underline)
+- Hover shadow: `rgb(197, 192, 177) 0px -4px 0px 0px inset` (sand underline)
+- Use: Horizontal tab navigation
+
+### Cards & Containers
+- Background: `#fffefb`
+- Border: `1px solid #c5c0b1` (warm sand border)
+- Radius: 5px (standard), 8px (featured)
+- No shadow elevation by default -- borders define containment
+- Hover: subtle border color intensification
+
+### Inputs & Forms
+- Background: `#fffefb`
+- Text: `#201515`
+- Border: `1px solid #c5c0b1`
+- Radius: 5px
+- Focus: border color shifts to `#ff4f00` (orange)
+- Placeholder: `#939084`
+
+### Navigation
+- Clean horizontal nav on cream background
+- Zapier logotype left-aligned, 104x28px
+- Links: Inter 16px weight 500, `#201515` text
+- CTA: Orange button ("Start free with email")
+- Tab navigation uses inset box-shadow underline technique
+- Mobile: hamburger collapse
+
+### Image Treatment
+- Product screenshots with `1px solid #c5c0b1` border
+- Rounded corners: 5-8px
+- Dashboard/workflow screenshots prominent in feature sections
+- Light gradient backgrounds behind hero content
+
+### Distinctive Components
+
+**Workflow Integration Cards**
+- Display connected app icons in pairs
+- Arrow or connection indicator between apps
+- Sand border containment
+- Inter weight 500 for app names
+
+**Stat Counter**
+- Large display number using Inter 48px weight 500
+- Muted description below in `#36342e`
+- Used for social proof metrics
+
+**Social Proof Icons**
+- Circular icon buttons: 14px radius
+- Sand border: `1px solid #c5c0b1`
+- Used for social media follow links in footer
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 64px, 72px
+- CTA buttons use generous padding: 20px 24px for large, 8px 16px for standard
+- Section padding: 64px-80px vertical
+
+### Grid & Container
+- Max content width: approximately 1200px
+- Hero: centered single-column with large top padding
+- Feature sections: 2-3 column grids for integration cards
+- Full-width sand-bordered dividers between sections
+- Footer: multi-column dark background (`#201515`)
+
+### Whitespace Philosophy
+- **Warm breathing room**: Generous vertical spacing between sections (64px-80px), but content areas are relatively dense -- Zapier packs information efficiently within its cream canvas.
+- **Architectural compression**: Degular Display headlines at 0.90 line-height compress vertically, contrasting with the open spacing around them.
+- **Section rhythm**: Cream background throughout, with sections separated by sand-colored borders rather than background color changes.
+
+### Border Radius Scale
+- Tight (3px): Small inline spans
+- Standard (4px): Buttons (orange CTA), tags, small elements
+- Content (5px): Cards, links, general containers
+- Comfortable (8px): Featured cards, large buttons, tabs
+- Social (14px): Social icon buttons, pill-like elements
+- Pill (20px): Play buttons, large pill buttons, floating actions
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page background, text blocks |
+| Bordered (Level 1) | `1px solid #c5c0b1` | Standard cards, containers, inputs |
+| Strong Border (Level 1b) | `1px solid #36342e` | Dark dividers, emphasized sections |
+| Active Tab (Level 2) | `rgb(255, 79, 0) 0px -4px 0px 0px inset` | Active tab underline (orange) |
+| Hover Tab (Level 2b) | `rgb(197, 192, 177) 0px -4px 0px 0px inset` | Hover tab underline (sand) |
+| Focus (Accessibility) | `1px solid #ff4f00` outline | Focus ring on interactive elements |
+
+**Shadow Philosophy**: Zapier deliberately avoids traditional shadow-based elevation. Structure is defined almost entirely through borders -- warm sand (`#c5c0b1`) borders for standard containment, dark charcoal (`#36342e`) borders for emphasis. The only shadow-like technique is the inset box-shadow used for tab underlines, where a `0px -4px 0px 0px inset` shadow creates a bottom-bar indicator. This border-first approach keeps the design grounded and tangible rather than floating.
+
+### Decorative Depth
+- Orange inset underline on active tabs creates visual "weight" at the bottom of elements
+- Sand hover underlines provide preview states without layout shifts
+- No background gradients in main content -- the cream canvas is consistent
+- Footer uses full dark background (`#201515`) for contrast reversal
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Degular Display exclusively for hero-scale headlines (40px+) with 0.90 line-height for compressed impact
+- Use Inter for all functional UI -- navigation, body text, buttons, labels
+- Apply warm cream (`#fffefb`) as the background, never pure white
+- Use `#201515` for text, never pure black -- the reddish warmth matters
+- Keep Zapier Orange (`#ff4f00`) reserved for primary CTAs and active state indicators
+- Use sand (`#c5c0b1`) borders as the primary structural element instead of shadows
+- Apply generous button padding (20px 24px) for large CTAs to match Zapier's spacious button style
+- Use inset box-shadow underlines for tab navigation rather than border-bottom
+- Apply uppercase with 0.5px letter-spacing for section labels and micro-categorization
+
+### Don't
+- Don't use Degular Display for body text or UI elements -- it's display-only
+- Don't use pure white (`#ffffff`) or pure black (`#000000`) -- Zapier's palette is warm-shifted
+- Don't apply box-shadow elevation to cards -- use borders instead
+- Don't scatter Zapier Orange across the UI -- it's reserved for CTAs and active states
+- Don't use tight padding on large CTA buttons -- Zapier's buttons are deliberately spacious
+- Don't ignore the warm neutral system -- borders should be `#c5c0b1`, not gray
+- Don't use GT Alpina for functional UI -- it's an editorial accent at thin weights only
+- Don't apply positive letter-spacing to GT Alpina -- it uses aggressive negative tracking (-1.6px to -1.92px)
+- Don't use rounded pill shapes (9999px) for primary buttons -- pills are for tags and social icons
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <450px | Tight single column, reduced hero text |
+| Mobile | 450-600px | Standard mobile, stacked layout |
+| Mobile Large | 600-640px | Slight horizontal breathing room |
+| Tablet Small | 640-680px | 2-column grids begin |
+| Tablet | 680-768px | Card grids expand |
+| Tablet Large | 768-991px | Full card grids, expanded padding |
+| Desktop Small | 991-1024px | Desktop layout initiates |
+| Desktop | 1024-1280px | Full layout, maximum content width |
+| Large Desktop | >1280px | Centered with generous margins |
+
+### Touch Targets
+- Large CTA buttons: 20px 24px padding (comfortable 60px+ height)
+- Standard buttons: 8px 16px padding
+- Navigation links: 16px weight 500 with adequate spacing
+- Social icons: 14px radius circular buttons
+- Tab items: 12px 16px padding
+
+### Collapsing Strategy
+- Hero: Degular 80px display scales to 40-56px on smaller screens
+- Navigation: horizontal links + CTA collapse to hamburger menu
+- Feature cards: 3-column grid to 2-column to single-column stacked
+- Integration workflow illustrations: maintain aspect ratio, may simplify
+- Footer: multi-column dark section collapses to stacked
+- Section spacing: 64-80px reduces to 40-48px on mobile
+
+### Image Behavior
+- Product screenshots maintain sand border treatment at all sizes
+- Integration app icons maintain fixed sizes within responsive containers
+- Hero illustrations scale proportionally
+- Full-width sections maintain edge-to-edge treatment
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: Zapier Orange (`#ff4f00`)
+- Background: Cream White (`#fffefb`)
+- Heading text: Zapier Black (`#201515`)
+- Body text: Dark Charcoal (`#36342e`)
+- Border: Sand (`#c5c0b1`)
+- Secondary surface: Light Sand (`#eceae3`)
+- Muted text: Warm Gray (`#939084`)
+
+### Example Component Prompts
+- "Create a hero section on cream background (`#fffefb`). Headline at 56px Degular Display weight 500, line-height 0.90, color `#201515`. Subtitle at 20px Inter weight 400, line-height 1.20, color `#36342e`. Orange CTA button (`#ff4f00`, 4px radius, 8px 16px padding, white text) and dark button (`#201515`, 8px radius, 20px 24px padding, white text)."
+- "Design a card: cream background (`#fffefb`), `1px solid #c5c0b1` border, 5px radius. Title at 24px Inter weight 600, letter-spacing -0.48px, `#201515`. Body at 16px weight 400, `#36342e`. No box-shadow."
+- "Build a tab navigation: transparent background. Inter 16px weight 500, `#201515` text. Active tab: `box-shadow: rgb(255, 79, 0) 0px -4px 0px 0px inset`. Hover: `box-shadow: rgb(197, 192, 177) 0px -4px 0px 0px inset`. Padding 12px 16px."
+- "Create navigation: cream sticky header (`#fffefb`). Inter 16px weight 500 for links, `#201515` text. Orange pill CTA 'Start free with email' right-aligned (`#ff4f00`, 4px radius, 8px 16px padding)."
+- "Design a footer with dark background (`#201515`). Text `#fffefb`. Links in `#c5c0b1` with hover to `#fffefb`. Multi-column layout. Social icons as 14px-radius circles with sand borders."
+
+### Iteration Guide
+1. Always use warm cream (`#fffefb`) background, never pure white -- the warmth defines Zapier
+2. Borders (`1px solid #c5c0b1`) are the structural backbone -- avoid shadow elevation
+3. Zapier Orange (`#ff4f00`) is the only accent color; everything else is warm neutrals
+4. Three fonts, strict roles: Degular Display (hero), Inter (UI), GT Alpina (editorial)
+5. Large CTA buttons need generous padding (20px 24px) -- Zapier buttons feel spacious
+6. Tab navigation uses inset box-shadow underlines, not border-bottom
+7. Text is always warm: `#201515` for dark, `#36342e` for body, `#939084` for muted
+8. Uppercase labels at 12-14px with 0.5px letter-spacing for section categorization

package/skills/creative/pretext/SKILL.md

@@ -0,0 +1,220 @@
+---
+name: pretext
+description: "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."
+version: 1.0.0
+author: Hermes Agent
+license: MIT
+platforms: [linux, macos, windows]
+metadata:
+  hermes:
+    tags: [creative-coding, typography, pretext, ascii-art, canvas, generative, text-layout, kinetic-typography]
+    related_skills: [p5js, claude-design, excalidraw, architecture-diagram]
+---
+
+# 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 scripts or mixed scripts
+- Multiline "shrink-wrap" UI (smallest container width that still fits the text)
+- Anything that would require knowing line breaks *before* rendering
+
+Don't use for:
+- Static SVG/HTML pages where CSS already solves layout — just use CSS
+- Rich text editors, general inline formatting engines (pretext is intentionally narrow)
+- Image → text (use `ascii-art` / `ascii-video` skills)
+- Pure canvas generative art with no text role — use `p5js`
+
+## Creative Standard
+
+This is visual art rendered in a browser. Pretext returns numbers; **you** draw the thing.
+
+- **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.
+- **Dark backgrounds, warm cores, considered palette.** Classic amber-on-black (CRT / terminal) works, but so do cold-white-on-charcoal (editorial) and desaturated pastels (risograph). Pick one and commit.
+- **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.
+- **Real source/text, 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`.
+- **First-paint excellence.** No loading states, no blank frames. The demo must look shippable the instant it opens.
+
+## Stack
+
+Single self-contained HTML file per demo. No build step.
+
+| Layer | Tool | Purpose |
+|-------|------|---------|
+| Core | `@chenglou/pretext` via `esm.sh` CDN | Text measurement + line layout |
+| Render | HTML5 Canvas 2D | Glyph rendering, per-frame composition |
+| Segmentation | `Intl.Segmenter` (built-in) | Grapheme splitting for emoji / CJK / combining marks |
+| Interaction | Raw DOM events | Mouse / touch / wheel — no framework |
+
+```html
+<script type="module">
+import {
+  prepare, layout,                   // use-case 1: simple height
+  prepareWithSegments, layoutWithLines,  // use-case 2a: fixed-width lines
+  layoutNextLineRange, materializeLineRange, // use-case 2b: streaming / variable width
+  measureLineStats, walkLineRanges,  // stats without string allocation
+} from "https://esm.sh/@chenglou/pretext@0.0.6";
+</script>
+```
+
+Pin the version. `@0.0.6` at time of writing — check [npm](https://www.npmjs.com/package/@chenglou/pretext) for the latest if demo behavior is off.
+
+## The Two Use Cases
+
+Almost everything reduces to one of these two shapes. Learn both.
+
+### Use-case 1 — measure, then render with CSS/DOM
+
+```js
+const prepared = prepare(text, "16px Inter");
+const { height, lineCount } = layout(prepared, 320, 20);
+```
+
+You 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:
+- Virtualized lists where rows contain wrapping text
+- Masonry with precise card heights
+- "Does this label fit?" dev-time checks
+- Preventing layout shift when remote text loads
+
+**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.
+
+### Use-case 2 — measure *and* render yourself
+
+```js
+const prepared = prepareWithSegments(text, FONT);
+const { lines } = layoutWithLines(prepared, 320, 26);
+for (let i = 0; i < lines.length; i++) {
+  ctx.fillText(lines[i].text, 0, i * 26);
+}
+```
+
+This is where the creative work lives. You own the drawing, so you can:
+- Render to canvas, SVG, WebGL, or any coordinate system
+- Substitute per-glyph transforms (rotation, jitter, scale, opacity)
+- Use line metadata (width, grapheme positions) as geometry
+
+For **variable-width-per-line** flow (text around a shape, text in a donut band, text in a non-rectangular column):
+
+```js
+let cursor = { segmentIndex: 0, graphemeIndex: 0 };
+let y = 0;
+while (true) {
+  const lineWidth = widthAtY(y);  // your function: how wide is the corridor at this y?
+  const range = layoutNextLineRange(prepared, cursor, lineWidth);
+  if (!range) break;
+  const line = materializeLineRange(prepared, range);
+  ctx.fillText(line.text, leftEdgeAtY(y), y);
+  cursor = range.end;
+  y += lineHeight;
+}
+```
+
+This 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.
+
+### Helpers worth knowing
+
+- `measureLineStats(prepared, maxWidth)` → `{ lineCount, maxLineWidth }` — the widest line, i.e. multiline shrink-wrap width.
+- `walkLineRanges(prepared, maxWidth, callback)` — iterate lines without allocating strings. Use for stats/physics over graphemes when you don't need the characters.
+- `@chenglou/pretext/rich-inline` — the same system but for paragraphs mixing fonts / chips / mentions. Import from the subpath.
+
+## Demo Recipe Patterns
+
+The community corpus (see `references/patterns.md`) clusters into a handful of strong patterns. Pick one and riff — don't invent a new category unless asked.
+
+| Pattern | Key API | Example idea |
+|---|---|---|
+| **Reflow around obstacle** | `layoutNextLineRange` + per-row width function | Editorial paragraph that parts around a dragged cursor sprite |
+| **Text-as-geometry game** | `layoutWithLines` + per-line collision rects | Breakout where each brick is a measured word |
+| **Shatter / particles** | `walkLineRanges` → per-grapheme (x,y) → physics | Sentence that explodes into letters on click |
+| **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 |
+| **Editorial multi-column** | `layoutNextLineRange` per column + shared cursor | Animated magazine spread with pull quotes |
+| **Kinetic type** | `layoutWithLines` + per-line transform over time | Star Wars crawl, wave, bounce, glitch |
+| **Multiline shrink-wrap** | `measureLineStats` | Quote card that auto-sizes to its tightest container |
+
+See `templates/donut-orbit.html` and `templates/hello-orb-flow.html` for working single-file starters.
+
+## Workflow
+
+1. **Pick a pattern** from the table above based on the user's brief.
+2. **Start from a template**:
+   - `templates/hello-orb-flow.html` — text reflowing around a moving orb (reflow-around-obstacle pattern)
+   - `templates/donut-orbit.html` — advanced example: measured ASCII logo obstacles, draggable wire sphere/cube, morphing shape fields, selectable DOM text, and dev-only controls
+   - `write_file` to a new `.html` in `/tmp/` or the user's workspace.
+3. **Swap the corpus** for something intentional to the brief. Real prose, 10-100 sentences, no lorem.
+4. **Tune the aesthetic** — font, palette, composition, interaction. This is the work; don't skip it.
+5. **Verify locally**:
+   ```sh
+   cd <dir-with-html> && python3 -m http.server 8765
+   # then open http://localhost:8765/<file>.html
+   ```
+6. **Check the console** — pretext will throw if `prepareWithSegments` is called with a bad font string; `Intl.Segmenter` is available in every modern browser.
+7. **Show the user the file path**, not just the code — they want to open it.
+
+## Performance Notes
+
+- `prepare()` / `prepareWithSegments()` is the expensive call. Do it **once** per text+font pair. Cache the handle.
+- On resize, only rerun `layout()` / `layoutWithLines()` — never re-prepare.
+- 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.
+- When rendering ASCII masks per frame, keep a cell buffer (`Uint8Array`/typed arrays), derive measured per-row obstacle spans from the cells or projected geometry, merge spans, then feed those spans into `layoutNextLineRange` before drawing text.
+- 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.
+- 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/GSAP opacity so geometry does not appear to shrink.
+- Canvas `ctx.font` setting is surprisingly slow; set it **once** per frame if font doesn't vary, not per `fillText` call.
+
+## Common Pitfalls
+
+1. **Drifting CSS/canvas 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.
+
+2. **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.
+
+3. **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.
+
+4. **`break: 'never'` chips without `extraWidth`.** In `rich-inline`, if you use `break: 'never'` for an atomic chip/mention, you must also supply `extraWidth` for the pill padding — otherwise chip chrome overflows the container.
+
+5. **Using `@chenglou/pretext` 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.
+
+6. **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.
+
+7. **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.
+
+8. **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."
+
+## Verification Checklist
+
+- [ ] Demo is a single self-contained `.html` file — opens by double-click or `python3 -m http.server`
+- [ ] `@chenglou/pretext` imported via `esm.sh` with pinned version
+- [ ] Corpus is real prose, not lorem ipsum, and matches the demo's concept
+- [ ] Font string passed to `prepare` matches the CSS font exactly
+- [ ] `prepare()` / `prepareWithSegments()` called once, not per frame
+- [ ] Dark background + considered palette — not the default white canvas
+- [ ] At least one interactive response (drag / hover / scroll / click) or idle auto-motion
+- [ ] Tested locally with `python3 -m http.server` and confirmed no console errors
+- [ ] 60fps on a mid-tier laptop (or graceful degradation documented)
+- [ ] One "extra mile" detail the user didn't ask for
+
+## Reference: Community Demos
+
+Clone these for inspiration / patterns (all MIT-ish, linked from [pretext.cool](https://www.pretext.cool/)):
+
+- **Pretext Breaker** — breakout with word-bricks — `github.com/rinesh/pretext-breaker`
+- **Tetris × Pretext** — `github.com/shinichimochizuki/tetris-pretext`
+- **Dragon animation** — `github.com/qtakmalay/PreTextExperiments`
+- **Somnai editorial engine** — `github.com/somnai-dreams/pretext-demos`
+- **Bad Apple!! ASCII** — `github.com/frmlinn/bad-apple-pretext`
+- **Drag-sprite reflow** — `github.com/dokobot/pretext-demo`
+- **Alarmy editorial clock** — `github.com/SmisLee/alarmy-pretext-demo`
+
+Official playground: [chenglou.me/pretext](https://chenglou.me/pretext/) — accordion, bubbles, dynamic-layout, editorial-engine, justification-comparison, masonry, markdown-chat, rich-note.