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>
Reusable pk-* building blocks (motion/kit/) that recreate the control
panel's look for HyperFrames compositions: frame chrome, task card,
status pills with swap crossfade, chips, toast, typing reveal, cursor
sprite. Tokens lifted from the panel's dark theme and badge components.
Reference composition motion/compositions/panel-demo/ (12s, both cuts):
a task title types into intake, the card materializes, the cursor
clicks, the status pill flips to completed, a toast slides in.
Verified: motion vitest gate green (7/7); both cuts visually checked
in-browser at native resolution.
Co-authored-by: Renn F <rennf93@users.noreply.github.com>
