Scissors Cut

Scissors cut a word out of a line, and a replacement word slides into the gap.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ScissorsCut } from "@/components/remocn/scissors-cut";
 
const ScissorsCutScene = () => (
  <ScissorsCut before="Ship " cut="next quarter" after="." replacement="now" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ScissorsCut"
    component={ScissorsCutScene}
    durationInFrames={250}
    fps={30}
    width={1280}
    height={720}
  />
);

A line appears, a dashed outline traces the cut phrase and a pair of scissors snips along it. The cut piece falls away, the line reflows, and the replacement slides into the gap. Pass before, cut, after and replacement. It takes a theme prop and ships light and dark.

Props7

Prop	Type	Default
before	string"Launch " Text before the cut-out. Keep the trailing space.
cut	string"next month" The words the scissors cut out.
after	string"." Text after the cut-out.
replacement	string"today" What slides into the gap.
accent	string"#3B5BFD" Scissor handles and the replacement word.
theme	"dark" \| "light""dark" Light or dark ground; the component ships both.
speed	number1 Playback speed multiplier for the whole timeline.

beforestring
Text before the cut-out. Keep the trailing space.
Default"Launch "
cutstring
The words the scissors cut out.
Default"next month"
afterstring
Text after the cut-out.
Default"."
replacementstring
What slides into the gap.
Default"today"
accentstring
Scissor handles and the replacement word.
Default"#3B5BFD"
theme"dark" | "light"
Light or dark ground; the component ships both.
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1