diff --git a/site/_includes/timeline.njk b/site/_includes/timeline.njk
new file mode 100644
index 0000000000..1aad721223
--- /dev/null
+++ b/site/_includes/timeline.njk
@@ -0,0 +1,110 @@
+<div class="feature-timeline" id="{{ feature.id }}-timeline">
+</div>
+<script type="module" defer>
+  const featureTimelineContainer = document.getElementById("{{ feature.id }}-timeline");
+
+  const featureData = [
+    {% if feature.status.baseline === "low" %}
+      {
+        "event": "low",
+        "date": new Date("{{ feature.status.baseline_low_date }}"),
+        "datestring": "{{ feature.status.baseline_low_date }}"
+      },
+    {% endif %}
+    {% if feature.status.baseline === "high" %}
+      {
+        "event": "high",
+        "date": new Date("{{ feature.status.baseline_high_date }}"),
+        "datestring": "{{ feature.status.baseline_high_date }}"
+      },
+    {% endif %}
+    {% for browser in browsers %}
+      {% set version = feature.status.support[browser.id] %}
+      {% if version %}
+        {
+          "event": "{{ browser.id }}",
+          "date": new Date("{{ browser.releases[version].release_date }}"),
+          "datestring": "{{ browser.releases[version].release_date }}"
+        },
+      {% endif %}
+    {% endfor %}
+  ];
+
+  function getFeatureTimeline(timelineStart, timelineEnd) {
+    let data = [...featureData];
+
+    data.push({
+      "event": "start",
+      "date": new Date(timelineStart),
+      "datestring": timelineStart
+    });
+
+    data.push({
+      "event": "end",
+      "date": new Date(timelineEnd),
+      "datestring": timelineEnd
+    });
+
+    // Add year start events between start and end.
+    const startYear = new Date(timelineStart).getFullYear() + 1;
+    const endYear = new Date(timelineEnd).getFullYear();
+
+    for (let year = startYear; year <= endYear; year++) {
+      data.push({
+        "event": "year",
+        "date": new Date(year, 0, 1),
+        "datestring": year
+      });
+    }
+
+    data = data.sort((a, b) => a.date - b.date);
+
+    // Calculate the total time span.
+    const oneDay = 1000 * 60 * 60 * 24;
+    const firstDate = data[0].date;
+    const lastDate = data[data.length - 1].date;
+    const totalDays = (lastDate - firstDate) / oneDay;
+
+    // Calculate the position of each event.
+    return data.map(event => {
+      const days = (event.date - firstDate) / oneDay;
+      event.position = days / totalDays * 100;
+      return event;
+    });
+  }
+
+  function renderTimeline(timelineStart, timelineEnd) {
+    getFeatureTimeline(timelineStart, timelineEnd).forEach(event => {
+      if (event.event === "start" || event.event === "end") {
+        return;
+      }
+
+      const div = document.createElement("div");
+
+      div.classList.add("event", event.event);
+      if (event.event !== "year") {
+        div.dataset.event = event.event;
+        div.dataset.date = new Date(event.date).toLocaleDateString("en-US", { month: "long", year: "numeric" });
+      } else {
+        div.dataset.date = event.datestring;
+      }
+
+      div.style.left = event.position + "%";
+
+      featureTimelineContainer.appendChild(div);
+    });
+  }
+
+  // Render the initial timeline with, by default, a time span of
+  // 6 months before the first impl, and 6 months after the last event.
+  const [start, ...rest] = featureData.sort((a, b) => a.date - b.date);
+  const end = rest.splice(-1)[0];
+
+  const startDate = new Date(start.date);
+  startDate.setMonth(startDate.getMonth() - 6);
+
+  const endDate = new Date(end.date);
+  endDate.setMonth(endDate.getMonth() + 6);
+  
+  renderTimeline(startDate.toISOString().split("T")[0], endDate.toISOString().split("T")[0]);
+</script>
diff --git a/site/assets/styles.css b/site/assets/styles.css
index da1091fb6a..cdb7b7d8c4 100644
--- a/site/assets/styles.css
+++ b/site/assets/styles.css
@@ -170,12 +170,12 @@ h3 .subtext {
   /* FIXME: This is bad for accessibility. Change the order in which sub-tags are generated 
      in tags.njk instead. */
   flex-direction: row-reverse;
-  gap: .25rem;
+  gap: 0.25rem;
 }
 
 .tags .tag:has(.sub-tag) .sub-tag:not(:last-child)::before {
   content: ">";
-  margin-inline-end: .25rem;
+  margin-inline-end: 0.25rem;
 }
 
 .compat {
@@ -185,18 +185,18 @@ h3 .subtext {
 }
 
 .compat .browser {
-	--bg: var(--browser-unsupported-bg);
-	padding: 1.25rem 0.55rem 0.25rem 0.5rem;
-	border-radius: 0.25rem;
-	border: 2px solid color-mix(in srgb, var(--bg) 90%, black);
-	background-color: var(--bg);
-	background-position: center .25rem;
-	background-repeat: no-repeat;
-	background-size: 1rem;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	min-width: 4rem;
+  --bg: var(--browser-unsupported-bg);
+  padding: 1.25rem 0.55rem 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  border: 2px solid color-mix(in srgb, var(--bg) 90%, black);
+  background-color: var(--bg);
+  background-position: center 0.25rem;
+  background-repeat: no-repeat;
+  background-size: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 4rem;
 }
 
 .compat .browser.supported {
@@ -263,12 +263,23 @@ nav li {
 }
 
 nav li.monthly {
-  background-image: linear-gradient(to top right, var(--baseline-high-label-bg), var(--baseline-low-label-bg), var(--baseline-limited-label-bg));
+  background-image: linear-gradient(
+    to top right,
+    var(--baseline-high-label-bg),
+    var(--baseline-low-label-bg),
+    var(--baseline-limited-label-bg)
+  );
 }
 
-nav li.recent {background: var(--baseline-low-label-bg);}
-nav li.baseline {background: var(--baseline-high-label-bg);}
-nav li.nobaseline {background: var(--baseline-limited-label-bg);}
+nav li.recent {
+  background: var(--baseline-low-label-bg);
+}
+nav li.baseline {
+  background: var(--baseline-high-label-bg);
+}
+nav li.nobaseline {
+  background: var(--baseline-limited-label-bg);
+}
 
 .mdn-docs {
   display: flex;
@@ -287,15 +298,15 @@ nav li.nobaseline {background: var(--baseline-limited-label-bg);}
 }
 
 .mdn-docs-area::before {
-	content: attr(data-area);
-	text-transform: uppercase;
-	font-size: small;
-	padding: .25rem;
-	background: #fff5;
-	border: 2px solid #0003;
-	position: absolute;
-	inset: 0 0 auto auto;
-	border-width: 0 0 2px 2px;
+  content: attr(data-area);
+  text-transform: uppercase;
+  font-size: small;
+  padding: 0.25rem;
+  background: #fff5;
+  border: 2px solid #0003;
+  position: absolute;
+  inset: 0 0 auto auto;
+  border-width: 0 0 2px 2px;
 }
 
 .mdn-docs h4 {
@@ -365,7 +376,7 @@ nav li.nobaseline {background: var(--baseline-limited-label-bg);}
 
 .month-update h2 {
   display: flex;
-  gap: .5rem;
+  gap: 0.5rem;
   justify-content: space-between;
 }
 
@@ -374,7 +385,7 @@ nav li.nobaseline {background: var(--baseline-limited-label-bg);}
 }
 
 .groups li {
-  padding: .25rem;
+  padding: 0.25rem;
 }
 
 .groups li li {
@@ -387,7 +398,7 @@ nav li.nobaseline {background: var(--baseline-limited-label-bg);}
 
 .groups details[open] {
   background-image: linear-gradient(to right, black 1px, transparent 0);
-  background-position: .3rem 1rem;
+  background-position: 0.3rem 1rem;
   background-size: 100% calc(100% - 1rem);
   background-repeat: no-repeat;
 }
@@ -399,24 +410,88 @@ footer {
   font-size: smaller;
 }
 
-#timeline { 
+.feature-timeline {
+  width: 100%;
+  height: 2px;
+  background: black;
+  position: relative;
+  margin: 7rem 0;
+}
+
+.feature-timeline .event {
+  position: absolute;
+  top: -1rem;
+  bottom: -1rem;
+  width: 2px;
+  background: black;
+}
+
+.feature-timeline .event::before {
+  content: attr(data-event);
+  position: absolute;
+  bottom: 0;
+  transform: rotate(90deg) translateY(0.5rem);
+  transform-origin: bottom left;
+}
+
+.feature-timeline .event::after {
+  content: attr(data-date);
+  position: absolute;
+  width: 10rem;
+  top: 0;
+  transform: rotate(-90deg) translateY(-0.75rem);
+  transform-origin: top left;
+}
+
+.feature-timeline .event.year {
+  background: transparent;
+}
+
+.feature-timeline .event.year::after {
+  transform: translate(-1.2rem, 0.25rem);
+  font-size: 0.8rem;
+  font-weight: bold;
+  background: white;
+  width: unset;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  border: 1px solid black;
+  text-align: center;
+}
+
+.feature-timeline .event.low::before,
+.feature-timeline .event.high::before {
+  content: "";
+  width: 1.5rem;
+  height: 1.5rem;
+  background-image: url(./baseline-high.svg);
+  background-repeat: no-repeat;
+  transform: translate(-0.75rem, 1.5rem);
+  background-position: center;
+}
+
+.feature-timeline .event.low::before {
+  background-image: url(./baseline-low.svg);
+}
+
+#timeline {
   overflow-x: auto;
   overflow-y: auto;
   height: calc(100vh - 16rem);
   display: grid;
   grid-auto-columns: 7rem;
-  font-size: .6rem;
+  font-size: 0.6rem;
   gap: 1px;
   background: var(--text);
 }
 
 #timeline .timeline-year {
-	grid-row: 1;
-	display: grid;
-	grid-auto-rows: 1rem;
-	width: 6.5rem;
-	background: var(--background);
-	padding: 0 .25rem;
+  grid-row: 1;
+  display: grid;
+  grid-auto-rows: 1rem;
+  width: 6.5rem;
+  background: var(--background);
+  padding: 0 0.25rem;
 }
 #timeline .timeline-year h2 {
   font-size: inherit;
@@ -427,4 +502,4 @@ footer {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
\ No newline at end of file
+}
diff --git a/site/feature.njk b/site/feature.njk
index d0c9a9ddaf..b35276f008 100644
--- a/site/feature.njk
+++ b/site/feature.njk
@@ -9,4 +9,6 @@ eleventyComputed:
   title: "{{ feature.name }}"
 ---
 
-{% include "feature_full.njk" %}
\ No newline at end of file
+{% include "feature_full.njk" %}
+
+{% include "timeline.njk" %}