Motion fieldnotesOpenAI film study
Layout & layers · Rendered draft

Hold a drifting product-only billboard, then hard-swap the carousel to its typeset variant

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

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

What the source does

A review gallery fills the browser: a dark 1428×794 billboard card centred on a light page, round previous/next arrows at each side, a CLOSE button top-right and a label row with Favorite/Download beneath. For local frames 0–24 the first variant (brand mark bottom-left, pink headphones only) holds while the product render creeps a few pixels right and up. At local 25 (master 5695) the card hard-swaps to the second variant: brand mark top-left, a two-line headline and a sub-line at 92/36px, the handle line turning blue, and the render larger. The Favorite button reads as filled after the swap. Everything then holds to the end.

A carousel advance treated as a hard cut inside a fixed frame: the surrounding chrome never changes, only the card contents swap, so the eye reads the difference in typography and product scale.

Phase notes

  1. Frame 0 — Variant A holds; render drifts +18px
  2. Frame 25 — Hard swap to variant B (typeset)
  3. Frame 26 — Hold on variant B

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 ↗