feat(media): hero streaming-demo assets generated from source (pnpm gen:media)

[rejifald]

What

Marketing campaign topic A0 — the hero demo for the README, Show HN, Product Hunt, and X. Ships the assets and the pipeline that regenerates them from source (pnpm gen:media):

asset	size
docs/media/streaming-demo[-dark].mp4 — 1280×720, 30 fps, ~20 s loop	810 / 737 KB
docs/media/streaming-demo[-dark].webp — README embed via <picture>	770 / 744 KB (24-bit, no palette banding)
docs/media/streaming-demo[-dark].gif — for gif-only channels (PH gallery etc.)	2446 / 2486 KB (< 2.5 MB budget)
docs/media/streaming-demo-square[-dark].mp4 — 1:1 for social	849 / 763 KB

Nine feature chapters — one per core feature

One loop cycles every core feature, with a chapter-dot indicator: streaming-first, validation + drift (drift(User)), data shaping (unwrap: 'data'), resilience (retry/throttle/timeout), caching (cache: { ttl, scope } — MISS→HIT, derived keys), auth (bearer(env()) — capability, not credential), observability (trace: 'console', stitch trace), any request style (llm()/graphql/sse — one engine), and agent-native (stitch run/stitch mcp → run_stitch). Every snippet is verified against README/core shapes and package JSDoc examples. The full ~45 s tour ships as mp4 + WebP; the GIF is a fixed 4-chapter marquee cut (via the scene's ?chapters= param) so it stays at full 1280 px quality under its 2.5 MB budget no matter how many chapters the tour gains.

The scene is a docs-site page, not a mockup

apps/docs/app/demo/streaming (noindexed) reuses CodePanel, Logo, BrandBackdrop, the Signal tokens and type stacks. Visit /demo/streaming on a dev server to watch it live (rAF-driven; static end-state under prefers-reduced-motion). Light/dark both work — the capture matrix records each via colorScheme emulation.

New design-system token

Success states needed a color the palette didn't have; rather than hard-coding a hex (forbidden by tokens.css), this adds a semantic --ok status token (light #15803d / dark #4ade80 + --ok-soft/--ok-line tints, exposed as bg-ok-soft/text-ok/border-ok-line). The "✓ …" badges and success rows use it.

Generated from source, not hand-recorded

Every frame is a pure function of time (window.__seek(t); ?capture freezes CSS animations and hides the Next dev indicator). The generator boots the docs dev server on a dedicated port (refusing to reuse an unknown server), frame-steps headless Chromium at 30 fps / 2× DPR, and assembles with ffmpeg; GIF encoding walks a quality ladder until it fits the budget.

Verified

• All four chapters + both themes eyeballed from extracted frames; legible at 600 px
• Loop seam: panels are blank-to-blank at the boundary (only the designed chapter-dot handoff differs); chapter out-fades complete a beat before the boundary
• retry: { attempts, on }, throttle: { rate: '10/s' }, timeout, cache, drift(User), stitch run/stitch mcp all match README/core

Follow-up (separate PR): wire the GIF into the README hero via the <picture> snippet in docs/media/README.md.

🤖 Generated with Claude Code

[rejifald]

review-sweep (re-review at 47c5b8b — supersedes the unposted payloads for 643664c and e70a8fa): 8 findings — 4 medium, 4 low; all in-diff, none security. Headlines: the hero snippet still wouldn't stream, the new caching chapter animates a cache HIT that the snippet (run verbatim) refuses to serve, and the branch now carries four generations of regenerable binaries (21 MB of blobs). A related pre-existing README issue (deprecated maxEntries in the Caching example) is filed separately. See inline comments.