Quiz Question
A question that resolves — options arrive, one is picked, then the right answer lights while the rest step back.
SceneScenes
$ npx remotion-ui@latest add quiz-questionOptions arrive one at a time, the scene picks one, and only then does the right answer light up. Keeping the pick and the reveal as separate beats is the whole design: the eye needs to have settled on a choice before it can register being told it was wrong, and quiz scenes that resolve in a single frame are unreadable at social speeds.
Three states are drawn — picked, right, wrong — and correct always wins where
they overlap, so pickedIndex === correctIndex gives you a scene where the pick
is simply right. Pass pickedIndex={-1} for a reveal with no pick at all.
On the reveal, every option that is neither picked nor correct steps back rather than changing colour. The resolution then reads as focus narrowing, which is what a viewer is actually doing, instead of as three new colours arriving at once.
Four options is the readable maximum at 1080p, and shorter than about six words
each. This is the shape with a right answer; for audience voting with no correct
option, use poll-overlay.
The pick and the reveal are deliberately separate beats — the eye has to settle on a choice before it can register being told it was wrong. On the reveal everything neither picked nor correct steps back rather than changing colour, so the resolution reads as focus narrowing. For audience voting with no right answer, use poll-overlay.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/quiz-question- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: question, options, correctIndex, pickedIndex, 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 { QuizQuestion } from "@/remotion/scenes/quiz-question";
<QuizQuestion
question="What does the RemotionUI CLI actually do?"
options={[
"It bundles a runtime you ship",
"It copies the source into your repo",
"It renders on our servers",
]}
correctIndex={1}
pickedIndex={2}
holdSeconds={3.4}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| question | string | "What does the RemotionUI CLI actually do?" | The question, set at display size. |
| options | string[] | 4 sample answers | Answer options in display order. Four is the readable maximum at 1080p. |
| correctIndex | number | 1 | Index of the right answer. |
| pickedIndex | number | 2 | Index picked before the reveal. Set it to correctIndex for a right pick, -1 for none. |
| eyebrow | string | "Question 3 of 8" | Small line above the question. Omit to drop it. |
| optionsAtSeconds | number | 0.55 | Second the first option arrives. |
| staggerSeconds | number | 0.2 | Seconds between options. |
| pickAtSeconds | number | 1.75 | Second the pick lands. |
| revealAtSeconds | number | 2.35 | Second the right answer is revealed. |
| holdSeconds | number | - | Seconds the resolved question holds before it retreats. Omit to leave it up. |
| accentColor | string | "#E8B86D" | Eyebrow, and the picked-but-not-yet-resolved state. |
| correctColor | string | "#7FD1A0" | The right answer on reveal. |
| wrongColor | string | "#E89B9B" | A wrong pick on reveal. |
| backgroundColor | string | - | Page behind the card. Defaults to the theme page colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |