From 7ea2115a350d00f9f6f77f45934814e02d11c36d Mon Sep 17 00:00:00 2001
From: Ernis <ernest.jsdev@gmail.com>
Date: Tue, 3 Nov 2026 13:40:49 +0600
Subject: [PATCH] feat(cli): check warns on a small headline and a narrow
 kinetic hero 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>
---
 docs/packages/cli.mdx                         |   2 +
 packages/cli/src/commands/check.test.ts       |   1 +
 .../cli/src/commands/layout-audit.browser.js  |   1 +
 packages/cli/src/utils/checkBrowser.ts        |   3 +-
 packages/cli/src/utils/checkTypes.ts          |  13 +-
 packages/cli/src/utils/craftAudit.test.ts     |  74 +++++-
 packages/cli/src/utils/craftAudit.ts          | 235 ++++++++++++++++--
 .../src/utils/craftTypeSize.chromium.test.ts  | 116 +++++++++
 skills-manifest.json                          |   4 +-
 .../references/lint-validate-inspect.md       |   2 +
 skills/hyperframes/references/review.md       |   2 +-
 11 files changed, 423 insertions(+), 30 deletions(-)
 create mode 100644 packages/cli/src/utils/craftTypeSize.chromium.test.ts

diff --git a/docs/packages/cli.mdx b/docs/packages/cli.mdx
index 6bcbba6a5f3..d4a30f50bdc 100644
--- a/docs/packages/cli.mdx
+++ b/docs/packages/cli.mdx
@@ -1290,6 +1290,8 @@ edges re-measured to about 0.01 s, and skipped for a `--range` check.
 | `line_unread`       | A reading-size line (30 px or taller at 1080) is on screen for less than its floor: 0.4 s for one or two words, otherwise three quarters of 0.5 s + 0.3 s a word. The film's last line needs 2 s.          |
 | `dead_stretch`      | Nothing on screen changes for more than 3 s, by the same classifier `keepsMoving` uses.                                                                                                                    |
 | `text_below_floor`  | Text under 2.6% of the frame's short side (28 px on 1080) stays on screen 0.5 s or more. One finding per file lists every such element.                                                                    |
+| `headline_small`    | The largest text on screen stays under 5.2% of the short side (56 px on 1080, the smallest headline) for 0.5 s or more, while above the type floor. One finding per file.                                  |
+| `hero_word_narrow`  | Inside a `data-kinetic-type` element, a frame's largest line spans under 60% of the frame's width at its median size. One finding per file.                                                                |
 | `first_frame_empty` | Frame 0 paints nothing but the background (no text, image, video, canvas or SVG), or an opaque element covers every other clip and is named. The first frame is the thumbnail on social players.                                                                      |
 | `film_silent`       | A film longer than 15 s has no unmuted `<audio>` and no `<video>` with sound.                                                                                                                             |
 
diff --git a/packages/cli/src/commands/check.test.ts b/packages/cli/src/commands/check.test.ts
index 970fdb65a1d..74b051f472e 100644
--- a/packages/cli/src/commands/check.test.ts
+++ b/packages/cli/src/commands/check.test.ts
@@ -2804,6 +2804,7 @@ describe("check pipeline", () => {
                 fontPx: 96,
                 rect: { left: 160, top: 380, width: 1600, height: 220 },
                 captions: false,
+                kinetic: false,
               },
             ]
           : [],
diff --git a/packages/cli/src/commands/layout-audit.browser.js b/packages/cli/src/commands/layout-audit.browser.js
index b1bf1fdc937..f05166b49f8 100644
--- a/packages/cli/src/commands/layout-audit.browser.js
+++ b/packages/cli/src/commands/layout-audit.browser.js
@@ -2720,6 +2720,7 @@
           fontPx: round(renderedFontPx(element, getComputedStyle(element))),
           rect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height },
           captions: isCaptionsText(element),
+          kinetic: element.closest("[data-kinetic-type]") !== null,
         };
       });
   }
diff --git a/packages/cli/src/utils/checkBrowser.ts b/packages/cli/src/utils/checkBrowser.ts
index 98ee3b7adc1..52290ae7d2f 100644
--- a/packages/cli/src/utils/checkBrowser.ts
+++ b/packages/cli/src/utils/checkBrowser.ts
@@ -1045,8 +1045,9 @@ function parseCraftTextPart(value: unknown): CraftTextPart[] {
   const rect = recordField(value, "rect");
   const box = rect ? requiredNumbers(rect, CRAFT_RECT_NUMBERS) : null;
   const captions = booleanValue(value, "captions");
+  const kinetic = booleanValue(value, "kinetic") ?? false;
   return nums && strings && box && captions !== null
-    ? [{ ...nums, ...strings, rect: box, captions }]
+    ? [{ ...nums, ...strings, rect: box, captions, kinetic }]
     : [];
 }
 
diff --git a/packages/cli/src/utils/checkTypes.ts b/packages/cli/src/utils/checkTypes.ts
index 33ef1c81416..23215f14723 100644
--- a/packages/cli/src/utils/checkTypes.ts
+++ b/packages/cli/src/utils/checkTypes.ts
@@ -229,6 +229,8 @@ export interface CraftTextPart {
   fontPx: number;
   rect: { left: number; top: number; width: number; height: number };
   captions: boolean;
+  /** Inside a data-kinetic-type element, whose largest line is held to hero_word_narrow. */
+  kinetic: boolean;
 }
 
 export interface CraftFrame {
@@ -345,9 +347,18 @@ export interface CraftFinding extends CheckFinding {
   seconds?: number;
   floorSeconds?: number;
   fontPx?: number;
+  /** hero_word_narrow: the hero's resting width. */
+  widthPx?: number;
   floorPx?: number;
   until?: number;
-  elements?: { selector: string; text: string; fontPx: number; time: number; seconds: number }[];
+  elements?: {
+    selector: string;
+    text: string;
+    fontPx: number;
+    widthPx?: number;
+    time: number;
+    seconds: number;
+  }[];
 }
 
 export interface CraftResult {
diff --git a/packages/cli/src/utils/craftAudit.test.ts b/packages/cli/src/utils/craftAudit.test.ts
index b1e5aafb87c..7705e9f6d2d 100644
--- a/packages/cli/src/utils/craftAudit.test.ts
+++ b/packages/cli/src/utils/craftAudit.test.ts
@@ -4,8 +4,11 @@ import {
   detectDeadStretches,
   detectFilmSilent,
   detectFirstFrameEmpty,
+  detectHeadlineSmall,
+  detectHeroWordNarrow,
   detectLineUnread,
   detectTextBelowFloor,
+  headlinePx,
   lineFloorSec,
   readingWords,
   typeFloorPx,
@@ -22,6 +25,9 @@ interface Shown {
   to: number;
   fontPx?: number;
   captions?: boolean;
+  kinetic?: boolean;
+  /** Rendered width; defaults to 800 px. */
+  width?: number;
   /** Block key; defaults to the element's own key. */
   block?: number;
 }
@@ -37,8 +43,9 @@ function part(shown: Shown): CraftTextPart {
     text: shown.text,
     opacity: 1,
     fontPx,
-    rect: { left: 100, top: 100 + shown.key * 10, width: 800, height: fontPx * 1.2 },
+    rect: { left: 100, top: 100 + shown.key * 10, width: shown.width ?? 800, height: fontPx * 1.2 },
     captions: shown.captions ?? false,
+    kinetic: shown.kinetic ?? false,
   };
 }
 
@@ -243,6 +250,71 @@ describe("text_below_floor", () => {
   });
 });
 
+describe("headline_small", () => {
+  it("puts headline size at 5.2% of the short side", () => {
+    expect(headlinePx(CANVAS)).toBe(56);
+    expect(headlinePx({ width: 1080, height: 1920 })).toBe(56);
+    expect(headlinePx({ width: 3840, height: 2160 })).toBe(112);
+  });
+
+  it("warns when the largest text on screen stays under 56 px for 0.5 s or more", () => {
+    const shown: Shown[] = [
+      { key: 1, text: "Quarterly results", from: 0, to: 4, fontPx: 40 },
+      { key: 2, text: "Revenue grew in every region", from: 0, to: 4, fontPx: 30 },
+    ];
+    const findings = detectHeadlineSmall(film(8, shown), 8, CANVAS);
+    expect(findings).toHaveLength(1);
+    expect(findings[0]).toMatchObject({
+      code: "headline_small",
+      severity: "warning",
+      text: "Quarterly results",
+      fontPx: 40,
+      floorPx: 56,
+    });
+    expect(findings[0]?.message).toContain("Headlines are 56–96 px");
+  });
+
+  it("judges a headline at the size it lands on, and leaves text under the floor to text_below_floor", () => {
+    const shown: Shown[] = [
+      { key: 1, text: "Landed title", from: 0, to: 0.25, fontPx: 40 },
+      { key: 1, text: "Landed title", from: 0.25, to: 4, fontPx: 72 },
+      { key: 2, text: "A tiny 20 px title", from: 4, to: 8, fontPx: 20 },
+      { key: 3, text: "Quick 40 px flash", from: 8, to: 8.3, fontPx: 40 },
+    ];
+    const frames = film(10, shown);
+    expect(detectHeadlineSmall(frames, 10, CANVAS)).toEqual([]);
+    expect(detectTextBelowFloor(frames, 10, CANVAS)[0]).toMatchObject({ fontPx: 20 });
+  });
+});
+
+describe("hero_word_narrow", () => {
+  it("warns on a kinetic hero under 60% of the width, judged at its median width", () => {
+    const shown: Shown[] = [
+      // Slams in at 1.35x for a sample, then rests at 950 px of 1920 (49%).
+      { key: 1, text: "ONE", from: 0, to: 0.125, fontPx: 300, width: 1300, kinetic: true },
+      { key: 1, text: "ONE", from: 0.125, to: 0.5, fontPx: 220, width: 950, kinetic: true },
+      { key: 2, text: "IDEA.", from: 0.5, to: 1, fontPx: 220, width: 1400, kinetic: true },
+      { key: 3, text: "a kicker", from: 0, to: 1, fontPx: 40, width: 200, kinetic: true },
+    ];
+    const findings = detectHeroWordNarrow(film(1, shown), CANVAS);
+    expect(findings).toHaveLength(1);
+    expect(findings[0]).toMatchObject({
+      code: "hero_word_narrow",
+      severity: "warning",
+      text: "ONE",
+      widthPx: 950,
+      floorPx: 1152,
+    });
+    expect(findings[0]?.elements).toHaveLength(1);
+    expect(findings[0]?.message).toContain("950 px (49%)");
+  });
+
+  it("does not hold text outside data-kinetic-type to it", () => {
+    const shown: Shown[] = [{ key: 1, text: "Title", from: 0, to: 4, fontPx: 96, width: 400 }];
+    expect(detectHeroWordNarrow(film(4, shown), CANVAS)).toEqual([]);
+  });
+});
+
 describe("first_frame_empty", () => {
   it("warns when frame 0 paints nothing but the background", () => {
     const findings = detectFirstFrameEmpty([
diff --git a/packages/cli/src/utils/craftAudit.ts b/packages/cli/src/utils/craftAudit.ts
index 02534e3d782..33d18522f84 100644
--- a/packages/cli/src/utils/craftAudit.ts
+++ b/packages/cli/src/utils/craftAudit.ts
@@ -19,6 +19,10 @@ const CRAFT_THRESHOLDS = {
   endCardSec: END_CARD_HOLD_SEC,
   typeFloorFraction: 0.026,
   typeFloorHoldSec: 0.5,
+  /** The house style's smallest headline: 56 px on 1080. */
+  headlineFraction: 0.052,
+  /** Kinetic type's hero word spans 60–90% of the frame's width. */
+  heroWidthFraction: 0.6,
   silentFilmSec: 15,
   /** One video frame: a line held exactly at its floor measures a hair under it. */
   measureToleranceSec: 1 / 30,
@@ -74,6 +78,8 @@ export async function auditCraft(input: CraftAuditInput, probe?: CraftProbe): Pr
     ...(await detectLineUnread(frames, input.duration, input.canvas, probe)),
     ...(input.stillnessJudgedElsewhere ? [] : detectDeadStretches(frames, input.duration)),
     ...detectTextBelowFloor(frames, input.duration, input.canvas),
+    ...detectHeadlineSmall(frames, input.duration, input.canvas),
+    ...detectHeroWordNarrow(frames, input.canvas),
     ...detectFilmSilent(input.duration, input.soundSources),
   ].sort((a, b) => a.time - b.time);
   return { enabled: true, step, samples: frames.length, findings };
@@ -450,25 +456,36 @@ export function typeFloorPx(canvas: Canvas): number {
   return Math.round(T.typeFloorFraction * Math.min(canvas.width, canvas.height));
 }
 
-export function detectTextBelowFloor(
+type TextPart = CraftFrame["parts"][number];
+type Sightings = Map<number, Map<number, TextPart>>;
+
+/** Reading text: words at ≥ 0.5 opacity, outside the captions track. */
+function isReading(part: TextPart): boolean {
+  return !part.captions && part.opacity >= T.readOpacity && readingWords(part.text) > 0;
+}
+
+function largest(parts: TextPart[]): TextPart | undefined {
+  return parts.reduce<TextPart | undefined>(
+    (best, part) => (!best || part.fontPx > best.fontPx ? part : best),
+    undefined,
+  );
+}
+
+function see(sightings: Sightings, part: TextPart, index: number): void {
+  const seen = sightings.get(part.key) ?? new Map();
+  seen.set(index, part);
+  sightings.set(part.key, seen);
+}
+
+/** Elements whose longest run of sightings lasts 0.5 s or more, sized by `size` over every sighting. */
+function heldTexts(
+  sightings: Sightings,
   frames: CraftFrame[],
   duration: number,
-  canvas: Canvas,
-): CraftFinding[] {
-  const floorPx = typeFloorPx(canvas);
+  size: (fontPx: number[]) => number,
+): SmallText[] {
   const step = sampleStep(frames);
-  const sightings = new Map<number, Map<number, CraftFrame["parts"][number]>>();
-  frames.forEach((frame, index) => {
-    for (const part of frame.parts) {
-      if (part.captions || part.opacity < T.readOpacity) continue;
-      // Half a pixel of slack: a scaled 28 px line measures 27.9.
-      if (part.fontPx >= floorPx - 0.5 || readingWords(part.text) === 0) continue;
-      const seen = sightings.get(part.key) ?? new Map();
-      seen.set(index, part);
-      sightings.set(part.key, seen);
-    }
-  });
-  const small: SmallText[] = [];
+  const held: SmallText[] = [];
   for (const seen of sightings.values()) {
     const [first, last] = longestRun(indexRuns([...seen.keys()]));
     const start = frames[first]?.time ?? 0;
@@ -477,11 +494,11 @@ export function detectTextBelowFloor(
     const parts = [...seen.values()];
     const part = parts[0];
     if (!part) continue;
-    small.push({
+    held.push({
       selector: part.selector,
       sourceFile: part.sourceFile,
       text: part.text,
-      fontPx: Math.min(...parts.map((entry) => entry.fontPx)),
+      fontPx: size(parts.map((entry) => entry.fontPx)),
       seconds: end - start,
       time: start,
       bbox: {
@@ -492,6 +509,23 @@ export function detectTextBelowFloor(
       },
     });
   }
+  return held;
+}
+
+export function detectTextBelowFloor(
+  frames: CraftFrame[],
+  duration: number,
+  canvas: Canvas,
+): CraftFinding[] {
+  const floorPx = typeFloorPx(canvas);
+  const sightings: Sightings = new Map();
+  frames.forEach((frame, index) => {
+    for (const part of frame.parts) {
+      // Half a pixel of slack: a scaled 28 px line measures 27.9.
+      if (isReading(part) && part.fontPx < floorPx - 0.5) see(sightings, part, index);
+    }
+  });
+  const small = heldTexts(sightings, frames, duration, (sizes) => Math.min(...sizes));
   const shortSide = Math.min(canvas.width, canvas.height);
   return groupBySourceFile(small).map((group) => smallTextFinding(group, floorPx, shortSide));
 }
@@ -536,12 +570,165 @@ function smallTextFinding(group: SmallText[], floorPx: number, shortSide: number
     fontPx: round(smallest.fontPx),
     floorPx,
     seconds: round(smallest.seconds),
-    elements: group.map((entry) => ({
-      selector: entry.selector,
-      text: entry.text,
-      fontPx: round(entry.fontPx),
-      time: round(entry.time),
-      seconds: round(entry.seconds),
+    elements: group.map(textElement),
+  };
+}
+
+function textElement(entry: SmallText): NonNullable<CraftFinding["elements"]>[number] {
+  return {
+    selector: entry.selector,
+    text: entry.text,
+    fontPx: round(entry.fontPx),
+    time: round(entry.time),
+    seconds: round(entry.seconds),
+  };
+}
+
+// ---------- headline_small ----------
+
+/** 5.2% of the short side, rounded: 56 px on 1080. */
+export function headlinePx(canvas: Canvas): number {
+  return Math.round(T.headlineFraction * Math.min(canvas.width, canvas.height));
+}
+
+/** The largest reading text in each frame, when it stays under headline size for 0.5 s or more. */
+export function detectHeadlineSmall(
+  frames: CraftFrame[],
+  duration: number,
+  canvas: Canvas,
+): CraftFinding[] {
+  const floorPx = typeFloorPx(canvas);
+  const headPx = headlinePx(canvas);
+  const sightings: Sightings = new Map();
+  frames.forEach((frame, index) => {
+    const headline = largest(frame.parts.filter(isReading));
+    // Under the type floor it is already text_below_floor.
+    if (!headline || headline.fontPx >= headPx - 0.5 || headline.fontPx < floorPx - 0.5) return;
+    see(sightings, headline, index);
+  });
+  // Its largest size: a headline that scales in or out is judged where it lands.
+  const small = heldTexts(sightings, frames, duration, (sizes) => Math.max(...sizes));
+  return groupBySourceFile(small).map((group) => headlineFinding(group, headPx));
+}
+
+function headlineFinding(group: SmallText[], headPx: number): CraftFinding {
+  const [smallest] = group;
+  if (!smallest) throw new Error("headline_small group is empty");
+  const subject =
+    group.length === 1
+      ? `the largest text on screen, ${quote(smallest.text, 48)}, is ${Math.round(smallest.fontPx)} px for ${seconds(smallest.seconds)}`
+      : `${group.length} texts are the largest on screen under it for 0.5 s or more, the smallest ${quote(smallest.text, 40)} at ${Math.round(smallest.fontPx)} px`;
+  return {
+    code: "headline_small",
+    severity: "warning",
+    message: `Headlines are ${headPx}–${Math.round((headPx * 96) / 56)} px and ${subject}: set the frame's headline to at least ${headPx} px so it reads on a phone, or put data-layout-ignore on text that is texture rather than reading; see references/look.md.`,
+    text: smallest.text,
+    selector: smallest.selector,
+    dataAttributes: {},
+    sourceFile: smallest.sourceFile,
+    bbox: smallest.bbox,
+    time: round(smallest.time),
+    times: [...group].sort((a, b) => a.time - b.time).map((entry) => round(entry.time)),
+    fontPx: round(smallest.fontPx),
+    floorPx: headPx,
+    seconds: round(smallest.seconds),
+    elements: group.map(textElement),
+  };
+}
+
+// ---------- hero_word_narrow ----------
+
+interface Hero {
+  selector: string;
+  sourceFile: string;
+  text: string;
+  fontPx: number;
+  time: number;
+  frames: number;
+  widths: number[];
+  bbox: CheckBbox;
+}
+
+/** Text under a data-kinetic-type element: each frame's largest line is its hero, and fills 60% of the width. */
+export function detectHeroWordNarrow(frames: CraftFrame[], canvas: Canvas): CraftFinding[] {
+  const minWidth = Math.round(T.heroWidthFraction * canvas.width);
+  const step = sampleStep(frames);
+  const heroes = new Map<number, Hero>();
+  for (const frame of frames) {
+    const kinetic = frame.parts.filter((part) => part.kinetic && isReading(part));
+    const lead = largest(kinetic);
+    if (!lead) continue;
+    const block = kinetic.filter((part) => part.block === lead.block);
+    const left = Math.min(...block.map((part) => part.rect.left));
+    const right = Math.max(...block.map((part) => part.rect.left + part.rect.width));
+    const top = Math.min(...block.map((part) => part.rect.top));
+    const bottom = Math.max(...block.map((part) => part.rect.top + part.rect.height));
+    const hero = heroes.get(lead.block) ?? {
+      selector: lead.blockSelector,
+      sourceFile: lead.sourceFile,
+      text: block.map((part) => part.text).join(" "),
+      fontPx: lead.fontPx,
+      time: frame.time,
+      frames: 0,
+      widths: [],
+      bbox: { x: left, y: top, width: right - left, height: bottom - top },
+    };
+    hero.frames += 1;
+    hero.widths.push(right - left);
+    heroes.set(lead.block, hero);
+  }
+  // Its median width: a word that slams in or flies out is judged where it rests.
+  const narrow = [...heroes.values()].filter((hero) => median(hero.widths) < minWidth - 0.5);
+  const groups = new Map<string, Hero[]>();
+  for (const hero of narrow)
+    groups.set(hero.sourceFile, [...(groups.get(hero.sourceFile) ?? []), hero]);
+  return [...groups.values()].map((group) =>
+    heroFinding(
+      group.sort((a, b) => median(a.widths) - median(b.widths) || a.time - b.time),
+      minWidth,
+      canvas.width,
+      step,
+    ),
+  );
+}
+
+function median(values: number[]): number {
+  const sorted = [...values].sort((a, b) => a - b);
+  return sorted[Math.floor(sorted.length / 2)] ?? 0;
+}
+
+function heroFinding(group: Hero[], minWidth: number, width: number, step: number): CraftFinding {
+  const [narrowest] = group;
+  if (!narrowest) throw new Error("hero_word_narrow group is empty");
+  const spans = (hero: Hero) => {
+    const px = median(hero.widths);
+    return `${Math.round(px)} px (${Math.round((px / width) * 100)}%)`;
+  };
+  const subject =
+    group.length === 1
+      ? `the hero ${quote(narrowest.text, 40)} spans ${spans(narrowest)}`
+      : `${group.length} heroes span less, the narrowest ${quote(narrowest.text, 40)} at ${spans(narrowest)}`;
+  return {
+    code: "hero_word_narrow",
+    severity: "warning",
+    message: `Kinetic type's hero words fill 60–90% of the ${width} px width (${minWidth} px or more) and ${subject}: enlarge each hero to fill it, inside the title-safe 80%; see references/motion.md ("Titles").`,
+    text: narrowest.text,
+    selector: narrowest.selector,
+    dataAttributes: {},
+    sourceFile: narrowest.sourceFile,
+    bbox: narrowest.bbox,
+    time: round(narrowest.time),
+    times: [...group].sort((a, b) => a.time - b.time).map((hero) => round(hero.time)),
+    fontPx: round(narrowest.fontPx),
+    widthPx: round(median(narrowest.widths)),
+    floorPx: minWidth,
+    elements: group.map((hero) => ({
+      selector: hero.selector,
+      text: hero.text,
+      fontPx: round(hero.fontPx),
+      widthPx: round(median(hero.widths)),
+      time: round(hero.time),
+      seconds: round(hero.frames * step),
     })),
   };
 }
diff --git a/packages/cli/src/utils/craftTypeSize.chromium.test.ts b/packages/cli/src/utils/craftTypeSize.chromium.test.ts
new file mode 100644
index 00000000000..4cdc2e72d38
--- /dev/null
+++ b/packages/cli/src/utils/craftTypeSize.chromium.test.ts
@@ -0,0 +1,116 @@
+// Real-Chromium pins for the type-size craft warnings: text_below_floor, headline_small and
+// hero_word_narrow measure what the page renders. Skipped without a local Chrome; opt-in on Windows.
+import { existsSync } from "node:fs";
+import type { Browser } from "puppeteer-core";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { findSystemBrowser } from "../browser/manager.js";
+import { createPageDriver } from "./checkBrowser.js";
+import { DEFAULT_CHECK_OPTIONS, runAuditGrid } from "./checkPipeline.js";
+
+function resolveExecutable(): string | undefined {
+  for (const name of ["HYPERFRAMES_BROWSER_PATH", "PUPPETEER_EXECUTABLE_PATH"]) {
+    const candidate = process.env[name];
+    if (candidate && existsSync(candidate)) return candidate;
+  }
+  return findSystemBrowser()?.executablePath;
+}
+
+const executablePath = resolveExecutable();
+const RUNS_CHROMIUM =
+  !!executablePath &&
+  (process.platform !== "win32" || process.env.HYPERFRAMES_BROWSER_TESTS === "1");
+const BROWSER_LAUNCH_TIMEOUT_MS = 120_000;
+const TYPE_CODES = new Set(["text_below_floor", "headline_small", "hero_word_narrow"]);
+
+// A 4 s 1080p film whose text slides a little each second, so nothing reads as a dead stretch.
+function film(body: string, rootAttributes = ""): string {
+  return `<!doctype html><html><head><style>
+    html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #0a0a0a; }
+    #root { position: absolute; inset: 0; color: #fff; font-family: sans-serif; }
+    #stage { position: absolute; left: 120px; top: 200px; }
+    p { margin: 0 0 24px; font-weight: 700; white-space: nowrap; }
+  </style></head><body>
+    <div id="root" data-composition-id="main" data-duration="4" data-width="1920" data-height="1080" ${rootAttributes}>
+      <div id="stage">${body}</div>
+    </div>
+    <script>
+      const seek = (t) => { document.getElementById("stage").style.transform = "translateX(" + t * 10 + "px)"; };
+      window.__hf = { duration: 4, seek };
+      seek(0);
+    </script>
+  </body></html>`;
+}
+
+describe.skipIf(!RUNS_CHROMIUM)("type size in Chromium", () => {
+  let browser: Browser;
+
+  beforeAll(async () => {
+    const puppeteer = await import("puppeteer-core");
+    browser = await puppeteer.default.launch({
+      headless: true,
+      executablePath,
+      args: ["--no-sandbox", "--disable-dev-shm-usage", "--disable-gpu"],
+    });
+  }, BROWSER_LAUNCH_TIMEOUT_MS);
+
+  afterAll(async () => {
+    await browser?.close();
+  });
+
+  async function typeFindings(html: string) {
+    const page = await browser.newPage();
+    try {
+      await page.setViewport({ width: 1920, height: 1080 });
+      await page.setContent(html);
+      const result = await runAuditGrid(
+        createPageDriver(page),
+        { ...DEFAULT_CHECK_OPTIONS, contrast: false },
+        { kind: "none" },
+      );
+      return result.craft.findings
+        .filter((finding) => TYPE_CODES.has(finding.code))
+        .map(({ code, text, fontPx, widthPx }) => ({ code, text, fontPx, widthPx }));
+    } finally {
+      await page.close();
+    }
+  }
+
+  it("flags a 20 px title", async () => {
+    const findings = await typeFindings(
+      film(`<p style="font-size: 20px">Our quarterly results</p>`),
+    );
+    expect(findings).toEqual([
+      { code: "text_below_floor", text: "Our quarterly results", fontPx: 20, widthPx: undefined },
+    ]);
+  });
+
+  it("flags a 40 px headline over 30 px reading text", async () => {
+    const findings = await typeFindings(
+      film(`<p style="font-size: 40px">Our quarterly results</p>
+            <p style="font-size: 30px">Revenue grew in every region</p>`),
+    );
+    expect(findings).toEqual([
+      { code: "headline_small", text: "Our quarterly results", fontPx: 40, widthPx: undefined },
+    ]);
+  });
+
+  it("flags a kinetic hero word under 60% of the width", async () => {
+    const [finding] = await typeFindings(
+      film(`<p style="font-size: 200px">GO</p>`, "data-kinetic-type"),
+    );
+    expect(finding).toMatchObject({ code: "hero_word_narrow", text: "GO", fontPx: 200 });
+    expect(finding?.widthPx).toBeLessThan(1152);
+  });
+
+  it("stays quiet on a 96 px headline, 32 px reading text and a kinetic hero that fills the width", async () => {
+    expect(
+      await typeFindings(
+        film(`<p style="font-size: 96px">Our quarterly results</p>
+              <p style="font-size: 32px">Revenue grew in every region</p>`),
+      ),
+    ).toEqual([]);
+    expect(
+      await typeFindings(film(`<p style="font-size: 260px">MOMENTUM</p>`, "data-kinetic-type")),
+    ).toEqual([]);
+  });
+});
diff --git a/skills-manifest.json b/skills-manifest.json
index e082ad22463..8b8fa20c428 100644
--- a/skills-manifest.json
+++ b/skills-manifest.json
@@ -6,11 +6,11 @@
       "files": 2
     },
     "hyperframes": {
-      "hash": "ec7a77e6b9325a75",
+      "hash": "ab55a18484f2038f",
       "files": 77
     },
     "hyperframes-cli": {
-      "hash": "7a49a6eb1161315f",
+      "hash": "68bb199a7a746d0f",
       "files": 13
     },
     "hyperframes-registry": {
diff --git a/skills/hyperframes-cli/references/lint-validate-inspect.md b/skills/hyperframes-cli/references/lint-validate-inspect.md
index c972875a794..d894e429b7d 100644
--- a/skills/hyperframes-cli/references/lint-validate-inspect.md
+++ b/skills/hyperframes-cli/references/lint-validate-inspect.md
@@ -51,6 +51,8 @@ One command, one Chrome boot. `check` runs the linter first and skips the browse
   - `line_unread`: a reading-size line (≥ 30 px tall at 1080) on screen under its floor: 0.4 s for 1–2 words, otherwise ¾ of 0.5 s + 0.3 s a word (3 words 1.05 s, 6 words 1.73 s); the film's last line needs 2 s. Edges are re-measured to ~0.01 s. Captions-track text and `data-layout-ignore` are exempt.
   - `dead_stretch`: more than 3 s where the `keepsMoving` classifier sees nothing change. The final 3 s and any time a `data-hold` element is on screen are exempt; it stays quiet when `sweep_static` fires or a whole-composition `keepsMoving` assertion sets the limit.
   - `text_below_floor`: text under 2.6% of the frame's short side (28 px on 1080) held 0.5 s or more, one finding per file listing every element.
+  - `headline_small`: the largest text on screen under 5.2% of the short side (56 px on 1080) held 0.5 s or more, one finding per file; text under the type floor is `text_below_floor` instead.
+  - `hero_word_narrow`: inside a `data-kinetic-type` element (kinetic typography: put it on the root), a frame's largest line spans under 60% of the frame's width, measured at its median size so a slam-in does not count.
   - `first_frame_empty`: frame 0 paints nothing but the background (no text, image, video, canvas or svg), or an opaque element covers every other clip and the message names it; it is the thumbnail on social players.
   - `film_silent`: a film over 15 s with no unmuted `<audio>` or audible `<video>`.
 - **Audio**: the clips the render mixes, in the report's `audio` section. It runs even when lint stops the browser pass. Remote sources are not fetched.
diff --git a/skills/hyperframes/references/review.md b/skills/hyperframes/references/review.md
index 9dcef203207..cf7cb9b7652 100644
--- a/skills/hyperframes/references/review.md
+++ b/skills/hyperframes/references/review.md
@@ -4,7 +4,7 @@ You wrote the timeline, so you know what happens; the viewer sees it once, at fu
 
 ## 1. Measure, then look
 
-1. `npx hyperframes check --json`. Besides errors it warns on craft it can measure: a line on screen too briefly to read (`line_unread`), more than 3 s with nothing changing (`dead_stretch`), text under 2.6% of the frame's short side (`text_below_floor`), an empty first frame (`first_frame_empty`, the thumbnail on social players), a film over 15 s with no sound (`film_silent`). A warning is a question, not a rule: fix it, or keep it on purpose and say why in the note (a deliberate hold carries `data-hold`).
+1. `npx hyperframes check --json`. Besides errors it warns on craft it can measure: a line on screen too briefly to read (`line_unread`), more than 3 s with nothing changing (`dead_stretch`), text under 2.6% of the frame's short side (`text_below_floor`), a frame whose largest text is under headline size, 56 px on 1080 (`headline_small`), a kinetic-type hero under 60% of the width (`hero_word_narrow`, under `data-kinetic-type`), an empty first frame (`first_frame_empty`, the thumbnail on social players), a film over 15 s with no sound (`film_silent`). A warning is a question, not a rule: fix it, or keep it on purpose and say why in the note (a deliberate hold carries `data-hold`).
 2. `npx hyperframes snapshot --review` writes three sheets: each scene just after it starts and at its middle, plus each `data-beat`, a strip across every cut (−0.2 s to +0.2 s), and the beat frames at phone width (360 px). Open all three.
 3. Motion between the beats: `snapshot --range START,END --frames 8` around the hero move and the payoff; `keyframes --shot` for a path that must arc or land.
 4. The rendered file: `npx hyperframes audio <video> --json` shows whether sound is there, where it hits and how loud it is. You cannot hear it; say so.