Shape Cut
A circle, square or pill swells to cover the headline, then shrinks to a small mark beside the next line
$ pnpm dlx shadcn@latest add @remocn/shape-cutUsage
// src/Root.tsx
import { Composition } from "remotion";
import { ShapeCut } from "@/components/remocn/shape-cut";
const ShapeCutScene = () => (
<ShapeCut
from="Ideas move fast"
to="Now live"
shape="pill"
accent="#3B5BFD"
/>
);
export const RemotionRoot = () => (
<Composition
id="ShapeCut"
component={ShapeCutScene}
durationInFrames={110}
fps={30}
width={1280}
height={720}
/>
);A shape slides in from the left edge and swells until it covers the from headline, then shrinks down to a small mark beside the to text, which settles into place. Choose shape as circle, square or pill (the pill ends as an underline bar), and pass to="remocn" to set the Remocn logo. It ships light and dark, and the cut finishes at frame 76.
Props6
| Prop | Type | Default |
|---|---|---|
| from | string"Ideas move fast" Outgoing headline | |
| to | string"remocn" Incoming headline; Remocn sets the logo | |
| shape | "circle" | "square" | "pill""circle" Shape that grows out of the text: circle, square or pill | |
| accent | string"#3B5BFD" Accent color used by the scenes | |
| theme | "dark" | "light""dark" Light or dark stage | |
| speed | number1 Playback multiplier for the whole timeline | |
- fromstring
Outgoing headline
Default
"Ideas move fast" - tostring
Incoming headline; Remocn sets the logo
Default
"remocn" - shape"circle" | "square" | "pill"
Shape that grows out of the text: circle, square or pill
Default
"circle" - accentstring
Accent color used by the scenes
Default
"#3B5BFD" - theme"dark" | "light"
Light or dark stage
Default
"dark" - speednumber
Playback multiplier for the whole timeline
Default
1