Skip to content

fix(registry): centre mk-callout-highlight with flex instead of a script-time measurement - #5118

Open
jbernard077 wants to merge 1 commit into
heygen-com:mainfrom
jbernard077:fix/mk-callout-highlight-css-centre
Open

jbernard077 wants to merge 1 commit into
heygen-com:mainfrom
jbernard077:fix/mk-callout-highlight-css-centre

Conversation

@jbernard077

Copy link
Copy Markdown
Contributor

Summary

Three changes to registry/blocks/mk-callout-highlight/mk-callout-highlight.html. The block's CONFIG surface and the word-sweep mechanic are unchanged.

  1. Flex centring replaces the script-time measurement. The text box is now a flex item of a full-frame wrapper (#mk-ch-center), so the browser lays out its position instead of the script reading getBoundingClientRect() once at load. The measured version depends on which font faces are loaded when the script runs: the runtime's fonts gate covers only faces that static markup already uses, so a box whose words are built by script measures against the fallback face (fonts gate before composition scripts only covers faces that static markup already uses #5112). A non-null CONFIG.x / CONFIG.y switches that axis to an edge offset via a margin. The GSAP entrance / exit y tween stays on the box, which carries no CSS transform, so nothing fights it.
  2. The scene-exit visibility tail is removed. tl.set(root, { visibility: "hidden" }, DUR - 0.02) is gone. The runtime hides the clip at the end of its window, and at 30 fps the 0.02 s tail never reached a rendered frame.
  3. data-layout-allow-occlusion is removed from #mk-ch-box. Nothing beneath the block is text. With the attribute set, the contrast audit hit-test-probes the text inside the element and skips it whenever a later full-frame host answers the probe, which silently drops the block's own findings in any project that mounts another scene over the same window (see the discussion on fonts gate before composition scripts only covers faces that static markup already uses #5112).

No pointer-events: none on the wrapper, on purpose: it would inherit to the word spans and the contrast audit would skip them.

Verification

  • Renders are bit-identical to the measured version when the face is loaded: nine-scene project at v0.8.135, 1380/1380 frames. Changes 2 and 3 are also bit-identical.
  • hyperframes lint and hyperframes check on the block: 0 errors, 0 warnings across lint, runtime, layout, motion and contrast.
  • node scripts/lint-registry-items.mjs mk-callout-highlight: passed.
  • bun run check:catalog-drift: catalog sources generate successfully. Generated files are not committed, per CONTRIBUTING.

🤖 Generated with Claude Code

…ipt-time measurement

The text box becomes a flex item of a full-frame wrapper (#mk-ch-center),
so its position is laid out by the browser rather than read from a
getBoundingClientRect() taken at script time. That measurement depends on
which font faces are loaded when the script runs; the fonts gate covers only
faces that static markup already uses, so script-built text measures
against the fallback face (heygen-com#5112). A non-null CONFIG.x / CONFIG.y becomes a
margin offset on that axis. The GSAP y entrance stays on the box, which
carries no CSS transform.

Also drops the scene-exit visibility tail (the runtime hides the clip at
its window end; the 0.02 s tail never reached a frame at 30 fps) and
removes data-layout-allow-occlusion from #mk-ch-box: nothing beneath the
block is text, and the attribute made the contrast audit skip the block's
own words whenever a later full-frame host answered the hit-test probe.

Renders are bit-identical to the measured version when the face is loaded
(nine-scene project at v0.8.135, 1380/1380 frames). CONFIG and the sweep
mechanic are unchanged.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

This branch has not been deployed

No deployments
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