Code Reveal
Editor window that writes a syntax-highlighted file, then focuses the lines that matter.
Scene
code-reveal30fps · 960×540
Install
$ npx remotion-ui@latest add code-revealAn editor writes the file in front of the viewer: characters land under a live caret, syntax colours as it goes, and once the listing is complete, the highlighted lines take focus while the rest recedes.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/code-reveal- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: code, highlightedLines, title, language, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { CodeReveal } from "@/remotion/scenes/code-reveal";
<CodeReveal title="pipeline.ts" code={source} highlightedLines={[4, 5]} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | - | Source shown in the editor; surrounding blank lines are trimmed. |
| highlightedLines | number[] | - | 1-based lines focused once the listing finishes writing. |
| title | string | "explainer.tsx" | Filename on the editor tab. |
| language | string | "tsx" | Language badge on the right of the header. |
| startLine | number | 1 | First line number in the gutter, for excerpts. |
| showLineNumbers | boolean | true | Shows the gutter. |
| accentColor | string | "#E8B86D" | Caret, focus band and glow color. |
| theme | "dark" | "light" | "dark" | Editor palette. |
| speed | number | 1 | Animation speed multiplier. |