Pop an assistant side panel into a spreadsheet, show a loading spinner, then reveal the empty-chat composer
Study the source, inspect the editable build, then adapt the treatment to your own content.
What the source does
A spreadsheet window fills the frame with a dark title band, two-column figures and a sheet-tab strip. At local ~19 a 320 px white assistant panel appears at the right edge in one frame and the sheet area narrows to make room. The panel shows 'Loading...' with a small spinner until ~50, then sits blank with a faint dot until ~110, when a 'New chat' header, a selection chip and an 'Ask anything' composer fade in and hold.
Side-panel disclosure: an instant pop-in that reflows the host content, a loading state, and a delayed fade-in of the panel's ready state.
Phase notes
- Frame 0 — Spreadsheet, no panel
- Frame 19 — Panel pops in; sheet narrows
- Frame 20 — Loading spinner
- Frame 50 — Spinner clears, panel blank
- Frame 110 — Header, selection chip and composer fade in
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.
- Fractional line spacing corrected to pixel values in this revision; both variants rerendered.