Figure to Label

A halftone-dot figure resolves on a ruled card, then collapses so a label word types out beside it.

Installation

$ pnpm dlx shadcn@latest add @remocn/figure-to-label

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { FigureToLabel } from "@/components/remocn/figure-to-label";
 
const FigureToLabelScene = () => <FigureToLabel value="$6.4B" word="valuation" eyebrow="Series B" />;
 
export const RemotionRoot = () => (
  <Composition
    id="FigureToLabel"
    component={FigureToLabelScene}
    durationInFrames={138}
    fps={30}
    width={1280}
    height={720}
  />
);

A figure built from a halftone dot field pops onto a ruled card, a wave sweeps across and the dots resolve left to right into solid digits. The card then collapses, the figure takes the accent color and the label word types out beside it with a caret, under the Remocn mark. Pass value, word and an optional eyebrow. 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.

Props9

Prop	Type	Default
value	string"$6.4B" The figure shown on the card, such as $6.4B.
word	string"valuation" Label word typed out beside the figure.
eyebrow	string"" Text beside the mark above the line; hidden when empty.
accent	string— Accent color of the figure; defaults to the theme accent.
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.

valuestring
The figure shown on the card, such as $6.4B.
Default"$6.4B"
wordstring
Label word typed out beside the figure.
Default"valuation"
eyebrowstring
Text beside the mark above the line; hidden when empty.
Default""
accentstring
Accent color of the figure; defaults to the theme accent.
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.