Changed Mind

A big serif pull quote, "The only tool I use now.", with a solo-founder attribution

Installation

$ pnpm dlx shadcn@latest add @remocn/changed-mind

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ChangedMind } from "@/components/remocn/changed-mind";
 
const ChangedMindScene = () => <ChangedMind name="Ines Vargas, solo founder" steps={[{ quote: "Another tool I won’t use.", when: "on day one" }, { quote: "The only tool I use now.", when: "two months in" }]} />;
 
export const RemotionRoot = () => (
  <Composition
    id="ChangedMind"
    component={ChangedMindScene}
    durationInFrames={170}
    fps={30}
    width={1280}
    height={720}
  />
);

A big serif quote types in word by word, then twice rewrites itself: shared words glide to their new spots while changed words swap and glow in the accent color, with the time tag under the attribution updating each time. Pass steps (quote and when pairs) and name; it ships light and dark, and spaces the steps to fit the composition length.

Props6

Prop	Type	Default
steps	ChangedMindStep[]DEFAULT_STEPS Quotes with a time tag each; shared words carry across.
name	string"Ines Vargas, solo founder" Attribution line shown under the quote.
accent	string— Color for the words that changed; 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.

stepsChangedMindStep[]
Quotes with a time tag each; shared words carry across.
DefaultDEFAULT_STEPS
namestring
Attribution line shown under the quote.
Default"Ines Vargas, solo founder"
accentstring
Color for the words that changed; 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"