Plus Open

A figure with a plus sign rises in, then the plus opens like a door onto the next statement.

Installation

$ pnpm dlx shadcn@latest add @remocn/plus-open

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PlusOpen } from "@/components/remocn/plus-open";
 
const PlusOpenScene = () => (
  <PlusOpen value="150" label="updates in this release" next="Here’s everything new." />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PlusOpen"
    component={PlusOpenScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

The figure rises in and a plus sign spins into place beside it, arms extending. The plus then opens, splitting the frame to reveal the next statement over a soft aurora ground. Pass value, label and next; it ships light and dark through theme.

Props7

Prop	Type	Default
value	string"150" Figure shown before the plus sign.
label	string"updates in this release" Small line under the figure before the plus opens.
next	string"Here’s everything new." Statement revealed word by word once the plus opens.
accent	string"#3B5BFD" Accent color for highlights and small marks.
background	string— Background color override. Pass "transparent" to composite over other layers.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color theme, "dark" or "light".

valuestring
Figure shown before the plus sign.
Default"150"
labelstring
Small line under the figure before the plus opens.
Default"updates in this release"
nextstring
Statement revealed word by word once the plus opens.
Default"Here’s everything new."
accentstring
Accent color for highlights and small marks.
Default"#3B5BFD"
backgroundstring
Background color override. Pass "transparent" to composite over other layers.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color theme, "dark" or "light".
Default"dark"