FAQ Accordion
Question rows that open one at a time, each answer's panel growing as the row above it gives the height back.
SceneScenes
$ npx remotion-ui@latest add faq-accordionRows open in the order you give in openOrder, and each one closes the previous.
The two curves overlap deliberately: the closing panel gives back its height over
the same frames the opening one takes it, so the list keeps a steady overall
height and nothing below it jumps. The chevron turns a full half so it ends
pointing at the panel it just opened, and the answer copy fades in behind the
growing edge rather than with it, which is what makes the panel read as opening
instead of as text stretching.
Panel heights are estimated from each answer's own length against the measured
content width. A headless render has no settled layout to interrogate
mid-animation — a height read from scrollHeight collapses to zero on exactly
the frames that matter — so the estimate rounds up, costing a few pixels of slack
and buying a height that is identical on every machine. Keep answers to two or
three lines; long copy inflates that rounding.
Pass a shorter openOrder than items to leave the tail closed, which is often
what you want: a list where every row opens spends its whole run in motion and
never lets a viewer read one answer.
For code panels reach for code-accordion, and for an ordered process rather
than a Q&A use timeline-steps.
Panel heights are estimated from the answer's length against the measured content width, because a headless render has no layout to interrogate mid-animation — a height read from scrollHeight collapses to zero on exactly the frames that matter. Keep answers to two or three lines; long copy inflates the estimate's rounding slack. For code panels use code-accordion, for an ordered process use timeline-steps.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/faq-accordion- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: items, title, openOrder, startAtSeconds, 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 { FaqAccordion } from "@/remotion/scenes/faq-accordion";
<FaqAccordion
title="Questions people ask"
items={[
{ question: "Do I own the components?", answer: "Yes. The CLI copies the source into your repo." },
{ question: "Can I render on my own machine?", answer: "Renders run wherever Remotion runs." },
]}
openOrder={[0, 1]}
holdSeconds={3.4}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items | FaqItem[] | 4 sample questions | Question and answer for each row. |
| title | string | "Questions people ask" | Heading above the list. Omit to drop it. |
| openOrder | number[] | [0, 1, 2] | Row indices opened in turn; each closes the previous. Shorter than items leaves the tail closed. |
| startAtSeconds | number | 0.55 | Second the first row opens. |
| openEverySeconds | number | 1 | Seconds between one row opening and the next. |
| transitionSeconds | number | 0.55 | How long a row takes to open or close. Opens and closes overlap, so the list never jumps height. |
| holdSeconds | number | - | Seconds the list holds before it retreats. Omit to leave it up. |
| accentColor | string | "#E8B86D" | Open row's chevron and its background wash. |
| backgroundColor | string | - | Page behind the list. Defaults to the theme page colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |