Animated Timeline

Scroll-triggered timeline with 4 distinct Motion.dev animation variants: vertical spring, horizontal growing line, alternating cards, and numbered steps.

npx uniqueui add animated-timeline

Preview

Jan 2026

Project Kickoff

Scope defined and team assembled.

Jan 2026

Design Phase

Wireframes and component system finalised.

Feb 2026

Dev Sprint

Core components built and tested end-to-end.

Feb 2026

Public Launch

CLI published and registry live.

Usage

import { AnimatedTimeline } from "@/components/ui/animated-timeline";

const items = [
  { id: "1", title: "Project Kickoff",   description: "Scope defined and team assembled.",             color: "#a855f7", date: "Jan 2026" },
  { id: "2", title: "Design Phase",      description: "Wireframes and component system finalised.",    color: "#6366f1", date: "Jan 2026" },
  { id: "3", title: "Dev Sprint",        description: "Core components built and tested end-to-end.", color: "#ec4899", date: "Feb 2026" },
  { id: "4", title: "Public Launch",     description: "CLI published and registry live.",             color: "#10b981", date: "Feb 2026" },
];

export default function Example() {
  return (
    <div className="max-w-sm mx-auto p-6 w-full">
      <AnimatedTimeline items={items} variant="vertical" lineColor="#3f3f46" />
    </div>
  );
}

Props

Prop	Type	Description
`items`	`TimelineItem[]`	Ordered array of timeline items (id, title, description, date, color, icon).
`variant`	`"vertical" \| "horizontal" \| "cards" \| "steps"`	Layout and animation style. Defaults to "vertical".
`lineColor`	`string`	Connecting line color. Defaults to rgba(255,255,255,0.08).
`className`	`string`	Additional classes on the root wrapper.