docs(readme): lead with the product, add a live demo link and sample

Rewrite the README around the name and tagline: a prominent live-demo
link and license badge up top, a real sample of the exported diff
image, benefit-framed features, and an honest note that inline token
diffing suits localized edits over full rewrites.

Author: ctkrug

README.md

@@ -1,60 +1,76 @@
 # Diff Poster
 
+**▶ Live demo — [apps.charliekrug.com/diff-poster](https://apps.charliekrug.com/diff-poster/)**
+
 [![CI](https://github.com/ctkrug/diff-poster/actions/workflows/ci.yml/badge.svg)](https://github.com/ctkrug/diff-poster/actions/workflows/ci.yml)
+[![License: MIT](https://img.shields.io/badge/license-MIT-8a1c1c.svg)](LICENSE)
+
+Turn a before/after code snippet into a single clean image of just the change.
+Paste the old code, paste the new code, get a token-level diff styled like a tidy
+editor window and sized for a tweet. No login, no export dialog, nothing uploaded.
 
-Paste a before/after code snippet, get back a single crisp image of just the diff —
-styled like a nice editor, sized for a tweet, no login, no export dialog.
+![A Diff Poster image: an async getUser function where db.find becomes db.findOne and user.name becomes user.fullName, with only the changed tokens highlighted](docs/media/sample-diff.png)
 
-## Why
+## Who it's for
 
-Sharing a code change on Twitter/Slack usually means a screenshot of a diff view that's
-either too cluttered (line numbers, gutter, full file chrome) or too crude (solid
-red/green line highlighting that hides exactly which tokens changed). Tools like
-Snappify solve a bigger problem — window chrome, themes, gradients, carousels — for
-people who need a lot of that. Most of the time you just want: paste old code, paste
-new code, get one clean image with token-level highlighting, done.
+Developers sharing a specific code change: a clever one-liner, a bug fix, a small
+refactor, dropped into a tweet, a PR description, or a Slack thread. Not slide decks or
+blog carousels; that is a bigger tool's job. This is the "quote-tweet a diff" case:
+fast, single-shot, disposable.
 
-Diff Poster does the one thing: paste, render, download/copy. No account, no server
-round-trip, no saved projects.
+## Why token-level
 
-## The wow moment
+Most diff screenshots paint a whole changed line red or green. Rewrite
+`return 'hi ' + name;` as ``return `hello, ${name}!`;`` and a line diff just says
+"this line changed" while hiding what actually changed. Diff Poster diffs at the token
+level (identifiers, operators, literals, strings), so only the swapped tokens are
+marked. The reader sees the exact substitution, which is the whole reason to share it.
 
-Paste two versions of a function into the two panes and instantly get a properly
-highlighted diff image — token-level, not line-level — cropped and sized exactly for
-pasting into a tweet or a Slack message.
+Inline token diffing is at its best on localized edits. A wholesale rewrite (a
+for-loop turned into a `reduce`) interleaves a lot of removed and added tokens, the
+same way GitHub's word-diff does; the tool is tuned for the function-sized change, not
+the full-file rewrite.
 
 ## Features
 
-- Token-level diff highlighting (not whole-line red/green blocks) via a real diffing
-  algorithm over lexical tokens, so a renamed variable or a tweaked argument list reads
-  clearly instead of the whole line going red.
-- Editor-style rendering: syntax highlighting, a monospace type stack, subtle line
-  numbers, rounded window chrome — looks like a screenshot from a nice editor, not a
-  raw `<pre>` block.
-- Output sized for social sharing (1200×675, tweet/Slack-friendly) by default, with
-  the image rendered client-side onto a `<canvas>` and exported as PNG.
-- One-click "Copy image" (Clipboard API, with a clearly-disabled fallback where it's
-  unsupported) and "Download PNG" — no export dialog, no intermediate screen.
-- No login, no backend, no stored data: everything happens in the browser.
+- **Token-level highlighting**, via a longest-common-subsequence diff over lexical
+  tokens, so a renamed variable or a tweaked argument reads clearly instead of the
+  whole line going red.
+- **Editor-style output**: syntax coloring for JavaScript and Python, a plain-text
+  fallback, subtle line numbers, and rounded window chrome, so it reads as a
+  screenshot from a nice editor, not a raw `<pre>` block.
+- **Sized for sharing** at 1200×675 (the 16:9 frame Twitter, Bluesky, and Slack use
+  for previews), rendered onto a `<canvas>` at your screen's pixel density so the PNG
+  stays crisp on retina displays.
+- **One-click copy or download**: copy the PNG straight to your clipboard, or save it,
+  with no export dialog. Where the browser can't write images to the clipboard, Copy
+  is clearly disabled and Download always works.
+- **Nothing leaves your browser**: tokenizing, diffing, and rendering all run
+  client-side. No account, no backend, no stored snippets.
 
 ## Usage
 
 1. Paste the original code into the **Before** pane, the changed code into **After**.
-2. Click **Generate image**.
-3. **Copy image** or **Download PNG** — both one click, no dialog.
+2. Pick the language (JavaScript, Python, or plain text) for syntax coloring.
+3. Click **Generate image**.
+4. **Copy image** or **Download PNG**, both one click, no dialog.
+
+The download is named `diff-poster-YYYYMMDD-HHMMSS.png` so a folder of them sorts by
+time.
 
-## Stack
+## How it works
 
-Static, client-side JavaScript (no build-time server, no user accounts):
+A static, client-only Vite app with no framework, plain DOM APIs over a handful of
+pure modules:
 
-- Vanilla JS + a small, focused diff library for token-level diffing.
-- `<canvas>` for rendering the final shareable image.
-- Vitest for unit tests (diff logic, tokenizer, layout math).
-- Ships as a static site — no server required at runtime.
+`tokenize` (text → tokens, with strings and comments atomic) → `diffTokens` (LCS over
+the two token streams) → `segmentsToRows` + `fitRows` (row splitting and sizing math)
+→ `classifyToken` (syntax category per token) → `renderDiffToCanvas` (window chrome,
+line numbers, syntax + diff coloring) → `canvasToBlob` (PNG for copy or download).
 
-See [`docs/VISION.md`](docs/VISION.md) for the full design rationale,
+See [`docs/VISION.md`](docs/VISION.md) for the rationale,
 [`docs/ARCHITECTURE.md`](docs/ARCHITECTURE.md) for the module map, and
-[`docs/BACKLOG.md`](docs/BACKLOG.md) for the build plan.
+[`docs/DESIGN.md`](docs/DESIGN.md) for the paper-and-ink design direction.
 
 ## Development
 
@@ -67,12 +83,13 @@ npm run lint      # eslint
 npm run build     # static production build (output: site/)
 ```
 
-## Status
-
-The full v1 scope is built and tested: paste/diff/image, copy/download/share, a
-language selector, large-input guardrails, and a full keyboard/accessibility pass.
-See [`docs/BACKLOG.md`](docs/BACKLOG.md) for the story-by-story breakdown.
+Unit tests (jsdom) cover the diff, tokenizer, layout math, canvas rendering, and
+export; the Playwright suite covers the real-browser behavior jsdom can't: computed
+focus rings, `prefers-reduced-motion`, layout overflow, and font-blocked degradation.
+Both run in CI.
 
 ## License
 
-MIT — see [`LICENSE`](LICENSE).
+MIT. See [`LICENSE`](LICENSE).
+
+More of Charlie's projects → https://apps.charliekrug.com