feat(cli): emulate media everywhere, and add check

[totigm]

Stacked on #127 → #126 → #125 → #118.

This closes the loop on the very first thing reported as a blocker: a landing page whose reduced-motion path shipped untested, because there was no way to render it under prefers-reduced-motion: reduce short of changing an OS setting.

Media flags on every command

--reduced-motion, --color-scheme <light|dark> and --forced-colors, applied before the first navigation so a page that reads the preference once at boot still sees it.

npx @humanjs/cli demo https://your-app.com --reduced-motion --record motion.mp4

Verified against humanjs.dev: 12 actions recorded, scroll sequence and all, under reduced motion. That is the exact check that was impossible before, and no screenshot could ever have made it — the difference is in movement.

check <url>

checked https://example.com at 1280×800

  baseline       humanjs-check/baseline.png
  dark           humanjs-check/dark.png
                 identical to baseline — the page may have no branch for it
  forced-colors  humanjs-check/forced-colors.png
                 renders differently from baseline
  reduced-motion humanjs-check/reduced-motion.png
                 a still cannot show this — record under it instead:
                 humanjs demo <url> --reduced-motion --record motion.mp4

The screenshots are not the feature; the comparison is. Four PNGs are four PNGs somebody has to open side by side. A condition that renders byte-identical to baseline is a page that very likely has no branch for it, and that is actionable.

Checked against two sites picked to prove the report distinguishes them:

Site	dark	forced-colors
example.com (no theme)	identical — correct	differs
humanjs.dev (has a theme)	differs — correct	differs

The line I was careful about

Reduced motion is excluded from the verdict on purpose. Its difference is in movement, not layout, so a still cannot settle it either way — and reporting "identical to baseline" there would read as a finding when it means nothing. The command says what it cannot show and points at the recording route instead. There is a test asserting that line never renders a verdict.

Verification

132 unit tests in @humanjs/cli (was 112): flag parsing including a rejected --color-scheme sepia, the emulation payload built for each combination, the log naming CSS features rather than flag names, condition metadata, fingerprint stability, and each verdict's wording.

Whole suite: lint, typecheck (11/11), test (10/10), build (8/8), check:exports (15/15).

Note

page.emulateMedia is called directly, matching how the CLI already reaches for page elsewhere. Once #116 lands, this can route through human.emulateMedia instead — left out here so the two stay independently mergeable.

🤖 Generated with Claude Code

[vercel]

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

Project	Deployment	Actions	Updated
humanjs	Ready	Preview	Sep 9, 2026 9:04am UTC