Radial Bars

Bars around a dial sweep up to a peak while the center figure counts up with a label.

Installation

$ pnpm dlx shadcn@latest add @remocn/radial-bars

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { RadialBars } from "@/components/remocn/radial-bars";
 
const RadialBarsScene = () => (
  <RadialBars values={[8, 14, 22, 40, 90, 64, 30, 18]} value="2.4M" label="renders in the peak hour" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="RadialBars"
    component={RadialBarsScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Bars grow around the dial in a sweep, the peak group is picked out with a bracket and a soft glow, and the center figure counts up under its label. Pass values (one bar each), highlight, value, label and ticks; it ships light and dark through theme.

Props8

Prop	Type	Default
values	number[]DEFAULT_VALUES Bar heights around the dial, one entry per bar.
highlight	number— Index of the bar at the center of the focused group. Defaults to the peak.
value	string"2.4M" Center figure, as text.
label	string"renders in the peak hour" Caption under the center figure.
ticks	string[]["00:00", "06:00", "12:00", "18:00"] Labels spaced evenly around the dial.
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.

valuesnumber[]
Bar heights around the dial, one entry per bar.
DefaultDEFAULT_VALUES
highlightnumber
Index of the bar at the center of the focused group. Defaults to the peak.
valuestring
Center figure, as text.
Default"2.4M"
labelstring
Caption under the center figure.
Default"renders in the peak hour"
ticksstring[]
Labels spaced evenly around the dial.
Default["00:00", "06:00", "12:00", "18:00"]
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