Answer First

The question "Who made this video?" is answered by a big "A pull request."

Installation

$ pnpm dlx shadcn@latest add @remocn/answer-first

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { AnswerFirst } from "@/components/remocn/answer-first";
 
const AnswerFirstScene = () => <AnswerFirst answer="A pull request." question="Who made this video?" />;
 
export const RemotionRoot = () => (
  <Composition
    id="AnswerFirst"
    component={AnswerFirstScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A big answer rises word by word first, then slides up and shrinks as the question types in below it, so the reader sees the answer before the question. Pass answer and question.

Props6

Prop	Type	Default
answer	string"A pull request." The big answer line shown first.
question	string"Who made this video?" The question that types in beneath the answer.
accent	string— Color of the question text; defaults to the theme accent.
background	string— Stage fill color; pass "transparent" to overlay your own footage.
speed	number1 Playback multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color scheme; ships dark and light.

answerstring
The big answer line shown first.
Default"A pull request."
questionstring
The question that types in beneath the answer.
Default"Who made this video?"
accentstring
Color of the question text; defaults to the theme accent.
backgroundstring
Stage fill color; pass "transparent" to overlay your own footage.
speednumber
Playback multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color scheme; ships dark and light.
Default"dark"