Code Accordion
Stepped walkthrough where each section opens, writes its code, and is checked off.
SceneScenes
code-accordion30fps · 960×540
Install
$ npx remotion-ui@latest add code-accordionSteps play in order: a section opens, writes its code, holds, then closes with a check as the next one takes over. Pass activeIndex to pin a single step open instead of walking the list.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/code-accordion- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: sections, activeIndex, title, holdSeconds, 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 { CodeAccordion } from "@/remotion/scenes/code-accordion";
<CodeAccordion sections={sections} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| sections | AccordionSection[] | - | Steps played in order; each has a title, code, and optional meta. |
| activeIndex | number | - | Pins one step open instead of walking the list. |
| title | string | "Add it to your project" | Label above the steps. |
| holdSeconds | number | 0.75 | Seconds an opened step is held before it closes. |
| accentColor | string | "#E8B86D" | Chevron, fill and glow color. |
| theme | "dark" | "light" | "dark" | Panel palette. |
| speed | number | 1 | Animation speed multiplier. |