Type a domain, accept its suggestion, and let the dialog grow a chip row
Study the source, inspect the editable build, then adapt the treatment to your own content.
What the source does
A 'Search specific sites' dialog fades in over the dimmed composer around local frame 30. The pointer clicks the empty website field (~f100) and 'bea' is typed (~f120–165); a single suggestion row appears beneath the field (~f150). Clicking the suggestion (~f206) inserts a 'bea.gov' chip above the toggle row and pushes the field, Add link and Done button down. A second domain is typed in full (~f262–330) and committed (~f380), producing a second chip and a second downward shift.
Progressive disclosure inside a modal: typed input produces a suggestion, acceptance converts it into a persistent chip, and the dialog re-flows downward per committed item.
Phase notes
- Frame 0 — Dimmed app, no dialog
- Frame 20 — Dialog fades and scales in
- Frame 100 — Field clicked
- Frame 120 — First domain typed, suggestion appears
- Frame 210 — Suggestion accepted: chip inserted, lower content shifts 52px
- Frame 262 — Second domain typed in full
- Frame 380 — Second chip committed, second shift
Use this example
- Watch the source and draft at normal speed. Compare the order of actions, the held states, and the transition into the result.
- Download the project and read its README before changing inputs. The package includes its implementation and declared dependencies.
- Replace the sample content through the package's documented input or content builder. Keep source footage in the research comparison.
- Render your adaptation and inspect text fit, framing, intermediate states, and entry and exit frames.
The source and remake are different assets. The original code-based illustration remains editable; source footage is a research reference. Read the retained findings below before using the choreography.
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.