Animated Line Chart

1"use client";
2 
3import { spring, useCurrentFrame, useVideoConfig } from "remotion";
4 
5export interface AnimatedLineChartProps {
6  data?: number[];
7  width?: number;
8  height?: number;
9  strokeColor?: string;
10  strokeWidth?: number;
11  gridColor?: string;
12  showDot?: boolean;
13  speed?: number;
14  className?: string;
15}
16 
17export function AnimatedLineChart({
18  data = [12, 19, 8, 15, 22, 18, 28, 25, 32],
19  width = 1000,
20  height = 500,
21  strokeColor = "#22c55e",
22  strokeWidth = 4,
23  gridColor = "#27272a",
24  showDot = true,
25  speed = 1,
26  className,
27}: AnimatedLineChartProps) {
28  const frame = useCurrentFrame() * speed;
29  const { fps, durationInFrames } = useVideoConfig();
30 
31  const padding = 60;
32  const innerWidth = width - padding * 2;
33  const innerHeight = height - padding * 2;
34 
35  const min = Math.min(...data);
36  const max = Math.max(...data);
37  const range = max - min || 1;
38 
39  const points = data.map((value, index) => {
40    const x = padding + (index / (data.length - 1)) * innerWidth;
41    const y = padding + innerHeight - ((value - min) / range) * innerHeight;
42    return { x, y };
43  });
44 
45  // Analytical path length: sum of segment distances
46  let pathLength = 0;
47  for (let i = 1; i < points.length; i++) {
48    const dx = points[i].x - points[i - 1].x;
49    const dy = points[i].y - points[i - 1].y;
50    pathLength += Math.sqrt(dx * dx + dy * dy);
51  }
52 
53  const d = points
54    .map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(2)},${p.y.toFixed(2)}`)
55    .join(" ");
56 
57  // Spring-driven progress: smooth, no bounce. Matches the "smooth" preset
58  // from remotion-best-practices/timing.md.
59  const progress = spring({
60    frame,
61    fps,
62    durationInFrames: Math.round(durationInFrames * 0.85),
63    config: { damping: 200 },
64  });
65 
66  const dashOffset = pathLength * (1 - progress);
67 
68  // Find dot position along the path at current progress
69  const targetLen = pathLength * progress;
70  let traveled = 0;
71  let dotX = points[0].x;
72  let dotY = points[0].y;
73  for (let i = 1; i < points.length; i++) {
74    const dx = points[i].x - points[i - 1].x;
75    const dy = points[i].y - points[i - 1].y;
76    const segLen = Math.sqrt(dx * dx + dy * dy);
77    if (traveled + segLen >= targetLen) {
78      const t = (targetLen - traveled) / segLen;
79      dotX = points[i - 1].x + dx * t;
80      dotY = points[i - 1].y + dy * t;
81      break;
82    }
83    traveled += segLen;
84    dotX = points[i].x;
85    dotY = points[i].y;
86  }
87 
88  const gridRows = 4;
89  const gridCols = data.length - 1;
90 
91  return (
92    <div
93// … truncated