Typing Code Block
Typing Code Block is a typography & title cards Remotion shot (with a public demo.tsx). Watch the video preview, read the recipe notes, and copy the agent brief to implement it from tuned TSX.
- Category
- Typography & Title Cards
- Duration
- ~4.6s (138f@30fps)
- Energy
- Medium (right side continuous typing advance, left side one-shot convergence)
- Styles
- 1
Recipe notes
The same syntax-highlighted code shows two reveals side by side — left side line-level stagger with 4f gaps, fading in and rising 8px; right side per-character typing keeping each character's original token color, with a #3a4468 block cursor behind the current character
When to use it
Code/config reveal shots; developer-product "just three lines" demos; a selection-reference shot when comparing two reveal rhythms
Intent
Code reveals have only two true solutions: **the whole line floats out** (you read the structure) and **one character at a time** (you read the process). This card puts both side by side on the same code as a comparison shot for selection: the left side finishes 4 lines in 4 beats, right for "the code isn't the point, the result is"; the right side needs 138 frames to type 59 characters, right for "watch me write." The key detail is that the right side **types without losing color** — the common mistake is white text first, colored later, which degrades into terminal echo instead of a code editor.