Type a name into a people picker, show a loading row, surface one match and commit it as a chip

What the source does

A dark team-chat app sits on a starfield with an 'Add people to # channel' dialog open at centre-left. The pointer clicks the empty email field (~f6) and a first name is typed (~f8-15). A 'Loading results…' row appears under the field (~f15-24) and is replaced by a single highlighted suggestion row with an avatar (~f24). The pointer clicks it (~f40) and the row collapses into a chip inside the field while a green Add button appears (~f43). At ~f76 the source jump-cuts to a state with three chips and a fresh loading row; a second suggestion appears (~f88) and is committed as a fourth chip (~f103) as more text is typed.

Type-ahead picker: typed text produces a loading state, then one suggestion row, and accepting it converts the row into an in-field chip that accumulates across a jump cut.

Phase notes

1. Frame 0 — Dialog idle, empty field
2. Frame 6 — Field clicked, focus ring
3. Frame 8 — First name typed
4. Frame 15 — Loading row
5. Frame 24 — Single suggestion row
6. Frame 40 — Suggestion clicked
7. Frame 43 — Chip committed, Add button appears
8. Frame 76 — Jump cut: three chips, new loading row
9. Frame 88 — Second suggestion
10. Frame 103 — Fourth chip committed, typing continues

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 after correcting unrevealed whitespace and the caret’s active line.

Inspect the original verification record ↗