Shape Cut

A circle, square or pill swells to cover the headline, then shrinks to a small mark beside the next line

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

Usage

tsx
// 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

PropTypeDefault
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

    Default1