Skip to content

fix(demo): fit the narrow gate-demo GIF canvas to its content (648x432) + 34-column row assertion - #36

Merged
HomenShum merged 2 commits into
mainfrom
claude/gif-fit
Oct 18, 2026
Merged

HomenShum merged 2 commits into
mainfrom
claude/gif-fit

Conversation

@HomenShum

Copy link
Copy Markdown
Owner

What

The narrow gate-demo GIF (docs/media/gate-demo-narrow.gif, embedded in the README at width 432) was a fixed 648x900 canvas, so a visitor on a phone saw a mostly empty terminal: frame 0 was 90% blank and the last frame 55% blank (blank = pixel row whose luminance range over every 4th column is under 12).

  • The recorder now derives the canvas height from the fullest frame (12 visible rows x 34 px + 2 x 12 px padding): 648x432. Same 34-column wrap, same 32 px font, same width, so the capital-letter height is unchanged (20 intrinsic px, 10.0 css px at 390 on github.com).
  • New row.length <= COLS assertion on every wrapped row, whitespace-only and deeply indented rows included. wrapLine really does return over-long rows for a 40-space line, trailing spaces, or an indent wider than a row, so the assertion is load-bearing. wrapLine moved to scripts/narrow-wrap.mjs so tests/narrowWrap.test.ts can feed it those lines as negative controls without Playwright or ffmpeg.
  • Transcript differs from main only in six run-specific lines (gate timings and gate-state timestamps from the real runs).
  • docs/media/gate-demo.gif (full width) and the README are untouched. scripts/record-gate-demo.mjs line 36 (import("playwright")) stays on line 36, which tests/walkthrough.test.ts anchors.

Measured (blank.py, same measure on both)

before after
size 648x900 648x432
first frame blank 0.903 0.799
last frame blank 0.550 0.329
mean over 47 frames 0.531 0.335
bytes 1,184,145 ~814,000

Known limit: text lines of a 32 px font carry about 26 ink pixel rows per 34 px line, so this measure cannot go much below about 0.26 for the last frame at any readable leading (a 30 px pitch, where lines start to collide, still gave 0.212). The remaining blank is inter-line leading and the transcript's own empty lines, not an empty canvas.

npm test: 36 files, 386 passed, 3 skipped (incl. the 5 new tests).

Regenerate: node scripts/record-gate-demo.mjs --narrow.

🤖 Generated with Claude Code

The narrow clip was a fixed 648x900 canvas, so its first frame was 90% empty
and the last 55% (planner measure: pixel rows whose luminance range over every
4th column is under 12). The recorder now derives the canvas height from the
fullest frame (12 visible rows at 34 px, 12 px padding): 648x432, same 34
columns and 32 px font, so the capital-letter height is unchanged (20 px).

Also adds the row.length <= COLS assertion on every wrapped row (whitespace-only
and deeply indented lines included). wrapLine moves to scripts/narrow-wrap.mjs so
tests/narrowWrap.test.ts can feed it over-long lines as negative controls.

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

vercel Bot commented Oct 18, 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 18, 2026 3:54am UTC

Request Review

Reword the canvas comment (frames that are still filling are shorter than
the canvas) and escape the backslash in the test fixture path.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@HomenShum
HomenShum merged commit 62ad2f2 into main Oct 18, 2026
6 checks passed
@HomenShum
HomenShum deleted the claude/gif-fit branch October 18, 2026 03:57

This branch was successfully deployed

1 active deployment
Preview — 9208352f Deployed Oct 18, 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