Skip to content

feat(cli): check warns on a small headline and a narrow kinetic hero word - #5

Merged
ernis2077 merged 1 commit into
mainfrom
check-type-size
Nov 3, 2026
Merged

ernis2077 merged 1 commit into
mainfrom
check-type-size

Conversation

@ernis2077

Copy link
Copy Markdown

Motion videos were shipping titles too small to read. The house style says headlines are 56–96 px and reading text is never under 28 px; kinetic type says hero words fill 60–90% of the width. A 9:16 quote Reel came out with hero words at 45–50% of the width. check already warns on text under 28 px (text_below_floor). This adds the two sizes it didn't measure, as craft warnings in the same format, on the same 8 fps sweep.

  • headline_small: a frame's largest reading text stays under 5.2% of the short side (56 px on 1080) for 0.5 s or more. It's judged at the largest size it reaches, so a headline that scales in isn't flagged. Text under the type floor is left to text_below_floor, so nothing is reported twice. One finding per file.
  • hero_word_narrow: for text under a data-kinetic-type element, each frame's largest line is the hero. It warns when the hero spans under 60% of the frame's width at its median width, so a slam-in at 1.35x doesn't hide a narrow resting word. One finding per file.

The browser sample now marks each text part kinetic; everything else is Node-side in craftAudit.ts. The hold-and-run logic text_below_floor used is shared with headline_small.

Tests

  • craftAudit.test.ts: thresholds, the warnings, scale-in, flashes, captions, and the hand-off to text_below_floor.
  • craftTypeSize.chromium.test.ts runs runAuditGrid in real Chromium:
    • a 20 px title gets text_below_floor
    • a 40 px headline over 30 px body gets headline_small
    • a kinetic GO at 200 px gets hero_word_narrow
    • a 96 px headline with 32 px body, and a kinetic hero that fills the width, get none of them
  • Locally, the check/craft suites pass, except the two WebGL sweep tests: this machine's headless Chrome has no WebGL.

Registry examples: hyperframes check returns the same ok as before on all 8 (these are warnings only). headline_small warns on 4 of them, and each one really is under the house size: nyt-graph h1.headline is 48 px, product-promo's tagline 44 px, warm-grain "Editing Skills" 54 px, kinetic-type's "animations" label 40 px. None of the examples has data-kinetic-type.

🤖 Generated with Claude Code

…word

Two craft warnings beside text_below_floor (28 px on 1080):
- headline_small: a frame's largest reading text stays under 56 px on 1080
  (5.2% of the short side) for 0.5 s or more.
- hero_word_narrow: under a data-kinetic-type element, a frame's largest line
  spans under 60% of the frame's width at its median size.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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