Timeline Component
Documentation, preview, and source code.
Mechanical Era
Mechanical Tools
Electronic Computing
Vacuum Tubes
Microprocessor Age
Integrated Circuits
Mobile Computing
Smartphones
Cloud Infrastructure
Data Centers
Artificial Intelligence
Machine Learning
Installation
1npm install motion1npm install motionUsage
1"use client"
2
3import Timeline, { TimelineItem } from "../custom-components/Timeline"
4
5const timelineData: TimelineItem[] = [
6 {
7 title: "Mechanical Era",
8 role: "Mechanical Tools",
9 date: "Pre-1800s",
10 description:
11 "Early machines powered by human or animal force, laying the foundation for automation.",
12 image: "/components/assets/a-brief-history-of-machine-tools.jpg",
13 },
14 {
15 title: "Electronic Computing",
16 role: "Vacuum Tubes",
17 date: "1940s–1950s",
18 description:
19 "The first electronic computers used vacuum tubes to perform calculations at scale.",
20 image: "/components/assets/vacuum-tube-computer-1940s.jpeg",
21 },
22 {
23 title: "Microprocessor Age",
24 role: "Integrated Circuits",
25 date: "1970s",
26 description:
27 "Single-chip CPUs enabled smaller, faster, and more affordable computing devices.",
28 image: "/components/assets/microprocessor-chip-1970s.avif",
29 },
30 {
31 title: "Mobile Computing",
32 role: "Smartphones",
33 date: "2007–2010s",
34 description: "Powerful handheld devices merged computing, communication, and the internet into one platform.",
35 image: "/components/assets/smartphone-evolution-timeline.webp",
36 },
37 {
38 title: "Cloud Infrastructure",
39 role: "Data Centers",
40 date: "2010s",
41 description: "Scalable cloud platforms replaced local servers with on-demand global infrastructure.",
42 image: "/components/assets/cloud-computing-data-center.webp",
43 },
44 {
45 title: "Artificial Intelligence",
46 role: "Machine Learning",
47 date: "2020s–Future",
48 description: "Algorithms capable of learning and reasoning now drive automation, insights, and new products.",
49 image: "/components/assets/artificial-intelligence-neural-network-illustration.png",
50 }
51]
52
53export default function TimelineDemo() {
54 return (
55 <div>
56 <Timeline items={timelineData} />
57 </div>
58 )
59}
601"use client"
2
3import Timeline, { TimelineItem } from "../custom-components/Timeline"
4
5const timelineData: TimelineItem[] = [
6 {
7 title: "Mechanical Era",
8 role: "Mechanical Tools",
9 date: "Pre-1800s",
10 description:
11 "Early machines powered by human or animal force, laying the foundation for automation.",
12 image: "/components/assets/a-brief-history-of-machine-tools.jpg",
13 },
14 {
15 title: "Electronic Computing",
16 role: "Vacuum Tubes",
17 date: "1940s–1950s",
18 description:
19 "The first electronic computers used vacuum tubes to perform calculations at scale.",
20 image: "/components/assets/vacuum-tube-computer-1940s.jpeg",
21 },
22 {
23 title: "Microprocessor Age",
24 role: "Integrated Circuits",
25 date: "1970s",
26 description:
27 "Single-chip CPUs enabled smaller, faster, and more affordable computing devices.",
28 image: "/components/assets/microprocessor-chip-1970s.avif",
29 },
30 {
31 title: "Mobile Computing",
32 role: "Smartphones",
33 date: "2007–2010s",
34 description: "Powerful handheld devices merged computing, communication, and the internet into one platform.",
35 image: "/components/assets/smartphone-evolution-timeline.webp",
36 },
37 {
38 title: "Cloud Infrastructure",
39 role: "Data Centers",
40 date: "2010s",
41 description: "Scalable cloud platforms replaced local servers with on-demand global infrastructure.",
42 image: "/components/assets/cloud-computing-data-center.webp",
43 },
44 {
45 title: "Artificial Intelligence",
46 role: "Machine Learning",
47 date: "2020s–Future",
48 description: "Algorithms capable of learning and reasoning now drive automation, insights, and new products.",
49 image: "/components/assets/artificial-intelligence-neural-network-illustration.png",
50 }
51]
52
53export default function TimelineDemo() {
54 return (
55 <div>
56 <Timeline items={timelineData} />
57 </div>
58 )
59}
60