Code Reveal
Editor window that writes a syntax-highlighted file, then focuses the lines that matter.
SceneScenes
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. |