Animated Timeline

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

UniqueUI CLI

npx uniqueui add animated-timeline

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/animated-timeline.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Vertical

Variant 1 of 4

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.

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>
  );
}

Horizontal

Variant 2 of 4

Jan

Kickoff

Scope agreed.

Jan

Design

Wireframes done.

Feb

Build

Components shipped.

Feb

Launch

Registry live.

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

const items = [
  { id: "1", title: "Kickoff",  description: "Scope agreed.",          color: "#a855f7", date: "Jan" },
  { id: "2", title: "Design",   description: "Wireframes done.",       color: "#6366f1", date: "Jan" },
  { id: "3", title: "Build",    description: "Components shipped.",    color: "#ec4899", date: "Feb" },
  { id: "4", title: "Launch",   description: "Registry live.",         color: "#10b981", date: "Feb" },
];

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

Cards

Variant 3 of 4

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.

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-lg mx-auto p-6 w-full">
      <AnimatedTimeline items={items} variant="cards" lineColor="#3f3f46" />
    </div>
  );
}

Steps

Variant 4 of 4

Install the CLI

Run npx uniqueui init in your project.

Add a component

Run npx uniqueui add animated-timeline.

Import and customise

Use variant, color, and date props as needed.

Ship to production

Zero runtime dependency — fully your code.

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

const items = [
  { id: "1", title: "Install the CLI",        description: "Run npx uniqueui init in your project.",         color: "#a855f7" },
  { id: "2", title: "Add a component",        description: "Run npx uniqueui add animated-timeline.",        color: "#6366f1" },
  { id: "3", title: "Import and customise",   description: "Use variant, color, and date props as needed.",  color: "#ec4899" },
  { id: "4", title: "Ship to production",     description: "Zero runtime dependency — fully your code.",     color: "#10b981" },
];

export default function Example() {
  return (
    <div className="max-w-sm mx-auto p-6 w-full">
      <AnimatedTimeline items={items} variant="steps" />
    </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.