Hover a segmented tab to show its tooltip, click, and morph the home composer into work mode

What the source does

A browser window centred on black shows an assistant home page: a two-option segmented control at the top, a heading, a slim composer and three suggestion rows. The pointer reaches the second tab by local frame ~5 and rests; a black tooltip appears under the tab at ~f25. The click lands at ~f41 and on f42 the selection pill jumps, the heading changes, the composer becomes taller with a chip row beneath it, and the suggestion rows re-enter staggered one frame apart (f42-46) about 85px lower. The pointer then drifts down to the heading (~f65) and left (~f80).

Hover tooltip then click on a segmented control that swaps the page state in a single frame: heading text, composer height and a staggered re-entry of the suggestion list.

Phase notes

1. Frame 0 — Pointer approaching the second tab
2. Frame 5 — Pointer rests on tab
3. Frame 25 — Tooltip fades in under tab
4. Frame 41 — Click
5. Frame 42 — State swap: pill, heading, taller composer, chip row
6. Frame 46 — Suggestions finished staggering in
7. Frame 65 — Pointer drifts to heading
8. Frame 96 — End

Use this example

1. Watch the source and draft at normal speed. Compare the order of actions, the held states, and the transition into the result.
2. Download the project and read its README before changing inputs. The package includes its implementation and declared dependencies.
3. Replace the sample content through the package's documented input or content builder. Keep source footage in the research comparison.
4. Render your adaptation and inspect text fit, framing, intermediate states, and entry and exit frames.

Recorded limits

• Visual fidelity is an authored draft judgement from sampled source frames; no independent blind review or native Resolve execution.
• Both variants rerendered from the packaged text renderer to repair a prior code/preview mismatch.

Inspect the original verification record ↗