Exactly

A yellow "Exactly." lands first, then "It's just code." completes the answer

Installation

$ pnpm dlx shadcn@latest add @remocn/exactly

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { Exactly } from "@/components/remocn/exactly";
 
const ExactlyScene = () => <Exactly rounds={[{ objection: "It’s just code.", reply: "Exactly." }]} />;
 
export const RemotionRoot = () => (
  <Composition
    id="Exactly"
    component={ExactlyScene}
    durationInFrames={165}
    fps={30}
    width={1280}
    height={720}
  />
);

Each round types an objection, which drops away as the reply lands beside it and reflows into the final answer; the next round follows. Pass rounds (objection and reply pairs); it compresses to fit the composition length.

Props5

Prop	Type	Default
rounds	ExactlyRound[]DEFAULT_ROUNDS Objection and reply pairs, played in order.
accent	string— Color of the reply; 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.

roundsExactlyRound[]
Objection and reply pairs, played in order.
DefaultDEFAULT_ROUNDS
accentstring
Color of the reply; 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"