Click a table row to expand an inline detail card and push the rows below it down
Study the source, inspect the editable build, then adapt the treatment to your own content.
What the source does
The "close detail" page shows a heading, two status banners (green tie, orange pending control), a dark table header and five account rows (local f0-28, master 2400-2428). The pointer travels to the first row and clicks at ~f30; over the next ~14 frames a detail card grows open beneath that row (a sub-line name, an explanatory note and an owner) while every row below slides down by the same height. The expanded table then holds to the end of the window.
An inline accordion: the clicked row reveals a detail card by animating its height, and the following rows translate down in lockstep.
Phase notes
- Frame 0 — Collapsed table
- Frame 4 — Pointer travels to row one
- Frame 30 — Click
- Frame 31 — Detail card grows; rows below slide down
- Frame 45 — Expanded table holds
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.