Click a nav tab: the new section renders below the hero and the page auto-scrolls it to the top
Study the source, inspect the editable build, then adapt the treatment to your own content.
What the source does
The hero dashboard holds while the pointer rises toward the nav (local f0-28, master 3440-3468). On the click (~f30, master 3470) the active underline jumps to the new tab and a new section (heading, brief banner, four stat tiles, two panel headers) is already present beneath the four-stat row. From ~f34 the page scrolls upward quickly with an ease-out, and by ~f52 (master 3492) the new section heading sits just under the sticky nav. It holds for the rest of the window.
Tab navigation as append-and-scroll: the new section is inserted below existing content and the viewport is scrolled to it, rather than replacing the page.
Phase notes
- Frame 0 — Hero dashboard; pointer rises to the nav
- Frame 30 — Tab clicked; underline jumps; section appears below
- Frame 34 — Page scrolls the new section to the top
- Frame 52 — Section settles under the nav
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.
- Both variants rerendered from the packaged text renderer to repair a prior code/preview mismatch.