Script Cut
A one-line script is cut by accent ticks into shots, and each piece flies up to fill the frame.
$ pnpm dlx shadcn@latest add @remocn/script-cutUsage
// 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
| Prop | Type | Default |
|---|---|---|
| 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.
Default
DEFAULT_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.
Default
1 - theme"dark" | "light"
Light or dark palette.
Default
"dark"