Motion fieldnotesOpenAI film study
Layout & layers · Rendered draft

Scroll a freshly generated site in the right pane while the chat pane holds still

Study the source, inspect the editable build, then adapt the treatment to your own content.

01 / OpenAI source 1:01.6–1:07.1 · Silent research excerpt
02 / Remotion draft Original illustrated content · Editable code

What the source does

Two browser windows sit side by side on a dark starfield: chat on the left, the generated meal site on the right. The chat pane is static (a user message, 'Your site is ready', a link card, an empty composer). From about local frame 4 the right pane's page scrolls steadily downward through a red display title, a weekly menu grid, a profile heading, allergy notes, a two-by-two favourite-foods grid and a 'won't eat' card, coming to rest near the footer around f122 and holding to the cut at f130.

Continuous single-pane scroll of a long generated page inside a clipped browser window while the neighbouring pane stays static.

Phase notes

  1. Frame 0 — Both panes settled, site at top
  2. Frame 4 — Right pane begins scrolling
  3. Frame 60 — Profile and allergy cards pass
  4. Frame 122 — Scroll settles near footer
  5. Frame 130 — 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.
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 from the packaged text renderer to repair a prior code/preview mismatch.

Inspect the original verification record ↗