Scroll a dashboard inside a browser frame from its hero to the summary section with one eased move
Study the source, inspect the editable build, then adapt the treatment to your own content.
What the source does
A browser window floats over a dark starfield; the page shows a sticky nav, a dark green hero with headline and KPI card, and a four-stat row (local f0-20, master 1720-1740). From ~f20 the page scrolls upward under the nav with a long ease, revealing the "recoverable miss" summary heading, a bar-chart panel, a numbered gates panel and finally a row of three tinted summary cards; the scroll settles by ~f130 (master 1850) and holds to the end. The chat sidebar on the left never moves.
A single eased page scroll inside a device frame: page content moves under a sticky nav while the frame, sidebar and backdrop stay fixed.
Phase notes
- Frame 0 — Hero and stats hold
- Frame 20 — Page scrolls up under the sticky nav
- Frame 130 — Summary section settles
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.