Times Turn

A quiet unit beside a large figure is replaced by a turning multiplication sign, then the figure swells.

Installation

$ pnpm dlx shadcn@latest add @remocn/times-turn

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TimesTurn } from "@/components/remocn/times-turn";
 
const TimesTurnScene = () => (
  <TimesTurn value="3" before="%" label="more launch cuts from the same storyboard" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="TimesTurn"
    component={TimesTurnScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

The figure rises in beside a small unit. A multiplication sign then turns in on the panel while the unit exits, the figure swells to fill the space, and the label rises in word by word. Pass value, before and label; it ships light and dark through theme.

Props7

Prop	Type	Default
value	string"3" Figure shown next to the multiplication sign.
before	string"%" Small unit shown first, which exits as the sign turns in.
label	string"more launch cuts from the same storyboard" Caption that rises in word by word under the figure.
accent	string— 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 next to the multiplication sign.
Default"3"
beforestring
Small unit shown first, which exits as the sign turns in.
Default"%"
labelstring
Caption that rises in word by word under the figure.
Default"more launch cuts from the same storyboard"
accentstring
Accent color for highlights and small marks.
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"