Script Cut

A one-line script is cut by accent ticks into shots, and each piece flies up to fill the frame.

Installation
$ pnpm dlx shadcn@latest add @remocn/script-cut

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ScriptCut } from "@/components/remocn/script-cut";
 
const ScriptCutScene = () => (
  <ScriptCut
    shots={["We wrote the launch as one line,", "cut it twice,", "and every piece became a shot."]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ScriptCut"
    component={ScriptCutScene}
    durationInFrames={200}
    fps={30}
    width={1280}
    height={720}
  />
);

The whole script appears as a small line along the bottom, then accent ticks drop in to cut it into pieces. Each shot lights up in turn and its words fly up from the row to fill the frame at large size, then exit for the next. Pass shots as the script split into phrases; timing adapts to the composition length, and 176 frames assumes the three defaults in 200. It ships light and dark.

Props5

PropTypeDefault
shots
string[]DEFAULT_SHOTS

Script pieces in order; together they form the small line below.

accent
string—

Color of the cut ticks and the lit shot.

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.

  • shotsstring[]

    Script pieces in order; together they form the small line below.

    DefaultDEFAULT_SHOTS

  • accentstring

    Color of the cut ticks and the lit shot.

  • 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"