Animated Bar Chart

1"use client";
2 
3import { spring, useCurrentFrame, useVideoConfig } from "remotion";
4 
5export interface AnimatedBarChartProps {
6  data?: number[];
7  labels?: string[];
8  width?: number;
9  height?: number;
10  barColor?: string;
11  gap?: number;
12  staggerFrames?: number;
13  speed?: number;
14  className?: string;
15}
16 
17export function AnimatedBarChart({
18  data = [35, 60, 45, 80, 55, 70, 90, 65],
19  labels,
20  width = 1000,
21  height = 500,
22  barColor = "#0ea5e9",
23  gap = 16,
24  staggerFrames = 6,
25  speed = 1,
26  className,
27}: AnimatedBarChartProps) {
28  const frame = useCurrentFrame() * speed;
29  const { fps } = useVideoConfig();
30 
31  const padding = 60;
32  const labelSpace = labels ? 40 : 0;
33  const innerWidth = width - padding * 2;
34  const innerHeight = height - padding * 2 - labelSpace;
35  const max = Math.max(...data);
36  const barWidth = (innerWidth - gap * (data.length - 1)) / data.length;
37  const baseY = padding + innerHeight;
38 
39  return (
40    <div
41      className={className}
42      style={{
43        position: "absolute",
44        inset: 0,
45        display: "flex",
46        alignItems: "center",
47        justifyContent: "center",
48        fontFamily:
49          "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif",
50      }}
51    >
52      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
53        {/* Baseline */}
54        <line
55          x1={padding}
56          x2={padding + innerWidth}
57          y1={baseY}
58          y2={baseY}
59          stroke="#27272a"
60          strokeWidth={2}
61        />
62 
63        {data.map((value, index) => {
64          const targetHeight = (value / max) * innerHeight;
65          const x = padding + index * (barWidth + gap);
66          const y = baseY - targetHeight;
67 
68          const scaleY = spring({
69            frame: frame - index * staggerFrames,
70            fps,
71            config: { damping: 12, stiffness: 100, mass: 0.8 },
72            from: 0,
73            to: 1,
74          });
75 
76          return (
77            <g key={index}>
78              <rect
79                x={x}
80                y={y}
81                width={barWidth}
82                height={targetHeight}
83                rx={6}
84                fill={barColor}
85                style={{
86                  transform: `scaleY(${scaleY})`,
87                  transformOrigin: `${x + barWidth / 2}px ${baseY}px`,
88                  transformBox: "fill-box",
89                  filter: `drop-shadow(0 4px 16px ${barColor}55)`,
90                }}
91              />
92// … truncated