Animated Curved Timeline

A high-quality animated timeline component with intelligent curved SVG routing, dynamic node alignment, and smooth motion-based progress transitions.

Micro InteractionReactFramer MotionSVG

CSSshadcn

Manual

Create a file and paste the following code into it.

src/index-demo.tsx

import { Timeline } from "./components/timeline";

export default function Demo() {
  return (
    <div className="bg-zinc-100 p-10">
      <div className="flex h-dvh items-center justify-center max-w-[600px] bg-white rounded-4xl border border-zinc-200 w-full p-2">
        <Timeline />
      </div>
    </div>
  );
}