Your Name Here

A launch-film caption has a slot where the brand name is swapped in for the viewer's own.

Installation

$ pnpm dlx shadcn@latest add @remocn/your-name-here

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { YourNameHere } from "@/components/remocn/your-name-here";
 
const YourNameHereScene = () => (
  <YourNameHere lead="A launch film for" slot="yourProduct" brand="Acme" note="Swap one prop. The film is yours." />
);
 
export const RemotionRoot = () => (
  <Composition
    id="YourNameHere"
    component={YourNameHereScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

A lead-in line runs to a highlighted slot that swaps from slot to brand, then a closing note lands below. Pass lead, brand, slot and note to personalize it. It ships in light and dark through the theme prop.

Props9

Prop	Type	Default
lead	string"A launch film for" Text before the slot.
brand	string"remocn" Name that replaces the placeholder.
slot	string"yourProduct" Placeholder text shown first.
end	string"." Closing punctuation after the name.
note	string"Swap one prop. The film is yours." Caption shown under the main line.
accent	string— Accent color override; falls back to the theme accent.
background	string— Background color override; falls back to the theme background.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Ships light and dark; picks the palette.

leadstring
Text before the slot.
Default"A launch film for"
brandstring
Name that replaces the placeholder.
Default"remocn"
slotstring
Placeholder text shown first.
Default"yourProduct"
endstring
Closing punctuation after the name.
Default"."
notestring
Caption shown under the main line.
Default"Swap one prop. The film is yours."
accentstring
Accent color override; falls back to the theme accent.
backgroundstring
Background color override; falls back to the theme background.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Ships light and dark; picks the palette.
Default"dark"