feat(web): the real captures replace the pending plates

The §02 loop and two stills (a click, a frame) and the §03 pins still,
recorded from AnnotKitDemo, land in public/captures and the manifest flips
each slot from pending to ready with intrinsic sizes and the build hash.
The loop predates the notes-file rename and is stamped accordingly.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: angusbezzina

web/public/captures/README.md

@@ -8,13 +8,19 @@ While a shot is missing, `src/captures.ts` marks it `pending` and the page
 renders a labelled empty plate naming the shot. That is deliberate: the hole
 is honest, a fake screenshot is not.
 
-## The shot list (L4)
+## The shots
 
-| File | Shot | Notes |
+| File | Where | Notes |
 |---|---|---|
-| `annotate-loop.webm` + `annotate-loop.png` | §02 lead — click a control, composer opens, note submitted | Muted, ≤ ~1.5 MB, one take, no cuts. The `.png` is the poster frame. |
-| `annotate-pin.avif` / `.webp` / `.png` | §02 — pin + composer detail, resolved selector visible | Crop tight; no window chrome in frame. |
-| `annotkit-notes.avif` / `.webp` / `.png` | §03 — the `ANNOTKIT_NOTES.md` the run wrote | Plain editor, no chrome in the crop. |
+| `annotate-loop.mp4` + `annotate-loop-poster.png` | §02 lead | 22 s, muted, H.264, 1274×820, 465 KB. The poster is shown to reduced-motion readers, who get a play control instead of autoplay. |
+| `annotate-click.png` | §02 | A click on the avatar: selector chip and composer. |
+| `annotate-frame.png` | §02 | A frame around the heading and Profile card, composer waiting. |
+| `notes-pins.png` | §03 | Five pins placed, copy button under the pointer. |
+| `annotate-hover.png` | unused | The Profile card under hover, chip `Settings.Profile`. Kept for a future slot. |
+
+Stills recorded from `task demo` at `b5f58cf`; the loop at `4db8fc6` (its help text still says `AGENTATION_NOTES.md`, so re-shoot it when convenient). The stills are PNG at 2×; re-encode
+to AVIF/WebP if the page's weight budget ever needs it (`Figure` takes a single
+`src`, so swap the path).
 
 ## Landing a capture
 

web/public/captures/annotate-click.png

@@ -53,29 +53,57 @@ type ReadyLoop = Base & {
 
 export type Capture = Pending | ReadyStill | ReadyLoop;
 
-/** §02 lead — the one muted webm loop on the page (≤ ~1.5 MB, epic §8.5). */
+/** The stills were shot at this build. */
+const HASH = "b5f58cf";
+/** The loop predates it: its on-screen help text still names the old notes
+ * file, which `b5f58cf` renamed, so it was built from the commit before. */
+const LOOP_HASH = "4db8fc6";
+
+/** §02 lead — the one moving figure on the page. */
 export const annotateLoop: Capture = {
-  status: "pending",
-  caption: "AnnotKitDemo: click a control, type a note, note written.",
-  shot: "Screen recording · AnnotKitDemo settings screen",
-  direction:
-    "`task demo` → click Save → composer opens → type a note → submit. Muted webm, ≤ 1.5 MB, with a poster frame. One loop, no cuts.",
+  status: "ready",
+  kind: "loop",
+  src: "/captures/annotate-loop.mp4",
+  poster: "/captures/annotate-loop-poster.png",
+  alt: "AnnotKitDemo, a dark macOS settings window. Annotate is pressed, a control is clicked, a note is typed into the composer and sent; a numbered pin lands on the control.",
+  width: 1274,
+  height: 820,
+  caption: "AnnotKitDemo: press Annotate, click a control, type a note, send. 22 seconds, muted.",
+  buildHash: LOOP_HASH,
+};
+
+/** §02 support still — a click, the composer, the resolved selector. */
+export const annotateClick: Capture = {
+  status: "ready",
+  kind: "still",
+  src: "/captures/annotate-click.png",
+  alt: "The demo window after a click on the avatar. A chip above it reads Settings.Profile.Avatar and the composer below holds the note “Change the background color to green”.",
+  width: 1428,
+  height: 1378,
+  caption: "A click on the avatar. The chip is the resolved selector, `Settings.Profile.Avatar`; the composer opens under it.",
+  buildHash: HASH,
 };
 
-/** §02 support still — the pin and the composer, close in. */
-export const annotatePin: Capture = {
-  status: "pending",
-  caption: "The pin and the composer, drawn over the app being annotated.",
-  shot: "Still · pin + composer detail",
-  direction:
-    "`task demo` → place a pin on `Settings.Profile.Save` → screenshot the composer with the resolved selector visible.",
+/** §02 support still — a frame, and what it bound to. */
+export const annotateFrame: Capture = {
+  status: "ready",
+  kind: "still",
+  src: "/captures/annotate-frame.png",
+  alt: "The demo window with a frame drawn around the heading and the Profile card. The composer title reads Frame → Settings… and waits for a note.",
+  width: 1498,
+  height: 1286,
+  caption: "A frame drawn around the heading and the Profile card. The largest element it surrounds wins, not the labels inside.",
+  buildHash: HASH,
 };
 
-/** §03 support still — the notes file the run produced. */
-export const notesFile: Capture = {
-  status: "pending",
-  caption: "The `ANNOTKIT_NOTES.md` the run above wrote.",
-  shot: "Still · `ANNOTKIT_NOTES.md` in an editor",
-  direction:
-    "Open the `ANNOTKIT_NOTES.md` written by the demo run and screenshot it. Plain editor, no window chrome in the crop.",
+/** §03 support still — the notes, pinned in the app, before export. */
+export const notesPins: Capture = {
+  status: "ready",
+  kind: "still",
+  src: "/captures/notes-pins.png",
+  alt: "The demo window with five numbered blue pins on its controls and the toolbar’s copy button under the pointer, captioned Copy notes (Markdown).",
+  width: 1570,
+  height: 1350,
+  caption: "Five notes pinned. Save writes them all to one `ANNOTKIT_NOTES.md`; the toolbar copies the same markdown.",
+  buildHash: HASH,
 };

web/public/captures/annotate-frame.png

@@ -3,7 +3,7 @@ import { CodeBlock } from "../components/CodeBlock";
 import { Figure } from "../components/Figure";
 import { TermList } from "../components/TermList";
 import { agentNotes } from "../copy";
-import { notesFile } from "../captures";
+import { notesPins } from "../captures";
 
 /** §03 — the note format, the sinks, and the file a real run produced. */
 export function AgentNotes() {
@@ -17,7 +17,7 @@ export function AgentNotes() {
       <div className="section__body section__body--7-5">
         <div className="stack stack--lg">
           <CodeBlock {...agentNotes.sample} />
-          <Figure capture={notesFile} />
+          <Figure capture={notesPins} />
         </div>
         <TermList terms={agentNotes.sinks} />
       </div>

web/public/captures/annotate-hover.png

@@ -2,11 +2,12 @@ import { Section } from "../components/Section";
 import { Figure } from "../components/Figure";
 import { TermList } from "../components/TermList";
 import { annotate } from "../copy";
-import { annotateLoop, annotatePin } from "../captures";
+import { annotateClick, annotateFrame, annotateLoop } from "../captures";
 
 /**
  * §02 — the targeting rules, led by the one moving figure on the page.
- * The loop sits directly under the hero fold; the still supports the rules.
+ * The loop sits directly under the hero fold; the two stills, a click and a
+ * frame, stand beside the rules they illustrate.
  */
 export function Annotate() {
   return (
@@ -20,7 +21,10 @@ export function Annotate() {
       <div className="stack stack--lg">
         <Figure capture={annotateLoop} />
         <div className="section__body section__body--5-7">
-          <Figure capture={annotatePin} />
+          <div className="stack stack--lg">
+            <Figure capture={annotateClick} />
+            <Figure capture={annotateFrame} />
+          </div>
           <TermList terms={annotate.points} />
         </div>
       </div>