Point Expand

Short statements rise word by word ending in a round point that pulses and expands into the next scene.

Installation
$ pnpm dlx shadcn@latest add @remocn/point-expand

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PointExpand } from "@/components/remocn/point-expand";
 
const PointExpandScene = () => (
  <PointExpand
    statements={["Launch films used to take weeks.", "Now they take an afternoon.", "Copy, paste, render."]}
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PointExpand"
    component={PointExpandScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

Each statement rises word by word and ends in a round point that drops in, pulses pulses times, and then expands as a circle that becomes the next scene's ground, alternating a plain stage with an accent gradient. Pass up to five statements (trailing periods are replaced by the point) and an accent. It ships light and dark.

Props5

PropTypeDefault
statements
string[]—

Up to five statements; each ends in an expanding point.

pulses
number2

How many times the point pulses before it expands.

accent
string"#3B5BFD"

Color of the points and the gradient scenes.

speed
number1

Playback speed multiplier for the whole timeline.

theme
"dark" | "light""dark"

Light or dark palette.

  • statementsstring[]

    Up to five statements; each ends in an expanding point.

  • pulsesnumber

    How many times the point pulses before it expands.

    Default2

  • accentstring

    Color of the points and the gradient scenes.

    Default"#3B5BFD"

  • speednumber

    Playback speed multiplier for the whole timeline.

    Default1

  • theme"dark" | "light"

    Light or dark palette.

    Default"dark"