Reference
Diff & data flow
Visualize line changes, before/after code, execution state, and token movement.
CineCode provides visual annotations for code reviews, refactors, and execution explanations. These helpers draw over code nodes; they do not modify source files.
Line diffs
| Method | Description |
|---|---|
s.diff_add(code, line, start, dur) | Green band and + gutter marker for one line. |
s.diff_remove(code, line, start, dur) | Red band and - gutter marker for one line. |
s.diff(code, added, removed, start, dur) | Annotate arrays of added and removed line numbers. |
s.diff_add(after, 3, at("patch"), ms(400));
s.diff_remove(before, 2, at("patch"), ms(400));
s.diff(after, [3, 4], [2], at("patch"), ms(450));Before and after
| Method | Returns | Description |
|---|---|---|
s.diff_auto(before, after, start, dur) | Node | Compute an LCS line diff, mark both nodes, and return after. |
s.before_after(before, after, start, dur) | Node | Cross-fade code nodes at one position and return after. |
s.split_diff(before, after, start, dur) | Group | Place before/after nodes side-by-side in the safe area. |
let before = s.code(read("src/before.rs"), "rust", 0, 0);
let after = s.code(read("src/after.rs"), "rust", 0, 0);
s.split_diff(before, after, sec(1), ms(600));Execution state
| Method | Description |
|---|---|
code.execution_cursor(line, start, dur) | Move an accent bar to a line and dim the rest. |
code.execution_flow(lines, start, step) | Step the cursor through an array of 1-based lines. |
s.variable_update(code, line, label, start, dur) | Pop a value badge beside a line. |
code.unfocus(start, dur) | Release the bar and dimming. |
code.execution_flow([1, 2, 4, 2, 5], at("run"), ms(420));
s.variable_update(code, 4, "total = 8", after("run", sec(1.2)), ms(250));
code.unfocus(after("run", sec(3)), ms(350));Token flow
Token text is matched by substring on a 1-based code line.
| Method | Description |
|---|---|
s.token_trace(code, from_line, from_token, to_line, to_token, start, dur) | Draw an animated arrow and dot between tokens. |
s.move_token(code, line, token, to_x, to_y, start, dur) | Move a ghost copy to a destination. |
s.morph_token(code, line, token, new_text, start, dur) | Show an in-place odometer-style replacement. |
Use typewriter, type_to, backspace, backspace_to, and retype when you
need a reveal/edit animation rather than a visual annotation.