Scenes
Code Reveal
Progressive code reveal with highlighted lines.
Sceneblocks
Install
npx remotion-ui@latest add code-revealReveal code, commands, or config snippets line by line.
Live preview
AI usage
Install first, then import the copied source component locally.
Install
npx remotion-ui@latest add code-revealImport after install
@/remotion/scenes/code-reveal- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: code, highlightedLines, title, 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
import { CodeReveal } from "@/remotion/scenes/code-reveal";
<CodeReveal code={'npx remotion-ui add media-frame'} highlightedLines={[1]} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| code* | string | — | Code or terminal text. |
| highlightedLines | number[] | — | 1-based highlighted line numbers. |
| title | string | — | Scene title. |