Animated Bar Chart

Bars spring up from the baseline with a staggered cascade

Installation

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

Usage

tsx

// 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}
  />
);

With Backdrop

Renders transparent — supply the background via Backdrop:

tsx

import { Backdrop } from "@/components/remocn/backdrop";
import { AnimatedBarChart } from "@/components/remocn/animated-bar-chart";
 
<Backdrop fill={{ type: "color", value: "#0a0a0a" }}>
  <AnimatedBarChart data={[35, 60, 45, 80, 55, 70, 90, 65]} barColor="#0ea5e9" />
</Backdrop>

Props8

Prop	Type	Default
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	number1000 SVG viewBox width
height	number500 SVG viewBox height
barColor	string"#0ea5e9" Fill color used for every bar
gap	number16 Pixel gap between bars
staggerFrames	number6 Frame delay applied to each successive bar
className	string— Optional className passed to the outer container

datanumber[]
Bar values. Auto-scaled to the available height.
Default[35, 60, 45, 80, 55, 70, 90, 65]
labelsstring[]
Optional labels rendered under each bar
widthnumber
SVG viewBox width
Default1000
heightnumber
SVG viewBox height
Default500
barColorstring
Fill color used for every bar
Default"#0ea5e9"
gapnumber
Pixel gap between bars
Default16
staggerFramesnumber
Frame delay applied to each successive bar
Default6
classNamestring
Optional className passed to the outer container