Magnitude Push

A figure grows digit by digit, each push zooming the camera out, then a caption lands beneath.

Installation

$ pnpm dlx shadcn@latest add @remocn/magnitude-push

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { MagnitudePush } from "@/components/remocn/magnitude-push";
 
const MagnitudePushScene = () => (
  <MagnitudePush value="1000" suffix="×" label="fewer keyframes to set by hand" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="MagnitudePush"
    component={MagnitudePushScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

The first digit rises alone, then every further digit pushes in with a spring while the camera pulls back to keep the whole figure in frame. A caption settles last. Pass value, suffix and label; it ships light and dark through theme.

Props7

Prop	Type	Default
value	string"1000" Figure as a string; each character after the first pushes in.
suffix	string"×" Text drawn after the figure, such as a multiplier sign.
label	string"fewer keyframes to set by hand" Caption that rises in word by word under the figure.
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 as a string; each character after the first pushes in.
Default"1000"
suffixstring
Text drawn after the figure, such as a multiplier sign.
Default"×"
labelstring
Caption that rises in word by word under the figure.
Default"fewer keyframes to set by hand"
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"