Motion fieldnotesOpenAI film study
Interface sequences · Rendered draft

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.

01 / OpenAI source 0:20.0–0:27.0 · Silent research excerpt
02 / Remotion draft Original illustrated content · Editable code

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

  1. Frame 0 — Dimmed app, no dialog
  2. Frame 20 — Dialog fades and scales in
  3. Frame 100 — Field clicked
  4. Frame 120 — First domain typed, suggestion appears
  5. Frame 210 — Suggestion accepted: chip inserted, lower content shifts 52px
  6. Frame 262 — Second domain typed in full
  7. Frame 380 — Second chip committed, second shift

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.
A runnable draft is not a fidelity approval.

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.

Inspect the original verification record ↗