Animated Bar Chart

Installation

$ pnpm dlx shadcn@latest add @remocn/animated-bar-chart

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { AnimatedBarChart } from "@/components/remocn/animated-bar-chart";

const AnimatedBarChartScene = () => (
  <AnimatedBarChart
    data={[35, 60, 45, 80, 55, 70, 90, 65]}
    barColor="#0ea5e9"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="AnimatedBarChart"
    component={AnimatedBarChartScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`data`	`number[]`	`[35, 60, 45, 80, 55, 70, 90, 65]`	Bar values. Auto-scaled to the available height.
`labels`	`string[]`	—	Optional labels rendered under each bar
`width`	`number`	`1000`	SVG viewBox width
`height`	`number`	`500`	SVG viewBox height
`barColor`	`string`	`"#0ea5e9"`	Fill color used for every bar
`background`	`string`	`"#0a0a0a"`	Outer background color
`gap`	`number`	`16`	Pixel gap between bars
`staggerFrames`	`number`	`6`	Frame delay applied to each successive bar
`className`	`string`	—	Optional className passed to the outer container