[Feat] Annotation layer for feature-demo videos - #1267
Open
mrubens wants to merge 3 commits into
Open
Conversation
Capture emits timeline.annotations from the full element rect (previously resolved and discarded); a note modifier on show beats scopes each annotation to its beat's caption window. New Annotations.tsx renders boxes and label chips inside the window transform with counter-scaled chrome. Prototype only: not validated beyond a wide-preset in-image render.
Iterating on the prototype: the default style becomes spotlight (dim the window, leave the target bright) after outline boxes over dense real pages read as stickers; anchors tighten to the content rect via a Range so block elements do not produce full-column boxes; the label chip sits on the dimmed area, width-clamped inside the window. SKILL.md documents the one-note-per-beat grammar, render/README replaces the stale edge-clamp bullet (it predated the unconditional clamps) and records the new window-clip invariant, and the skill test asserts the contract. Validated in the worker image against the live self-hosting docs page: both presets rendered from one capture; a top-strip probe confirms the dim never reaches the backdrop (max channel delta 1 wide / 0 vertical between annotated and unannotated moments).
Contributor
![roomote-community[bot]](https://avatars.githubusercontent.com/u/211522643?s=60&v=4){kind=small}
The next beat may scroll the moment the hold ends, and the anchor rect is only valid for its own scroll position — a 0.6s tail dimmed a stale rectangle over the next screen. The renderer's fade-out completes inside the hold.
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
1 participant
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
Adds capture-anchored annotations to the feature-demo skill: a
showbeat may carry onenote, an attention cue anchored to a real element for exactly that beat's caption window.spotlight: dims the recording and leaves the target bright, with an optional label chip on the dimmed area. Attention comes from contrast rather than chrome drawn onto the page.box/callout: accent-outline variants for sparse pages.note.selcan anchor to a more specific element than the beat scrolls to (e.g. the command block under a heading).How
timeline.annotationsarray — the full rect was already measured for zoom/click targeting and previously discarded. Anchors use a tight content rect (Range over the element's contents) so block elements don't produce full-column boxes. Timing is scoped to the beat's caption window, because a viewport-relative rect is only valid for the scroll position it was measured at.Annotations.tsxmounts in the window transform container alongside the cursor and click ripple, chrome counter-scaled by1/S, and the whole layer clipped to the window rect so a spotlight dim can never touch the backdrop or the caption band. Old timelines have noannotationskey and render unchanged.Validation
In the worker image against the live
docs.roomote.dev/self-hostingpage, one capture rendered through both presets:featureDemoSkill.test.ts, 17 passing): capture emits annotations with the tight-rect measurement and spotlight default, the layer clips to the window, and SKILL.md documents the one-per-beat rule.