Layout & layers · Rendered draft
Search, open a venue and reveal its booking panel in one live card
Study the source, inspect the editable build, then adapt the treatment to your own content.
What the source does
The compact live-browser view moves from search results to a restaurant page and then an overlaid reservation panel. Observed in sampled source frames; event onsets between samples are approximate.
Three web states reuse the live-card border and playback strip. Geometry, copy, vector artwork and easing are authored approximations.
Phase notes
- Frame 0 — Initial source composition
- Frame 21 — Search results populate the live browser card
- Frame 54 — A venue page replaces the result list
- Frame 93 — A booking panel opens over the page
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.
A runnable draft is not a fidelity approval.
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.