Fade a promo banner in at the fold, then scroll the page under a sticky rail while a countdown ticks
Study the source, inspect the editable build, then adapt the treatment to your own content.
What the source does
A browser window on a blue-violet backdrop shows a hotel checkout: a left column of stay details, a sticky right rail with totals and a 'Time left to book 25 min : 54 sec' countdown, a company-policy toast top right and a soft purple orb marking the agent's pointer (master 5239). At master 5242-5245 (local 3-6) a purple promo banner fades in at the bottom edge of the page. From about 5245 the left column scrolls upward, fast at first and easing out, carrying the banner up about 600 px by 5284 (local 45) while a cancellation policy block and two buttons enter beneath it. The right rail and toast never move; the countdown reads 53 sec at about 5254 and 52 sec at about 5284.
Agent-driven scroll: new content appears at the fold, then the page column eases upward under fixed sticky UI while a live countdown ticks, showing time passing during an automated task.
Phase notes
- Frame 0 — Checkout page at rest
- Frame 3 — Promo banner fades in at the fold
- Frame 6 — Column starts scrolling up
- Frame 15 — Countdown ticks to 53
- Frame 45 — Scroll settles; policy block and buttons visible
- Frame 45 — Countdown ticks to 52
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.