Cut Off

A line is cut off by a white reply card: "Or let the code cut it."

Installation

$ pnpm dlx shadcn@latest add @remocn/cut-off

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CutOff } from "@/components/remocn/cut-off";
 
const CutOffScene = () => <CutOff line="So first I export the clips, redo all the captions, then line up the mus" reply="Or let the code cut it." highlight="the code" />;
 
export const RemotionRoot = () => (
  <Composition
    id="CutOff"
    component={CutOffScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

A line types in word by word and breaks off mid-word with a dash, then a card cuts in and the reply words land on it in a hard hit, with one phrase highlighted. Pass line (the sentence that gets cut off), reply and highlight.

Props7

Prop	Type	Default
line	string"So first I export the clips, redo all the captions, then line up the mus" The sentence that is cut off; its last word is broken mid-word.
reply	string"Or let the code cut it." The words that land on the card after the cut.
highlight	string"the code" Phrase in the reply set in the accent color.
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.

linestring
The sentence that is cut off; its last word is broken mid-word.
Default"So first I export the clips, redo all the captions, then line up the mus"
replystring
The words that land on the card after the cut.
Default"Or let the code cut it."
highlightstring
Phrase in the reply set in the accent color.
Default"the code"
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"