Timeline Lab · Visual Playground

01 — Centered Layout

Classic Vertical Timeline

The quintessential timeline layout — a centered vertical line with cards alternating left and right. A staple of company history and about pages.

Centered line — alternating cards CLASSIC

January 2024

Company Founded

Started with a small team of three passionate developers in a co-working space, fueled by a vision to simplify design tools.

June 2024

First Product Launch

Released the MVP to 500 beta testers. Feedback was overwhelmingly positive, validating the core concept and feature set.

October 2024

Seed Funding Round

Raised $2.5M in seed funding to scale the team, improve infrastructure, and expand the product feature set.

March 2025

10K Users Milestone

Crossed 10,000 active users and launched the team collaboration features that customers had been requesting.

<div class="cv-timeline">
  <div class="cv-item">
    <div class="cv-dot"></div>
    <div class="cv-card">
      <div class="cv-date">
        <i class="ph ph-calendar-blank"></i> January 2024
      </div>
      <h3>Event Title</h3>
      <p>Description of this milestone...</p>
    </div>
  </div>
  <!-- More items... -->
</div>

.cv-timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}
.cv-timeline::before {
  content: ''; position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  background: rgba(20,184,166,.4);
  transform: translateX(-50%);
}
.cv-item:nth-child(odd) {
  padding-right: calc(50% + 32px);
}
.cv-item:nth-child(even) {
  padding-left: calc(50% + 32px);
}
.cv-dot {
  position: absolute;
  left: 50%; top: 20px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #14b8a6;
  transform: translateX(-50%);
  box-shadow: 0 0 0 3px rgba(20,184,166,.25);
}

02 — Single Column

Left-Aligned Timeline

A clean single-column timeline with colored icon dots. Works great for work experience, education history, or changelogs.

Icon dots — tag badges LEFT

2024 — Present

Senior Frontend Developer

Leading the design system initiative and mentoring junior developers on modern CSS and component architecture.

ReactTypeScriptDesign System

2022 — 2024

Full-Stack Developer

Built and maintained a SaaS analytics platform serving 5K+ users with real-time data visualization dashboards.

Next.jsPostgreSQL

2020 — 2022

UI/UX Designer

Designed interfaces for mobile apps and web platforms, conducting user research and creating prototypes in Figma.

FigmaUser Research

2016 — 2020

Computer Science Degree

Graduated with honors, focusing on human-computer interaction and visual computing coursework.

HCIAlgorithms

2015

First Side Project

Built a personal blog and learned web development from scratch, sparking a passion for building on the web.

HTMLCSSJavaScript

<div class="la-timeline">
  <div class="la-item">
    <div class="la-icon">
      <i class="ph ph-briefcase"></i>
    </div>
    <div class="la-date">2024 &mdash; Present</div>
    <div class="la-card">
      <h3>Job Title</h3>
      <p>Description...</p>
      <div class="la-tags">
        <span class="la-tag">Skill</span>
      </div>
    </div>
  </div>
</div>

.la-timeline {
  position: relative;
  padding-left: 48px;
}
.la-timeline::before {
  content: ''; position: absolute;
  left: 18px; top: 0; bottom: 0;
  width: 2px;
  background: rgba(59,130,246,.3);
}
.la-icon {
  position: absolute;
  left: -48px; top: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center;
  justify-content: center;
  background: #3b82f6;
  border: 3px solid #0c0c14;
}

03 — Horizontal Layout

Horizontal Scroll Timeline

A scrollable horizontal timeline — great for company milestones and product journeys. Drag or scroll sideways to explore.

Overflow-x scroll — flex row HORIZONTAL

2019

Idea Born

Concept sketched on a napkin during a hackathon weekend

2020

First Prototype

Working prototype built with a team of two engineers

2021

Beta Launch

Opened to 1,000 beta users with core features live

2022

Series A

Raised $8M to scale engineering and go-to-market

2023

Global Expansion

Launched in 12 new markets across Europe and Asia

2024

100K Users

Crossed six figures in monthly active users

Scroll horizontally to explore

<div class="hz-wrap">
  <div class="hz-timeline">
    <div class="hz-item">
      <div class="hz-dot"></div>
      <div class="hz-card">
        <div class="hz-year">2019</div>
        <h3>Milestone</h3>
        <p>Description...</p>
      </div>
    </div>
    <!-- More items... -->
  </div>
</div>

.hz-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
}
.hz-timeline {
  display: flex;
  min-width: max-content;
  padding: 40px 0 20px;
  position: relative;
}
.hz-timeline::before {
  content: ''; position: absolute;
  top: 50px; left: 0; right: 0;
  height: 2px;
  background: rgba(245,158,11,.25);
}
.hz-item {
  width: 220px; flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: center;
}
.hz-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,.2);
}

04 — Numbered

Stacked Cards

Numbered steps with a connecting line. Perfect for processes, how-it-works sections, or step-by-step guides with visual hierarchy.

Numbered circles — connecting line STACKED

1

Phase 1 — Discovery

Research & Strategy

Conducted stakeholder interviews, competitive analysis, and user surveys to define the product vision and success metrics.

2

Phase 2 — Design

Wireframes & Prototyping

Created low-fidelity wireframes, iterated with usability testing, then built high-fidelity interactive prototypes.

3

Phase 3 — Development

Build & Iterate

Developed the frontend in React with a component-driven architecture, integrating the backend API in two-week sprints.

4

Phase 4 — Launch

Deploy & Monitor

Shipped to production with feature flags, set up monitoring dashboards, and ran a soft launch with 10% of traffic.

<div class="sc-timeline">
  <div class="sc-item">
    <div class="sc-line">
      <div class="sc-num">1</div>
    </div>
    <div class="sc-card">
      <div class="sc-card-date">Phase 1</div>
      <h3>Step Title</h3>
      <p>Description...</p>
    </div>
  </div>
</div>

.sc-item { display: flex; align-items: stretch; }
.sc-line {
  width: 60px; flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: center;
  position: relative;
}
.sc-line::after {
  content: ''; position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: rgba(236,72,153,.2);
  transform: translateX(-50%);
}
.sc-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center;
  justify-content: center;
  font-family: 'DM Serif Display', serif;
  border: 2px solid #ec4899;
  background: #0c0c14;
  z-index: 2;
}

05 — Compact

Minimal Dots

A lightweight, text-focused timeline with small colored dots. Ideal for changelogs, update logs, or compact event lists.

Dots + year — minimal chrome MINIMAL

2025

AI-powered search launched

Integrated natural language queries across the entire platform

2024

Mobile app released

Native iOS and Android apps with offline support

2024

Enterprise tier added

SSO, audit logs, and custom integrations for large teams

2023

Public API released

RESTful API with SDKs for Python, JavaScript, and Go

2023

Team collaboration features

Real-time editing, comments, and shared workspaces

2022

Product launch

First public release after 6 months of private beta

<div class="md-timeline">
  <div class="md-item">
    <div class="md-dot-wrap">
      <div class="md-dot"></div>
    </div>
    <div class="md-year">2025</div>
    <div class="md-content">
      <h3>Event title</h3>
      <p>Description...</p>
    </div>
  </div>
</div>

.md-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.md-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #14b8a6;
}
.md-year {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: rgba(255,255,255,.25);
  width: 48px; flex-shrink: 0;
}
.md-item:hover {
  background: rgba(255,255,255,.02);
  border-radius: 8px;
  padding-left: 12px;
}

06 — Full-Width

Split Panels

Date on one side, content on the other, with a center line connecting everything. Alternates sides for visual rhythm and balance.

Grid columns — alternating sides SPLIT

2024

Expanded to 30 Countries

Localized the platform in 12 languages and established regional partnerships across Europe, Asia, and South America.

Won Best SaaS Award

Recognized at the industry conference for innovation in user experience and developer tools.

2023

2022

Team Grew to 50

Hired across engineering, design, and marketing to support rapid product development and customer growth.

Open-Sourced Core Library

Released the core rendering engine as an open-source project, gaining 5K+ GitHub stars in the first month.

2021

<div class="sp-timeline">
  <div class="sp-item">
    <div class="sp-left">
      <div class="sp-date">2024</div>
    </div>
    <div class="sp-center">
      <div class="sp-dot"></div>
    </div>
    <div class="sp-right">
      <div class="sp-content">
        <h3>Event Title</h3>
        <p>Description...</p>
      </div>
    </div>
  </div>
</div>

.sp-item {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 160px;
}
.sp-center::before {
  content: ''; position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: rgba(74,222,128,.2);
}
.sp-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,.2);
}
/* Swap sides on even rows */
.sp-item:nth-child(even) .sp-left { order: 3; }
.sp-item:nth-child(even) .sp-right { order: 1; }

07 — Product Roadmap

Roadmap Timeline

A grid-based product roadmap with status badges and a horizontal connecting line. Great for product pages and investor decks.

Grid + gradient line — status badges ROADMAP

Complete

Core Platform

User auth, dashboard, and data pipeline built and deployed

Q1 2024

Complete

API & Integrations

REST API, webhooks, and third-party integrations launched

Q2 2024

In Progress

Mobile Apps

Native iOS and Android apps with push notifications

Q3 2024

Planned

AI Features

Smart suggestions, auto-categorization, and predictive analytics

Q4 2024

<div class="rm-timeline">
  <div class="rm-item">
    <div class="rm-dot"></div>
    <div class="rm-card">
      <div class="rm-status rm-status-done">
        <i class="ph ph-check-circle"></i> Complete
      </div>
      <h3>Feature Name</h3>
      <p>Description...</p>
      <div class="rm-quarter">Q1 2024</div>
    </div>
  </div>
</div>

.rm-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  position: relative;
}
.rm-timeline::before {
  content: ''; position: absolute;
  top: 28px; left: 20px; right: 20px;
  height: 3px;
  background: linear-gradient(to right,
    rgba(248,113,113,.4),
    rgba(245,158,11,.4),
    rgba(20,184,166,.4),
    rgba(59,130,246,.4)
  );
}
.rm-status-done {
  background: rgba(20,184,166,.12);
  color: #5eead4;
}
.rm-status-progress {
  background: rgba(245,158,11,.12);
  color: #fcd34d;
}

08 — Scroll Animation

Animated Reveal

Timeline items fade and slide in as you scroll. Uses Intersection Observer for smooth, performance-friendly entrance animations.

IntersectionObserver — fade + slide ANIMATED

December 2024

Design System v3 Released

Major update with dark mode support, new component variants, and improved accessibility across all primitives.

120+ components 45K downloads

August 2024

Community Plugins Marketplace

Launched an open marketplace for community-built plugins, enabling extensibility and third-party integrations.

80+ plugins 200+ contributors

March 2024

Performance Overhaul

Rewrote the rendering pipeline to achieve 60fps on mobile devices and reduced initial bundle size by 40%.

3x faster renders -40% bundle size

November 2023

Initial Open-Source Release

Published the project on GitHub under MIT license, attracting early adopters and collecting feedback for the roadmap.

2.5K stars 180 forks

<div class="ar-timeline">
  <div class="ar-item">
    <div class="ar-dot"></div>
    <div class="ar-year">December 2024</div>
    <div class="ar-card">
      <h3>Event Title</h3>
      <p>Description...</p>
      <div class="ar-metrics">
        <span class="ar-metric">
          <i class="ph ph-star"></i>
          <strong>2.5K</strong> stars
        </span>
      </div>
    </div>
  </div>
</div>

.ar-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.ar-item.visible {
  opacity: 1;
  transform: translateY(0);
}
.ar-dot {
  border: 3px solid #a855f7;
  background: #0c0c14;
  transition: transform .3s, box-shadow .3s;
}
.ar-item.visible .ar-dot {
  transform: scale(1.2);
  box-shadow: 0 0 8px rgba(168,85,247,.3);
}

var observer = new IntersectionObserver(
  function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
      }
    });
  },
  { threshold: 0.2 }
);

document.querySelectorAll('.ar-item')
  .forEach(function (item) {
    observer.observe(item);
  });