Figure Reels

A figure rolls up like an odometer between two scrolling image reels, then a label and mark fade in.

Installation

$ pnpm dlx shadcn@latest add @remocn/figure-reels

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { FigureReels } from "@/components/remocn/figure-reels";
 
const FigureReelsScene = () => <FigureReels from={396} to={400} prefix="$" suffix="M" images={["https://example.com/a.jpg", "https://example.com/b.jpg"]} />;
 
export const RemotionRoot = () => (
  <Composition
    id="FigureReels"
    component={FigureReelsScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

The figure rolls its last digits up like an odometer (for example from $396M to $400M) while two reels of images scroll in above and below it, and a lockup with the Remocn mark and a label fades in. The default images are files that only exist in the Remocn repo, so pass images with your own URLs or paths from your public folder. It ships light and dark through theme; ground and groundParams change the animated background.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props12

Prop	Type	Default
from	number396 Starting number the digits roll up from.
to	number400 Final number the figure lands on.
prefix	string"$" Text before the figure, such as a currency sign.
suffix	string"M" Text after the figure, such as M or B.
label	string"Announcing" Text beside the mark in the lockup.
images	string[]DEFAULT_IMAGES Image URLs or public paths for the two reels; default files only exist in the Remocn repo.
accent	string— Accent color for highlights.
ink	string— Text color; defaults to the theme ink.
background	string— Stage background color; overrides the theme ground.
theme	"dark" \| "light""dark" Light or dark palette.
ground	GshPresetId— Preset id for the animated gradient ground.
groundParams	Partial<GradientParams>— Overrides for the ground gradient parameters.

fromnumber
Starting number the digits roll up from.
Default396
tonumber
Final number the figure lands on.
Default400
prefixstring
Text before the figure, such as a currency sign.
Default"$"
suffixstring
Text after the figure, such as M or B.
Default"M"
labelstring
Text beside the mark in the lockup.
Default"Announcing"
imagesstring[]
Image URLs or public paths for the two reels; default files only exist in the Remocn repo.
DefaultDEFAULT_IMAGES
accentstring
Accent color for highlights.
inkstring
Text color; defaults to the theme ink.
backgroundstring
Stage background color; overrides the theme ground.
theme"dark" | "light"
Light or dark palette.
Default"dark"
groundGshPresetId
Preset id for the animated gradient ground.
groundParamsPartial<GradientParams>
Overrides for the ground gradient parameters.