Repository navigation
fix(registry): animate mk card offsets with transforms, not top/left - #2960
Merged
Merged
Conversation
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.
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Converts the
top/lefttweens inmk-backgroundandmk-clone-wall-transitionto
x/ytransforms, and adds a script that lints registry items the way usersactually receive them.
Why
Both blocks animate the card's
top/left. Layout properties snap to integerdevice 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 anindex.html, but items ship as<name>.html, so pointing it at an item directory fails with "No compositionfound". The errors only surfaced when I installed all 30 items with
npx hyperframes addand linted the resulting project.How
Both cards sit at
top: 0; left: 0in CSS, so the tween values carry over tox/yunchanged. Inmk-clone-wall-transitionthe laterscaletweencomposes cleanly with the translate (same transform-origin, same visual).
scripts/lint-registry-items.mjs(bun run lint:registry-items) mounts eachitem into a throwaway project at the path
hyperframes addwould 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_motionerror back).format:checkclean.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:svg_measure_before_path_dfires onhw-path-textandhw-text-cloud. Both assigndvia a chaineddocument.getElementById("…").setAttribute("d", …); the rule's regex onlymatches
<var>.setAttribute("d", …), so it can't see the assignment. Theitems are correct — verified by rendering.
(
font_family_without_font_face,caption_transcript_parse_error) acrosslong-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.