Pitch Blanks

A one-line pitch shows underlined blanks with small labels, then each blank fills in with its word.

Installation
$ pnpm dlx shadcn@latest add @remocn/pitch-blanks

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PitchBlanks } from "@/components/remocn/pitch-blanks";
 
const PitchBlanksScene = () => (
  <PitchBlanks
    line="{Acme} is a {motion toolkit} for {small teams}."
    labels={["product", "category", "audience"]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PitchBlanks"
    component={PitchBlanksScene}
    durationInFrames={170}
    fps={30}
    width={1280}
    height={720}
  />
);

The sentence appears with each braced phrase in line shown as an empty underline carrying a small caps label from labels. The blanks then fill in one by one: the underline stretches to fit, the word rises in, and the underline and label turn the accent color. Wrap phrases in curly braces and give labels one entry per blank; timing stretches to fit the composition, and 141 frames assumes three blanks in 170. It ships light and dark.

Props6

PropTypeDefault
line
string"{remocn} is a {launch-film kit} for {teams of one}."

Sentence with each blank wrapped in curly braces.

labels
string[]["product", "category", "audience"]

Small caps labels, one per blank, in order.

accent
string—

Accent color; overrides the theme accent.

background
string—

Background fill; pass "transparent" to drop it.

speed
number1

Playback speed multiplier for the whole timeline.

theme
"dark" | "light""dark"

Light or dark palette.

  • linestring

    Sentence with each blank wrapped in curly braces.

    Default"{remocn} is a {launch-film kit} for {teams of one}."

  • labelsstring[]

    Small caps labels, one per blank, in order.

    Default["product", "category", "audience"]

  • accentstring

    Accent color; overrides the theme accent.

  • backgroundstring

    Background fill; pass "transparent" to drop it.

  • speednumber

    Playback speed multiplier for the whole timeline.

    Default1

  • theme"dark" | "light"

    Light or dark palette.

    Default"dark"