Said Who

A big serif pull quote, "Took me one evening.", with a backend-engineer attribution

Installation

$ pnpm dlx shadcn@latest add @remocn/said-who

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SaidWho } from "@/components/remocn/said-who";
 
const SaidWhoScene = () => <SaidWho quote="Took me one evening." highlight="one evening" name="Tobias Lind" details={["backend engineer", "never edited a video before"]} />;
 
export const RemotionRoot = () => (
  <Composition
    id="SaidWho"
    component={SaidWhoScene}
    durationInFrames={165}
    fps={30}
    width={1280}
    height={720}
  />
);

A big serif quote appears word by word, then the attribution line builds beneath it a piece at a time: first the name, then each detail, while the quote slowly grows and its highlighted phrase turns to the accent color. Pass quote, highlight, name and details; it spaces the builds to fit the composition length.

Props8

Prop	Type	Default
quote	string"Took me one evening." The quote text, without quote marks.
highlight	string"one evening" Phrase in the quote that turns to the accent color.
name	string"Tobias Lind" Speaker name, shown first in the attribution.
details	string[]— Extra attribution phrases added one by one after the name.
accent	string— Color for 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.

quotestring
The quote text, without quote marks.
Default"Took me one evening."
highlightstring
Phrase in the quote that turns to the accent color.
Default"one evening"
namestring
Speaker name, shown first in the attribution.
Default"Tobias Lind"
detailsstring[]
Extra attribution phrases added one by one after the name.
accentstring
Color for 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"