import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from "remotion";

const STEPS = [
  { year: "2021", title: "Founded", desc: "Started in a San Francisco garage", color: "#6366f1" },
  { year: "2022", title: "First Launch", desc: "10K users in the first month", color: "#8b5cf6" },
  { year: "2023", title: "Series A", desc: "$12M raised from top VCs", color: "#a855f7" },
  { year: "2024", title: "1M Users", desc: "Reached a global milestone", color: "#ec4899" },
];

export const Timeline: React.FC = () => {
  const frame = useCurrentFrame();
  const lineH = interpolate(frame, [20, 200], [0, 520], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.cubic) });