Shape Pack

Colored tiles drop in and pack into a poster grid, then one block locks in a stat with a label.

Installation

$ pnpm dlx shadcn@latest add @remocn/shape-pack

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ShapePack } from "@/components/remocn/shape-pack";
 
const ShapePackScene = () => (
  <ShapePack value={3.2} decimals={1} suffix="×" label="faster renders" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ShapePack"
    component={ShapePackScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Blocks fall one after another and pack into a twelve by eight grid, leaving a slot that the last block fills. That block counts up to value with its suffix and label. Pass value, suffix, label and optionally your own logo node; it ships light and dark through theme.

Props8

Prop	Type	Default
value	number3.2 Final number the locking block counts up to.
decimals	number1 Decimal places shown while counting.
suffix	string"×" Text drawn after the number.
label	string"faster renders" Caption inside the locking block.
logo	React.ReactNode— React node shown in the poster instead of the default Remocn logo.
accent	string"#3B5BFD" Accent color for highlights and small marks.
theme	"dark" \| "light""dark" Color theme, "dark" or "light".
speed	number1 Playback speed multiplier for the whole timeline.

valuenumber
Final number the locking block counts up to.
Default3.2
decimalsnumber
Decimal places shown while counting.
Default1
suffixstring
Text drawn after the number.
Default"×"
labelstring
Caption inside the locking block.
Default"faster renders"
logoReact.ReactNode
React node shown in the poster instead of the default Remocn logo.
accentstring
Accent color for highlights and small marks.
Default"#3B5BFD"
theme"dark" | "light"
Color theme, "dark" or "light".
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1