Skip to content

fix(registry): animate mk card offsets with transforms, not top/left - #2960

Merged
miguel-heygen merged 1 commit into
mainfrom
fix/registry-transform-motion
Aug 3, 2026
Merged

miguel-heygen merged 1 commit into
mainfrom
fix/registry-transform-motion

Conversation

@miguel-heygen

Copy link
Copy Markdown
Collaborator

What

Converts the top/left tweens in mk-background and mk-clone-wall-transition
to x/y transforms, and adds a script that lints registry items the way users
actually receive them.

Why

Both blocks animate the card's top/left. Layout properties snap to integer
device pixels, so the move stutters under the seek-by-frame capture engine
(lint rule: gsap_non_transform_motion).

These shipped in #2939 because registry items had never been linted.
hyperframes lint <dir> expects an index.html, but items ship as
<name>.html, so pointing it at an item directory fails with "No composition
found". The errors only surfaced when I installed all 30 items with
npx hyperframes add and linted the resulting project.

How

Both cards sit at top: 0; left: 0 in CSS, so the tween values carry over to
x/y unchanged. In mk-clone-wall-transition the later scale tween
composes cleanly with the translate (same transform-origin, same visual).

scripts/lint-registry-items.mjs (bun run lint:registry-items) mounts each
item into a throwaway project at the path hyperframes add would use, lints it,
and reports only findings for the item's own file. Verified it reproduces the
original failure on the pre-fix source.

Rules that assume a standalone composition (root_missing_composition_id,
root_missing_dimensions, multiple_root_compositions) are filtered out —
many components ship as paste-able fragments with no root by design, and those
rules fire on ~47 long-standing items.

Test plan

  • Manual testing performed

  • Re-rendered both blocks and compared frames against the previous output at the
    docked position — identical. This changes how the motion is computed, not
    how it looks.

  • bun run lint:registry-items mk-background mk-clone-wall-transition — clean.

  • Confirmed the script fails on the pre-fix source (stashed the fix, re-ran, got
    the original gsap_non_transform_motion error back).

  • format:check clean.

Not covered: no unit tests (these are content fixes; the render is the gate).

Why this isn't a CI gate yet

Two things have to land first, otherwise the job fails on main:

  1. A linter false positive. svg_measure_before_path_d fires on
    hw-path-text and hw-text-cloud. Both assign d via a chained
    document.getElementById("…").setAttribute("d", …); the rule's regex only
    matches <var>.setAttribute("d", …), so it can't see the assignment. The
    items are correct — verified by rendering.
  2. Pre-existing debt. A full sweep reports 38 items with real findings
    (font_family_without_font_face, caption_transcript_parse_error) across
    long-standing blocks and components.

Once those are addressed, this should run scoped to the items a PR changes —
the same pattern the file-size check already uses to avoid blaming PRs for
pre-existing offenders.

mk-background and mk-clone-wall-transition tween the card's `top`/`left`.
Layout properties snap to integer device pixels, so the move stutters under
the seek-by-frame capture engine (lint: gsap_non_transform_motion). Both
cards sit at top:0/left:0 in CSS, so the values carry straight over to x/y,
and in clone-wall the later scale composes cleanly with the translate.
Re-rendered both and diffed frames against the previous output — identical,
as intended: this changes how the motion is computed, not how it looks.

Adds scripts/lint-registry-items.mjs (bun run lint:registry-items), which
mounts each item into a throwaway project and lints it. Registry items ship
as `<name>.html`, so `hyperframes lint <dir>` fails with "No composition
found" and these items had never actually been linted — which is how both
errors reached main. Verified the script reproduces the original failure on
the pre-fix source.

Left as a local command rather than a CI gate for now; wiring it up needs
two prior fixes, noted in the PR.
@miguel-heygen
miguel-heygen merged commit 3cf268e into main Aug 3, 2026
11 of 15 checks passed
@miguel-heygen
miguel-heygen deleted the fix/registry-transform-motion branch August 3, 2026 08:16
dahans-msft2 pushed a commit to dahans-msft2/hyperframes that referenced this pull request Aug 6, 2026
…form-motion

fix(registry): animate mk card offsets with transforms, not top/left
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant