Skip to content

fix(registry): caption-highlight clears a short word's highlight when the word ends - #7735

Merged
miguel-heygen merged 2 commits into
mainfrom
fix/caption-highlight-short-word-fade
Nov 14, 2026
Merged

miguel-heygen merged 2 commits into
mainfrom
fix/caption-highlight-short-word-fade

Conversation

@miguel-heygen

@miguel-heygen miguel-heygen commented Nov 14, 2026 •

Copy link
Copy Markdown
Collaborator

What

The caption-highlight component now clears a short word's highlight when the word ends. Before, a word shorter than 0.05 s could leave its highlight lit until the whole phrase ended.

Why

Each word's highlight fades in over 0.15 s from the word's start and fades out over 0.1 s from its end. On a word shorter than 0.05 s (transcripts produce them) the fade-in is still running after the fade-out has finished. When a rendered frame lands in that short tail, the fade-in writes its end value last and the highlight comes back at full opacity for every later frame of the phrase.

hyperframes check already reports this as gsap_tween_tail ("ends 0.010 s after a later tween"), and agents using the component argued it was a false positive. It is not: in Chromium, seeking the real component frame by frame through a 0.04 s word leaves the highlight at opacity 1 after the word.

Related work

None.

How

  • registry/components/caption-highlight/caption-highlight.html and demo.html: the fade-in lasts Math.min(0.15, w.end - w.start), so it never outlives its word. Words of 0.15 s or longer are unchanged.
  • The generated catalog page and payload are left to the catalog generator, as catalog source PRs require.

Test plan

  • New Chromium test in packages/cli/src/registry/captionLastGroup.chromium.test.ts: the demo with one word cut to 0.04 s, seeked frame by frame with one frame inside the tail; the word's highlight must read opacity 0 after the word.
  • fails without the fix: caption-highlight short word in Chromium > clears a 0.04 s word's highlight once the word is over in packages/cli/src/registry/captionLastGroup.chromium.test.ts goes red with the component change reverted (expected 1 to be +0); with it, 2 passed, 3 runs in a row.
  • GSAP check of the same tweens: before, a frame at the tail left the highlight at opacity 1 for every later frame; after, 0.
  • oxfmt --check and oxlint on the test file: clean.
  • Documentation updated: the catalog page is regenerated by the catalog pipeline; no prose change needed.
  • Comments follow CONTRIBUTING.md "Comments".

… the word ends

On a word shorter than 0.05 s the 0.15 s fade-in outlived the fade-out, so
a frame inside that tail lit the highlight again until the phrase ended.
@mintlify

mintlify Bot commented Nov 14, 2026 •

Copy link
Copy Markdown

Preview deployment for your docs. Learn more about Mintlify Previews.

Project Status Preview Updated
hyperframes 🟢 Ready View Preview Nov 14, 2026, 2:17 PM

💡 Tip: Enable Automations to automatically generate PRs for you.

@heygengenesis heygengenesis Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: REQUEST CHANGES · 1 blocker · 0 important · 0 nits · head 69851602

The code fix is correct. The one blocker is in the PR body:

  • blocker: the body has no fails without the fix: line naming the test. That line is only a code comment in captionLastGroup.chromium.test.ts. The "Red first" bullet describes the check but isn't the required line. Add one to the body, e.g. fails without the fix: packages/cli/src/registry/captionLastGroup.chromium.test.ts › "clears a 0.04 s word's highlight once the word is over". Only the body changes, so I'll approve once it's there.
Scope
  • Red/green reproduced locally (chrome-headless-shell 157): with caption-highlight.html reverted, the new test fails expected 1 to be +0; at head, 2/2 pass. CI's Test (cli) skips *.chromium.test.ts (no PUPPETEER_EXECUTABLE_PATH), so this local run is the only red/green evidence.
  • Sibling audit: hl-bg- appears only in the component, the demo, and the two catalog outputs, and all four are updated. The other caption components with an entrance tween plus a w.end exit either hide the element with visibility: hidden at w.end + 0.1 (kinetic-slam, texture), so a late entrance write stays invisible, or have an entrance that always ends before the exit (particle-burst, neon-glow, clip-wipe).
  • Catalog: re-running generate-catalog-payloads --only caption-highlight + generate-catalog-pages produces no diff in either caption-highlight file.
  • Words from 0.05 to 0.15 s (the demo's "a", "you", "and") now reach full opacity right at the word's end instead of ~0.89. This is intended and has no correctness impact.

— Genesis

@mintlify

mintlify Bot commented Nov 14, 2026

Copy link
Copy Markdown

Preview deployment for your docs. Learn more about Mintlify Previews.

Project Status Preview Updated
hyperframes 🟡 Building – Nov 14, 2026, 1:54 PM

💡 Tip: Enable Automations to automatically generate PRs for you.

@heygengenesis heygengenesis Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: REQUEST CHANGES · 1 resolved, 0 open, 1 new · 69851602 (unchanged head)

The fails without the fix: line is fixed. New blocker: CI's Catalog payloads job is red in both runs at this head (check-catalog-source-pr.mjs): "Catalog PRs commit item sources only… Restore these generated files: docs/catalog/components/caption-highlight.mdx, docs/public/catalog/components/caption-highlight.json". Drop those two files from the PR, since publish automation regenerates them, and drop the catalog bullet from the body.

— Genesis

@heygengenesis heygengenesis Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: APPROVE · 2 resolved, 0 open, 0 new · 69851602 → fc2d22ca

The generated catalog files are dropped and the body has the fails without the fix: line. Component, demo and test are byte-identical to the head I verified red/green. CI is green, including Catalog payloads and Windows render.

— Genesis

@miguel-heygen
miguel-heygen added this pull request to the merge queue Nov 14, 2026
Merged via the queue into main with commit e21e64f Nov 14, 2026
119 of 120 checks passed
@miguel-heygen
miguel-heygen deleted the fix/caption-highlight-short-word-fade branch November 14, 2026 14:55

This branch was successfully deployed

1 active deployment
staging - docs — fc2d22ca Deployed Nov 14, 2026 by mintlify[bot]
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