Animated Bar Chart

A data-viz primitive that renders SVG <rect> bars and animates each one with a spring() driven scaleY transform. Each bar is offset by staggerFrames, producing a clean cascade.

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.

Notes

Transform origin

Each bar uses transformOrigin: bottom so the spring animation grows from the baseline rather than the center. We rely on transformBox: fill-box to scope the origin to the rect's own box.