Scroll a launch page so the light shop block slides up and the dark hero seats under the fixed nav

What the source does

A product launch site sits in a browser: white nav (brand, COLORS/SOUND/FILMS links, a black Build yours pill), a wide sky-blue product image left with a swatch grid, Sky Blue / $99 and a grey Add to cart button right; the white block ends around y=780 where a dark navy section begins. From local 18 (master 8403) the page scrolls upward and by local 31 (8416) the dark hero is seated directly under the nav: eyebrow, two-line 56px headline, paragraph, three feature rows with hairline dividers, a grey headphone render on the right and a DRAG TO ROTATE label. The nav never moves; the hero then holds to the end of the interval.

A fast eased page scroll under a fixed navigation bar that swaps the field from light commerce block to dark hero in about a fifth of a second.

Phase notes

1. Frame 0 — Light shop block holds
2. Frame 18 — Scroll begins
3. Frame 31 — Dark hero seated under the nav
4. Frame 32 — Hold on the hero

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 from the packaged text renderer to repair a prior code/preview mismatch.

Inspect the original verification record ↗