[pisanuw]

What

Small animated drawings to the left of each title on the landing page, for all 108 pages. Yusuf's choices: SVG rather than GIF, a small picture left of each title, plays on hover, text stripped. Trees went first as a pilot, then the rest.

• VizDef.preview: { example, level?, hide? } picks the curated example to play, the finest step level to include, and shape-id prefixes to leave out.
• src/render/preview.ts:
  • runs the example and drops text from every step;
  • keeps the steps in one fixed frame, samples them down to at most 24 and rounds the coordinates;
  • always drops the operation's input and output boxes (DEFAULT_HIDE);
  • picks the fullest frame as the still picture.
• Delivery:
  • scripts/prerender.mjs writes dist/previews.json with the still pictures only (355 KB raw, 40 KB gzipped).
  • It also writes dist/previews/<id>.json, one page's frames (at most 292 KB raw, 5 KB gzipped). These are fetched the first time a thumbnail plays, so phones and reduced-motion readers never fetch them.
  • The dev server makes both files on request from the same code. Nothing generated is committed.
• PreviewThumb.svelte:
  • shows the still picture at rest;
  • on hover or keyboard focus, fetches the frames once and loops through them, starting with a transition from the still picture, so there is no jump;
  • never plays under reduced motion;
  • is hidden from screen readers (aria-hidden), since the title beside it says what it is;
  • turns arrowheads off: markers scale with the unscaled stroke, so they swamped the drawings.
• Per-page hide lists:
  • graph pages hide their side tables, queues, call stacks and vertex label boxes;
  • geometry pages hide their matrix brackets;
  • a few pages hide result rows.
• Themes: light, dark and contrast all work. The catalog also loads every page's own stylesheet, so red-black nodes keep their colours.
• CLAUDE.md: the thumbnail is now step 13 of the definition of done.

Tests

• src/render/preview.test.ts:
  • every page has a preview;
  • each preview has 4 to 24 frames, a valid still picture, no text, unique ids, all shapes inside the frame, and at least 3 changes between frames.
• tests/e2e/catalog.spec.ts:
  • every live title has a thumbnail;
  • hover and focus play them, and the still picture returns afterwards;
  • reduced motion stays still and fetches no frame files;
  • axe scan.
• npm run lint, npm run check and npm test (2380 tests) pass. npm run e2e: 1645 passed, 5 skipped (tests that only run on desktop), 0 failed.

🤖 Generated with Claude Code

https://claude.ai/code/session_015Hhm4gYmBnZQozfDqkFdPy

[netlify]

✅ Deploy Preview for stepwise-pisan-labs ready!

Name	Link
🔨 Latest commit	530fb10
🔍 Latest deploy log	https://app.netlify.com/projects/stepwise-pisan-labs/deploys/6aef16ab029711a9617051f8
😎 Deploy Preview	https://deploy-preview-1--stepwise-pisan-labs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.