Animated Curved Timeline
A high-quality animated timeline component with intelligent curved SVG routing, dynamic node alignment, and smooth motion-based progress transitions.
Category
Micro InteractionReact
CSS
shadcn
Manual
Create a file and paste the following code into it.
src/index-demo.tsx
1
2
3
4
5
6
7
8
9
10
11
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>
);
}Update the import paths to match your project setup.