Concentric Scale

Concentric dotted discs scale up step by step until the last glowing disc lands a large figure and label.

Installation

$ pnpm dlx shadcn@latest add @remocn/concentric-scale

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ConcentricScale } from "@/components/remocn/concentric-scale";
 
const ConcentricScaleScene = () => <ConcentricScale steps={[{ value: "1" }, { value: "100" }, { value: "10,000", label: "creators" }]} />;
 
export const RemotionRoot = () => (
  <Composition
    id="ConcentricScale"
    component={ConcentricScaleScene}
    durationInFrames={175}
    fps={30}
    width={1280}
    height={720}
  />
);

Dotted discs scale up one at a time as the camera pulls back, each ring labeled with a step value, until the last disc glows at its rim and its large figure and label land beside it. Pass steps as 2 to 7 entries of { value, label? }; the label of the final step becomes the caption. It ships light and dark through theme.

Props4

Prop	Type	Default
steps	ScaleStep[]DEFAULT_STEPS Two to seven scale steps; each has a value and an optional label.
accent	string"#3B5BFD" Accent color of the rings and glow.
theme	"dark" \| "light""dark" Light or dark palette.
speed	number1 Playback speed multiplier.

stepsScaleStep[]
Two to seven scale steps; each has a value and an optional label.
DefaultDEFAULT_STEPS
accentstring
Accent color of the rings and glow.
Default"#3B5BFD"
theme"dark" | "light"
Light or dark palette.
Default"dark"
speednumber
Playback speed multiplier.
Default1