Temporeum Timeline

An editable, responsive timeline for the web — from millennia down to seconds, with collision-free lanes, a keyboard equivalent for every gesture, server rendering, and zero runtime dependencies in the engine.

Live demo: Five thousand years, told: the chronology restyled from outside, with a story and a camera

Loading…

The code

Code — edit it and press Run

import { defaultTickLabel } from "@temporeum/timeline-core";
import { createTimeline, registerPlugin } from "@temporeum/timeline-element";
import { exportPlugin } from "@temporeum/timeline-element/export";
import { itemsPlugin } from "@temporeum/timeline-element/items";
import { mountStory } from "@temporeum/timeline-element/story";
import { toolsPlugin } from "@temporeum/timeline-element/tools";

// Points and item content (/items), lane names, the overview strip and tooltips (/tools), PNG, PDF and print (/export).
registerPlugin(itemsPlugin, toolsPlugin, exportPlugin);

// --- time -----------------------------------------------------------------------

// Date.UTC reads years 0–99 as 1900–1999; set the year explicitly instead.
function year(y) {
 const date = new Date(0);
 date.setUTCFullYear(y, 0, 1);
 return date.getTime();
}
const YEAR = 365.2425 * 86_400_000;
const HOUR = 3_600_000;
// The dates are given as historians write them, a minus for BC: -44 is 44 BC.
const era = (y) => (y < 0 ? `${String(-y)} BC` : `AD ${String(Math.max(1, y))}`);
const yearOf = (time) => new Date(time).getUTCFullYear();
const utc = new Intl.DateTimeFormat("en-GB", { day: "numeric", month: "long", year: "numeric", hour: "2-digit", minute: "2-digit", timeZone: "UTC" });
const days = new Intl.DateTimeFormat("en-GB", { day: "numeric", month: "long", year: "numeric", timeZone: "UTC" });

/** "2686 – 2181 BC", "AD 476 – 1453", "16–24 July 1969": an item's dates, the way a caption gives them. */
function years(item) {
 if (item.granularity === "minute") {
 if (item.end === undefined) return `${utc.format(item.start)} UTC`;
 return item.end - item.start > 86_400_000 ? days.formatRange(item.start, item.end) : `${utc.formatRange(item.start, item.end)} UTC`;
 }
 const from = yearOf(item.start);
 if (item.end === undefined) return era(from);
 const to = yearOf(item.end);
 if (to < 0) return `${String(-from)} – ${String(-to)} BC`;
 if (from < 0) return `${String(-from)} BC – AD ${String(to)}`;
 return from < 1000 ? `AD ${String(from)} – ${String(to)}` : `${String(from)} – ${String(to)}`;
}

// The axis in BC and AD, the way the dates are given; "Jul 1969" and "16 Jul" closer in, and the engine's hours.
const YEARS = new Set(["year", "decade", "century", "millennium"]);
const MONTH = new Intl.DateTimeFormat("en-GB", { month: "short", year: "numeric", timeZone: "UTC" });
const DAY = new Intl.DateTimeFormat("en-GB", { day: "numeric", month: "short", timeZone: "UTC" });
function formatTick(tick, timeZone) {
  // The label held at the start of the axis says what the ticks leave out: the month of a view of days, the day of a view of hours.
  if (tick.context) {
    if (tick.granularity === "day" || tick.granularity === "week") return MONTH.format(tick.time);
    return YEARS.has(tick.granularity) || tick.granularity === "month" ? "" : days.format(tick.time);
  }
  if (YEARS.has(tick.granularity)) return era(yearOf(tick.time));
  if (tick.granularity === "month") return MONTH.format(tick.time);
  if (tick.granularity === "day" || tick.granularity === "week") return DAY.format(tick.time);
  return defaultTickLabel(tick, timeZone);
}

// --- the regions, and the pictures the page draws for them ------------------------------

const lanes = [
  { id: "neareast", label: "Egypt & the Near East", color: "#ef9a62" },
  { id: "med", label: "Mediterranean", color: "#6fb0f0" },
  { id: "asia", label: "East Asia", color: "#4fd1a5" },
  { id: "americas", label: "The Americas", color: "#f2c94c" },
  { id: "europe", label: "Europe", color: "#f08bb0" },
  { id: "science", label: "Science", color: "#a98bff" },
  { id: "space", label: "Apollo 11", color: "#d7deea" },
];
const colorOf = Object.fromEntries(lanes.map((lane) => [lane.id, lane.color]));

/** A seeded random, so a picture is the same every time it is drawn. */
function seeded(text) {
  let s = 2166136261;
  for (const c of text) s = Math.imul(s ^ c.charCodeAt(0), 16777619) >>> 0;
  return () => ((s = (Math.imul(s, 1664525) + 1013904223) >>> 0) / 4294967296);
}

// Silhouettes on a 480 × 270 stage with the horizon at 214: `d` is the dark mass, `l` the lit edge.
const MOTIFS = {
 nile: (d, l) => `<circle cx="300" cy="150" r="38" fill="${l}" opacity=".9"/><path d="M0 214 C120 200 200 232 300 214 S420 200 480 212 V270 H0Z" fill="${d}"/><path d="M40 270 C140 236 260 250 330 226 S440 214 480 220" stroke="${l}" stroke-opacity=".5" stroke-width="5" fill="none"/>${[70, 96, 118].map((x) => `<path d="M${String(x)} 214 V170 M${String(x)} 170 l-10 -14 M${String(x)} 170 l10 -14 M${String(x)} 170 v-18" stroke="${d}" stroke-width="3"/>`).join("")}`,
 pyramids: (d, l) => `<circle cx="372" cy="92" r="24" fill="${l}" opacity=".85"/><path d="M40 214 L160 96 L280 214Z" fill="${d}"/><path d="M160 96 L280 214 H196Z" fill="${l}" opacity=".35"/><path d="M240 214 L318 136 L396 214Z" fill="${d}"/><path d="M318 136 L396 214 H340Z" fill="${l}" opacity=".3"/><path d="M380 214 L414 180 L448 214Z" fill="${d}"/><path d="M0 214 C140 206 340 222 480 210 V270 H0Z" fill="${d}"/>`,
 stele: (d, l) => `<path d="M186 214 V84 Q240 30 294 84 V214Z" fill="${d}"/><path d="M200 84 Q240 48 280 84" stroke="${l}" stroke-width="3" fill="none" opacity=".7"/>${Array.from({ length: 9 }, (_, i) => `<path d="M204 ${String(104 + i * 11)} H276" stroke="${l}" stroke-width="3" stroke-dasharray="4 5" opacity=".55"/>`).join("")}<rect x="0" y="214" width="480" height="56" fill="${d}"/>`,
 ding: (d, l) => `<path d="M168 112 H312 Q306 182 240 186 Q174 182 168 112Z" fill="${d}"/><path d="M180 112 V88 h16 v24 M284 112 V88 h16 v24" stroke="${d}" stroke-width="7" fill="none"/><path d="M196 178 L186 214 M240 186 V214 M284 178 L294 214" stroke="${d}" stroke-width="9"/><path d="M182 130 H298" stroke="${l}" stroke-width="3" stroke-dasharray="8 6" opacity=".6"/><rect x="0" y="214" width="480" height="56" fill="${d}"/>`,
 wreath: (d, l) => `${Array.from({ length: 9 }, (_, i) => { const a = Math.PI * (0.58 + i * 0.1); return [-1, 1].map((side) => `<ellipse cx="${String(240 + side * Math.cos(a) * 70)}" cy="${String(132 - Math.sin(a) * -70)}" rx="14" ry="6" transform="rotate(${String(side * (i * 11 - 20))} ${String(240 + side * Math.cos(a) * 70)} ${String(132 - Math.sin(a) * -70)})" fill="${l}" opacity=".85"/>`).join(""); }).join("")}<rect x="0" y="232" width="480" height="38" fill="${d}"/>`,
 temple: (d, l) => `<path d="M104 104 L240 56 L376 104Z" fill="${d}"/><rect x="112" y="104" width="256" height="14" fill="${d}"/>${Array.from({ length: 6 }, (_, i) => `<rect x="${String(128 + i * 44)}" y="122" width="18" height="84" fill="${d}"/><rect x="${String(140 + i * 44)}" y="122" width="5" height="84" fill="${l}" opacity=".35"/>`).join("")}<rect x="104" y="204" width="272" height="10" fill="${d}"/><rect x="0" y="214" width="480" height="56" fill="${d}"/>`,
 wall: (d, l) => `<path d="M0 214 L60 176 L140 196 L230 150 L320 184 L400 158 L480 176 V270 H0Z" fill="${d}"/><path d="M0 196 L60 158 L140 178 L230 132 L320 166 L400 140 L480 158" stroke="${l}" stroke-width="10" fill="none" opacity=".55" stroke-dasharray="10 4"/><rect x="222" y="104" width="18" height="30" fill="${d}"/>`,
 volcano: (d, l) => `${[[236, 70, 34], [266, 52, 28], [210, 50, 24], [250, 28, 22]].map(([x, y, r]) => `<circle cx="${String(x)}" cy="${String(y)}" r="${String(r)}" fill="${l}" opacity=".28"/>`).join("")}<path d="M60 214 L210 104 H262 L420 214Z" fill="${d}"/><path d="M214 106 L236 128 L258 106" stroke="${l}" stroke-width="4" fill="none" opacity=".8"/><rect x="0" y="214" width="480" height="56" fill="${d}"/>`,
 stepped: (d, l) => `${Array.from({ length: 6 }, (_, i) => `<rect x="${String(120 + i * 20)}" y="${String(194 - i * 20)}" width="${String(240 - i * 40)}" height="20" fill="${d}"/>`).join("")}<rect x="208" y="54" width="64" height="40" fill="${d}"/><rect x="230" y="66" width="20" height="28" fill="${l}" opacity=".6"/><path d="M232 214 L240 94 L248 214Z" fill="${l}" opacity=".25"/><rect x="0" y="214" width="480" height="56" fill="${d}"/>`,
 pagoda: (d, l) => `<path d="M0 214 L90 150 L170 196 L300 120 L400 186 L480 150 V270 H0Z" fill="${l}" opacity=".18"/>${Array.from({ length: 5 }, (_, i) => { const y = 204 - i * 30; const w = 150 - i * 24; return `<rect x="${String(240 - w / 2 + 12)}" y="${String(y - 14)}" width="${String(w - 24)}" height="14" fill="${d}"/><path d="M${String(240 - w / 2 - 14)} ${String(y - 14)} Q240 ${String(y - 34)} ${String(240 + w / 2 + 14)} ${String(y - 14)} L${String(240 + w / 2 - 4)} ${String(y - 20)} H${String(240 - w / 2 + 4)}Z" fill="${d}"/>`; }).join("")}<path d="M240 66 V40" stroke="${d}" stroke-width="4"/><rect x="0" y="214" width="480" height="56" fill="${d}"/>`,
 scroll: (d, l) => `<rect x="150" y="70" width="180" height="130" fill="${l}" opacity=".85"/><rect x="138" y="60" width="18" height="150" rx="9" fill="${d}"/><rect x="324" y="60" width="18" height="150" rx="9" fill="${d}"/>${Array.from({ length: 8 }, (_, i) => `<path d="M170 ${String(88 + i * 13)} H${String(i === 7 ? 250 : 310)}" stroke="${d}" stroke-width="3" opacity=".55"/>`).join("")}<circle cx="290" cy="186" r="11" fill="#8b2a2a"/><rect x="0" y="226" width="480" height="44" fill="${d}"/>`,
 type: (d, l) => `${Array.from({ length: 40 }, (_, i) => `<rect x="${String(112 + (i % 10) * 26)}" y="${String(84 + Math.floor(i / 10) * 30)}" width="20" height="24" rx="2" fill="${i === 13 ? l : d}" opacity="${i === 13 ? "1" : ".9"}"/>`).join("")}<text x="191" y="137" font-family="Georgia,serif" font-size="20" text-anchor="middle" fill="${d}">A</text><rect x="0" y="214" width="480" height="56" fill="${d}"/>`,
 dome: (d, l) => `<path d="M150 214 V150 Q240 64 330 150 V214Z" fill="${d}"/><path d="M178 128 Q240 80 302 128" stroke="${l}" stroke-width="3" fill="none" opacity=".6"/>${[110, 370].map((x) => `<rect x="${String(x - 5)}" y="96" width="10" height="118" fill="${d}"/><path d="M${String(x - 6)} 98 L${String(x)} 66 L${String(x + 6)} 98Z" fill="${d}"/>`).join("")}<circle cx="372" cy="70" r="12" fill="${l}" opacity=".8"/><circle cx="378" cy="66" r="11" fill="#07090d" opacity=".9"/><rect x="0" y="214" width="480" height="56" fill="${d}"/>`,
 ship: (d, l) => `<path d="M150 186 H340 L316 214 H170Z" fill="${d}"/>${[[196, 100, 34], [246, 76, 42], [296, 104, 30]].map(([x, top, w]) => `<path d="M${String(x)} 186 V${String(top - 10)}" stroke="${d}" stroke-width="4"/><path d="M${String(x - w / 2)} ${String(top)} Q${String(x)} ${String(top + 12)} ${String(x + w / 2)} ${String(top)} L${String(x + w / 2 + 4)} ${String(top + 60)} Q${String(x)} ${String(top + 74)} ${String(x - w / 2 - 4)} ${String(top + 60)}Z" fill="${l}" opacity=".85"/>`).join("")}<path d="M0 214 Q30 206 60 214 T120 214 T180 214 T240 214 T300 214 T360 214 T420 214 T480 214 V270 H0Z" fill="${d}"/>`,
 orbits: (d, l) => `<circle cx="240" cy="132" r="26" fill="${l}"/>${[[96, 30, -14], [150, 46, 10], [196, 60, -4]].map(([rx, ry, rot], i) => `<ellipse cx="240" cy="132" rx="${String(rx)}" ry="${String(ry)}" transform="rotate(${String(rot)} 240 132)" fill="none" stroke="${l}" stroke-opacity=".45"/><circle cx="${String(240 + rx * Math.cos(i * 2.1))}" cy="${String(132 + ry * Math.sin(i * 2.1))}" r="${String(5 + i * 2)}" fill="${l}" opacity=".9"/>`).join("")}`,
 flag: (d, l) => `<path d="M150 214 V64" stroke="${d}" stroke-width="5"/>${["#2a4c8f", "#efe7d6", "#b23a3a"].map((fill, i) => `<path d="M${String(153 + i * 60)} 70 Q${String(183 + i * 60)} ${String(58 + (i % 2) * 10)} ${String(213 + i * 60)} 70 V150 Q${String(183 + i * 60)} ${String(138 + (i % 2) * 10)} ${String(153 + i * 60)} 150Z" fill="${fill}" opacity=".9"/>`).join("")}<rect x="0" y="214" width="480" height="56" fill="${d}"/>`,
 tree: (d, l) => {
 const random = seeded("tree");
 const out = [];
 const grow = (x, y, angle, length, depth) => {
 const x2 = x + Math.cos(angle) * length;
 const y2 = y - Math.sin(angle) * length;
 out.push(`<path d="M${x.toFixed(1)} ${y.toFixed(1)} L${x2.toFixed(1)} ${y2.toFixed(1)}" stroke="${depth > 3 ? d : l}" stroke-width="${String(Math.max(1, depth * 1.6))}" stroke-linecap="round"/>`);
 if (depth === 0) out.push(`<circle cx="${x2.toFixed(1)}" cy="${y2.toFixed(1)}" r="3" fill="${l}"/>`);
 else for (const turn of [-0.42, 0.42]) grow(x2, y2, angle + turn + (random() - 0.5) * 0.3, length * 0.74, depth - 1);
 };
 grow(240, 214, Math.PI / 2, 46, 6);
 return `${out.join("")}<rect x="0" y="214" width="480" height="56" fill="${d}"/>`;
 },
 moon: (d, l) => `<circle cx="368" cy="74" r="30" fill="#4f82c8"/><path d="M368 44 A30 30 0 0 1 368 104 A18 30 0 0 0 368 44Z" fill="#07090d" opacity=".55"/><path d="M0 200 C120 186 300 208 480 192 V270 H0Z" fill="${d}"/>${[[90, 232, 34], [300, 240, 22], [410, 222, 16]].map(([x, y, r]) => `<ellipse cx="${String(x)}" cy="${String(y)}" rx="${String(r)}" ry="${String(r / 4)}" fill="#07090d" opacity=".35"/>`).join("")}<path d="M190 190 L206 150 H254 L270 190" stroke="${l}" stroke-width="3" fill="none"/><path d="M208 150 L216 124 H244 L252 150Z" fill="${l}"/><rect x="220" y="110" width="20" height="14" fill="${l}" opacity=".8"/>`,
 footprint: (d, l) => `<circle cx="96" cy="70" r="22" fill="#4f82c8"/><path d="M0 120 C160 104 320 130 480 112 V270 H0Z" fill="${d}"/><g transform="rotate(-14 240 190)"><path d="M206 150 Q240 130 274 150 V180 Q240 190 206 180Z M210 196 Q240 188 270 196 V226 Q240 242 210 226Z" fill="${l}" opacity=".4"/>${Array.from({ length: 6 }, (_, i) => `<rect x="208" y="${String(156 + i * 13)}" width="64" height="5" fill="#07090d" opacity=".55"/>`).join("")}</g><path d="M372 120 V40" stroke="${l}" stroke-width="3"/><rect x="374" y="42" width="44" height="28" fill="${l}" opacity=".85"/>`,
 web: (d, l) => {
 const random = seeded("web");
 const nodes = Array.from({ length: 18 }, () => [100 + random() * 280, 40 + random() * 150]);
 const links = nodes.flatMap(([x, y], i) => nodes.slice(i + 1).filter(([u, v]) => Math.hypot(u - x, v - y) < 92).map(([u, v]) => `<path d="M${x.toFixed(0)} ${y.toFixed(0)} L${u.toFixed(0)} ${v.toFixed(0)}" stroke="${l}" stroke-opacity=".4"/>`));
 return `${links.join("")}${nodes.map(([x, y], i) => `<circle cx="${x.toFixed(0)}" cy="${y.toFixed(0)}" r="${String(i % 5 === 0 ? 6 : 3)}" fill="${l}"/>`).join("")}<rect x="0" y="214" width="480" height="56" fill="${d}"/>`;
 },
 // Five thousand years in one skyline: a pyramid, a temple, a pagoda, a dome — and a rocket on its way to the Moon.
 title: (d, l) => `<circle cx="240" cy="214" r="150" fill="${l}" opacity=".1"/><circle cx="240" cy="214" r="84" fill="${l}" opacity=".14"/><path d="M444 92 Q470 40 424 40" stroke="${l}" stroke-width="1.5" stroke-dasharray="3 5" fill="none" opacity=".7"/><circle cx="410" cy="40" r="14" fill="#efe7d6" opacity=".9"/><circle cx="416" cy="36" r="12.5" fill="#07090d"/><path d="M20 214 L84 146 L148 214Z" fill="${d}"/><path d="M84 146 L148 214 H104Z" fill="${l}" opacity=".3"/><path d="M158 168 L204 148 L250 168Z" fill="${d}"/>${Array.from({ length: 4 }, (_, i) => `<rect x="${String(166 + i * 22)}" y="170" width="9" height="44" fill="${d}"/>`).join("")}${Array.from({ length: 3 }, (_, i) => { const y = 206 - i * 22; const w = 64 - i * 14; return `<rect x="${String(292 - w / 2 + 6)}" y="${String(y - 10)}" width="${String(w - 12)}" height="18" fill="${d}"/><path d="M${String(292 - w / 2 - 8)} ${String(y - 10)} Q292 ${String(y - 24)} ${String(292 + w / 2 + 8)} ${String(y - 10)}Z" fill="${d}"/>`; }).join("")}<path d="M292 128 V112" stroke="${d}" stroke-width="3"/><path d="M336 214 V184 Q364 146 392 184 V214Z" fill="${d}"/><rect x="398" y="150" width="6" height="64" fill="${d}"/><path d="M397 152 L401 134 L405 152Z" fill="${d}"/><rect x="438" y="110" width="12" height="104" fill="${d}"/><path d="M438 110 L444 90 L450 110Z" fill="${d}"/><path d="M438 196 L428 214 H438Z M450 196 L460 214 H450Z" fill="${d}"/><rect x="0" y="212" width="480" height="58" fill="${d}"/>`,
};

/** A picture of the page's own, so the story needs no image host: a night sky, a horizon, the motif. */
function picture(motif, color, alt) {
 const random = seeded(motif + color);
 const stars = Array.from({ length: 34 }, () => `<circle cx="${(random() * 480).toFixed(0)}" cy="${(random() * 150).toFixed(0)}" r="${(random() * 1.1 + 0.3).toFixed(2)}" fill="#fff" opacity="${(random() * 0.6 + 0.2).toFixed(2)}"/>`).join("");
 const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270"><defs><linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#07090d"/><stop offset=".75" stop-color="${color}" stop-opacity=".45"/><stop offset="1" stop-color="${color}" stop-opacity=".7"/></linearGradient></defs><rect width="480" height="270" fill="#07090d"/><rect width="480" height="270" fill="url(#sky)"/>${stars}${MOTIFS[motif]("#07090d", color)}</svg>`;
 return { url: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`, alt };
}

// --- the items, and the twenty-one that tell the story ----------------------------------------

/** @typedef {import("@temporeum/timeline-core").Item<any> & { start: number; end?: number }} Moment */
/** @returns {Moment} */
const known = (id, label, laneId, from, to) => ({ id, label, laneId, start: year(from), ...(to === undefined ? {} : { end: year(to) }), granularity: "year" });
/** @returns {Moment} */
const minute = (id, label, iso, endIso) => ({ id, label, laneId: "space", start: Date.parse(iso), ...(endIso === undefined ? {} : { end: Date.parse(endIso) }), granularity: "minute" });

const events = [
  known("egypt-unified", "Egypt unified", "neareast", -3100),
  known("old-kingdom", "Old Kingdom", "neareast", -2686, -2181),
  known("pyramid", "Great Pyramid of Giza", "neareast", -2560),
  known("middle-kingdom", "Middle Kingdom", "neareast", -2055, -1650),
  known("hammurabi", "Code of Hammurabi", "neareast", -1754),
  known("new-kingdom", "New Kingdom", "neareast", -1550, -1069),
  known("ramesses", "Ramesses II", "neareast", -1279, -1213),
  known("babylon", "Cyrus takes Babylon", "neareast", -539),
  known("olympics", "First Olympic Games", "med", -776),
  known("rome", "Rome founded", "med", -753),
  known("republic", "Roman Republic", "med", -509, -27),
  known("athens", "Classical Athens", "med", -480, -323),
  known("alexander", "Alexander the Great", "med", -336, -323),
  known("caesar", "Caesar assassinated", "med", -44),
  known("empire", "Roman Empire in the west", "med", -27, 476),
  known("pompeii", "Vesuvius buries Pompeii", "med", 79),
  known("constantinople", "Constantinople founded", "med", 330),
  known("byzantium", "Byzantine Empire", "med", 476, 1453),
  known("fall", "Fall of Constantinople", "med", 1453),
  known("shang", "Shang dynasty", "asia", -1600, -1046),
  known("confucius", "Confucius born", "asia", -551),
  known("qin", "Qin unifies China", "asia", -221),
  known("han", "Han dynasty", "asia", -202, 220),
  known("tang", "Tang dynasty", "asia", 618, 907),
  known("genghis", "Genghis Khan proclaimed", "asia", 1206),
  known("ming", "Ming dynasty", "asia", 1368, 1644),
  known("edo", "Edo period", "asia", 1603, 1868),
  known("meiji", "Meiji Restoration", "asia", 1868),
  known("olmec", "Olmec civilisation", "americas", -1200, -400),
  known("maya", "Classic Maya", "americas", 250, 900),
  known("tenochtitlan", "Tenochtitlan founded", "americas", 1325),
  known("inca", "Inca Empire", "americas", 1438, 1533),
  known("columbus", "Columbus reaches the Caribbean", "americas", 1492),
  known("independence", "US Declaration of Independence", "americas", 1776),
  known("charlemagne", "Charlemagne crowned", "europe", 800),
  known("hastings", "Battle of Hastings", "europe", 1066),
  known("magna-carta", "Magna Carta", "europe", 1215),
  known("black-death", "Black Death", "europe", 1347, 1351),
  known("press", "Printing press in Mainz", "europe", 1450),
  known("theses", "Luther's 95 theses", "europe", 1517),
  known("revolution", "French Revolution", "europe", 1789, 1799),
  known("wwi", "First World War", "europe", 1914, 1918),
  known("wwii", "Second World War", "europe", 1939, 1945),
  known("wall", "Berlin Wall falls", "europe", 1989),
  known("euclid", "Euclid's Elements", "science", -300),
  known("copernicus", "Copernicus: the Sun at the centre", "science", 1543),
  known("principia", "Newton's Principia", "science", 1687),
  known("origin", "On the Origin of Species", "science", 1859),
  known("relativity", "Special relativity", "science", 1905),
  known("dna", "DNA double helix", "science", 1953),
  known("sputnik", "Sputnik 1", "science", 1957),
  known("hubble", "Hubble launched", "science", 1990),
  known("web", "The World Wide Web", "science", 1991),
  minute("apollo", "Apollo 11", "1969-07-16T13:32Z", "1969-07-24T16:50Z"),
  minute("launch", "Launch from Florida", "1969-07-16T13:32Z"),
  minute("orbit", "Into lunar orbit", "1969-07-19T17:21Z"),
  minute("landing", "Eagle lands", "1969-07-20T20:17Z"),
  minute("step", "First step", "1969-07-21T02:56Z"),
  minute("eva", "Moonwalk", "1969-07-21T02:39Z", "1969-07-21T05:11Z"),
  minute("ascent", "Lift-off from the Moon", "1969-07-21T17:54Z"),
  minute("splashdown", "Splashdown", "1969-07-24T16:50Z"),
];

// The story: a slide for twenty-one of the items, a picture and a view for each — how much time
// the camera shows around it, in years, or in hours for Apollo 11.
const STORY = {
 "egypt-unified": { motif: "nile", view: 1400, date: "c. 3100 BC", text: "Upper and Lower Egypt become one kingdom under one king — Narmer, by tradition. The Nile's summer flood feeds the first nation-state, and hieroglyphs are already being written." },
 pyramid: { motif: "pyramids", view: 1400, date: "c. 2560 BC", text: "Built for the pharaoh Khufu from some 2.3 million blocks. At 146 metres it stayed the tallest thing people had built for more than three and a half thousand years — the only one of the Seven Wonders still standing." },
 hammurabi: { motif: "stele", view: 1400, date: "c. 1754 BC", text: "Babylon's king has 282 laws carved into a basalt stele: an eye for an eye, but also wages, loans and what a builder owes if a house falls down. Found in 1901, the stele is in the Louvre." },
 shang: { motif: "ding", view: 1500, text: "The first Chinese dynasty known from its own writing: questions to the ancestors, scratched on turtle shells and ox bones and cracked with heat. Its foundries cast ritual vessels in bronze, the largest over 800 kg." },
 olympics: { motif: "wreath", view: 900, date: "776 BC, by tradition", text: "The first Games at Olympia: a single footrace, the stadion, about 192 metres. The Greeks went on to count their years in Olympiads." },
 athens: { motif: "temple", view: 900, text: "From the victory at Salamis to the death of Alexander: democracy in the assembly, the Parthenon on the Acropolis, the plays of Sophocles and the questions of Socrates." },
 qin: { motif: "wall", view: 900, text: "Ying Zheng conquers the last of the warring states and names himself Qin Shi Huang, the First Emperor. One script, one coinage, one set of weights — and an army of terracotta soldiers to guard his tomb." },
 caesar: { motif: "wreath", view: 600, date: "15 March 44 BC", text: "On the Ides of March, senators stab the dictator Julius Caesar. The Republic they meant to save does not outlive him: seventeen years later his heir Octavian becomes Augustus." },
 pompeii: { motif: "volcano", view: 600, date: "AD 79", text: "Vesuvius erupts and buries Pompeii and Herculaneum under ash and pumice. Kept as it fell, the town is the clearest picture of everyday Roman life there is." },
 maya: { motif: "stepped", view: 1400, text: "The city-states of the lowlands — Tikal, Calakmul, Palenque, Copán — raise temple-pyramids, follow Venus across the sky, and write their kings' histories in glyphs, dated in a calendar of interlocking cycles." },
 tang: { motif: "pagoda", view: 900, text: "Chang'an, at the eastern end of the Silk Road, is perhaps the largest city in the world. The age of the poets Li Bai and Du Fu — and of the oldest dated printed book, the Diamond Sutra of 868." },
 "magna-carta": { motif: "scroll", view: 500, date: "June 1215", text: "At Runnymede, King John's barons make him seal a charter: no free man to be imprisoned except by the lawful judgement of his peers, or by the law of the land. Annulled within months, reissued for centuries." },
 press: { motif: "type", view: 400, date: "c. 1450", text: "In Mainz, Johannes Gutenberg brings together movable metal type, an oil-based ink and a press. His Bible follows a few years later; by 1500, presses are at work in more than 250 European towns." },
 fall: { motif: "dome", view: 400, date: "29 May 1453", text: "After a siege of fifty-three days, the Ottoman sultan Mehmed II takes Constantinople. The last of the Roman Empire ends, and Hagia Sophia becomes a mosque." },
 columbus: { motif: "ship", view: 400, date: "12 October 1492", text: "Sailing west for Asia with three ships, Christopher Columbus lands in the Bahamas. The exchange that follows — of crops, animals and diseases — changes both worlds, and devastates the peoples who were already there." },
 principia: { motif: "orbits", view: 250, text: "Isaac Newton's Philosophiæ Naturalis Principia Mathematica: three laws of motion and one of gravitation, the same for a falling apple and for the Moon." },
 revolution: { motif: "flag", view: 120, text: "From the storming of the Bastille to Napoleon's coup: the end of an absolute monarchy, the Declaration of the Rights of Man and of the Citizen, the Terror — and the metric system." },
 origin: { motif: "tree", view: 160, date: "24 November 1859", text: "Charles Darwin publishes On the Origin of Species: the variety of life explained by descent with modification, through natural selection." },
 landing: { motif: "moon", hours: 10, headline: "The Eagle has landed", text: "Neil Armstrong flies the lunar module past a field of boulders and sets it down in the Sea of Tranquillity, with less than a minute of fuel to spare. The axis is in hours now — the same timeline, the same zoom." },
 step: { motif: "footprint", hours: 4, headline: "One small step", text: "Six and a half hours after the landing, Armstrong steps onto the Moon: “That's one small step for man, one giant leap for mankind.” Some 600 million people are watching." },
 web: { motif: "web", view: 120, text: "Tim Berners-Lee's World Wide Web, written at CERN, is opened to everyone: pages, links and addresses. The page you are reading is one of them." },
};

/** @type {Moment[]} */
const items = events.map((item) => {
  const told = STORY[item.id];
  const className = `lane-${item.laneId}${told === undefined ? "" : " has-slide"}`;
  // An instant is a point on its stem; a span is a bar.
  const kind = item.end === undefined ? "point" : "range";
  if (told === undefined) return { ...item, kind, className };
  const media = picture(told.motif, colorOf[item.laneId], `Illustration: ${item.label}`);
  const slide = { headline: told.headline ?? item.label, text: told.text, media, background: colorOf[item.laneId], ...(told.date === undefined ? {} : { date: told.date }) };
  // The year, set large behind the slide.
  const numeral = item.granularity === "minute" ? "1969" : era(yearOf(item.start)).replace("AD ", "");
  return { ...item, kind, className, data: { story: slide, numeral, view: told.view === undefined ? told.hours * HOUR : told.view * YEAR } };
});

// --- the timeline -----------------------------------------------------------------

// A theme is an object with every token named: the night sky, ivory type, gold for what matters.
const CHRONICLE = {
  name: "chronicle",
  tokens: {
    surface: "#07090d",
    surfaceAlt: "#0c0f15",
    text: "#f2ede4",
    textMuted: "#8f8a80",
    line: "#151a23",
    lineStrong: "#3a3a36",
    itemFill: "#171c26",
    itemStroke: "#e8c27a",
    itemText: "#f2ede4",
    accent: "#e8c27a",
    now: "#ff8a6b",
    era: "#0a0d13",
    eraText: "#bba679",
    marker: "#e8c27a",
    focus: "#f5d99c",
  },
};

// The same sky on paper: ivory stock, ink type, the gold turned to bronze so it still reads.
const PAPER = {
  name: "chronicle-paper",
  tokens: {
    surface: "#fbf8f1",
    surfaceAlt: "#f3eee2",
    text: "#1b1812",
    textMuted: "#6f685a",
    line: "#e6dfce",
    lineStrong: "#b9ae93",
    itemFill: "#efe6d0",
    itemStroke: "#9a7424",
    itemText: "#1b1812",
    accent: "#9a7424",
    now: "#c2442a",
    era: "#f0e9d8",
    eraText: "#7a6a3c",
    marker: "#9a7424",
    focus: "#7a5a14",
  },
};

// The ages, drawn as bands behind the items and as the overview's sections, which fly to them.
const ERAS = [
  { id: "bronze", label: "Bronze Age", start: year(-3300), end: year(-1200), view: [year(-3250), year(-1150)] },
  { id: "antiquity", label: "Antiquity", start: year(-1200), end: year(476), view: [year(-900), year(600)] },
  { id: "medieval", label: "Middle Ages", start: year(476), end: year(1492), view: [year(420), year(1540)] },
  { id: "modern", label: "Modern", start: year(1492), end: year(2060), view: [year(1440), year(2030)] },
];
/** @type {[number, number]} */
const WHOLE = [year(-3300), year(2060)];
/** @type {[number, number]} */
const APOLLO = [Date.parse("1969-07-15T18:00Z"), Date.parse("1969-07-25T12:00Z")];

// The labels are measured in the font they are drawn in, so the font is loaded first. A font that cannot
// be fetched (offline, say) is no reason to stop: the page falls back to the system's.
const SANS = "Geist, system-ui, sans-serif";
await Promise.allSettled(["400 13px Geist", "500 13px Geist", "500 11px 'Geist Mono'", "400 40px 'Instrument Serif'", "italic 400 40px 'Instrument Serif'"].map((font) => document.fonts.load(font)));

// A bar shows its name and years inside only when they fit; a narrow one is labelled beside itself.
const measure = document.createElement("canvas").getContext("2d");
measure.font = `500 13px ${SANS}`;
const host = document.querySelector("#timeline");
const chronicle = document.querySelector("#chronicle");
let timeline;
// Which way the timeline is drawn: down below its 640 px breakpoint ("auto"), across above it.
let vertical = host.clientWidth < 640;
function roomy(item) {
 // Down a phone a bar is a column one row wide: its name is the timeline's own label.
 if (item.end === undefined || vertical) return false;
 const [from, to] = timeline?.getSnapshot().domain ?? WHOLE;
 return ((item.end - item.start) / (to - from)) * host.clientWidth >= measure.measureText(item.label).width + 30;
}

// What the timeline is, whatever it is drawn on: the screen, or a sheet of paper (below).
/** @satisfies {Partial<import("@temporeum/timeline-element").TimelineConfig<any>>} */
const SETTINGS = {
 lanes: lanes.map(({ id, label }) => ({ id, label })),
 ariaLabel: "Five thousand years of history, from Egypt to the Moon",
 // Sizes are configuration: rows with air between them, round corners, the labels in Geist.
 metrics: { rowSize: 30, rowGap: 10, laneGap: 26, fontSize: 13, lineHeight: 16, labelPadding: 8, cornerRadius: 8, tickFontSize: 11, axisSize: 40, fontFamily: SANS },
 // On paper (the exports below) the timeline is a strip across; on screen it turns vertical on a phone (below).
 orientation: "horizontal",
 locale: "en-GB",
 formatTick,
 limits: { min: year(-3500), max: year(2100), minSpanMs: 10 * 60_000 },
 cluster: true,
 laneHeaders: true,
 decorations: /** @type {import("@temporeum/timeline-core").Decoration[]} */ ([...ERAS.map(({ id, label, start, end }) => ({ kind: "era", id, label, start, end, className: `era-${id}` })), { kind: "now", time: Date.now(), label: "Today" }]),
};

// Down a phone a lane is a column: its rows as wide as a name, and the axis wide enough for "3000 BC".
const ACROSS = SETTINGS.metrics;
const DOWN = { ...ACROSS, rowSize: 132, rowGap: 8, laneGap: 18, axisSize: 64 };
// The sizes the lanes are zoomed from (the overview's lens, below): the ones for the way the timeline is drawn.
let BASE = vertical ? DOWN : ACROSS;
// How far the lanes are zoomed from those sizes, and whether the reader zoomed them (the overview's lens, below).
let rows = 1;
let manual = false;
// The whole five thousand years in view. Down a phone the lane names head the columns, so the view starts two
// centuries earlier, and the first pharaoh's dot clears them.
const everything = () => (vertical ? [year(-3500), WHOLE[1]] : WHOLE);

timeline = createTimeline(host, {
  ...SETTINGS,
  // Across a desktop, down a phone: the container's width decides, and goes on deciding as it changes.
  orientation: "auto",
  metrics: BASE,
  items,
  theme: CHRONICLE,
  domain: everything(),
  tooltip: (item) => `${item.label}\n${years(item)}`,
  slots: roomy,
});

// The timeline's snapshot is the frame drawn last, so a zoom can leave a bar with the wrong choice:
// when the view settles, a bar that should now be the other way round redraws the items.
timeline.on("viewportChanged", () => {
 const [from, to] = timeline.getSnapshot().domain;
 const drawn = timeline.slots;
 const stale = items.some((item) => item.end !== undefined && item.end > from && item.start < to && roomy(item) !== drawn.has(item.id));
 if (stale) timeline.update({ slots: (item) => roomy(item) });
});

// The page's CSS places the lane names one way across and another way down; and a bar's room is another question.
// The first frame says which way it was drawn, and "orientationChanged" every turn after it.
const turned = (orientation) => {
  if (orientation === undefined || vertical === (orientation === "vertical")) return;
  vertical = orientation === "vertical";
  chronicle.toggleAttribute("data-vertical", vertical);
  // The overview turns with the timeline.
  requestAnimationFrame(drawOverview);
};
chronicle.toggleAttribute("data-vertical", vertical);
timeline.subscribe(() => turned(timeline.getSnapshot().viewport?.orientation));
timeline.on("orientationChanged", ({ orientation }) => {
  turned(orientation);
  BASE = vertical ? DOWN : ACROSS;
  rows = 1;
  timeline.update({ metrics: BASE, slots: (item) => roomy(item) });
  requestAnimationFrame(wholePicture);
});

// Each bar's content, in HTML of the page's own: its name, and its years.
function render(slots) {
  for (const { element, item } of slots.values()) {
    const when = years(item);
    if (element.firstChild !== null && element.dataset.when === when) continue;
    element.dataset.when = when;
    const bar = document.createElement("span");
    bar.className = `bar lane-${item.laneId}`;
    const name = document.createElement("b");
    name.textContent = item.label;
    const caption = document.createElement("small");
    // The item's name already says its dates, in full: this caption is drawn by CSS, for the eye only.
    caption.dataset.when = when;
    bar.append(name, caption);
    element.replaceChildren(bar);
  }
}
timeline.on("slotsChanged", ({ slots }) => render(slots));
render(timeline.slots);

// The bars' fills are gradients of the region's colour, which the page's CSS points to.
const defs = document.querySelector("#paints defs");
for (const lane of lanes) {
 defs.insertAdjacentHTML("beforeend", `<linearGradient id="fill-${lane.id}" x1="0" x2="1"><stop offset="0" stop-color="${lane.color}" stop-opacity=".46"/><stop offset=".55" stop-color="${lane.color}" stop-opacity=".2"/><stop offset="1" stop-color="${lane.color}" stop-opacity=".1"/></linearGradient>`);
}

// --- the camera: a smooth zoom-and-pan between two views ------------------------------------

// van Wijk and Nuij's optimal path: far jumps rise to see both ends, then come down.
function path(from, to) {
 const rho = Math.SQRT2;
 const [u0, w0] = [(from[0] + from[1]) / 2, from[1] - from[0]];
 const [u1, w1] = [(to[0] + to[1]) / 2, to[1] - to[0]];
 const d = Math.abs(u1 - u0);
 if (d < w0 * 1e-6) {
 const S = Math.log(w1 / w0) / rho;
 return { S: Math.abs(S), at: (t) => [u0, w0 * Math.exp(rho * t * S)] };
 }
 const b0 = (w1 * w1 - w0 * w0 + rho ** 4 * d * d) / (2 * w0 * rho ** 2 * d);
 const b1 = (w1 * w1 - w0 * w0 - rho ** 4 * d * d) / (2 * w1 * rho ** 2 * d);
 const r0 = Math.log(Math.sqrt(b0 * b0 + 1) - b0);
 const r1 = Math.log(Math.sqrt(b1 * b1 + 1) - b1);
 const S = (r1 - r0) / rho;
 return {
 S,
 at: (t) => {
 const s = t * S;
 const u = (w0 / (rho ** 2 * d)) * (Math.cosh(r0) * Math.tanh(rho * s + r0) - Math.sinh(r0));
 return [u0 + Math.sign(u1 - u0) * u * d, (w0 * Math.cosh(r0)) / Math.cosh(rho * s + r0)];
 },
 };
}

const still = matchMedia("(prefers-reduced-motion: reduce)");
let flight = 0;
function fly(to) {
 cancelAnimationFrame(flight);
 // The camera takes the lanes' size back too: it follows the time in view again (the whole picture, below).
 manual = false;
 if (still.matches) return timeline.zoomTo(to);
 const route = path(timeline.getSnapshot().domain, to);
 const ms = Math.min(2600, Math.max(700, route.S * 380));
 const begun = performance.now();
 const frame = (now) => {
 const t = Math.min(1, (now - begun) / ms);
 const eased = t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2;
 const [center, width] = t === 1 ? [(to[0] + to[1]) / 2, to[1] - to[0]] : route.at(eased);
 timeline.zoomTo([center - width / 2, center + width / 2]);
 if (t < 1) flight = requestAnimationFrame(frame);
 };
 flight = requestAnimationFrame(frame);
}

/** The view a slide is told in: its span with room around it, or its moment in the middle. */
function viewOf(item) {
  const end = item.end ?? item.start;
  const width = Math.max(item.data.view, (end - item.start) * 1.6);
  const middle = (item.start + end) / 2;
  return [middle - width / 2, middle + width / 2];
}

// --- the story ---------------------------------------------------------------------

const log = document.querySelector("#log");
const play = document.querySelector("#play");
const progress = document.querySelector("#progress");
const numeral = document.querySelector("#numeral");
const stage = document.querySelector("#stage");
const DWELL = 6500;
let playing = false;
let timer = 0;
const slides = items.filter((item) => item.data !== undefined);
log.dataset.items = String(items.length);
log.dataset.slides = String(slides.length + 1);

// A slide taller than its panel (on a phone) scrolls, and a scrolling region must take the keyboard too.
const panel = document.querySelector("#story");
const reachable = () => {
  const slide = panel.querySelector(".tl-story-slide");
  if (slide !== null) slide.toggleAttribute("tabindex", slide.scrollHeight > slide.clientHeight);
  if (slide?.hasAttribute("tabindex")) slide.setAttribute("tabindex", "0");
};
new MutationObserver(reachable).observe(panel, { childList: true, subtree: true });
new ResizeObserver(reachable).observe(panel);

// --- the tour: a slide every few seconds, until the reader takes the controls or it ends -----------

// --- the overview: five thousand years in one strip, and the view as a lens on it ------------------

const overview = document.querySelector("#overview");
const marks = document.querySelector("#marks");
const moments = document.querySelector("#moments");
const lens = document.querySelector("#lens");
const at = (time) => ((time - WHOLE[0]) / (WHOLE[1] - WHOLE[0])) * 100;
const timeAt = (fraction) => WHOLE[0] + fraction * (WHOLE[1] - WHOLE[0]);

// Every event, in its region's row and colour; ranges as bars, moments as hairlines.
const svg = "http://www.w3.org/2000/svg";
const dots = new Map();
function drawOverview() {
  const now = timeline.items;
  marks.replaceChildren();
  // The strip runs the way the timeline does: time across and the regions in rows, or time down and the regions in columns.
  marks.setAttribute("viewBox", vertical ? "0 0 56 1000" : "0 0 1000 56");
  lanes.forEach((lane, row) => {
    for (const item of now.filter((each) => each.laneId === lane.id)) {
      const mark = document.createElementNS(svg, "rect");
      const length = item.end === undefined ? 0.18 : Math.max(((at(item.end) - at(item.start)) / 100) * 1000, 1.2);
      const along = (at(item.start) / 100) * 1000;
      const place = vertical ? { x: row * 8 + 1, y: along, width: 5, height: length } : { x: along, y: row * 8 + 1, width: length, height: 5 };
      for (const [name, value] of Object.entries({ ...place, rx: 1.5, fill: lane.color, opacity: item.end === undefined ? 0.95 : 0.7 })) mark.setAttribute(name, String(value));
      marks.append(mark);
    }
  });
  // The story's moments follow their events when one is moved.
  for (const item of now) if (dots.has(item.id)) dots.get(item.id).style.setProperty("--at", `${String(at(item.start))}%`);
  lens.setAttribute(
    "aria-label",
    `The view on the five thousand years: ${vertical ? "up and down arrows pan, + and − zoom, left and right arrows scroll the lanes, with shift zoom them" : "left and right arrows pan, + and − zoom, up and down arrows scroll the lanes, with shift zoom them"}`,
  );
  // An edit can stack the bars differently, and a turn changes the room: the lanes are sized again.
  requestAnimationFrame(wholePicture);
}
// The story's moments: a dot each, which opens its slide.
for (const item of slides) {
  const dot = Object.assign(document.createElement("span"), { className: "moment", title: item.label });
  dot.dataset.id = item.id;
  dot.style.setProperty("--c", colorOf[item.laneId]);
  dot.addEventListener("click", () => story.go(item.id));
  dots.set(item.id, dot);
  moments.append(dot);
}
drawOverview();
// A scale of millennia under the strip.
for (const y of [-3000, -2000, -1000, 1, 1000, 2000]) {
  const tick = Object.assign(document.createElement("span"), { textContent: era(y) });
  tick.style.left = `${String(at(year(y)))}%`;
  document.querySelector("#scale").append(tick);
}
// The ages, as buttons that fly to them; the one in view lights up.
const sections = document.querySelector("#sections");
for (const age of ERAS) {
  const button = Object.assign(document.createElement("button"), { type: "button", className: "section", textContent: age.label });
  button.dataset.era = age.id;
  button.style.setProperty("--at", `${String(at(age.start))}%`);
  button.style.setProperty("--length", `${String(at(age.end) - at(age.start))}%`);
  button.addEventListener("click", () => fly(age.view));
  sections.append(button);
}
document.querySelector("#whole").addEventListener("click", () => fly(everything()));
document.querySelector("#apollo").addEventListener("click", () => {
  fly(APOLLO);
  timeline.revealLane("space");
});

// The lens follows the view; outside it the strip is shaded.
const view = (domain) => {
 const left = Math.max(0, at(domain[0]));
 const right = Math.min(100, at(domain[1]));
 overview.style.setProperty("--from", `${String(left)}%`);
 overview.style.setProperty("--to", `${String(right)}%`);
 lens.setAttribute("aria-valuetext", `${years({ start: domain[0], end: domain[1], granularity: domain[1] - domain[0] < 3 * YEAR ? "minute" : "year" })} in view`);
 const middle = (domain[0] + domain[1]) / 2;
 const span = domain[1] - domain[0];
 const current = span > 2500 * YEAR ? undefined : ERAS.find(({ start, end }) => middle >= start && middle < end)?.id;
 for (const button of sections.children) button.setAttribute("aria-current", String(button.dataset.era === current));
};
timeline.on("viewportChanged", ({ viewport: { domain } }) => view(domain));
view(timeline.getSnapshot().domain);

// The lens frames the view down the strip too: the lanes scroll across, and the rows in sight are the part of the strip it holds.
// The lanes scroll under the axis band, which is the metrics' axisSize wide.
const STRIP = 46; // the strip's height in pixels (#marks)
/** Where a position across the lanes falls on the strip, 0 to 1: a lane is a row of the strip, and its sublanes divide that row. */
function down(layout, position) {
 let row = 0;
 layout.lanes.forEach((each, index) => {
 if (each.cross <= position) row = index;
 });
 const lane = layout.lanes[row];
 return (row + Math.min(1, Math.max(0, (position - lane.cross) / lane.crossSize))) / layout.lanes.length;
}
function frameDown() {
 const layout = timeline.layout;
 const { viewport, crossOffset } = timeline.getSnapshot();
 const room = viewport === undefined ? 0 : viewport.crossSize - BASE.axisSize;
 const scrolls = layout !== undefined && room > 0 && layout.crossSize > room + 1;
 let top = scrolls ? down(layout, crossOffset) : 0;
 let bottom = scrolls ? down(layout, crossOffset + room) : 1;
 // A lens over one lane would be all handles: it is never thinner than a finger can grab between them.
 const least = 0.36;
 if (bottom - top < least) {
 top = Math.min(Math.max((top + bottom - least) / 2, 0), 1 - least);
 bottom = top + least;
 }
 overview.style.setProperty("--vt", `${String(top * STRIP)}px`);
 overview.style.setProperty("--vh", `${String((bottom - top) * STRIP)}px`);
 overview.toggleAttribute("data-scrolls", scrolls);
}
// A scroll across the lanes changes no domain, so it is the snapshot that says so, not "viewportChanged".
timeline.subscribe(frameDown);
timeline.on("slotsChanged", frameDown);
frameDown();
// The first frame comes after this runs, and a resize changes how much of the lanes is in sight.
new ResizeObserver(() => {
 frameDown();
 wholePicture();
}).observe(host);
requestAnimationFrame(() =>
 requestAnimationFrame(() => {
 frameDown();
 wholePicture();
 }),
);

// Zoom down the lanes: the rows are sizes in `metrics`, so the lanes' scale is a number the page keeps and hands back.
// The lens has a handle on each edge: the edge opposite the one pulled stays where it is.
const track = document.querySelector("#track");
const ROWS_MAX = 1.6;
const sized = (scale) => ({ ...BASE, rowSize: BASE.rowSize * scale, rowGap: BASE.rowGap * scale, laneGap: BASE.laneGap * scale });
/**
 * The scale at which every lane is in sight. The lanes' length is their rows, the gaps between those and the gaps
 * between the lanes, all of which scale; it is worked out from how many rows there are, because the layout the
 * timeline hands out is the one it drew last, and a size just asked for is not drawn yet.
 */
function fitRows() {
 const layout = timeline.layout;
 const { viewport } = timeline.getSnapshot();
 if (layout === undefined || viewport === undefined) return 1;
 const lanesCount = layout.lanes.length;
 const length = layout.rowCount * BASE.rowSize + (layout.rowCount - lanesCount) * BASE.rowGap + (lanesCount - 1) * BASE.laneGap;
 return ((viewport.crossSize - BASE.axisSize) / length) * 0.995;
}
function setRows(want, keepBottom = false) {
 // Zooming out stops where every lane is in view, however small the rows get by then.
 const { viewport, crossOffset: offset } = timeline.getSnapshot();
 const room = viewport === undefined ? 0 : viewport.crossSize - BASE.axisSize;
 const next = Math.min(Math.max(want, Math.min(fitRows(), 1)), ROWS_MAX);
 if (Math.abs(next - rows) < 0.002) return;
 timeline.update({ metrics: sized(next) });
 // Rows scale about the top of the view, or about its bottom when that is the edge that stays.
 timeline.scrollLanes(keepBottom ? ((offset + room) * next) / rows - room - offset : (offset * next) / rows - offset);
 rows = next;
 chronicle.toggleAttribute("data-small", rows < 0.75);
 frameDown();
}
/** The reader zooms the lanes: from then on the size is theirs, until the camera flies somewhere (fly) or two presses put it back. */
function zoomRows(want, keepBottom = false) {
 manual = true;
 setRows(want, keepBottom);
}
// The whole picture: the further out the view, the smaller the rows, until at the five thousand years every lane is in
// sight at once; zoomed in to an age, they are back at their size, and the names in the bars with them.
const NEAR = 2300 * YEAR;
const FAR = 4600 * YEAR;
function wholePicture() {
 if (manual || timeline.layout === undefined) return;
 const [from, to] = timeline.getSnapshot().domain;
 const t = Math.min(1, Math.max(0, Math.log((to - from) / NEAR) / Math.log(FAR / NEAR)));
 setRows(1 - t * t * (3 - 2 * t) * (1 - Math.min(fitRows(), 1)));
}
let settling = 0;
timeline.on("viewportChanged", () => {
 cancelAnimationFrame(settling);
 settling = requestAnimationFrame(wholePicture);
});
const grips = { down: lens.querySelector(".grip"), up: lens.querySelector(".grip-t"), right: lens.querySelector(".grip-x"), left: lens.querySelector(".grip-l") };
// Along the strip is time and across it the lanes: x and y across a desktop, y and x down a phone.
const along = (event) => (vertical ? event.clientY : event.clientX);
const across = (event) => (vertical ? event.clientX : event.clientY);
function length() {
 const box = track.getBoundingClientRect();
 return vertical ? { start: box.top, size: box.height } : { start: box.left, size: box.width };
}
// Two presses on the far lanes' handle put the rows back. (The drag captures the pointer, so a "dblclick" would land on the strip, not here.)
let pressed = 0;
/** Pointer moves, while a handle is held, are handed to `move`. */
function hold(event, move) {
 track.setPointerCapture(event.pointerId);
 const end = () => {
 track.removeEventListener("pointermove", move);
 track.removeEventListener("pointerup", end);
 track.removeEventListener("pointercancel", end);
 };
 track.addEventListener("pointermove", move);
 track.addEventListener("pointerup", end);
 track.addEventListener("pointercancel", end);
}
// Drag the lens's edge across the lanes: how much of the lanes is in the lens decides how large their rows are.
function dragRows(event, edge) {
 const layout = timeline.layout;
 const { viewport } = timeline.getSnapshot();
 if (layout === undefined || viewport === undefined) return;
 const room = viewport.crossSize - BASE.axisSize;
 const whole = layout.crossSize / rows;
 const top = Number.parseFloat(overview.style.getPropertyValue("--vt")) / STRIP;
 const bottom = top + Number.parseFloat(overview.style.getPropertyValue("--vh")) / STRIP;
 const start = across(event);
 hold(event, (next) => {
 const moved = (across(next) - start) / STRIP;
 const share = Math.min(Math.max(edge === "down" ? bottom + moved - top : bottom - (top + moved), 0.1), 1);
 zoomRows(room / (share * whole), edge === "up");
 });
}
// Drag the lens's edge along time: the opposite edge of the view stays, and how much time the lens holds is the zoom.
function dragSpan(event, edge) {
 const { start, size } = length();
 const [from, to] = timeline.getSnapshot().domain;
 const least = 10 * 60_000;
 hold(event, (next) => {
 const at = timeAt(Math.min(Math.max((along(next) - start) / size, 0), 1));
 timeline.zoomTo(edge === "right" ? [from, Math.max(at, from + least)] : [Math.min(at, to - least), to]);
 });
}
// The same wheel gesture over the overview itself.
track.addEventListener(
 "wheel",
 (event) => {
 if (!event.altKey) return;
 event.preventDefault();
 zoomRows(rows * Math.exp(-Math.sign(event.deltaY) * 0.12));
 },
 { passive: false },
);

// Drag the lens to pan; press anywhere else on the strip to fly there.
track.addEventListener("pointerdown", (event) => {
 cancelAnimationFrame(flight);
 if (playing) setPlaying(false);
 if (event.target === grips.right || event.target === grips.left) return dragSpan(event, event.target === grips.right ? "right" : "left");
 if (event.target === grips.up) return dragRows(event, "up");
 if (event.target === grips.down) {
 if (event.timeStamp - pressed < 350) {
 manual = false;
 return wholePicture();
 }
 pressed = event.timeStamp;
 return dragRows(event, "down");
 }
 const { start, size } = length();
 const [from, to] = timeline.getSnapshot().domain;
 if (event.target !== lens) {
 const middle = timeAt((along(event) - start) / size);
 const span = Math.min(to - from, 1200 * YEAR);
 return fly([middle - span / 2, middle + span / 2]);
 }
 const grab = along(event);
 const grabAcross = across(event);
 const lanesAt = timeline.getSnapshot().crossOffset;
 let asked = lanesAt;
 hold(event, (next) => {
 const shift = ((along(next) - grab) / size) * (WHOLE[1] - WHOLE[0]);
 timeline.zoomTo([from + shift, to + shift]);
 // Across the strip the lens scrolls the lanes: its breadth is the strip's share of the lanes' length.
 // (The snapshot catches up a frame later, so the offset asked for last is kept here.)
 const layout = timeline.layout;
 const { viewport } = timeline.getSnapshot();
 if (layout !== undefined && viewport !== undefined && overview.hasAttribute("data-scrolls")) {
 const target = Math.min(Math.max(lanesAt + ((across(next) - grabAcross) / STRIP) * layout.crossSize, 0), layout.crossSize - (viewport.crossSize - BASE.axisSize));
 timeline.scrollLanes(target - asked);
 asked = target;
 }
 });
});
// From the keyboard the lens is a slider: the arrows along the strip pan a tenth of the view, + and - zoom;
// the arrows across it scroll the lanes, and with shift zoom them.
lens.addEventListener("keydown", (event) => {
 const [from, to] = timeline.getSnapshot().domain;
 const span = to - from;
 const middle = (from + to) / 2;
 const sideways = (vertical ? { ArrowLeft: -1, ArrowRight: 1 } : { ArrowUp: -1, ArrowDown: 1 })[event.key];
 if (sideways !== undefined) {
 if (event.shiftKey) zoomRows(rows * (sideways < 0 ? 1.15 : 1 / 1.15));
 else timeline.scrollLanes(sideways * 60);
 return event.preventDefault();
 }
 const by = { ...(vertical ? { ArrowUp: -0.1, ArrowDown: 0.1 } : { ArrowLeft: -0.1, ArrowRight: 0.1 }), PageUp: -1, PageDown: 1 }[event.key];
 const zoom = { "+": 0.5, "=": 0.5, "-": 2 }[event.key];
 if (by !== undefined) timeline.zoomTo([from + by * span, to + by * span]);
 else if (zoom !== undefined) fly([middle - (span * zoom) / 2, middle + (span * zoom) / 2]);
 else if (event.key === "Home" || event.key === "End") fly(event.key === "Home" ? ERAS[0].view : ERAS[3].view);
 else return;
 event.preventDefault();
});

// --- the legend: a spotlight on one region -------------------------------------------------------

// --- rewrite history: the same timeline, editable, with an exact undo -----------------------------

const editButton = document.querySelector("#edit");
const undoButton = document.querySelector("#undo");
const restoreButton = document.querySelector("#restore");
const done = [];

// --- take it with you ---------------------------------------------------------------

/** Hand a file to the reader: no server involved. */
function save(name, blob) {
  const url = URL.createObjectURL(blob);
  Object.assign(document.createElement("a"), { href: url, download: name }).click();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

/**
 * An export is the timeline drawn again, by the timeline itself — not by the page's CSS. So it is drawn on a
 * second instance, off screen: the same settings and the history as it now stands (edits and all), the bars'
 * names as the timeline's own labels, a point as a small bar, and the lane names given room at the left.
 * The page never shows the swap, and the reader's view is not touched.
 */
/** A span with a fifth more to its left: the lane names sit over the first bars, and want a margin. */
/** @type {(domain: [number, number]) => [number, number]} */
const marginal = ([from, to]) => [to - (to - from) / 0.8, to];

async function offscreen(theme, domain, width, height, job) {
  const sheet = Object.assign(document.createElement("div"), { inert: true });
  sheet.style.cssText = `position: fixed; left: -${String(width + 100)}px; top: 0; width: ${String(width)}px; height: ${String(height)}px`;
  document.body.append(sheet);
  const copy = createTimeline(sheet, { ...SETTINGS, theme, domain: marginal(domain), items: timeline.items.map((item) => ({ ...item, kind: "range" })) });
  try {
    // A frame is drawn on the next one.
    await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
    return await job(copy);
  } finally {
    copy.destroy();
    sheet.remove();
  }
}

Run “Five thousand years, told: the chronology restyled from outside, with a story and a camera” on your own machine

Make an empty folder and put this example’s two files in it:

index.html — the page the code runs in, its markup and styles:

<style>
  /* Everything below is the page's own CSS: the timeline and the story are styled from outside. */
  @font-face { font-family: "Geist"; font-weight: 400; src: url("assets/font-geist-400.woff2") format("woff2"); }
  @font-face { font-family: "Geist"; font-weight: 500; src: url("assets/font-geist-500.woff2") format("woff2"); }
  @font-face { font-family: "Geist"; font-weight: 600; src: url("assets/font-geist-600.woff2") format("woff2"); }
  @font-face { font-family: "Geist Mono"; font-weight: 500; src: url("assets/font-geist-mono-500.woff2") format("woff2"); }
  @font-face { font-family: "Instrument Serif"; src: url("assets/font-instrument-serif-400.woff2") format("woff2"); }
  @font-face { font-family: "Instrument Serif"; font-style: italic; src: url("assets/font-instrument-serif-400-italic.woff2") format("woff2"); }
  :root {
    --ink: #07090d;
    --ivory: #f2ede4;
    --muted: #8f8a80;
    --gold: #e8c27a;
    --peach: #ffb38a;
    --rule: rgba(242, 237, 228, 0.08);
    --display: "Instrument Serif", Georgia, serif;
    --sans: Geist, system-ui, sans-serif;
    --mono: "Geist Mono", ui-monospace, monospace;
    --c-neareast: #ef9a62;
    --c-med: #6fb0f0;
    --c-asia: #4fd1a5;
    --c-americas: #f2c94c;
    --c-europe: #f08bb0;
    --c-science: #a98bff;
    --c-space: #d7deea;
  }
  html, body { background: var(--ink); color: var(--ivory); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
  button { font-family: var(--sans); }
  .chronicle {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1px 300px auto auto minmax(0, 1fr);
    height: 892px;
    background:
      radial-gradient(90% 55% at 15% -5%, rgba(232, 194, 122, 0.14), transparent 60%),
      radial-gradient(70% 50% at 100% 30%, rgba(111, 176, 240, 0.08), transparent 70%),
      var(--ink);
  }

  /* The masthead and the tour's progress. */
  .masthead { display: flex; align-items: center; gap: 16px; padding: 14px 24px 12px; }
  .kicker { display: block; font: 500 10.5px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
  .kicker b { color: var(--gold); font-weight: 500; }
  .masthead h1 { margin: 6px 0 0; font: 400 30px/1 var(--display); letter-spacing: -0.01em; }
  .masthead h1 em { background: linear-gradient(90deg, var(--gold), var(--peach)); -webkit-background-clip: text; background-clip: text; color: var(--gold); -webkit-text-fill-color: transparent; padding-right: 2px; }
  .masthead .spacer { flex: 1; }
  .play {
    flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 18px 0 8px; white-space: nowrap;
    border: 0; border-radius: 999px; color: var(--ink); font-weight: 600; font-size: 13.5px; cursor: pointer;
    background: var(--gold) linear-gradient(90deg, var(--gold), var(--peach)); box-shadow: 0 8px 30px -8px rgba(232, 194, 122, 0.6);
  }
  .play:hover { filter: brightness(1.06); }
  .play svg { width: 26px; height: 26px; padding: 7px; box-sizing: border-box; border-radius: 50%; background: rgba(7, 9, 13, 0.9); fill: var(--gold); }
  .play .pause { display: none; }
  .play[data-playing] .pause { display: block; }
  .play[data-playing] .start { display: none; }
  .progress { background: var(--rule); }
  .progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--peach)); box-shadow: 0 0 12px var(--gold); transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  /* The story panel: the library's markup, the page's type, a year set large behind it. */
  #stage { position: relative; min-height: 0; overflow: hidden; }
  #numeral {
    position: absolute; right: 18px; bottom: -34px; z-index: 0; pointer-events: none; white-space: nowrap;
    font: italic 400 180px/1 var(--display); letter-spacing: -0.03em; color: transparent; -webkit-text-stroke: 1px rgba(242, 237, 228, 0.09);
  }
  #story { position: relative; z-index: 1; height: 100%; }
  #story .tl-story { padding: 20px 24px 14px; background: transparent; box-shadow: none; font: 14.5px/1.6 var(--sans); }
  #story .tl-story-slide { gap: 18px 32px; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); border-inline-start-width: 2px; padding-inline-start: 20px; }
  #story .tl-story-media img { height: 196px; max-height: none; width: 100%; object-fit: cover; border-radius: 14px; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.95), 0 0 0 1px var(--rule); }
  #story .tl-story-date { display: flex; align-items: center; gap: 10px; font: 500 11px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
  #story .tl-story-date::before { content: ""; width: 22px; height: 1px; background: currentColor; }
  #story .tl-story-headline { font: 400 42px/1.02 var(--display); letter-spacing: -0.015em; margin: 8px 0 12px; }
  #story .tl-story-title .tl-story-headline { font-size: 52px; }
  #story .tl-story-headline i { color: var(--gold); }
  #story .tl-story-text { color: #c9c3b8; max-width: 48ch; }
  #story .tl-story-text em, #story .tl-story-text i { color: var(--ivory); }
  #story .tl-story-nav button { min-height: 34px; padding: 0 16px; border-radius: 999px; border-color: var(--rule); background: rgba(255, 255, 255, 0.04); font-weight: 500; }
  #story .tl-story-nav .tl-story-next { border-color: rgba(232, 194, 122, 0.5); color: var(--gold); }
  #story .tl-story-nav button:hover:not(:disabled) { background: rgba(232, 194, 122, 0.12); }
  #story .tl-story-position { font: 500 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
  /* A new slide rises in, its picture drifts. */
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
  @keyframes drift { from { transform: scale(1.08); } }
  @keyframes fade { from { opacity: 0; } }
  .turn .tl-story-body { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .turn .tl-story-media img { animation: drift 7s ease-out both, fade 0.5s both; }
  #numeral::before { content: attr(data-year); }
  .turn #numeral { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @media (prefers-reduced-motion: reduce) { .turn *, .turn #numeral { animation: none !important; } }

  /* The overview: every event of the five thousand years, and the view as a lens. */
  .overview { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; align-items: start; padding: 12px 24px 8px; border-top: 1px solid var(--rule); }
  #track { position: relative; height: 77px; cursor: pointer; touch-action: none; user-select: none; }
  #sections { position: absolute; inset: 0 0 auto; height: 24px; }
  .section {
    position: absolute; top: 0; height: 24px; left: var(--at); width: var(--length); padding: 0 6px 6px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
    border: 0; border-left: 1px solid var(--rule); background: transparent; color: var(--muted); font: 500 9.5px/18px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  }
  .section:hover, .section[aria-current="true"] { color: var(--gold); }
  #marks { position: absolute; left: 0; right: 0; top: 31px; width: 100%; height: 46px; }
  #moments { position: absolute; left: 0; right: 0; top: 30px; height: 0; }
  .moment { position: absolute; top: -2.5px; left: var(--at); width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--ivory); opacity: 0.45; cursor: pointer; transition: transform 0.3s, opacity 0.3s; }
  .moment.current { opacity: 1; background: var(--c); transform: scale(1.8); box-shadow: 0 0 10px var(--c); }
  .shade { position: absolute; top: 24px; bottom: 0; background: rgba(7, 9, 13, 0.62); pointer-events: none; }
  .shade.before { left: 0; width: var(--from, 0%); }
  .shade.after { left: var(--to, 100%); right: 0; }
  .shade.above, .shade.below { left: var(--from, 0%); right: calc(100% - var(--to, 100%)); }
  .shade.above { top: 31px; bottom: auto; height: var(--vt, 0px); }
  .shade.below { top: calc(31px + var(--vt, 0px) + var(--vh, 46px)); }
  #lens {
    position: absolute; top: calc(28px + var(--vt, 0px)); height: calc(var(--vh, 46px) + 6px); left: var(--from, 0%); width: max(calc(var(--to, 100%) - var(--from, 0%)), 6px); box-sizing: border-box;
    border: 1.5px solid var(--gold); border-radius: 6px; background: rgba(232, 194, 122, 0.07); box-shadow: 0 0 0 1px rgba(7, 9, 13, 0.6), 0 0 22px -4px rgba(232, 194, 122, 0.7); cursor: grab;
  }
  #lens:active { cursor: grabbing; }
  #lens .grip { position: absolute; left: 0; right: 0; bottom: -8px; height: 14px; cursor: ns-resize; touch-action: none; }
  #lens .grip-t { position: absolute; left: 0; right: 0; top: -8px; height: 14px; cursor: ns-resize; touch-action: none; }
  #lens .grip-t::after { content: ""; position: absolute; left: 50%; top: 5px; width: min(22px, 60%); height: 3px; margin-left: calc(min(22px, 60%) / -2); border-radius: 2px; background: var(--gold); box-shadow: 0 0 0 1px rgba(7, 9, 13, 0.6); }
  #lens .grip-l { position: absolute; top: 0; bottom: 0; left: -8px; width: 14px; cursor: ew-resize; touch-action: none; }
  #lens .grip-l::after { content: ""; position: absolute; top: 50%; left: 5px; height: min(18px, 60%); width: 3px; transform: translateY(-50%); border-radius: 2px; background: var(--gold); box-shadow: 0 0 0 1px rgba(7, 9, 13, 0.6); }
  #lens .grip-x { position: absolute; top: 0; bottom: 0; right: -8px; width: 14px; cursor: ew-resize; touch-action: none; }
  #lens .grip-x::after { content: ""; position: absolute; top: 50%; right: 5px; height: min(18px, 60%); width: 3px; transform: translateY(-50%); border-radius: 2px; background: var(--gold); box-shadow: 0 0 0 1px rgba(7, 9, 13, 0.6); }
  #lens .grip::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: min(22px, 60%); height: 3px; margin-left: calc(min(22px, 60%) / -2); border-radius: 2px; background: var(--gold); box-shadow: 0 0 0 1px rgba(7, 9, 13, 0.6); }
  .scale { position: relative; height: 12px; font: 500 9.5px/12px var(--mono); color: var(--muted); }
  .scale span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
  .jumps { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; }
  .jump { min-height: 28px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 999px; background: rgba(255, 255, 255, 0.03); color: var(--ivory); font-size: 12px; cursor: pointer; white-space: nowrap; }
  .jump:hover { border-color: rgba(232, 194, 122, 0.5); color: var(--gold); }

  /* Down a phone the overview turns with the timeline: a column beside it, time down and the regions across,
     and the lens as tall as the time in view. The buttons that fly stay above the timeline. */
  .chronicle[data-vertical] { grid-template-columns: minmax(0, 1fr) auto; }
  .chronicle[data-vertical] > * { grid-column: 1 / -1; }
  .chronicle[data-vertical] .overview { display: contents; }
  .chronicle[data-vertical] .jumps { grid-row: 4; flex-direction: row; padding: 10px 14px 8px; border-top: 1px solid var(--rule); }
  .chronicle[data-vertical] .legend { grid-row: 5; }
  .chronicle[data-vertical] #timeline { grid-row: 6; grid-column: 1; }
  .chronicle[data-vertical] .overview > div:first-child { grid-row: 6; grid-column: 2; display: grid; min-height: 0; padding: 12px 10px 14px 4px; border-top: 1px solid var(--rule); }
  .chronicle[data-vertical] .scale { display: none; }
  .chronicle[data-vertical] #track { height: auto; width: 77px; }
  .chronicle[data-vertical] #sections { inset: 0 auto 0 0; width: 24px; height: auto; }
  .chronicle[data-vertical] .section { top: var(--at); height: var(--length); left: 0; width: 24px; padding: 6px 6px 6px 0; writing-mode: vertical-rl; border-left: 0; border-top: 1px solid var(--rule); }
  .chronicle[data-vertical] #moments { inset: 0 auto 0 30px; width: 0; height: auto; }
  .chronicle[data-vertical] .moment { top: var(--at); left: -2.5px; margin: -2.5px 0 0; }
  .chronicle[data-vertical] #marks { inset: 0 auto 0 31px; width: 46px; height: 100%; }
  .chronicle[data-vertical] .shade { inset: auto 0 auto 24px; width: auto; height: auto; }
  .chronicle[data-vertical] .shade.before { top: 0; height: var(--from, 0%); }
  .chronicle[data-vertical] .shade.after { top: var(--to, 100%); bottom: 0; }
  .chronicle[data-vertical] .shade.above, .chronicle[data-vertical] .shade.below { top: var(--from, 0%); bottom: calc(100% - var(--to, 100%)); }
  .chronicle[data-vertical] .shade.above { left: 31px; right: auto; width: var(--vt, 0px); }
  .chronicle[data-vertical] .shade.below { left: calc(31px + var(--vt, 0px) + var(--vh, 46px)); }
  .chronicle[data-vertical] #lens { left: calc(28px + var(--vt, 0px)); width: calc(var(--vh, 46px) + 6px); top: var(--from, 0%); height: max(calc(var(--to, 100%) - var(--from, 0%)), 6px); }
  .chronicle[data-vertical] #lens .grip, .chronicle[data-vertical] #lens .grip-t { inset: 0 auto; width: 14px; height: auto; cursor: ew-resize; }
  .chronicle[data-vertical] #lens .grip { right: -8px; }
  .chronicle[data-vertical] #lens .grip-t { left: -8px; }
  .chronicle[data-vertical] #lens .grip::after, .chronicle[data-vertical] #lens .grip-t::after { inset: 50% auto auto 5px; width: 3px; height: min(22px, 60%); margin: 0; transform: translateY(-50%); }
  .chronicle[data-vertical] #lens .grip-l, .chronicle[data-vertical] #lens .grip-x { inset: auto 0; width: auto; height: 14px; cursor: ns-resize; }
  .chronicle[data-vertical] #lens .grip-l { top: -8px; }
  .chronicle[data-vertical] #lens .grip-x { bottom: -8px; }
  .chronicle[data-vertical] #lens .grip-l::after, .chronicle[data-vertical] #lens .grip-x::after { inset: 5px auto auto 50%; width: min(18px, 60%); height: 3px; transform: translateX(-50%); }
  /* Zoomed out to the whole picture, a column is narrower than its region's name: the colours name the regions then, as in the legend. */
  .chronicle[data-vertical][data-small] #timeline .tl-lane-header { opacity: 0; }

  /* The legend, which spotlights a region. */
  .legend { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 24px 10px; }
  .edit { display: flex; flex: none; align-items: center; gap: 6px; }
  .tool { min-height: 26px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ivory); font-size: 12px; cursor: pointer; white-space: nowrap; }
  .tool:hover:not(:disabled) { border-color: rgba(232, 194, 122, 0.5); color: var(--gold); }
  .tool:disabled { color: var(--muted); opacity: 0.55; cursor: default; }
  .tool[aria-pressed="true"] { color: var(--ink); background: var(--gold); border-color: var(--gold); font-weight: 600; }
  /* With editing on, a bar can be taken: its cursor says so. */
  .chronicle[data-editing] #timeline .tl-item { cursor: grab; }
  .chip { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 0 11px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
  .chip:hover { color: var(--ivory); }
  .chip[aria-pressed="true"] { color: var(--ink); background: var(--c); border-color: var(--c); font-weight: 600; }
  .chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
  .chip[aria-pressed="true"] i { background: var(--ink); box-shadow: none; }

  /* The timeline: a gradient of its region's colour per bar, light on what the story tells. */
  #timeline { min-height: 0; border-top: 1px solid var(--rule); }
  #timeline .tl-surface { fill: transparent; }
  #timeline .lane-neareast { --c: var(--c-neareast); }
  #timeline .lane-med { --c: var(--c-med); }
  #timeline .lane-asia { --c: var(--c-asia); }
  #timeline .lane-americas { --c: var(--c-americas); }
  #timeline .lane-europe { --c: var(--c-europe); }
  #timeline .lane-science { --c: var(--c-science); }
  #timeline .lane-space { --c: var(--c-space); }
  #timeline rect.tl-item { stroke: color-mix(in srgb, var(--c) 55%, transparent); stroke-width: 1px; }
  #timeline rect.lane-neareast { fill: url(#fill-neareast); }
  #timeline rect.lane-med { fill: url(#fill-med); }
  #timeline rect.lane-asia { fill: url(#fill-asia); }
  #timeline rect.lane-americas { fill: url(#fill-americas); }
  #timeline rect.lane-europe { fill: url(#fill-europe); }
  #timeline rect.lane-science { fill: url(#fill-science); }
  #timeline rect.lane-space { fill: url(#fill-space); }
  #timeline .tl-item-line { stroke: var(--c); stroke-opacity: 0.18; }
  #timeline .tl-item-dot { fill: var(--c); stroke: var(--ink); stroke-width: 2px; }
  #timeline .has-slide .tl-item-dot { stroke: var(--ivory); stroke-width: 1.5px; filter: drop-shadow(0 0 5px var(--c)); }
  #timeline rect.tl-item.has-slide { stroke: var(--c); }
  #timeline .tl-item--selected, #timeline .tl-item--selected .tl-item-dot { stroke: #fff; filter: drop-shadow(0 0 8px var(--c)); }
  #timeline .tl-label { color: #d9d3c8; }
  #timeline .tl-tick { stroke: rgba(242, 237, 228, 0.05); }
  #timeline .tl-tick-label { fill: var(--muted); }
  #timeline .tl-tick-label--major { fill: var(--ivory); font-weight: 500; }
  #timeline .tl-era-label { display: none; }
  #timeline .era-bronze { fill: rgba(239, 154, 98, 0.035); }
  #timeline .era-antiquity { fill: rgba(111, 176, 240, 0.03); }
  #timeline .era-medieval { fill: rgba(240, 139, 176, 0.03); }
  #timeline .era-modern { fill: rgba(169, 139, 255, 0.035); }
  /* Across, a lane's name sits in the gap above its first row, clear of the bars; down a phone, at the top of its column. */
  .chronicle:not([data-vertical]) #timeline .tl-lane-header { transform: translateY(-19px); }
  #timeline .tl-lane-header-bg { display: none; }
  #timeline .tl-lane-header-text { font-weight: 600; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--c, var(--muted)); }
  #timeline [data-tl-lane-header="neareast"] { --c: var(--c-neareast); }
  #timeline [data-tl-lane-header="med"] { --c: var(--c-med); }
  #timeline [data-tl-lane-header="asia"] { --c: var(--c-asia); }
  #timeline [data-tl-lane-header="americas"] { --c: var(--c-americas); }
  #timeline [data-tl-lane-header="europe"] { --c: var(--c-europe); }
  #timeline [data-tl-lane-header="science"] { --c: var(--c-science); }
  #timeline [data-tl-lane-header="space"] { --c: var(--c-space); }
  #timeline .tl-cluster { fill: rgba(232, 194, 122, 0.16); stroke: var(--gold); }
  #timeline .tl-cluster-count { fill: var(--gold); font-weight: 600; }
  #timeline .tl-now { stroke-dasharray: 2 4; }
  #timeline .tl-tooltip { background: rgba(12, 15, 21, 0.94); backdrop-filter: blur(8px); color: var(--ivory); border: 1px solid rgba(232, 194, 122, 0.4); border-radius: 10px; padding: 8px 12px; font: 500 12.5px/1.5 var(--sans); box-shadow: 0 16px 40px -12px #000; }
  /* The bars' content, in the boxes the timeline gives the page: the name, then the years. */
  #timeline [data-tl-slot] { height: 100%; }
  .bar { box-sizing: border-box; display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 10px 0 12px; overflow: hidden; white-space: nowrap; border-radius: 8px; }
  .bar b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 500 13px/1.45 var(--sans); color: var(--ivory); }
  .bar small::after { content: attr(data-when); }
  .bar small { flex: 0 1000 auto; min-width: 0; overflow: hidden; font: 500 10px/1.6 var(--mono); color: color-mix(in srgb, var(--c) 75%, var(--ivory)); }

  .log { color: var(--muted); border-top: 1px solid var(--rule); background: var(--ink); }

  @media (max-width: 640px) {
    /* Down a phone the timeline turns vertical, and wants the height: the frame is taller there (meta.json, narrowHeight). */
    .chronicle { grid-template-rows: auto 1px 356px auto auto minmax(0, 1fr); height: 1262px; }
    .masthead { padding: 12px 14px 10px; gap: 10px; }
    .masthead h1 { font-size: 22px; }
    .play { padding: 0 8px; }
    .play span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    #numeral { font-size: 110px; bottom: -18px; }
    #story .tl-story { padding: 12px 14px 10px; }
    #story .tl-story-slide { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-inline-start: 12px; }
    /* A slide fits the panel on a phone: a lower picture, a smaller headline and text. What is still longer
       scrolls, and fades out at the panel's foot, so a cut line reads as more to come. */
    #story .tl-story-slide { padding-bottom: 14px; -webkit-mask-image: linear-gradient(#000 calc(100% - 14px), transparent); mask-image: linear-gradient(#000 calc(100% - 14px), transparent); }
    #story .tl-story-headline { font-size: 26px; margin: 2px 0 6px; }
    #story .tl-story-title .tl-story-headline { font-size: 30px; }
    #story .tl-story-text { font-size: 13.5px; line-height: 1.5; }
    #story .tl-story-media img { height: 88px; }
    .overview { grid-template-columns: minmax(0, 1fr); padding: 10px 14px 8px; }
    .jumps { flex-direction: row; padding-top: 0; }
    .kicker .span { display: none; }
    .scale span:nth-child(even) { display: none; }
    .section { font-size: 8.5px; letter-spacing: 0.06em; }
    .legend { flex-wrap: nowrap; overflow-x: auto; padding: 0 14px 8px; scrollbar-width: none; }
    .masthead { flex-wrap: wrap; }
    .masthead > div:first-child { flex: 1 1 100%; }
    .masthead .spacer { display: none; }
    .edit { flex: 1; }
    .chip { flex: none; }
  }
</style>
<svg id="paints" width="0" height="0" style="position: absolute" aria-hidden="true"><defs></defs></svg>
<div class="chronicle" id="chronicle">
  <header class="masthead">
    <div>
      <span class="kicker"><b>A chronicle</b><span class="span"> · 3100 BC — AD 1991</span></span>
      <h1>Five thousand years, <em>from the Nile to the Moon</em></h1>
    </div>
    <span class="spacer"></span>
    <div class="edit" role="group" aria-label="Edit the chronology">
      <button type="button" class="tool" id="edit" aria-pressed="false">Rewrite history</button>
      <button type="button" class="tool" id="undo" disabled>Undo</button>
      <button type="button" class="tool" id="restore" disabled>Restore</button>
    </div>
    <div class="edit" role="group" aria-label="Take it with you">
      <button type="button" class="tool" id="png">PNG</button>
      <button type="button" class="tool" id="pdf">PDF</button>
      <button type="button" class="tool" id="print">Print</button>
    </div>
    <button type="button" class="play" id="play">
      <svg class="start" viewBox="0 0 14 14" aria-hidden="true"><path d="M3 1.5v11l9.5-5.5z" /></svg>
      <svg class="pause" viewBox="0 0 14 14" aria-hidden="true"><path d="M3 1.5h3v11H3zM8 1.5h3v11H8z" /></svg>
      <span>Play the tour</span>
    </button>
  </header>
  <div class="progress" aria-hidden="true"><span id="progress"></span></div>
  <div id="stage"><span id="numeral" aria-hidden="true" data-year="5000"></span><div id="story"></div></div>
  <section class="overview" id="overview" aria-label="Overview">
    <div>
      <div id="track">
        <div id="sections" role="group" aria-label="Fly to an age"></div>
        <div id="moments" aria-hidden="true"></div>
        <svg id="marks" viewBox="0 0 1000 56" preserveAspectRatio="none" aria-hidden="true"></svg>
        <div class="shade before"></div>
        <div class="shade after"></div>
        <div class="shade above"></div>
        <div class="shade below"></div>
        <div id="lens" tabindex="0" role="slider" aria-label="The view on the five thousand years: arrows pan, + and − zoom, shift with up and down arrows zooms the lanes"><span class="grip" aria-hidden="true"></span><span class="grip-t" aria-hidden="true"></span><span class="grip-l" aria-hidden="true"></span><span class="grip-x" aria-hidden="true"></span></div>
      </div>
      <div class="scale" id="scale" aria-hidden="true"></div>
    </div>
    <div class="jumps">
      <button type="button" class="jump" id="whole">All 5 000 years</button>
      <button type="button" class="jump" id="apollo">Apollo 11, to the minute</button>
    </div>
  </section>
  <div class="legend" role="group" aria-label="Spotlight a region" id="legend"></div>
  <div id="timeline"></div>
</div>
<p class="log" id="log" aria-live="polite">Press Play, page with ← and →, or pick any event on the timeline. Drag the lens on the overview, or scroll the wheel, pinch or press + and − on the timeline (shift + wheel pans). Pull the lens’s left or right edge to zoom across, its top or bottom edge (or alt + wheel) to zoom the lanes.</p>

main.js — the code, as it is in the editor now, your edits included:

In a terminal in that folder, install the library and Vite (it lets the browser follow the imports), then start it:

npm init -y
npm install @temporeum/timeline-element @temporeum/timeline-core
npm install --save-dev vite
npx vite

Open the address it prints, http://localhost:5173/.

Five thousand years in one timeline, from the first pharaohs to the Moon landing, zoomable down to the minutes of Apollo 11 — and none of it the library's own look. The colours, the fonts, the overview strip, the bars' content and the story panel are the page's: a theme, metrics, slots, classNames and a little CSS (theming). Twenty-one moments are a story told by a camera that flies the view; press Play the tour. Switch on Rewrite history and the same timeline is editable: drag an event, resize an era, take it back with Undo — every edit is a command with an exact inverse (editing). The overview strip is a lens you can pull on every edge to zoom across and down the lanes, the mouse wheel zooms around the pointer, PNG saves the view as it is, PDF and Print take the whole chronicle on paper (export). Zoomed out to the five thousand years, every region is in sight at once. It works with the keyboard alone, and on a phone it turns vertical, overview strip and all. The code is under the demo; more demos — a Gantt chart of 313 tasks among them — are on the showcase.

The smallest timeline is this:

Live example: A plan you can drag

Loading…

Code — edit it and press Run

import { createTimeline, registerPlugin } from "@temporeum/timeline-element";
import { groupsPlugin } from "@temporeum/timeline-element/groups";

// Rows with a visible name are groups, a plugin: registered once, before the first timeline.
registerPlugin(groupsPlugin);

const items = [
  { id: "design", start: new Date("2026-03-02"), end: new Date("2026-03-09"), label: "Design", laneId: "work" },
  { id: "build", start: new Date("2026-03-06"), end: new Date("2026-03-20"), label: "Build", laneId: "work" },
  { id: "review", start: new Date("2026-03-23"), label: "Review", laneId: "ship" },
  { id: "launch", start: new Date("2026-03-27"), end: new Date("2026-04-03"), label: "Launch", laneId: "ship" },
  { id: "retro", start: new Date("2026-04-06"), label: "Retro", laneId: "work" },
];
const groups = [
  { id: "work", label: "Work" },
  { id: "ship", label: "Shipping" },
];

const log = document.querySelector("#log");
const timeline = createTimeline(document.querySelector("#timeline"), {
  items,
  groups,
  ariaLabel: "Release plan",
  editing: { enabled: true, snapMs: 86_400_000 },
});

// The library never saves: an edit comes out as a command, and it is yours.
timeline.on("itemMoved", ({ item, to }) => {
  log.textContent = `${item.label} now starts ${new Date(to.start ?? item.start).toDateString()}`;
});

Run “A plan you can drag” on your own machine

Make an empty folder and put this example’s two files in it:

index.html — the page the code runs in, its markup and styles:
```
<div id="timeline" style="height: 280px"></div>
Drag an item, or Tab to it and press Alt + arrow.
```
main.js — the code, as it is in the editor now, your edits included:
In a terminal in that folder, install the library and Vite (it lets the browser follow the imports), then start it:
```
npm init -y
npm install @temporeum/timeline-element
npm install --save-dev vite
npx vite
```
Open the address it prints, http://localhost:5173/.

That is the whole of it: a container, items, named rows, and an event when someone edits. Every example on this site is live — change the code and press Run — and it runs the same bundles you install.

What it is for

It is built to have five properties at the same time:

Editable. Drag and resize, with reversible commands: every edit comes out as a command whose inverse is the undo.
Genuinely responsive. A vertical phone layout is the same code path as the horizontal desktop one, chosen by the container's width, not a separate build.
Accessible. Every gesture has a keyboard twin, the timeline is a listbox a screen reader can walk, and axe finds 0 WCAG 2.2 AA violations on every page of this site and every state of the demo pages.
Light. The engine has no dependencies: its scale and tick maths are its own. What a page does not use — the Gantt chart, the time tools, nested groups, other languages — is a plugin it never downloads: a plain timeline's page loads 58.38 kB of JavaScript minified and gzipped, a Gantt chart's 66.29 kB (as the field benchmark measures). The <script> tag's UMD file is the exception: it carries every plugin, nearly twice a plain timeline's page, so a page that minds its bytes imports the modules.
Typed. No any on the public surface, enforced in CI.

It tells stories too: one slide at a time with images and video, beside the timeline, and TimelineJS's stories — its JSON and its Google Sheet — load as they are (storytelling). There is no page here that turns a sheet into an embed code: your page reads the sheet. The core of this library is a lot of editable data in lanes.

Packages

Package	For
`@temporeum/timeline-element`	`createTimeline` — the live timeline — and `<temporeum-timeline>`, the custom element. Server rendering. The parts a plain timeline does not need are plugins on its entry points. Start here.
`@temporeum/timeline-react`	`<Timeline>` and `useTimelineState` for React 18 and 19.
`@temporeum/timeline-vue`	`<Timeline>` and `useTimelineState` for Vue 3.
`@temporeum/timeline-svelte`	`<Timeline>` and `timelineState` for Svelte 5.
`@temporeum/timeline-angular`	`<tl-timeline>` and `timelineState` for Angular, standalone and zoneless.
`@temporeum/timeline-core`	The engine: geometry, layout, rendering, input, keyboard, loading, clustering — DOM-free, for building your own shell.

Where to go next

Getting started: install, and the three ways in.
Recipes: a Gantt plan, an event log, a chronology, a roadmap.
Frameworks: starter projects for plain JavaScript, React, Next, Vue, Nuxt, Svelte, Angular and Astro.
The benchmark, including where it falls short.
Stability: what 1.0 promises, and what it does not.