Res Climb

A number resolves from coarse blocks through sharper resolutions into a crisp glowing figure with a caption.

Installation

$ pnpm dlx shadcn@latest add @remocn/res-climb

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ResClimb } from "@/components/remocn/res-climb";
 
const ResClimbScene = () => <ResClimb value="200+" eyebrow="Component registry" label="components, ready to drop in" />;
 
export const RemotionRoot = () => (
  <Composition
    id="ResClimb"
    component={ResClimbScene}
    durationInFrames={115}
    fps={30}
    width={1280}
    height={720}
  />
);

A big number first appears as a coarse block grid, then re-renders through a few sharper resolutions in quick snaps until it lands crisp in a blue gradient. A small eyebrow sits above and a caption fades in below. Pass value as a string such as "200+", plus label and eyebrow; steps sets the grid resolutions. It ships light and dark through theme.

Props8

Prop	Type	Default
value	string"200+" The figure to resolve, as a string such as 200+.
label	string"components, ready to drop in" Caption under the figure.
eyebrow	string"remocn registry" Small line above the figure.
steps	number[][7, 14, 28] Pixel-grid rows per cap height for each coarse stage; up to 4.
accent	string"#3B5BFD" Main color of the figure gradient.
background	string— Stage background color; overrides the theme ground.
speed	number1 Playback speed multiplier.
theme	"dark" \| "light""dark" Light or dark palette.

valuestring
The figure to resolve, as a string such as 200+.
Default"200+"
labelstring
Caption under the figure.
Default"components, ready to drop in"
eyebrowstring
Small line above the figure.
Default"remocn registry"
stepsnumber[]
Pixel-grid rows per cap height for each coarse stage; up to 4.
Default[7, 14, 28]
accentstring
Main color of the figure gradient.
Default"#3B5BFD"
backgroundstring
Stage background color; overrides the theme ground.
speednumber
Playback speed multiplier.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"