[umiyosh]

Summary

Makes html films move about as much as Motion's. In the side-by-side review on #17, the html path matched Motion on layout and consistency, but its motion was sparser. This adds the authoring rules and two player helpers that close most of that gap, and adjusts the layout check so it keeps working with gently moving elements.

Part of #19 (authoring guidance). Part of #16.

Result

The WIF film was rebuilt from the same script, narration and BGM. Share of time in which something on screen moves (30 fps MP4, frame-difference measure):

Scene	Motion	html before	html after
title	29%	14%	19%
problem	37%	19%	29%
oidc	28%	22%	24%
sts	29%	22%	29%
impersonate	57%	25%	47%
condition	56%	32%	49%
end	23%	13%	19%
whole film	36%	21%	30%

The reviewer judged the rebuilt film good enough to publish.

The first rebuild with rules 1–6 only reached 26%. The remaining gap in impersonate and condition was in the story beats, not in how single elements move: Motion carried the access token back to the job and showed a token passing the condition before the rejected one. Rule 7 covers that.

Changes

• references/html-film.md, new section "動きを豊かにする" (seven rules):
  1. Pictograms as inline SVG for the nouns of the explainer
  2. Travel on arcs; one-to-many moves with staggered starts
  3. Pop-ins with back-out easing
  4. Never fully still: a slow push-in per scene, a faint breathe on the focus, a short shake at the key moment
  5. The target changes colour when a chip lands
  6. Lines are drawn (scaleX), not faded in
  7. Show the round trip, and show both outcomes of a check (pass, then reject)
• Also in the guide: wrap the text of an element that has child boxes in a <span>. check measures an element with direct text by its text, so an icon or underline outside the text is reported as sticking out.
• kit/player.js: film.arc(tl, what, target, at, { dur, lift, dx, dy }) and film.breathe(tl, what, id, at, amount). breathe runs an even number of half-cycles, so the element ends at its own size when the scene ends.
• scripts/layout.ts: a box may shift up to 3 px (was 1 px) between samples and still count as still. A push-in or a breathing card moves 1–2 px per sample; a chip in flight moves tens of px.

Test plan

• make check: lint, typecheck, format, knip, quality gate (no new violations)
• vitest run --coverage: 91 tests pass (layout.ts 100% lines)
• New tests: a chip moved by film.arc rises above the straight line and lands on the target; a breathing box still gets its overlap reported; a box drifting 2 px per sample counts as still
• End to end: kit → check (layout: ok) → stills → sfx → build produced a 57.3 s 1920x1080 MP4 with 23 sound effects; the new effects sit 0–2 dB below narration and BGM
• CI

Found on the way and filed separately: #23 (check does not report a stop shorter than 0.4 s).