Code animations

Your PR video from Level 1 named code-diff for a single beat and moved on. This chapter is the rest of that catalog: typing, diffing, highlighting, scrolling, and picking a terminal or editor theme by name — for the moments a walkthrough needs to slow down and let the code itself carry the scene. Code is the one subject where the framework does the hard part for you. The Code Animations blocks handle syntax highlighting, caret tracking, diff coloring, and camera moves deterministically — you describe the walkthrough, name the block, and paste your snippet. This page is the vocabulary for doing that well; for turning a real pull request into a code-change video, see Code and PRs. Everything here follows the one-shot skeleton: route, spec, beats, copy, technique, negatives. The “technique” slot is where you name the block, and the “copy” slot is where your code goes — quoted exactly, because unquoted code gets paraphrased into something that won’t compile.

​

Pick the motion by what the viewer should learn

Each Code Animations block answers a different “what is the viewer supposed to notice.” Map the intent to the block: The first four are the workhorses of a code walkthrough — they keep the code readable and the viewer oriented. Everything below them trades legibility for motion: they look great as an opener or a hero moment, but they trade legibility for motion, so don’t ask them to carry an explanation.

​

Prompting a typing reveal

code-typing reveals code character by character with a caret that tracks the frontier — no CSS animation, so it seeks cleanly. Give it the exact code and a pace; the agent re-bakes the block’s syntax tokens to your snippet.

/motion-graphics 6-second 1920x1080 video. A dark editor types this snippet, character by character, caret tracking the frontier, then holds on the blinking cursor for the final second:

export async function render(comp: Composition) {
  await comp.seek(0);
  return comp.capture();
}

Use the code-typing registry block. No narration, no image or media files.

Rendered from the prompt above, unedited. Quote the code as a literal block. Prose descriptions of code get paraphrased.

• ❌ type out a function that seeks to zero and captures
• ✅ paste the actual snippet in a fenced block — it renders verbatim

Give the caret somewhere to rest. Compositions hold their final state, so if you don’t ask for a hold the last frame is a frozen full snippet — the dead-motion tell.

• ❌ types the code and ends
• ✅ types the code, then holds on the blinking cursor for the final second

​

Prompting a diff or a highlight

For “here’s what changed,” hand code-diff the before and after and let it color the delta. For “look at this line,” give code-highlight the full context and name the target line.

/motion-graphics 6-second 1920x1080 video. Show this edit to api.ts as a colored diff — the removed line collapses in red, the added line expands in green: removed: const res = await fetch(url) added: const res = await fetch(url, { signal }) Use the code-diff registry block. No audio.

Rendered from the prompt above, unedited.

/motion-graphics 5-second 1920x1080 video. Show a 12-line config file; a highlight band sweeps to line 7 (timeout: 30_000) while the surrounding lines dim. Hold with line 7 lit and the cursor blinking. Use the code-highlight registry block. No audio.

Rendered from the prompt above, unedited — the agent authors plausible surrounding config lines; paste all 12 if the exact file matters. Name the target line unambiguously. The block dims context around one line — tell it which.

• ❌ highlight the important line
• ✅ highlight line 7 (timeout: 30_000)

​

Prompting a scroll-through

code-scroll moves the camera down a long file to bring a target line to center and spotlights it — the block for walking real modules, not toy snippets.

/motion-graphics 6-second 1920x1080 video. Scroll a ~60-line source file so line 44 (return dedupeFrames(frames)) arrives at center and gets spotlighted; ease the scroll and let it settle without snapping. Use the code-scroll registry block. No audio.

Rendered from the prompt above, unedited. Ask the scroll to ease and settle, not snap. A linear scroll that stops dead reads mechanical.

• ❌ scroll straight to the line
• ✅ ease the scroll and let it settle — pair with the motion grammar

​

Choosing a theme by name

The Code Snippets blocks are pre-styled shells with per-character typing already built in. There are two families, and you select one by asking for it in plain language — the exact block name is the theme name. macOS Terminal.app profiles — a real terminal window chrome. Say “apple terminal, ocean profile” → code-snippet-apple-terminal-ocean. The full set of profiles: VS Code workbench themes — full editor chrome (activity bar, sidebar, tabs, terminal, status bar). Say “monokai” or “visual studio dark”:

/motion-graphics 5-second 1920x1080 video. A macOS Terminal window in the Ocean profile types npx skills add heygen-com/hyperframes character by character, then holds on the typed, unexecuted command with the cursor blinking — no output, no second prompt. Use the code-snippet-apple-terminal-ocean registry block. No narration.

Rendered from the prompt above, unedited. Match the theme to the surface you’re claiming to show. A terminal command in a VS Code editor chrome reads wrong; a source file in Terminal.app reads wrong.

• ❌ monokai theme typing a shell command
• ✅ apple terminal homebrew profile typing a shell command

​

Pairing with a pull request

When the code you’re animating comes from a real PR, don’t hand-write the beats — the /pr-to-video workflow reads the diff and composes code-diff, code-highlight, and code-scroll around the actual changed hunks. Use the blocks on this page directly when you’re illustrating a concept; route through the PR workflow when you’re narrating a specific change set.

​

Where to go next

• Anatomy of a one-shot prompt — the skeleton every prompt above uses.
• Copy-paste examples — full prompts you can adapt.
• Code and PRs — turning a GitHub PR into a code-change video.
• Motion that reads premium — the hold-and-settle rules the code blocks still need from you.

This is the clause in the full capstone prompt that buys the piece — prompt language you can lift for your own video:

Type (0–7s). Black-on-charcoal close-up: a cursor types real HyperFrames markup character by character — <div class="clip" data-start="0" data-duration="4"> and a gsap.timeline({ paused: true }) line. As the typed line completes, the text’s baseline extends and becomes the wire — the underline literally grows into the timeline and the camera begins its dolly along it. The typed div folds into a compact clip chip (persistent element 3) that drops onto the wire. Kinetic display type states “WRITE HTML.” as the travel begins.

That clause, rendered — the region cut from the finished film. Next: Data and maps — the same named-block, quoted-copy pattern, for charts, stats, and maps instead of code.