Collapse the tab strip, then the address bar, while the page scales up to fill the freed height
Study the source, inspect the editable build, then adapt the treatment to your own content.
What the source does
A full browser shows a channel content page under three chrome bands: a grey tab strip, a white address bar and a white automation banner ('… started debugging this browser · Cancel'). At ~f12 the tab strip disappears and the banner rides up into its place; at ~f18 the address bar disappears too and the banner reaches the very top by ~f22. Meanwhile (~f12–26) the page content slides up and grows about 3% so the layout re-fills the frame; a dark toast near the bottom stays put relative to the page. Everything holds from ~f26.
Progressive chrome strip: two browser bands cut out in sequence while the surviving banner re-docks and the page scales up to re-fill the frame.
Phase notes
- Frame 0 — Full browser chrome: tab strip, address bar, banner
- Frame 12 — Tab strip drops out; banner moves up; page begins to scale
- Frame 18 — Address bar drops out
- Frame 22 — Banner docked at top
- Frame 26 — Page settled at 1.03x; hold
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.