feat(motion): choreography engines + two renderer root causes fixed (#543)

The release cuts read as static screen recordings: one 6s cursor glide
that then vanished, a locked-off camera, metronomic flat card fades. And
two renderer defects were silently wrecking every cut:

- @hyperframes/producer floated (^0.7.36, no lockfile — image builds get
  whatever is latest): 0.7.60 fails EVERY render with "Cannot access 'rt'
  before initialization". Pinned 0.7.36 exact and committed
  package-lock.json so sidecar builds are reproducible.
- the producer's per-clip visibility scheduler runs on a clock that lags
  ~50% behind the encoded timeline on a 40s cut — the final frame showed
  the authored ~18s state, so the tail scenes (bell card, toast, outro)
  were silently missing from the MP4. This, not authoring, is why
  rendered cuts kept losing their late scenes. Fix: clip windows are for
  structural layers only (hero, panel frame, status); every beat rides
  base-hidden styles + delayed CSS animations, which run on the true
  clock. Verified frame-by-frame: all four cards, stats, toast, and
  outro now land exactly on schedule in both cuts.

Craft, made reusable in the kit instead of per-composition heroics:

- kit.js choreographCursor: data-waypoints="t x y [click]; ..." generates
  a multi-leg eased path with fade in/out, an idle-hand sway, and click
  rings + glyph press dips — the cursor behaves like a hand, never pops
  in, freezes, or blinks out
- kit.js choreographCamera: data-shots="t x y scale; ..." — push-ins
  toward each beat's focal point, pull-backs for reveals, settle to end
- release-0.25.0 both cuts re-choreographed: the cursor is the CEO's
  hand (settle on the intake while it types, ONE submit click, witness
  each card completing, acknowledge the toast, exit off-frame); the
  camera lives on every beat; springy card entrances replace flat fades
- motion/README.md gains 'Cinematography & rhythm' (shot-list-first, no
  locked-off camera, verify motion with frame PAIRS) + the clip-window
  rule; kit/README.md documents both engines; the dev video prompt block
  carries the craft bar

Verified end to end through the real sidecar: both cuts render green,
32-frame strips read visually — cursor travels and clicks on schedule,
camera moves, every scene present. motion pnpm test 15/15.

Co-authored-by: Renn F <rennf93@users.noreply.github.com>
This commit is contained in:
Renzo F
2026-07-17 03:58:08 +02:00
committed by GitHub
co-authored by Renn F
parent e9ca7d4036
commit 3e801697f7
10 changed files with 3935 additions and 45 deletions
@@ -55,7 +55,7 @@ describe("release-0.25.0 composition", () => {
expect(html).toContain("pk-caret");
expect(html).toContain("typeReveal");
const cardCount = (html.match(/pk-card clip/g) || []).length;
const cardCount = (html.match(/class="pk-card"/g) || []).length;
const progressCount = (html.match(/pk-pill--progress/g) || []).length;
const completedCount = (html.match(/pk-pill--completed/g) || []).length;
expect(cardCount).toBe(4);
@@ -68,8 +68,19 @@ describe("release-0.25.0 composition", () => {
expect(html).toContain("Metrics donut");
expect(html).toContain("Notification bell");
// Choreographed cursor: multi-waypoint path with at least one click
// beat (rings are generated at runtime by kit.js, not static HTML),
// and a camera that moves — a locked-off frame is an automatic bounce.
expect(html).toContain("pk-cursor");
expect(html).toContain("pk-cursor__ring");
const waypoints = html.match(/data-waypoints="([^"]+)"/);
expect(waypoints).not.toBeNull();
expect(waypoints[1].split(";").length).toBeGreaterThanOrEqual(6);
expect(waypoints[1]).toContain("click");
const shots = html.match(/data-shots="([^"]+)"/);
expect(shots).not.toBeNull();
expect(shots[1].split(";").length).toBeGreaterThanOrEqual(4);
expect(html).toContain("choreographAllCursors");
expect(html).toContain("choreographAllCameras");
expect(html).toContain("pk-toast");
expect(html).toContain('id="toastTitle"');