Skip to content

README: phone-legible narrow gate-demo GIF (648x900, 32px) - #34

Merged
HomenShum merged 2 commits into
mainfrom
claude/readme-gif-narrow
Oct 16, 2026
Merged

HomenShum merged 2 commits into
mainfrom
claude/readme-gif-narrow

Conversation

@HomenShum

Copy link
Copy Markdown
Owner

What

The README's gate-demo GIF (960x600) is scaled to about 324 css px on a 390 px phone, where its text has a cap height near 2.7 css px. node scripts/record-gate-demo.mjs --narrow now replays the same real node dist/cli.js init / gate runs on a 648x900 canvas at 32px Consolas, wrapped at 34 columns on word boundaries (never inside FAILED / PASSED), and writes docs/media/gate-demo-narrow.gif plus the fresh run's docs/media/gate-demo-narrow-transcript.txt. README lines 41 and 43 point at it. Nothing else in the README changes (brand block lines 1-12 untouched).

The old docs/media/gate-demo.gif and docs/media/gate-demo-transcript.txt are not touched (the default wide mode of the script is unchanged).

Measured (before merge, Chromium, after img.decode())

  • 1,184,145 bytes (budget 1,451,386); 47 frames; 23,040 ms total (budget 25,664 ms); FAILED and PASSED verdict frames each held 2,400 ms.
  • Cap height per style (intrinsic / observed at 324 css px / at 358): FAILED 20 / 10 / 11, PASSED 20 / 10 / 11, normal output (N) 21 / 10 / 12, command line (ascender glyphs) 25 / 12 / 14, diff lines 22 / 11 / 12.
  • github.com branch README at 390x844: image rendered 324 px wide, documentElement.scrollWidth 390. At 1280x900 the image renders 648x900.
  • Re-joining the wrapped rows equals the transcript line for line (80 of 80); the script itself aborts if it does not.

Reproduce

npm ci && npm run build && npm i --no-save playwright && node scripts/record-gate-demo.mjs --narrow (ffmpeg on PATH).

🤖 Generated with Claude Code

The 960x600 gate-demo.gif is scaled to about 324 css px on a 390 px phone,
which puts its text near 2.7 css px cap height. scripts/record-gate-demo.mjs
--narrow replays the same real `node dist/cli.js` runs on a 648x900 canvas at
32px (cap about 10 css px at 324, 11 at 358), wrapped at 34 columns on word
boundaries, never inside FAILED/PASSED; re-joining the wrapped rows is checked
against the transcript inside the script. The wide clip and its transcript are
untouched; README lines 41 and 43 point at the narrow clip.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@vercel

vercel Bot commented Oct 16, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
proofloop Ready Ready Preview Oct 16, 2026 3:46pm UTC

Request Review

tests/walkthrough.test.ts pins scripts/record-gate-demo.mjs:36 to
import("playwright"); the --narrow doc block had pushed it to line 49. Move
the block below the import so line 36 is unchanged (the test is not edited).

Codex review note: the overflow guard read scrollWidth while every row was
display:none, so it could never fire. Show all rows once and count rows whose
scrollWidth exceeds clientWidth; a COLS=40 copy now aborts with 36 rows over.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@HomenShum
HomenShum merged commit 6b08451 into main Oct 16, 2026
6 checks passed
@HomenShum
HomenShum deleted the claude/readme-gif-narrow branch October 16, 2026 15:49

This branch was successfully deployed

1 active deployment
Preview — a7269972 Deployed Oct 16, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant