Eva Feature Demo

Workflow

1. Pin down the feature and the flow. Name the 3–5 concrete steps: start state → actions → payoff state. Write them out before touching the browser. git log --oneline -15 or internal/changelog/ (newest month file) if the user hasn't said which feature.

2. Set up the browser (.claude/skills/eva-launch-video/references/capture-workflow.md §1–2):

   pnpm dev                                          # from repo root → localhost:5173
   agent-browser close
   agent-browser open "http://localhost:5173/?agent=true"   # ?agent=true — boolean, not /?agent
   agent-browser set viewport 1280 720
   agent-browser set media dark
   agent-browser open "http://localhost:5173/?agent=true"
   agent-browser wait --load networkidle && agent-browser wait 5000

3. Write the take script. Copy templates/screencast.sh to the scratchpad, fill in the flow. Resolve refs while writing it (agent-browser snapshot -i at each stage) — but re-snapshot inside the script too, because refs don't survive navigation.

4. Dry run with recording off. RECORD=0. Fix every failed step. Watch for steps that succeed but look wrong (a click landing while a skeleton is up).

5. Record the take. RECORD=1. The script stops the recorder in a trap so a mid-flow failure still saves the partial file. Re-take with a fresh run — record restart also works.

6. Render the zoom pass. Reads the action log, so it needs no arguments beyond the slug:

   cd video && node scripts/render-screencast.mjs <slug>          # → recordings/<slug>-zoom.mp4

   It validates the log, stages the webm under video/public/recordings/, reads the real duration off the file, and renders the FeatureScreencast composition. Output is h264 / yuv420p / faststart / silent — exactly what X wants. --zoom=1.4 for a gentler push (default 1.55; above ~1.7 the surrounding UI stops being readable).

   Plain conversion with no camera move, if the zoom fights the flow:

   bash .claude/skills/eva-feature-demo/scripts/to-mp4.sh <slug>

7. QA by reading frames. You can't watch video. Read the action log first, then pull a still at each action time (a zoom peak) plus one between two actions (should be full-frame, no zoom):

   cat recordings/<slug>.actions.json
   bash .claude/skills/eva-feature-demo/scripts/frames.sh <slug>-zoom 3 6.4 11.5 15.9

   Check: cursor sitting on the element being acted on (not adrift); click ring on the button, not near it; keystroke caption mid-type, legible, not covering the thing it describes; zoom landing centred and staying inside the frame; the between-action frame fully zoomed out; overlays gone; no skeletons/spinners caught mid-flow; payoff state legible and holding; nothing confidential scrolled past; all four edges intact. Reshoot on any failure — it's a 2-minute loop.

8. Write the tweet. Invoke the eva-tweet skill. The video carries the proof; the tweet states what now exists — hook, optional positioning fragment, → list, optional close. Don't narrate the video ("watch as I…") and don't reference it at all.

9. Hand over. The -zoom.mp4 path as a markdown link, duration, the tweet in a fenced block, and anything in frame worth a second look before posting.

Quick reference

Tuning the render pass

The defaults are right for a normal take. To change the motion — zoom amount, cursor timing, caption speed, how segments merge — read references/render-pass.md, which covers the action log format, video/src/screencast/zoom.ts, and the composition.

Gotchas

• Sign-in URL is /?agent=true — /?agent throws a zod SearchParamError. If it hangs on "Signing in…" and the console says You're already signed in, navigate straight to the target.
• Remotion's bundled ffmpeg is built --disable-filters. Most -vf filters (including fps) error with "No option name near…". Extract stills by seeking instead: -ss <sec> -frames:v 1. frames.sh already does it this way.
• The dev overlays are three nodes, all hanging off <html>, not <body>. Hiding #react-scan-root alone is not enough: the component outlines and labels are drawn on a bare html > canvas with no id or class, and that is the one that wrecks a take. Kill all three (#react-scan-root, html > canvas, [data-agentation-root]) with inline display:none !important — a stylesheet loses to their inline styles. The template's hide_overlays does it, and go re-runs it because a page load remounts them.
• Never pass --props as inline JSON on Windows. The shell strips the quotes and Remotion fails with "neither valid JSON nor a file path". render-screencast.mjs writes a props file.
• Refs (@e1) invalidate on any DOM change. Re-snapshot inside the script after each navigation, never reuse a ref across a page change.
• Don't post the webm. X's support for it is unreliable; always ship the mp4.
• The pointer in the video is drawn, not recorded. It only knows the positions in the action log, so it cannot show a hover, a drag, or a scroll. If a flow's meaning depends on one of those, it is the wrong flow for this skill.
• say records the literal text, so it ends up burned into the video as a caption. Never type anything into a demo you wouldn't post.
• Recording adds overhead, so the app is slightly slower on camera than in real use. Don't compensate by cutting the waits — that reintroduces the unwatchable-automation problem.