Pixel Bars

LED-style pixel bars climb, the last column lighting orange and blue to +64%

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PixelBars } from "@/components/remocn/pixel-bars";
 
const PixelBarsScene = () => (
  <PixelBars
    values={[31, 38, 35, 44, 41, 50, 84]}
    metric="+64%"
    label="this quarter"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PixelBars"
    component={PixelBarsScene}
    durationInFrames={115}
    fps={30}
    width={1280}
    height={720}
  />
);

Columns of LED-style pixels light up bar by bar; the last column climbs past the previous best, turns orange and blue, and the metric counts up beside the chart. Pass values (one number per column), metric and label. Ships dark and light via theme.

Props6

Prop	Type	Default
values	number[]DEFAULT_VALUES One number per column; the last is the hero.
label	string"this quarter" Small line under the metric.
metric	string"+64%" The big stat that counts up, such as +64%.
accent	string"#3B5BFD" Accent color for the hero element.
theme	"dark" \| "light""dark" Dark or light palette.
speed	number1 Playback multiplier.

valuesnumber[]
One number per column; the last is the hero.
DefaultDEFAULT_VALUES
labelstring
Small line under the metric.
Default"this quarter"
metricstring
The big stat that counts up, such as +64%.
Default"+64%"
accentstring
Accent color for the hero element.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette.
Default"dark"
speednumber
Playback multiplier.
Default1