Click a rail item and hard-swap the featured dark card's copy while the highlight steps down
Study the source, inspect the editable build, then adapt the treatment to your own content.
What the source does
A 'Recommendations & Actions' section shows a five-item rail on the left and a large navy card on the right describing the first move. The hand pointer rests on rail item 2; at ~f18 the light-blue rail highlight jumps to item 2 and the card's eyebrow, title, two paragraphs, three metric tiles and buttons all change copy in a single frame. The pointer drifts down to item 3 and at ~f72 the same hard swap happens again. No transitions, no motion inside the card.
Master-detail hard swap: a click on a list item steps the selection highlight and replaces the detail card's entire copy on one frame.
Phase notes
- Frame 0 — Item 1 selected, card A
- Frame 18 — Click item 2: highlight steps, card B hard-swaps in
- Frame 40 — Pointer drifts to item 3
- Frame 72 — Click item 3: highlight steps, card C
- Frame 120 — Hold
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.