Code walkthrough

A code panel that changes as the speaker talks, one step per beat. "Every call hits the network" lights line 2 and dims the rest; "so we cache notes by id" slides the function down, fades four green lines in and rolls const note into const note: Note; "one lookup instead of two" flashes the old if line red, collapses it and drops two new lines into the gap. Everything is live Tella Motion text and shapes, so any line, colour or time can be edited afterwards.

Builds on tella-motion-design and tella-explainer-graphics (b-roll over an explanation's range). This skill adds the panel, the line diffing and the step animation. Needs the Tella Motion tools.

Get the code and ask

• The code is in the message or an attachment (a snippet, several versions, a diff or a PR patch), or on screen in the recording: read it from a full-size frame crop and type it out exactly. Never invent code, names or values; if a line is unreadable, ask.
• Find the stretch where the speaker explains it, and inside it the words that name each part or change ("the fetch here", "so we add a cache").
• Ask once with ask_form, prefilled: the code as you have it, so they can correct it; the steps, one per line as time · lines or change · note; the theme (Midnight, Paper, Ember, or a brand accent); where (full-frame b-roll by default, a panel beside the speaker, or a standalone clip); the filename for the tab.

Plan the steps

• One step per beat, 1.5 s or more each, one idea per step: either a focus move or one change (add, remove or rewrite a few lines), never both.
• At most 12 lines (10 or fewer reads best), about 50 characters per line at b-roll size, 36 beside a speaker. Cut imports and boilerplate, keep the real indentation, and say what you trimmed.
• Step 1 shows the starting code whole. A focus step lights the lines being said. A change step lights its own new lines through their green bars.
• Footer notes use the speaker's words, two to five. Leave them out if the voice carries it.
• Match old and new lines with a line diff. A replaced line that is still clearly the same line (about 60 % alike or more) rolls in place; anything less alike is removed and re-added, since a diff pairs replaced lines by position and unrelated pairs morph oddly.