Double Take

"Read that again." above an oversized pink "One person" on blue

Installation

$ pnpm dlx shadcn@latest add @remocn/double-take

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { DoubleTake } from "@/components/remocn/double-take";
 
const DoubleTakeScene = () => <DoubleTake text="One person wrote this entire launch video over a single lunch break." focus="One person" cue="Read that again." />;
 
export const RemotionRoot = () => (
  <Composition
    id="DoubleTake"
    component={DoubleTakeScene}
    durationInFrames={160}
    fps={30}
    width={1280}
    height={720}
  />
);

A line crawls in word by word, stops, then rewinds and zooms back onto one phrase, which lights up in the accent color over a small cue line. Pass text, focus (the phrase to land on) and cue; it compresses to fit the composition length.

Props7

Prop	Type	Default
text	string"One person wrote this entire launch video over a single lunch break." The full sentence that crawls in.
focus	string"One person" Phrase the view rewinds and zooms to.
cue	string"Read that again." Small line shown above the highlighted phrase.
accent	string— Color of the highlighted phrase; 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.

textstring
The full sentence that crawls in.
Default"One person wrote this entire launch video over a single lunch break."
focusstring
Phrase the view rewinds and zooms to.
Default"One person"
cuestring
Small line shown above the highlighted phrase.
Default"Read that again."
accentstring
Color of the highlighted phrase; 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"